/* ============================================================
   HOME V2 — PRODUCTS AT SCREEN FOUR. Rendered by //site/_home_v2_products.php:
   the Trifecta (three series cards) over the six-card shelf. Same card
   vocabulary as the live closer (hairline border, #060606 face, accent
   border on hover, rest→glow cross-fade on the shelf photos), sized so
   BOTH rows land whole under the 80px header at 1280x720 — the budget is
   640px for the whole section, and the numbers in the comments below are
   the 1280-wide arithmetic that keeps it near 610.

   ROUND 1 (2026-09-04): the series cards grew decision rows (see the
   partial's header for why); the height they need came from two places.
   (1) The Oswald name under each photo went — the wordmark above it already
   says it. (2) The photo frames are now 16:10, the shape the Solid Black
   masters actually are (card 1440x900, nav 480x300 — the 4/3 in
   BlackBgPhoto's docblock is stale). The live closer's 4/3 + cover frame
   cropped a sixth off every photo's width AND stood 20% taller than the
   picture inside it; 16/10 + contain shows the whole master, never cropped
   to fit a frame, and is shorter for the same width.

   ROUND 2 (2026-09-04): each series card gained a price line and a real
   button (~30px per card) and the section still came in under round 1,
   because the height was sitting in air, not content:
     - the photo tucks under the wordmark row. The masters' top band is pure
       black for at least 11px of the 136px frame (SynQ; Q Series 21px,
       Quantum 27px, measured on the files), so the 8px gap above the photo
       was black stacked on black — the photo now starts 2px INSIDE the mark
       row (the mark paints on top; nothing of the picture is under it) and
       the visible air between wordmark and product is unchanged;
     - the section's own padding (22/20 → 14/14), the gap under each title,
       the shelf's top margin and the shelf cards' vertical padding all lost
       the few pixels they were carrying for no reason.
   No text got smaller.

   No translateY lift on hover anywhere here — not the card, not its button:
   the harness parks the pointer at viewport centre, so a lifted centre card
   sat 3px out of line in every capture, and a lift is motion for its own
   sake on a row of buy paths.

   THE TRIFECTA ALONE (2026-09-06, Hamza: "remove the Popular now and make
   the 3 series larger for that section"). The shelf is gone (the partial's
   header) and the three cards take the height it held, still landing whole
   inside one window under the 80px header. The 1280-wide arithmetic:
     grid 1100px, 20px gaps → 353px cards → 321px of content → a 201px
     photo (16:10, whole); mark 24, one-liner 17, price 28, rows 14, button
     14 on 12px of padding → a card of ~450px; 36px of section air above
     and below, the title at hv2-h2's full clamp (one heading, no step-down)
     → the section ends near 590 of the 640 budget. At 1920 the grid opens
     to 1240px (400px cards, ~490px tall; the budget there is 1000). The
     phone block at the end of this sheet pins its own sizes, so the phone
     cards are exactly what phone round 4 left.
   ============================================================ */

.hv2-products {
  border-top: 1px solid var(--hv2-line);
  padding: 36px 5vw 36px;
  text-align: center;
}

/* ---- the trifecta ---------------------------------------------------
   1100px grid, 20px gaps → 353px cards → 321px of content → a 201px photo
   (THE TRIFECTA ALONE, above). */
.hv2-trifecta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 18px auto 0;
  text-align: left; /* the card's text block reads left-aligned, the page rule */
}
@media (min-width: 1600px) {
  .hv2-trifecta-grid { max-width: 1240px; gap: 24px; }
}
.hv2-series-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px;
  border: 1px solid var(--hv2-line);
  border-radius: 16px;
  background: #060606;
  color: var(--hv2-ink);
  transition: border-color 0.15s ease;
}
.hv2-series-card:hover,
.hv2-series-card:focus-visible { border-color: var(--hv2-accent); }
.hv2-series-card:focus-visible { outline: 2px solid var(--hv2-accent); outline-offset: 2px; }
/* The wordmark is the card's title: left-set, never wider than the card
   (the Quantum mark is 10:1, so 24px tall is 240px wide, inside a 321px
   content column). It paints above the photo, which starts 2px inside this
   row — see the header. */
.hv2-series-mark {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  height: 24px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: 0.9;
}
.hv2-series-img {
  display: block;
  width: 100%;
  height: auto;
  margin: -2px 0 8px; /* the top 2px of the frame is the master's own black */
  aspect-ratio: 16 / 10; /* the masters' own shape — see the header */
  object-fit: contain;   /* the whole picture, whatever shape a re-shoot lands in */
}
/* The ruled one-liner, the card's headline under the photo. */
.hv2-series-line {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
/* The entry price: Oswald, the page's display face, in the red every price
   on the site wears (Hamza, 2026-08-28); "From" is the same small dim mono
   label the shelf's ladder items carry, so one word means one thing on
   both rows. */
.hv2-series-price {
  display: block;
  margin-top: 4px;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--hv2-accent);
}
.hv2-series-from {
  margin-right: 6px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hv2-dim);
}
.hv2-series-from { vertical-align: 5px; } /* centred on the taller Oswald line */
/* The decision rows: same three slots on every card, a hairline above the
   block so it reads as a small spec table rather than a caption. */
