/* =====================================================================================================================
   pages-gaming-v2.css: /gaming/ only (landing rebuild, 2026-10-07, Tom: "it needs to be mapped as a landing page";
   reworked product-first the same day: "promote the product... always pointing to the playbook").
   Linked after the /schools/ stack (site, group-c, pages-g4, pages-g7, pages-schools-v3) plus group-d + pages-g6 for the
   bundle table. Reuses the sv- parts; every rule here is scoped by a gm- class that exists on /gaming/ alone.
   ===================================================================================================================== */

/* hero: the portrait Phoenix fills the wide photo slot by width; keep the lit fans and the GPU in view, right of the fade */
.gm-hero .hero__photo img { object-position: 50% 42%; }
.gm-hero .hero__photo picture { background: var(--paper); }

/* Regadget Gaming logo (Tom 10-07: "gaming logo needs to be on the page... on the HERO"; 10-09 "mock up moving logo to the
   right", approved "go"): the badge sits in the top-right corner of the hero photo, so the H1 leads the text column. It is a
   sibling after the figure (inside it, the photo's own picture rules took it over). Phones/tablets: same grid cell as the
   photo, top-right. 64rem+: pinned to the hero's top-right, above the photo's fade. */
.gm-hero__logo { grid-row: 2; grid-column: 1; justify-self: end; align-self: start; position: relative; z-index: 2;
  width: 84px; margin: 44px 12px 0 0; } /* the photo carries a 32px top margin in this cell */
.gm-hero__logo img { display: block; width: 100%; height: auto; }
@media (max-width: 63.99rem) { .gm-hero .hero__photo { grid-row: 2; grid-column: 1; } }
@media (min-width: 64rem) { .gm-hero__logo { grid-area: auto; position: absolute; top: 40px; right: 48px; width: 168px; margin: 0; } }

/* hero: one quiet line under the buttons for people buying for themselves (Tom 10-07: "Prefer to shop online?") */
/* the hero is paper below 64rem and ink above it, so the line takes ink colours first and the inverse on the dark hero */
.gm-hero__shop { margin-top: var(--s5); font-size: 1rem; line-height: 1.5; color: var(--text-2); }
.gm-hero__shop a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.gm-hero__shop a:hover { text-decoration-color: currentColor; }
@media (min-width: 64rem) { .gm-hero__shop { color: var(--on-ink-2); } .gm-hero__shop a { color: var(--on-dark); } }

/* heading + one lead, stacked (no 5/7 split with a blank column) */
.gm-head { display: grid; gap: var(--s4); margin-bottom: var(--s10); }
.gm-head .h2 { max-width: 24ch; }
.gm-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); max-width: 40rem; text-wrap: pretty; }

/* students first: first section after the hero, so it needs its own top padding (sv-why sets 0 for /schools/) */
.gm-why.sv-why { padding-top: var(--section-y); }

/* students ends by naming the playbook; the band right under it carries the button (Tom 10-07: promote it, then again) */
.gm-next { margin-top: var(--s10); padding-top: var(--s5); border-top: 2px solid var(--lime); max-width: 46rem;
  font-size: 1.125rem; line-height: 1.5; font-weight: 600; color: var(--ink); text-wrap: pretty; }

/* bundles: the ITAD cross-sell line under the custom card, sentence then the destination link */
/* funding: Tom 10-07, the playbook's "fund the esports lab" line as a bold header, buyback ask beside it */
.gm-fund { margin-top: var(--s12); padding-top: var(--s6); border-top: 2px solid var(--lime);
  display: grid; gap: var(--s4) var(--s10); }
.gm-fund__head { margin: 0; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); max-width: 30ch; text-wrap: balance; }
.gm-fund__body { display: grid; gap: var(--s3); align-content: start; justify-items: start; }
.gm-fund__body p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); max-width: 44ch; text-wrap: pretty; }
@media (min-width: 64rem) {
  .gm-fund { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .gm-fund__body { padding-top: 0.25rem; }
}

/* what is Hybrid-Built: the Phoenix framed on paper beside the answer; the photo leads at desktop, follows the H2 on phones */
.gm-hybrid__grid { display: grid; gap: var(--s10); align-items: center; }
/* the hero's Phoenix, cut out of its studio ground (Tom 10-07: "remove background of the image"): sits straight on the tint */
.gm-hybrid__fig { margin: 0; order: 2; max-width: 400px; justify-self: center; width: 100%; }
.gm-hybrid__fig img { display: block; width: 100%; height: auto; }
.gm-hybrid__text { display: grid; gap: var(--s5); align-content: start; }
.gm-hybrid__text .h2 { max-width: 18ch; }
.gm-hybrid__text .h2 .nowrap { white-space: nowrap; }  /* the product name never splits at its hyphen */
.gm-hybrid__answer { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.3; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); max-width: 28ch; text-wrap: balance; }
@media (min-width: 64rem) {
  .gm-hybrid__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); }
  .gm-hybrid__fig { order: 0; }
}

/* ruled rows: bold lead-in + one sentence, hairline between (Hybrid-Built reasons, digital-divide pillars) */
.gm-rows { display: grid; margin: var(--s3) 0 0; padding: 0; list-style: none; max-width: 40rem; }
.gm-rows li { padding-block: var(--s4); border-top: 1px solid var(--hairline); }
.gm-rows li:last-child { border-bottom: 1px solid var(--hairline); }
.gm-rows__t { display: inline; font-size: 1.0625rem; line-height: 1.55; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.gm-rows p { display: inline; font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); }

