/* ===================================================================
   Final handover polish: component-level corrections found in the
   page-by-page review. Each rule is scoped to the component it fixes
   and changes geometry or alignment only, never copy or brand colour.
   =================================================================== */

/* Ground owners, "The opportunity" schedule card: the tournament block
   sits on the weekday grid itself, covering Monday to Friday exactly
   (the same cell height as the Busy days), with its label centred. */
html body main .zgo-opportunity .zgo-week-slots > * { grid-row: 1; }
html body main .zgo-opportunity .zgo-week-slots > .zgo-open-slot:nth-child(1) { grid-column: 1; }
html body main .zgo-opportunity .zgo-week-slots > .zgo-open-slot:nth-child(2) { grid-column: 2; }
html body main .zgo-opportunity .zgo-week-slots > .zgo-open-slot:nth-child(3) { grid-column: 3; }
html body main .zgo-opportunity .zgo-week-slots > .zgo-open-slot:nth-child(4) { grid-column: 4; }
html body main .zgo-opportunity .zgo-week-slots > .zgo-open-slot:nth-child(5) { grid-column: 5; }
html body main .zgo-opportunity .zgo-week-slots > .zgo-busy:nth-child(6) { grid-column: 6; }
html body main .zgo-opportunity .zgo-week-slots > .zgo-busy:nth-child(7) { grid-column: 7; }
html body main .zgo-opportunity .zgo-week-slots > .zgo-block {
  position: relative; z-index: 1; inset: auto; left: auto; bottom: auto;
  grid-column: 1 / 6; width: auto; height: auto; margin: 0;
  display: grid; place-items: center; text-align: center; box-sizing: border-box;
}

/* -------------------------------------------------------------------
   Type scale: running copy that had drifted below the site's body size
   (12-15px) uses the shared tokens again. Captions, legal footnotes and
   text inside illustrated mock-ups keep their small sizes on purpose.
   ------------------------------------------------------------------- */
html body main #quick-play .z4-quick-copy > p:not(.z4-eyebrow),
html body main .tr-cups .tr-cups-copy > p:not(.eyebrow),
html body main #brands .z4-brands-copy > p:not([class*="eyebrow"]),
html body main #assignments-payments .za-copy > p:not(.za-eyebrow) {
  font-size: var(--ds-copy) !important; line-height: 1.55 !important;
}
html body main #record > .wrap > .v-lede { font-size: var(--ds-lead) !important; line-height: 1.45 !important; }
/* Highlighted notes and callouts: one size everywhere. */
html body main :is(p.note, .ch-path-note, .pl-u18-note) { font-size: 1rem !important; line-height: 1.5 !important; }

/* Eyebrows: the same condensed caps label in every section. */
html body main :is(#record > .wrap > .v-tag, #how-it-works > .wrap > .v-tag, .zt-eyebrow, .sp-eyebrow, .zx-kicker, .za-eyebrow, .zcc-eyebrow, .mv-kicker) {
  font: 600 var(--ds-eyebrow)/1.25 var(--ds-ui) !important; letter-spacing: .14em !important; text-transform: uppercase !important;
}

/* About, mission and vision: the two columns start on the same line. */
@media (min-width:1024px) { html body main #mission .mv-copy { padding-top: 36px !important; } }

/* Tournaments, championship panels: both titles upright, like every other heading. */
html body main #team .zc-title { transform: none !important; }

/* -------------------------------------------------------------------
   Tournaments, cups ladder (901px and up): the copy is a header row above
   the trophies instead of floating over them, so the Warriors Cup never
   runs into the text at any width or height. The stage is a grid: the
   copy takes row 1; the frame, the tier plates and the wall sign all
   share row 2, so the absolutely placed plates and sign still measure
   against the photograph exactly as before.
   ------------------------------------------------------------------- */
@media (min-width: 901px) {
  html body main .tr-cups { padding-top: clamp(36px, 4.4vw, 72px); }
  html body main .tr-cups .tr-stage { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; aspect-ratio: auto; height: auto; }
  html body main .tr-cups .tr-cups-copy {
    position: static !important; grid-row: 1; grid-column: 1; width: auto; max-width: none;
    padding-inline: var(--ze, var(--pad-x)); margin: 0 0 clamp(4px, 1vw, 16px);
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 96px);
    align-items: end;
  }
  html body main .tr-cups .tr-cups-copy > .eyebrow { display: block; grid-column: 1; grid-row: 1; }
  html body main .tr-cups .tr-cups-copy > h2 { grid-column: 1; grid-row: 2 / span 2; margin: 0; align-self: start; }
  html body main .tr-cups .tr-cups-copy > p:not(.eyebrow) { display: block; grid-column: 2; margin: 0 0 12px; }
  html body main .tr-cups .tr-cups-copy > p:not(.eyebrow):not(.note) { grid-row: 2; }
  html body main .tr-cups .tr-cups-copy > p.note { grid-row: 3; margin: 0; }
  html body main .tr-cups .tr-stage-frame,
  html body main .tr-cups .tr-tiers,
  html body main .tr-cups .tr-stage-wall { grid-row: 2; grid-column: 1; }
  /* The wall sign keeps its right edge inside the photograph. */
  html body main .tr-cups .tr-stage-wall { justify-self: end; align-self: start; margin: 7% 2% 0 0; right: auto; top: auto; text-align: right; font-size: clamp(13px, 1.6vw, 32px); }
}
@media (min-width: 901px) and (max-width: 1240px) {
  /* Narrow desktops: the plate copy is a touch smaller so the Warriors line fits on its block face. */
  html body main .tr-cups .tr-plate-body { flex-shrink: 0; overflow: visible; }
  html body main .tr-cups .tr-plate-body > span { font-size: 11.5px; line-height: 1.32; padding-top: 4px; }
  html body main .tr-cups .tr-plate { padding-bottom: 0; }
}

