/* ============================================================
   Product cards. Ported from the mockup's .ph-group / .ph-grid / .ph-card
   (styles/lithography.css, lithography.html #lineup) — the group label with its
   rule, the auto-filling grid, and the card with its top edge, big figure,
   spec rows and link.

   Both the row and the card are styled here, the way cards/style.css holds
   .vt-cards and .vt-card: one sheet per component, so a card can never load
   without the grid it lives in.

   Deltas from the mockup, deliberate:
     · the group is a <ul> of <li> and the card surface is the <a> inside each
       one, not a bare <a> (see render.php). So the panel rules live on
       .vt-pcard__link-wrap and the tier classes reach it as descendants;
     · the hover reveal is gated behind @media (hover: hover). On a touch screen
       :hover latches after a tap, which would leave a card showing a photo of
       itself with every value hidden behind it;
     · the top edge is `none` by default. The mockup's four-tier ladder is an
       editorial choice with no field behind it (Core\card_tiers()), so a fresh
       block does not assert one.
   ============================================================ */
.vt-pcards {
  /* The block spans its column: a section's stack is a flex column with
     align-items: flex-start. See BLOCKS.md trap 9. */
  width: 100%;
  container-type: inline-size;
}

/* the mockup's .ph-group__label — a heading here, because it labels a group of
   products; the size is the block's, the level is the editor's */
.vt-pcards__label {
  font-family: var(--font-body);
  font-size: max(11px, var(--fs-floor, 0px));
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: var(--fw-bold);
  color: var(--color-text-subtle);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-divider);
}

.vt-pcards__grid {
  list-style: none;
  display: grid;
  /* the mockup's 200px track: five cards resolve to ~210px on the 1146px band,
     which is what it measures */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}

/* one card wide is a phone, and there the cards read as rows rather than tiles */
@container (max-width: 420px) {
  .vt-pcards__grid { grid-template-columns: 1fr; }
}

.vt-pcard { display: flex; }

/* ---- the card edge: the ROW decides, the card reads ----
   The `Card border` toggle (inc/card-border.php) lives on the row, so the edge
   travels down as an inherited custom property. The bare row states the CARD
   level as well as its own: a :hover — and here the flagship's own tint — sets
   the token ON the card, and a value set on an element always beats one
   inherited from its ancestor, whatever the specificity. */
.vt-pcards { --vt-card-edge: var(--color-border); }
.vt-pcards.vt-cards-bare,
.vt-pcards.vt-cards-bare .vt-pcard__link-wrap,
.vt-pcards.vt-cards-bare .vt-pcard__link-wrap:hover,
.vt-pcards.vt-cards-bare .vt-pcard__link-wrap:focus-visible { --vt-card-edge: transparent; }

.vt-pcard__link-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 20px 20px;
  background: var(--color-surface);
  border: 1px solid var(--vt-card-edge, var(--color-border));
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              background var(--dur-slow) var(--ease-standard);
}
.vt-pcard__link-wrap:hover,
.vt-pcard__link-wrap:focus-visible {
  transform: translateY(-3px);
  --vt-card-edge: color-mix(in srgb, var(--color-light-purple) 40%, transparent);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--color-purple-black) 12%, transparent);
  text-decoration: none;
}
/* the press, per the interactive-states rule */
.vt-pcard__link-wrap:active { transform: translateY(-1px); }

/* -- the top edge: the four tier gradients, tokens at the mockup's values -- */
.vt-pcard__tier { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; }
.vt-pcard--entry    .vt-pcard__tier { background: var(--gradient-tier-entry); }
.vt-pcard--standard .vt-pcard__tier { background: var(--gradient-tier-standard); }
.vt-pcard--premium  .vt-pcard__tier { background: var(--gradient-tier-premium); }
.vt-pcard--flagship .vt-pcard__tier { background: var(--gradient-tier-flagship); }

/* the flagship card carries the tint too — the mockup's own pairing */
.vt-pcard--flagship .vt-pcard__link-wrap {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-light-purple-10) 70%, #ffffff) 0%, #ffffff 55%);
  --vt-card-edge: color-mix(in srgb, var(--color-light-purple) 30%, transparent);
}

.vt-pcard__name {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 17px;
  line-height: 1.2;
  color: var(--color-dark-purple);
  margin: 4px 0 0;
}

/* vt_status, badged — `.vt-lineup__badge` and `.vt-finder__badge` to the pixel.
   The same fact in three blocks must not wear three shapes. Its own line under
   the name rather than beside it: the card is 210px at the content width, and
   "LRS-4KA AC Commodity" plus a pill does not share one. */
