/* JOIclip spacing fix — HANDOFF ONLY, not deployed.
   Load LAST: tokens.css -> lilac-final.css -> site.css -> spacing-fix.css
   Goal: one shared gridline. Gutter 16px (<600), 24px (>=600), 32px (>=960),
   centered container max 1600px INCLUDING padding (border-box), plus safe-area. */

:root{--gutter:16px}
@media (min-width:600px){:root{--gutter:24px}}
@media (min-width:960px){:root{--gutter:32px}}

/* 1. Canonical container (border-box already global in tokens.css; restated) */
.container{
  box-sizing:border-box;
  width:100%;
  max-width:var(--container);              /* 1600px incl. padding */
  margin-inline:auto;
  padding-inline:calc(var(--gutter) + var(--safe-left)) calc(var(--gutter) + var(--safe-right));
}

/* 2. Browser-confirmed bug: .intro shorthand sets inline padding to zero.
   Explicit restore works even when the original shorthand remains in lilac-final.css.
   Prefer changing the original declaration to padding-block in source as well. */
.intro.container{
  padding-block:var(--sp-6) var(--sp-5);
  padding-inline:calc(var(--gutter) + var(--safe-left)) calc(var(--gutter) + var(--safe-right));
}
/* Ensure header, category scroller and footer CONTENT wrappers each use exactly
   one .container in Razor. Do not apply padding to full-width outer backgrounds.
   No broad :has() or nested-container resets: inspect wrappers before editing. */
.cat-nav ul{scroll-padding-inline:var(--gutter)}
/* tokens.css sets margin:0 on this list, which cancels the container's auto margins. */
.cat-nav ul.container{margin-inline:auto}

/* 3. Remove inappropriate negative margins on the content panel (lilac-final.css:30) */
.content-panel{margin-inline:0}
@media (min-width:960px){.content-panel{padding:var(--sp-5)}}

/* 4. Intentional full-bleed ONLY for the mobile player (re-derived from the new gutter) */
@media (max-width:599px){
  .player{
    width:calc(100% + 2*var(--gutter) + var(--safe-left) + var(--safe-right));
    max-width:none;
    margin-inline:calc(-1*(var(--gutter) + var(--safe-left))) calc(-1*(var(--gutter) + var(--safe-right)));
    border-radius:0;
  }
}
@media (min-width:600px){.player{width:100%;max-width:100%;margin-inline:0;border-radius:var(--radius-lg)}}