/* hardware band: heading + lead, then four components as lime-ruled columns (not cards), then warranty + links */
.gm-hw__head { display: grid; gap: var(--s5); margin-bottom: var(--s12); }
.gm-hw__head .h2 { max-width: 20ch; }
.gm-spec { display: grid; gap: var(--s8) var(--s6); margin: 0; padding: 0; list-style: none; }
.gm-spec li { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: var(--s3); align-content: start;
  padding-top: var(--s5); border-top: 2px solid var(--lime); }
.gm-spec__t { font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em;
  color: var(--on-dark); text-wrap: balance; }
.gm-spec p { font-size: 1.0625rem; line-height: 1.55; color: var(--on-ink-2); }
@media (min-width: 48rem) { .gm-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .gm-spec { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gm-hw__foot { display: grid; gap: var(--s5); margin-top: var(--s12); padding-top: var(--s8); border-top: 1px solid var(--hairline-dark); }
.gm-hw__links { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; align-content: start; }
@media (min-width: 64rem) { .gm-hw__foot { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--s16); } }
.gm-phoenix__note { font-size: 1.0625rem; line-height: 1.55; color: var(--on-ink-2); max-width: 36rem; text-wrap: pretty; }
.gm-phoenix__note a { color: var(--on-dark); font-weight: 700; text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

/* bundle table: the two bundle names in the brand's text green (Tom 10-07); the "Bundle" label column stays ink */
.gm-bundles .d-specs thead th + th { color: var(--green-text); }
/* the two bundle quote buttons echo the green names (Tom 10-07: "yes, green outline"); still outline, one lime fill per view */
/* ...and the custom build button (Tom: "same for the custom build quote button!"); on its tint card the hover goes paper */
.gm-bundles .g6-bundles__btns .btn--outline, .gm-bundles .g6-custom .btn--outline { border-color: var(--green-text); color: var(--green-text); }
@media (hover: hover) {
  .gm-bundles .g6-bundles__btns .btn--outline:hover { border-color: var(--green-text); background: var(--tint); }
  .gm-bundles .g6-custom .btn--outline:hover { border-color: var(--green-text); background: var(--paper); }
}

/* the inset ink band is followed by the plain bundles band: it brings its own top padding */
.gm-hw + .gm-bundles { padding-top: var(--section-y); }

/* digital divide: Tom's line set large on the left, the three pillars as ruled rows on the right */
.gm-divide__grid { display: grid; gap: var(--s8); }
.gm-divide__head { display: grid; gap: var(--s4); align-content: start; }
.gm-divide__line { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.015em;
  color: var(--green-text); max-width: 18ch; text-wrap: balance; }
.gm-divide__rows { margin-top: 0; }
.gm-divide__more { margin: var(--s2) 0 0; }
@media (min-width: 64rem) { .gm-divide__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); } }

/* sim racing (Tom 10-07: "way smaller... just a band with a CTA to click into the shop"): one slim ink panel, words left,
   the shop button right; full paper gap above so it never touches the tinted digital-divide band (No Seam rule) */
.gm-sim { padding-top: var(--section-y); }
.gm-sim__band { display: grid; gap: var(--s5); align-items: center; padding: var(--s6); border-radius: var(--r-card);
  background: var(--ink); color: var(--on-dark); }
.gm-sim__text { display: grid; gap: var(--s2); }
.gm-sim__h { font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--on-dark); }
.gm-sim__text p { font-size: 1.0625rem; line-height: 1.5; color: var(--on-ink-2); max-width: 44rem; text-wrap: pretty; }
.gm-sim__btn { justify-self: start; }
/* Init logo (Tom 10-07: moved here from the removed partners band, then "use this logo instead"): the reversed, white Init mark
   straight on the ink band, no tile */
.gm-sim__logo { justify-self: start; margin-bottom: var(--s2); line-height: 0; }
.gm-sim__logo img { display: block; height: 44px; width: auto; }
/* Tom 10-07: "include an image of the sim racing unit": the product shot sits on its own paper tile (its photo ground is light) */
.gm-sim__fig { margin: 0; border-radius: var(--r-band); overflow: hidden; background: var(--paper); max-width: 360px; }
.gm-sim__fig img { display: block; width: 100%; height: auto; }
@media (min-width: 48rem) { .gm-sim__band { padding: var(--s8) var(--s10); } }
@media (min-width: 64rem) {
  .gm-sim__band { grid-template-columns: 280px minmax(0, 1fr) auto; column-gap: var(--s10); padding-block: var(--s8); padding-left: var(--s8); }
}

/* FAQ answer links: the icon arrow needs air from the words (sv-faq sets 0 for /schools/ where the link has its own gap) */
.gm-faq .qa__a .link-arrow::after { margin-left: 8px; }

/* Tom 10-09 ("make sure no other ones are like this"): at 390 "Get a Performance Plus quote" broke onto two lines in a 316px pill.
   On phones the bundle buttons use a 16px label so every one stays on one line. */
@media (max-width: 47.99rem) { .g6-bundles__btns .btn { font-size: 1rem; padding-inline: 16px; } }

/* Tom 10-09 (tg_image_*, "fix formatting"): the "Quote for: X." note stretched across the full closing grid and its text sat high.
   It is a fitted lime pill under the sub, label optically centred (the face reserves descender space, Tom 10-05). */
.closing__head .g6-bundle-now { justify-self: start; width: fit-content; max-width: 100%; margin-top: var(--s4); align-items: center;
  padding: 9px 18px 6px; border-radius: 999px; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.closing__head .g6-bundle-now[hidden] { display: none; }