.hv2-series-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hv2-line);
}
.hv2-series-row {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  color: #c3c7cc; /* a step brighter than --hv2-dim: these are read, not glanced */
}
/* The shop button — base.css .hv2-btn, the Three Ways lanes' CTA, sized for
   a 321px card and stretched across it so the whole foot of the card is
   the press target. Scoped under the card so the sizing beats .hv2-btn-sm
   whatever order the sheets load in. THE HOVER IS THE RED (2026-09-07, the
   partial's header): every card's button is a ghost at rest, and the card's
   hover — the card is the link — fills it with the solid accent, the red the
   Q Series button used to wear at rest. Written four classes deep under the
   card so it beats base.css's .hv2-btn-ghost:hover wash whatever order the
   sheets load in; no 2px lift (header). */
.hv2-series-card .hv2-series-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  font-size: 14px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transform: none;
}
.hv2-series-card .hv2-series-btn svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hv2-series-card:hover .hv2-series-btn.hv2-btn-ghost,
.hv2-series-card:focus-visible .hv2-series-btn.hv2-btn-ghost {
  background: var(--hv2-accent);
  border-color: var(--hv2-accent);
  color: #fff;
  transform: none;
}
.hv2-series-card:hover .hv2-series-btn svg,
.hv2-series-card:focus-visible .hv2-series-btn svg { transform: translateX(4px); }

/* ---- the shelf ("Popular right now") stood here until 2026-09-06 ------
   THE TRIFECTA ALONE (header): its rules left with its markup. */

/* ---- small screens -------------------------------------------------- */
@media (max-width: 760px) {
  .hv2-products { padding: 40px 20px 40px; }
  .hv2-trifecta-grid { grid-template-columns: 1fr; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv2-series-card, .hv2-series-btn, .hv2-series-btn svg { transition: none; }
  .hv2-series-card:hover .hv2-series-btn svg { transform: none; }
}

/* ============================================================
   PHONES (≤760px) — phone round 1, 2026-09-03. Three series cards inside
   the section's first phone screen: 86px of top air clears the sticky
   header, then the title and three cards of ~222px (title, three cards
   and their gaps end near 814px of 844). The card's markup order is mark,
   photo, headline, price, rows, button; a grid with named areas seats the
   photo in the right column (46%, the master whole at 16:10) beside the
   mark / headline / price — text left, art right, the page's rule — with
   two 1fr spacer rows keeping that text tight and centred on the photo;
   the three decision rows and the button then span the card's full width,
   so every row holds one line and the button is the card's whole foot.
   The wordmark's max-width (set above) keeps the 10:1 Quantum mark inside
   the ~162px text column at 13px tall. Headings join the page's 22px left
   edge; the shelf cards keep their centred faces.
   ============================================================ */
@media (max-width: 760px) {
  .hv2-products { padding: 86px 22px 44px; text-align: left; }
  .hv2-products .hv2-h2 { font-size: 26px; }
  .hv2-trifecta-grid { grid-template-columns: 1fr; gap: 10px; max-width: none; margin-top: 14px; }
  .hv2-series-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46%;
    grid-template-rows: 1fr auto auto auto 1fr auto auto;
    grid-template-areas:
      ".     img"
      "mark  img"
      "line  img"
      "price img"
      ".     img"
      "rows  rows"
      "btn   btn";
    column-gap: 12px;
    row-gap: 0;
    align-items: center;
    padding: 10px 10px 10px 14px;
  }
  /* THE TRIFECTA ALONE grew the desktop sizes (mark 24, one-liner 17,
     price 28, rows 14, button 14); the phone keeps phone round 4's, pinned
     here so the three cards still land inside the first phone screen. */
  .hv2-series-mark { grid-area: mark; height: 13px; margin-bottom: 5px; }
  .hv2-series-img { grid-area: img; margin: 0; }
  .hv2-series-line { grid-area: line; font-size: 14px; }
  .hv2-series-price { grid-area: price; margin-top: 2px; font-size: 20px; }
  .hv2-series-from { font-size: 9.5px; margin-right: 5px; vertical-align: 3px; }
  .hv2-series-rows { grid-area: rows; gap: 2px; margin-top: 8px; padding-top: 8px; }
  /* Both names the shop control has worn this round (span button, mono line). */
  .hv2-series-card .hv2-series-btn,
  .hv2-series-shop { grid-area: btn; }
  .hv2-series-card .hv2-series-btn { margin-top: 8px; padding: 10px 12px; font-size: 13px; }
  .hv2-series-card .hv2-series-btn svg { width: 13px; height: 13px; }
}

/* ============================================================
   PHONES (≤760px) — phone round 4, 2026-09-03: the card buttons reach the
   44px tap floor (14.5px of padding on 13px type; they were 35px) and the
   decision rows step up to 13px. The three cards still land whole inside
   the section's first phone screen: the ~9px each button grows and the
   2px per card the rows add come back out of the section's top air
   (86 → 80: the sticky header is 70px once the page has scrolled), the
   title's gap (14 → 10), the grid gap (10 → 8), the card's own top and
   bottom air (10 → 9) and the rows' 8/8 (→ 7/7), so the third card's foot
   stays under 844 (round 3 had it at ~825).
   ============================================================ */
@media (max-width: 760px) {
  .hv2-products { padding-top: 80px; }
  .hv2-trifecta-grid { gap: 8px; margin-top: 10px; }
  .hv2-series-card { padding: 9px 10px 9px 14px; }
  .hv2-series-row { font-size: 13px; }
  .hv2-series-rows { margin-top: 7px; padding-top: 7px; }
  .hv2-series-card .hv2-series-btn { padding: 14.5px 12px; }
}