/* ===================================================================
   Homepage additions.

   Styles only for what the document requires and the approved preview
   did not have: the Quick Play tier (§1 S4's fifth way to play), the
   three team championships (§1 S5), and "Starting in Bengaluru"
   (§1 S9). Everything else is the approved stylesheet, untouched.
   =================================================================== */

/* --- §1 S4: Quick Play, the fifth way to play -------------------
   Its own band after the cup ladder, in normal flow. It is not inside
   .trophy-stage on purpose: that stage is position:sticky at a fixed
   100svh with absolutely-positioned slides and captions, so anything
   dropped into its flow lands on top of the cup text. */
.quick-play {
  background: linear-gradient(100deg, #0b1f38 0%, #0a2341 60%);
  border-top: 1px solid rgba(25, 200, 255, 0.16);
  padding-block: clamp(30px, 4.5svh, 54px);
}
.quick-play-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  flex-wrap: wrap;
}
.quick-play .qp-copy { flex: 1 1 340px; min-width: 0; }
.quick-play h2 {
  font-size:var(--ds-title);
  margin: 0 0 6px;
  color: #fff;
}
.quick-play h2 em { font-style: normal; color: var(--cyan, #00caff); }
.quick-play .eyebrow { margin-bottom: 8px; }
.quick-play p {
  margin: 0;
  font-size:var(--ds-copy);
  line-height:1.55;
  color: #cfe0f3;
  max-width: 62ch;
}
.quick-play .qp-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--cyan, #00caff);
  color: var(--cyan, #00caff);
  background: rgba(8, 30, 56, 0.6);
}
.quick-play .qp-mark .icon { width: 28px; height: 28px; }
.quick-play .button { flex: 0 0 auto; }

@media (max-width: 760px) {
  .quick-play-inner { gap: 14px; }
  .quick-play .qp-mark { width: 48px; height: 48px; }
  .quick-play .button { width: 100%; }
}

/* --- §1 S5: labelling individual and team championships --------- */
.list-label {
  font-family: "Barlow", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan, #00caff);
  margin: 26px 0 10px;
}
.list-label:first-of-type { margin-top: 0; }
.championship-list.team-list { margin-bottom: 8px; }

/* Six championships stacked in one column made this section taller
   than the screen. Side by side, individual and team, it fits. */
.champ-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(22px, 3vw, 54px);
  align-items: start;
}
.champ-columns .list-label { margin-top: 0; }
.champ-columns .championship-list { margin: 14px 0 0; }
.champ-columns .championship-list article { padding: 11px 0; gap: 14px; }
.champ-columns .championship-list h3 { font-size:var(--ds-card); }
@media (max-width: 900px) {
  .champ-columns { grid-template-columns: 1fr; gap: 0; }
  .champ-columns .champ-col + .champ-col .list-label { margin-top: 24px; }
}

/* --- §1 S9: Starting in Bengaluru ------------------------------- */
.where-we-play .check-list li { font-size: 16px; }


/* ------------------ control and footer legibility ----------------
   The pause control measured 95x35 on a phone, under the 44px minimum
   for a tap target, and the footer's legal line sat at 11px. Both are
   corrected without changing the approved layout. */
.motion-control {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
}
@media (max-width: 760px) {
  .motion-control { min-height: 44px; font-size: 13px; padding: 10px 14px; }
}
.footer-bottom p { font-size:var(--ds-copy); }


/* ---------------- trophy caption placement -----------------------
   The caption is absolutely positioned inside a sticky, fixed-height
   stage, with the intro above it and the cup navigation below. The
   approved `top: 49%` assumed a one-line description; the real copy
   runs to two lines, which pushed the button down onto the navigation.

   A different magic percentage only moves the problem — too low and it
   hits the navigation, too high and it hits the intro, and which one
   happens depends on the viewport. So the caption is anchored to the
   bottom instead: it now sits a fixed distance above the navigation
   and grows upward, which makes the collision that was actually
   visible structurally impossible.

   The intro then gives up a little room on short viewports so the
   caption has somewhere to grow into.
   ------------------------------------------------------------------ */
@media (min-width: 1001px) {
  .trophy-caption {
    top: auto;
    bottom: 176px;          /* navigation block plus breathing room */
  }
  .trophy-caption .cup-description {
    margin-top: 10px;
    margin-bottom: 16px;
    line-height: 1.45;
  }
  .trophy-caption .cup-level { margin-top: 6px; margin-bottom: 6px; }
}

/* Short viewports: the intro paragraph and the cup name both give a
   little back, so the two blocks never meet. */
@media (min-width: 1001px) and (max-height: 900px) {
  .trophy-intro p { font-size: 15px; line-height: 1.5; margin: 10px 0; }
  .trophy-intro h2 { font-size:var(--ds-title); }
  .club-types { margin: 14px 0; }
  .trophy-caption h3 { font-size:var(--ds-card); }
}
@media (min-width: 1001px) and (max-height: 800px) {
  .trophy-intro p { font-size: 14px; margin: 8px 0; }
  .trophy-caption h3 { font-size:var(--ds-card); }
  .trophy-caption { bottom: 164px; }
}

/* A narrower desktop wraps the intro paragraph into more lines, which
   makes the block taller exactly where there is least room. Widening
   it costs nothing — the trophy sits right of centre — and removes the
   extra lines rather than shrinking the type towards illegibility. */
@media (min-width: 1001px) and (max-width: 1440px) {
  .trophy-intro { width: 52%; max-width: 680px; }
}


/* ------------------- sponsor board: heading block -----------------
   The approved layout centred the two columns against each other and
   gave the copy a narrow 1fr track. That was sized for one short
   paragraph. With the document's two paragraphs the right column grew
   taller than the heading, so the heading floated in the middle while
   the text ran above and below it — the copy read as dropped into the
   gap rather than set against the heading.

   Top-aligning them and giving the copy a wider track fixes the
   alignment and removes the wrapping that made the section taller than
   the screen. */
.sponsor-heading {
  grid-template-columns: 1.1fr 1fr;
  align-items: start;
  gap: 4%;
}
.sponsor-intro p {
  max-width: none;
  font-size:var(--ds-copy);
  line-height:1.55;
  margin: 0 0 14px;
}
.sponsor-intro .button { margin-top: 4px; }

@media (max-width: 900px) {
  .sponsor-heading { grid-template-columns: 1fr; gap: 20px; }
  .sponsor-intro { border-left: 0; padding-left: 0; }
}


/* ------------------ sections that ran past one screen -------------
   A section should fit the screen it is read on. These three ran a
   little over at 1440x900 once the document's copy replaced the
   preview's shorter wording. */
#sponsors.sponsor-board { padding-block: clamp(26px, 3.4vw, 48px); }
.sponsor-panels { margin: 24px 0 26px; }
.sponsor-benefits { margin-top: 0; }

#players { padding-block: clamp(30px, 4vw, 58px); }


/* The sponsor panels are the tallest part of that section; trimming
   their artwork keeps the whole board inside one screen without
   touching the panel design. */
/* .sponsor-illustration is the tallest single element on the board at
   265px; bringing it to 200 is what brings the section inside one
   screen. The panels keep their proportions. */
.sponsor-illustration { height: 200px; }
.sponsor-illustration img,
.sponsor-illustration svg { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.sponsor-panel { padding-bottom: 14px; }
.sponsor-benefits { gap: 6px 26px; }
.sponsor-benefits li { font-size: 14.5px; }

/* The players section ran a few percent over at 1440x900. */
#players .player-features li { padding-block: 9px; }

/* #players ran 13px over at 1440x900. */
#players { padding-block: clamp(26px, 3.4vw, 50px); }
#players .journey { margin-top: 10px; }