.vt-pcard__badge {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: max(10.5px, var(--fs-floor, 0px));
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vt-pcard__badge--coming-soon { background: var(--color-dark-purple); color: #ffffff; }
.vt-pcard__badge--legacy {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.vt-section.is-dark .vt-pcard__badge--legacy {
  background: color-mix(in srgb, #ffffff 8%, transparent);
  color: var(--vt-fg-muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 20%, transparent);
}

.vt-pcard__metric {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-light-purple);
  margin-top: 10px;
}
.vt-pcard--premium .vt-pcard__metric { color: var(--color-dark-purple); }
.vt-pcard--flagship .vt-pcard__metric {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Forced colours (Windows high contrast) drop background images, and this
   text is transparent over one — draw it in the system text colour instead
   (launch list B3, 2026-09-30). */
@media (forced-colors: active) {
  .vt-pcard--flagship .vt-pcard__metric { background: none; color: CanvasText; }
}
.vt-pcard__unit { font-size: 18px; font-weight: var(--fw-medium); margin-left: 2px; }

.vt-pcard__metric-label {
  font-size: max(11px, var(--fs-floor, 0px));
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--fw-bold);
  color: var(--color-text-subtle);
  margin-bottom: 14px;
}

.vt-pcard__rows { margin: 0 0 16px; display: flex; flex-direction: column; gap: 7px; }
.vt-pcard__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--color-divider);
}
.vt-pcard__row:last-child { border-bottom: 0; padding-bottom: 0; }
.vt-pcard__row dt { color: var(--color-text-subtle); margin: 0; }
.vt-pcard__row dd {
  color: var(--color-text);
  font-weight: var(--fw-medium);
  margin: 0;
  text-align: right;
  /* Editor-typed spec values, so the length is not this block's to assume:
     "405 / 375 nm laser, or 4-peak LED" is one real value on this install.
     It wraps, and the grid stretches every card in the row to match. */
  text-wrap: pretty;
}
/* The rows are figures a buyer reads, not labels: 14px on handheld screens,
   where 12.5px measured too small at 390px (launch list B29, 2026-09-30). Same
   breakpoint as the --fs-floor token (tokens.css). */
@media screen and (max-width: 820px) {
  .vt-pcard__row { font-size: 14px; }
}

.vt-pcard__link {
  margin-top: auto;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--color-dark-purple);
}
.vt-pcard .arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-standard); }
.vt-pcard__link-wrap:hover .arrow { transform: translateX(3px); }

/* -- the hover reveal: the product's own image over the card --
   Pointer devices only. Everything it covers is in the markup underneath, so it
   is decoration and aria-hidden; a reader who never hovers loses nothing. */
.vt-pcard__reveal { display: none; }

@media (hover: hover) {
  .vt-pcard__name,
  .vt-pcard__badge,
  .vt-pcard__metric,
  .vt-pcard__metric-label,
  .vt-pcard__rows,
  .vt-pcard__link {
    position: relative;
    z-index: 1;
    transition: opacity var(--dur-base) var(--ease-standard);
  }
  .vt-pcard__link-wrap:has(.vt-pcard__reveal):hover .vt-pcard__name,
  .vt-pcard__link-wrap:has(.vt-pcard__reveal):hover .vt-pcard__badge,
  .vt-pcard__link-wrap:has(.vt-pcard__reveal):hover .vt-pcard__metric,
  .vt-pcard__link-wrap:has(.vt-pcard__reveal):hover .vt-pcard__metric-label,
  .vt-pcard__link-wrap:has(.vt-pcard__reveal):hover .vt-pcard__rows,
  .vt-pcard__link-wrap:has(.vt-pcard__reveal):hover .vt-pcard__link { opacity: 0; }

  .vt-pcard__reveal {
    display: block;
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 2;
    border-radius: inherit;
    overflow: hidden;
    opacity: 0;
    transform: scale(1.05);
    background: var(--color-surface);
    transition: opacity var(--dur-slow) var(--ease-standard),
                transform var(--dur-slow) var(--ease-standard);
    pointer-events: none;
  }
  .vt-pcard__link-wrap:hover .vt-pcard__reveal { opacity: 1; transform: scale(1); }
  /* the mockup's #lineup treatment: the product contained on white and grounded,
     rather than a photo cropped to fill */
  .vt-pcard__reveal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px 24px 46px;
    box-sizing: border-box;
    display: block;
    filter: drop-shadow(0 16px 28px color-mix(in srgb, var(--color-ink) 16%, transparent));
  }
  .vt-pcard__reveal figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 12px 14px;
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: 14px;
    color: var(--color-text);
    background: linear-gradient(0deg, color-mix(in srgb, var(--color-surface) 94%, transparent), transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vt-pcard__link-wrap,
  .vt-pcard__reveal,
  .vt-pcard .arrow { transition: none; }
  .vt-pcard__link-wrap:hover,
  .vt-pcard__link-wrap:active { transform: none; }
  .vt-pcard__link-wrap:hover .vt-pcard__reveal { transform: none; }
  .vt-pcard__link-wrap:hover .arrow { transform: none; }
}