/* Legal pages: the contact cards inside the dark bands (Privacy "Grievance Officer", Terms "Contact")
   read as part of the band, navy card, light text, cyan labels, instead of white text on a white card. */
html body main .legal-band-dark .legal-callout {
  background: linear-gradient(135deg, #0a2a4d 0%, #061a33 100%) !important;
  border: 1px solid rgba(76, 170, 255, 0.28) !important; border-left: 3px solid #19c8ff !important;
  color: #dbe8f7 !important; box-shadow: 0 14px 34px rgba(0, 10, 30, 0.35);
}
html body main .legal-band-dark .legal-callout h4 { color: #ffffff !important; letter-spacing: .08em; margin-bottom: 14px; }
html body main .legal-band-dark .legal-callout p { color: #dbe8f7 !important; line-height: 1.85; }
html body main .legal-band-dark .legal-callout strong { color: #19c8ff !important; font-weight: 600; }
html body main .legal-band-dark .legal-callout .legal-filled { color: #ffffff !important; }
html body main .legal-band-dark .legal-callout a { color: #7fdcff !important; border-bottom-color: rgba(127, 220, 255, .4) !important; }

/* Tournaments, "You play. Zinga runs it.": the copy column ends before the artwork (the umpire pin
   starts at about 37% of the section), and the five services sit in two even columns. */
@media (min-width: 901px) {
  html body main .zt-hosting .zt-copy { width: calc(37% - var(--ze, 7.7%) - 16px) !important; }
  html body main .zt-hosting .zt-body { white-space: normal !important; }
  html body main .zt-hosting .zt-services { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: clamp(18px, 2.2cqw, 40px); }
  html body main .zt-hosting .zt-services button { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  html body main .zt-hosting .zt-copy { top: 15% !important; }
  html body main .zt-hosting .zt-title { font-size: clamp(34px, 4.2vw, 52px) !important; }
  html body main .zt-hosting .zt-body { font-size: 15px !important; line-height: 1.45 !important; }
  /* The same five services are labelled on the artwork; the list returns at 1241px and up. */
  html body main .zt-hosting .zt-services { display: none !important; }
  html body main .zt-hosting .zt-body { margin-bottom: 20px !important; }
}
@media (min-width: 901px) and (max-width: 1024px) {
  html body main .zt-hosting .zt-copy { top: 8% !important; }
  html body main .zt-hosting .zt-title { font-size: 34px !important; }
  html body main .zt-hosting .zt-body { font-size: 14px !important; margin-bottom: 14px !important; }
}

/* Join: a shorter banner (the form is what people came for), and no empty glow ring where the hidden
   header button would be. */
html body.rg-page main .rg-hero.standard-hero:not(#_) { min-height: clamp(360px, 30vw, 440px) !important; }
@media (max-width: 1023px) { html body.rg-page main .rg-hero.standard-hero:not(#_) { min-height: clamp(400px, 108vw, 520px) !important; } }

/* Enquiry forms: the panel grows with its content; the page scrolls, never the form box. */
html body main .znf .znf-shell:not(#_) { max-height: none !important; overflow: clip !important; overflow-clip-margin: 4px; scrollbar-gutter: auto; }

/* Clubs, "Your identity": the club profile card is rounded on every corner, like the cards below it. */
html body main .zc-management .zc-profile:not(#_), html body main .zc-management .zc-profile:not(#_)::after { border-radius: 18px !important; }

/* Ground owners schedule: booking and tournament-block labels centred in their cells; no connector line
   running into the "Illustrative schedule" note. */
html body main #operations :is(.zgo-slot-direct, .zgo-slot-tournament):not(#_) { display: flex !important; align-items: center; justify-content: center; text-align: center; padding: 0 4px !important; }
html body main #operations .zgo-block:not(#_) { display: flex !important; align-items: center; justify-content: center; text-align: center; padding: 0 8px !important; }
html body main #operations .zgo-confirmed-float::before { display: none !important; }

/* Sponsors, National and Conventional sponsorship: the sections grow with their content; the page
   scrolls, never the section. */
html body main .sp-section:not(#_) { max-height: none !important; overflow: visible !important; overflow-x: clip !important; }

/* Sponsors, "Duration and exclusivity": a shorter section, with the artwork capped and no forced
   minimum height on the intro row. */
@media (min-width: 901px) {
  html body main #zsa-terms.zsa-section:not(#_) { padding-top: 30px !important; padding-bottom: 32px !important; }
  html body main #zsa-terms .zsa-terms-intro { min-height: 0 !important; }
  html body main #zsa-terms .zsa-terms-art { width: auto; height: clamp(240px, 22vw, 330px); justify-self: end; margin-top: -10px; }
  html body main #zsa-terms .zsa-term { padding-top: 14px !important; padding-bottom: 14px !important; }
}

/* Sponsors, "How to partner": a more compact row of steps. */
@media (min-width: 901px) {
  html body main #zs-partner.zs-section:not(#_) { padding-top: 32px !important; padding-bottom: 30px !important; }
  html body main #zs-partner h2 { margin-bottom: 12px !important; }
  html body main #zs-partner .zs-step-art { height: 128px !important; }
  html body main #zs-partner .zs-document { zoom: .78; }
  html body main #zs-partner .zs-steps h3 { margin: 4px 0 6px !important; }
}

/* Careers, "Find your place at Zinga": the area label sits as a proper label with room above the cards. */
html body main #areas .career-options > legend { position: static; display: block; margin: 0 0 14px; padding: 0; font: 600 15px/1.3 Barlow, sans-serif; color: #b9cbe2; }

/* Tournaments, cups ladder (901px and up): the whole section, the copy and the trophy photograph,
   fits in one screen below the header. The photograph is sized from the height left after the copy
   (1810/869 is its ratio), centred, and the copy sits above it on the same left and right edges. */
@media (min-width: 901px) {
  html body main .tr-cups { --cups-copy: 200px; --cups-w: min(100%, calc((100svh - var(--ds-header, 76px) - var(--cups-copy) - 64px) * 2.0828));
    padding-top: 24px !important; padding-bottom: 20px !important; }
  html body main .tr-cups .tr-stage:not(#_) { width: 100% !important; max-width: none !important; margin: 0 !important; overflow: visible;
    grid-template-columns: minmax(0, 1fr) var(--cups-w) minmax(0, 1fr); row-gap: 14px; }
  /* The copy keeps the page's content edges; --cups-copy is its measured height (js/section-cups.js). */
  html body main .tr-cups .tr-cups-copy:not(#_) { grid-column: 1 / -1 !important; margin: 0 !important; }
  html body main .tr-cups :is(.tr-stage-frame, .tr-tiers, .tr-stage-wall):not(#_) { grid-column: 2 !important; grid-row: 2 !important; }
  /* The plates and the wall sign share the photograph's grid cell exactly. */
  html body main .tr-cups .tr-tiers:not(#_) { position: relative; inset: auto; align-self: stretch; justify-self: stretch; }
  html body main .tr-cups .tr-stage-wall:not(#_) { position: relative; z-index: 4; }
}
/* The plate copy scales with the photograph, so every cup's line fits its block at any size. */
@media (min-width: 901px) {
  html body main .tr-cups .tr-tiers { container-type: inline-size; }
  html body main .tr-cups .tr-plate-body:not(#_) { flex-shrink: 0; overflow: visible; }
  html body main .tr-cups .tr-plate-body > span:not(#_) { font-size: clamp(10px, 1.18cqw, 14px); line-height: 1.32; padding-top: 4px; }
}
@media (min-width: 901px) {
  html body main .tr-cups .tr-plate:not(#_) { padding-top: clamp(4px, .8cqw, 12px) !important; }
  html body main .tr-cups .tr-plate-name:not(#_) { font-size: clamp(13px, 1.65cqw, 20px) !important; }
  html body main .tr-cups .tr-plate-body > span:not(#_) { line-height: 1.24; padding-top: 3px; }
}
/* When the photograph is small (short or narrow desktop screens), each cup's description shows on
   hover or focus instead of crowding its block. Touch screens keep them visible. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  @container (max-width: 870px) {
    html body main .tr-cups .tr-plate-body:not(#_) { max-height: calc(var(--lit, 0) * 9em); opacity: var(--lit, 0); overflow: hidden; transition: max-height .38s ease, opacity .3s ease; }
  }
}

/* Cups ladder, final layout (901px+): the copy is a column on the left, the photograph on the right,
   both centred vertically in one screen. The photograph's track is as wide as the space allows, up to
   the width at which its height fills the screen below the header (1810/869 is its ratio). */
@media (min-width: 901px) {
  html body main .tr-cups:not(#_) { padding-top: 28px !important; padding-bottom: 28px !important; }
  html body main .tr-cups .tr-stage:not(#_) {
    grid-template-columns: clamp(270px, 27vw, 430px) minmax(0, calc((100svh - var(--ds-header, 76px) - 56px) * 2.0828));
    grid-template-rows: auto; justify-content: start; align-items: center;
    column-gap: clamp(24px, 3vw, 56px); row-gap: 0; padding-left: var(--ze, 7.7%); padding-right: 2%; box-sizing: border-box;
  }
  html body main .tr-cups .tr-cups-copy:not(#_) { grid-column: 1 !important; grid-row: 1 !important; display: block !important; padding: 0 !important; align-self: center; }
  html body main .tr-cups .tr-cups-copy > :is(.eyebrow, h2, p):not(#_) { display: block; margin: 0 0 14px !important; }
  html body main .tr-cups .tr-cups-copy > h2:not(#_) { margin-bottom: 18px !important; }
  html body main .tr-cups .tr-cups-copy > p.note:not(#_) { margin-bottom: 0 !important; }
  html body main .tr-cups :is(.tr-stage-frame, .tr-tiers, .tr-stage-wall):not(#_) { grid-column: 2 !important; grid-row: 1 !important; }
}
@media (min-width: 901px) {
  /* Plates and wall sign keep the photograph's box even when the copy column is taller. */
  html body main .tr-cups .tr-stage-frame:not(#_) { align-self: center; }
  html body main .tr-cups .tr-tiers:not(#_) { align-self: center; height: auto; aspect-ratio: 1810 / 869; }
  html body main .tr-cups .tr-stage-wall:not(#_) { align-self: center; justify-self: end; margin: 0 2% 30% 0 !important; }
}

/* Cups ladder, full-screen scene (901px+): the section is one screen tall below the header. The
   photograph sits on the right at the full height it can take, its left, top and bottom edges fade
   into a background painted in the photograph's own edge colours, so the copy on the left sits
   directly on the scene with no panel behind it. The frame reaches 12% into the copy column, which
   only ever covers the empty floor left of the Warriors Cup. */
@media (min-width: 901px) {
  html body main .tr-cups:not(#_) { padding: 0 !important; background: linear-gradient(180deg, #000d22 0%, #00112c 55%, #00183d 100%) !important; }
  html body main .tr-cups .tr-stage:not(#_) {
    min-height: calc(100svh - var(--ds-header, 76px)); align-items: center; justify-content: space-between; column-gap: 0;
    grid-template-columns: clamp(260px, 26vw, 420px) minmax(0, calc((100svh - var(--ds-header, 76px)) * 2.0828 / 1.12));
    padding-left: var(--ze, 7.7%); padding-right: 0;
  }
  html body main .tr-cups .tr-cups-copy:not(#_) { position: relative !important; z-index: 6; background: transparent !important; padding-block: 32px !important; }
  html body main .tr-cups :is(.tr-stage-frame, .tr-tiers):not(#_) { width: 112%; margin-left: -12%; }
  html body main .tr-cups .tr-stage-frame:not(#_) {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 15%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-composite: intersect;
  }
  html body main .tr-cups .tr-stage-wall:not(#_) { margin: 0 2.2% 31% 0 !important; }
}

/* Wide screens (over 1680px): the hero photograph on About, Careers and Sponsors reaches the right
   edge of the screen instead of stopping at a centred 1680px frame. */
@media (min-width: 1681px) {
  html body main .znh-hero .znh-stage:not(#_) { max-width: none; left: 0; transform: none; width: 100%; }
}