/* ===================================================================
   One content edge for the whole site.
   Every content section starts (and ends) on the same lines as the
   Players page Rankings section (.zpv3-inner): a centred 1600px frame
   with 7.7% side padding, 5% at 1100px and below. Hero banners, article
   and guide reading columns, legal pages and the registration form keep
   their own layouts. Tablets and phones (below 1024px) keep their own
   tuned layouts and gutters, so they are untouched.

   --ze  is the edge for an element whose containing block spans the full
         viewport width (percentages resolve where the property is used).
   Loaded last on every page so it settles the edge without changing
   type, colour or any component's internal layout.
   =================================================================== */
:root { --ze-x: 7.7%; --ze: calc(max(0px, (100% - 1600px) / 2) + var(--ze-x)); }
@media (max-width:1100px) { :root { --ze-x: 5%; } }

@media (min-width:1024px) {

  /* -- Sections that take the edge as their own side padding; the inner
        wrapper's centring, max-width and side padding are cleared. ---- */
  html body main :is(
    #record, #how-it-works, #find-your-way, #sponsors, #ecosystem,
    #the-gap, #mission, #platform, #company, #come-and-play,
    .v5-band, .znf:not(.rg),
    #what-its-like, #areas, #routes,
    #discover, #club-types, #start-a-club,
    #league-progression, #progression, #selection-cycle, #eligibility,
    #partnership, #requirements.zga-section,
    #profile,
    #zsa-journey, #audience, #levels, #zs-coverage, #zsa-terms, #zs-partner,
    #not-yet, #categories, #why,
    .reading-next
  ) { padding-inline: var(--ze) !important; }

  html body main :is(#record, #how-it-works, #what-its-like, #areas, #routes, #discover, #club-types, #start-a-club,
                     #league-progression, #progression, #selection-cycle, #profile, #audience, #not-yet, #categories, .reading-next) > .wrap,
  html body main .v5-band > .v5-wrap,
  html body main :is(#the-gap, #partnership) > .zx-inner,
  html body main #mission > .mv-columns,
  html body main :is(#platform, #company, #come-and-play, #why) > .zs-inner,
  html body main #requirements.zga-section > .zga-inner,
  html body main #levels > .zga-inner,
  html body main :is(#zsa-journey, #zsa-terms) > .zsa-wrap,
  html body main :is(#zs-coverage, #zs-partner) > .zs-wrap {
    width:auto !important; max-width:none !important;
    margin-left:0 !important; margin-right:0 !important;
    padding-left:0 !important; padding-right:0 !important;
    box-sizing:border-box;
  }

  /* The form panel is a bordered card: it spans the frame, and keeps its own inner padding. */
  html body main .znf:not(.rg) > .znf-shell {
    width:auto !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box;
  }

  /* -- Sections already built on a centred 1600px frame: only the side
        padding changes, to the Rankings percentage. ----------------- */
  html body main :is(#the-problem.zc-section, #management.zc-section) > .zc-inner,
  html body main :is(#opportunity, #operations, #onboarding) > .zgo-shell,
  html body main :is(#selection-details, #brands) > .z4-inner {
    width:100% !important; max-width:1600px !important; margin-inline:auto !important; box-sizing:border-box;
    padding-left:var(--ze-x) !important; padding-right:var(--ze-x) !important;
  }

  /* -- Copy floating over full-width artwork: only the copy moves. ---- */
  html body main #where-we-play.v-city .v-city-copy { margin-left: var(--ze) !important; }
  html body main .zps > .zps-copy { margin-left: var(--ze) !important; }
  html body main .zt-section:not(.zt-format) .zt-copy { left: var(--ze) !important; }
  html body main .tr-cups .tr-cups-copy { left: var(--ze) !important; }
  html body main .za-assignments .za-copy { left: var(--ze) !important; }
  html body main :is(#national-sponsorship .sp-national-copy, #zsa-branding .sp-conventional-inner) {
    margin-left: var(--ze) !important; margin-right: var(--ze) !important; padding-left:0 !important; padding-right:0 !important;
    width:auto !important; max-width:none !important;
  }
  html body main #find.tr-closing > .tr-closing-copy { margin-left: var(--ze) !important; }
}

@media (min-width:1024px) {
  /* Players, under 18: the copy column ends on the content edge. */
  html body main #under-18 { padding-inline: var(--ze) !important; }
  html body main #under-18 > .wrap { width:auto !important; max-width:none !important; margin-inline:0 !important; padding-inline:0 !important; }
  /* Umpires, requirements grid spans the full content width. */
  html body main #requirements .v5-requirements { width: 100% !important; }
  /* Tournaments, championship panels: copy on the content edge. */
  html body main .zc-section .zc-hero > .zc-copy { left: var(--ze) !important; margin-left: 0 !important; }
  /* Sponsors, national sponsorship benefit strip on the content edge. */
  html body main #national-sponsorship .sp-national-bottom { margin-left: var(--ze) !important; margin-right: var(--ze) !important; width:auto !important; }
  /* Home, Bengaluru: the light wash behind the copy follows the copy. */
  html body main #where-we-play.v-city .v-city-art::after {
    display:block !important; content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(90deg, #f7fbff 0, #f7fbff calc(var(--ze) + 26%), #f7fbffcc calc(var(--ze) + 30%), transparent calc(var(--ze) + 40%));
  }
}