/* ============================================================================
   GAMESWA — /tournaments
   Session B · 2026-08-11
   ----------------------------------------------------------------------------
   This is the one page the session spends boldness on. Everything else stays
   quiet and disciplined.

   The structure is the commercial story, in the order the market buys it:

     TIER 1  The Stream          the hook everyone wants
     TIER 2  DRS                 the natural add-on
     TIER 3  Highlights and analytics   the full GAMESWA, and the moat

   One idea per screen. Each tier is a full viewport, one claim, one chip, one
   media slot. Below the ladder, the ops machinery is one compact strip that
   is deliberately visually secondary: it is depth, not the pitch.

   Mobile is the build order. The ladder stacks and the ops strip is a
   vertical timeline. The sticky rail only exists from 900px up, where there
   is a column to spare. Never the reverse.

   No hex in this file. Colours come from tokens.css or nowhere.
   ========================================================================== */

/* A chip with no text is a chip whose status constant said nothing. Absent is
   the correct failure mode: never fake, never vague. */
.gw-chip:empty { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */

.gw-thero__sub {
  margin-top: var(--gw-s-5);
  max-width: 34ch;
}
.gw-thero__cta { margin-top: var(--gw-s-6); }

/* ══════════════════════════════════════════════════════════════════════════
   THE LADDER
   ══════════════════════════════════════════════════════════════════════════ */

.gw-ladder { display: block; }

.gw-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.gw-tier {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Full viewport, but min-height so a tier can always grow rather than clip.
     svh, not vh: on a phone the URL bar must not push content out of frame. */
  min-height: 100svh;
  padding-block: var(--gw-s-8);
  border-top: 1px solid var(--gw-rule);
  scroll-margin-top: 76px;
}
.gw-tier:first-child { border-top: 0; }

.gw-tier__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gw-s-4);
}
.gw-tier__title { margin: 0; }

.gw-tier__body {
  margin-top: var(--gw-s-5);
  max-width: 46ch;
}

.gw-tier__media { margin-top: var(--gw-s-6); }
/* M2 is a phone screen, 9:16. Left at column width it would be nearly a
   thousand pixels tall on a desktop and the tier would stop being one idea. */
.gw-tier__media--portrait { max-width: 300px; margin-inline: auto; }

@media (min-width: 900px) {
  .gw-ladder {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: var(--gw-s-8);
    align-items: start;
  }
  /* The tier is two columns from here up: the claim reads on the left, the
     evidence plays on the right. One idea, two halves of the same idea. */
  .gw-tier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gw-s-8);
    align-items: center;
  }
  .gw-tier__media { margin-top: 0; }
}

/* ── THE RAIL ────────────────────────────────────────────────────────────
   Desktop only. It is a position indicator and a set of jump links, so it is
   a list of real anchors: usable from the keyboard without a line of JS.   */

.gw-rail { display: none; }

@media (min-width: 900px) {
  .gw-rail {
    display: block;
    position: sticky;
    top: 96px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--gw-rule);
  }
  .gw-rail__link {
    display: flex;
    align-items: baseline;
    gap: var(--gw-s-3);
    min-height: 44px;
    padding: var(--gw-s-3) var(--gw-s-4);
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--gw-text-faint);
    font-family: var(--gw-font-display);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color var(--gw-dur-fast) ease, border-color var(--gw-dur-fast) ease;
  }
  .gw-rail__link:hover { color: var(--gw-text); }
  .gw-rail__n {
    font-family: var(--gw-font-data);
    font-size: var(--gw-t-data);
    letter-spacing: var(--gw-track-data);
    font-variant-numeric: tabular-nums;
  }
  .gw-rail__item.is-active .gw-rail__link {
    color: var(--gw-text);
    border-left-color: var(--gw-punct-fill);
  }
  .gw-rail__item.is-active .gw-rail__n { color: var(--gw-accent-text); }
}

/* ══════════════════════════════════════════════════════════════════════════
   OPS MACHINERY
   Compact, quiet, and below the ladder on purpose. Mobile: a vertical
   timeline, which is what the ops sequence actually is. Desktop: a strip.
   ══════════════════════════════════════════════════════════════════════════ */

.gw-ops__head { margin-bottom: var(--gw-s-6); }

.gw-ops .gw-step { padding-bottom: var(--gw-s-6); }

.gw-op__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gw-s-3);
}
.gw-op__title {
  margin: 0;
  font-family: var(--gw-font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gw-text);
}
.gw-op__note {
  margin: var(--gw-s-2) 0 0;
  font-size: var(--gw-t-sm);
  line-height: 1.6;
  color: var(--gw-text-muted);
  max-width: 40ch;
}
.gw-op__media { margin-top: var(--gw-s-4); max-width: 420px; }

@media (min-width: 768px) {
  .gw-ops .gw-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gw-s-6) var(--gw-s-7);
  }
  /* The timeline spine and its dots are a mobile affordance. On a grid they
     would be a decoration that lies about the layout. */
  .gw-ops .gw-steps::before { display: none; }
  .gw-ops .gw-step {
    padding-left: 0;
    padding-bottom: 0;
    padding-top: var(--gw-s-4);
    border-top: 1px solid var(--gw-rule);
  }
  .gw-ops .gw-step::before { display: none; }
  .gw-op__media { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CLOSING
   ══════════════════════════════════════════════════════════════════════════ */

.gw-close { text-align: left; }
.gw-close__cta { margin-top: var(--gw-s-6); }

/* ══════════════════════════════════════════════════════════════════════════
   CASE STUDY CARD
   Session G · the one route into /tournaments/unity-cup now that Unity Cup
   has left the nav. A card that is a link, so the whole block is the tap
   target and clears 44px on its own without a button inside a button.
   ══════════════════════════════════════════════════════════════════════════ */

.gw-casecard {
  display: block;
  max-width: 640px;
  border-left: 3px solid var(--gw-punct-fill);
  transition: border-color var(--gw-dur-fast) var(--gw-ease),
              transform var(--gw-dur-fast) var(--gw-ease);
}
.gw-casecard:hover {
  border-color: var(--gw-rule-strong);
  border-left-color: var(--gw-punct-fill);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .gw-casecard, .gw-casecard:hover { transform: none; transition: none; }
}

.gw-casecard__title { margin: var(--gw-s-3) 0 0; }
.gw-casecard__body  { margin: var(--gw-s-4) 0 0; max-width: none; }
.gw-casecard__body b { color: var(--gw-text); font-variant-numeric: tabular-nums; }

/* .gw clears base.css `.gw a { color: inherit }` at (0,1,1). */
.gw .gw-casecard__go {
  display: inline-flex;
  align-items: center;
  gap: var(--gw-s-2);
  margin-top: var(--gw-s-5);
  min-height: 44px;
  font-family: var(--gw-font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gw-accent-text);
}
.gw-casecard:hover .gw-casecard__go {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The eyebrow inside the card sheds the rule that follows it in a section
   header: inside a card it is a label, not a section divider. */
.gw-casecard .gw-eyebrow::after { display: none; }