/* Vortex: the plugin catalogue as an Armory (plugins, plugins-signed-in).
   Desktop: a grouped list beside a sticky preview stage, which static/js/armory.js fills from the
   row being hovered or focused. Phones, tablets and no-JS: the list alone, each row a link. */
/* Live-only states: the live site renders these, no page in the static copy does.
   Keep them, and check them on _states.html (dev only) after any shared restyle:
   .pc-grid.cols-1 (a group with one plugin); .pc-unavailable-note */

/* ===== HEADER ===== */
.pc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 16px 48px;
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 72px) 24px 48px;
}
.pc-title {
  margin: 0;
  font-size: calc(clamp(2.75rem, 6vw, 4.5rem) * var(--display-scale));
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--display-tracking);
  color: var(--text);
  text-wrap: balance;
}
.pc-sub { max-width: 60ch; margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-2); }
.pc-sub strong, .pc-sub .gold { font-weight: 600; color: var(--text); }

/* ===== LAYOUT ===== */
.pc-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.armory { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
@media (min-width: 1100px) {
  .armory.is-ready { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); }
  .armory.is-ready .armory-stage { display: block; position: sticky; top: calc(var(--nav-h) + 24px); }
}

/* ===== GROUPS ===== */
.pc-group + .pc-group { margin-top: 56px; }
.pc-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--line);
}
.pc-group-head h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.pc-group[data-group="premium"] .pc-group-head h2,
.pc-group[data-group="vip"] .pc-group-head h2 { color: var(--gold); }
.pc-group-head p { margin: 0; font-size: 0.875rem; color: var(--text-2); }

/* ===== ROWS ===== */
/* Each card is one row: portrait, name and tagline, price, actions. The name's link covers the
   whole row, so a click anywhere opens the plugin; Buy and the arrow sit above it. */
.pc-grid, .pc-grid.cols-2, .pc-grid.cols-1 { display: block; }
.pc-card {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  grid-template-areas: "media head foot" "media tagline foot";
  align-items: center;
  column-gap: 20px;
  padding: 16px 12px;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-hover) ease;
}
.pc-card-body { display: contents; }

.pc-media { grid-area: media; display: block; overflow: hidden; border-radius: var(--radius-control); }
.pc-card .pc-frame { aspect-ratio: 16 / 9; }
/* Art is anchored to the top and its bottom slice is cropped away, so anything painted along
   the bottom edge (a title banner, a signature) never shows. */
.pc-card .pc-frame img { height: var(--art-crop, 100%); object-position: var(--art-focus, 50% 50%); }
.pc-card .pc-placeholder {
  gap: 0;
  background: radial-gradient(ellipse 80% 90% at 70% 30%, rgba(100, 200, 255, 0.14), transparent 70%), var(--surface-2);
}
.pc-card .pc-placeholder i { font-size: 1.25rem; color: rgba(100, 200, 255, 0.7); }
.pc-card .pc-placeholder span { display: none; }

.pc-card-head { grid-area: head; align-self: end; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.pc-name {
  margin: 0;
  font-size: calc(1.625rem * var(--display-scale));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--display-tracking);
}
.pc-name a { color: var(--text); }
.pc-name a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pc-card-tags { display: inline-flex; gap: 10px; }
.pc-card-tags .pc-tag {
  padding: 0;
  background: none;
  border: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-2);
}
.pc-card-tags .pc-tag.is-badge { color: var(--gold); }

.pc-tagline { grid-area: tagline; align-self: start; margin: 2px 0 0; font-size: 0.9375rem; color: var(--text-2); }
/* The description is shown on the stage and the plugin page; in the row it stays for screen readers. */
.pc-desc {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pc-card-foot {
  grid-area: foot;
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-areas: "owned actions" "price actions";
  align-items: center;
  column-gap: 16px;
}
.pc-card-owned {
  grid-area: owned;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ok);
}
.pc-price {
  grid-area: price;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  column-gap: 6px;
  text-align: right;
}
.pc-price .from { font-size: 0.8125rem; font-weight: 500; color: var(--text-2); }
.pc-price .pc-amount {
  font-family: var(--font-display);
  font-size: calc(1.625rem * var(--display-scale));
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.pc-card.is-premium .pc-price .pc-amount { color: var(--gold); }
.pc-price .pc-period { flex-basis: 100%; margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--text-2); }
.pc-price .free { font-family: var(--font-display); font-size: calc(1.625rem * var(--display-scale)); font-weight: 600; color: var(--text); }
.pc-price .quiet { font-size: 0.875rem; color: var(--text-2); }

.pc-actions {
  grid-area: actions;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 140px;
}
.pc-actions .pc-btn { min-height: 40px; padding: 8px 16px; font-size: 0.875rem; }
.pc-more { width: 40px; padding: 0 !important; }
.pc-more span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pc-more .bi { transition: transform var(--dur-hover) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .pc-card:hover { background: rgba(255, 255, 255, 0.025); }
  .pc-card:hover .pc-more .bi { transform: translateX(2px); }
}
/* The row on stage is marked; every portrait stays lit (owner's pick). */
@media (min-width: 1100px) {
  .armory.is-ready .pc-card.is-active { background: var(--surface); }
}

@media (max-width: 720px) {
  .pc-hero { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--nav-h) + 40px); padding-bottom: 32px; }
  .pc-group + .pc-group { margin-top: 40px; }
  .pc-card {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "media head" "media tagline" "foot foot";
    column-gap: 16px;
    align-items: start;
  }
  .pc-media { margin-top: 4px; }
  .pc-card-foot { grid-template-columns: minmax(0, 1fr) auto; margin-top: 14px; }
  .pc-card-owned { justify-self: start; }
  .pc-price { justify-content: flex-start; text-align: left; }
  .pc-actions { width: auto; }
}

/* ===== STAGE ===== */
.armory-stage {
  display: none;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  cursor: pointer;
}
.stage-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-raised); }
.stage-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center end;
  padding-right: 14%;
  background: radial-gradient(ellipse 70% 80% at 72% 38%, rgba(100, 200, 255, 0.16), transparent 70%), var(--bg-raised);
}
.stage-fallback i { font-size: 6.5rem; line-height: 1; color: rgba(100, 200, 255, 0.5); }
.stage-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--art-crop, 100%);
  object-fit: cover;
  object-position: var(--art-focus, 50% 50%);
  filter: saturate(0.9) brightness(0.88);
  opacity: 0;
  transition: opacity 100ms ease;
}
.stage-img.is-shown { opacity: 1; }
.armory-stage.is-instant .stage-img { transition: none; }
/* One grade for every illustration: fade into the panel at the bottom, a scrim behind the title. */
.stage-art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--surface) 0%, var(--surface) 8%, rgba(21, 25, 35, 0.78) 30%, transparent 64%),
    linear-gradient(to right, rgba(11, 13, 18, 0.5), transparent 60%);
}
.stage-title { position: absolute; right: 28px; bottom: 16px; left: 28px; z-index: 2; }
.stage-marker { margin: 0 0 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.stage-marker:empty { display: none; }
.stage-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(3rem * var(--display-scale));
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--display-tracking);
  color: var(--text);
  text-wrap: balance;
}
.stage-tagline { margin: 8px 0 0; font-size: 1rem; color: #C5CAD3; }

.stage-body { padding: 12px 28px 28px; }
.stage-desc { margin: 0 0 20px; line-height: 1.65; color: var(--text-2); }
.stage-price { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.stage-price > * { grid-area: auto; }
.stage-price .pc-card-owned { justify-self: start; }
.stage-price .pc-price { justify-content: flex-start; text-align: left; }
.armory-stage.is-premium .stage-price .pc-amount { color: var(--gold); }
.stage-open { display: inline-flex; align-items: center; gap: 8px; margin: 20px 0 0; font-weight: 600; color: var(--text); transition: color var(--dur-hover) ease; }
.stage-open .bi { transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .armory-stage:hover .stage-open { color: var(--cyan); }
  .armory-stage:hover .stage-open .bi { transform: translateX(3px); }
}

/* ===== BELOW THE LIST ===== */
.pc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 72px;
  padding: 28px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pc-cta-line { max-width: 60ch; margin: 0; color: var(--text-2); }
.pc-cta-line strong { font-weight: 600; color: var(--text); }
.pc-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.pc-cta-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; font-weight: 600; color: var(--text); }
.pc-wrap > .pc-fine { max-width: 72ch; margin: 20px 0 112px; padding: 0 12px; text-align: left; }

.pc-unavailable-note { max-width: 640px; margin: 30px auto 0; text-align: center; color: #f6dcaa; font-size: 0.9rem; }