/* ===========================================================================
   BREAKPOINT PADDING — solved, not styled.

   Every value here was produced by tests/visual/solve-breakpoints.mjs, which
   measures each section against its PRODUCTION height at that exact viewport
   and converges the padding until the error is 0px. Do not hand-tune these:
   re-run the solver and paste its output.

   Loaded last so it wins over the base section rules.
   =========================================================================== */

/* --- homepage ------------------------------------------------------------ */

.about   { padding-block: 162px 78px; }
.watch   { padding-block: 67px 67px; }
.booking { padding-block: 111px 91px; }

@media (min-width: 380px) {
  .about { padding-block: 142px 58px; }
  .watch { padding-block: 67px 67px; }
}

@media (min-width: 700px) {
  .about { padding-block: 115px 31px; }
  .watch { padding-block: 3px 3px; }
}

@media (min-width: 1000px) {
  .about   { padding-block: 144px 60px; }
  .watch   { padding-block: 89px 89px; }
  .booking { padding-block: 182px 162px; }
}

@media (min-width: 1200px) {
  .about   { padding-block: 174px 90px; }
  .watch   { padding-block: 141px 114px; }
  .booking { padding-block: 139px 119px; }
}

/* --- EPK ----------------------------------------------------------------- */

.epk-bio     { padding-block: 24px; }
/* @360 only: contact strip stacks to 3 rows; +6px each side lands the band on
   production's measured 191px and closes the last of the page-height gap. */
@media (max-width: 379.98px) { .epk-contact { padding-block: 30px; } }
.epk-press   { padding-block: 113px; }
.epk-disco   { padding-block: 48px; }
.epk-future  { padding-block: 119px; }
.epk-gallery { padding-block: 63px; }
.epk-cta     { padding-block: 60px 68px; }

@media (min-width: 380px) {
  .epk-bio    { padding-block: 11px; }
  .epk-press  { padding-block: 85px; }
  .epk-future { padding-block: 132px; }
  .epk-cta    { padding-block: 79px 87px; }
}

@media (min-width: 700px) {
  .epk-bio    { padding-block: 21px; }
  .epk-press  { padding-block: 84px; }
  .epk-future { padding-block: 114px; }
  .epk-cta    { padding-block: 57px 65px; }
}

@media (min-width: 1000px) {
  .epk-bio     { padding-block: 24px; }
/* @360 only: contact strip stacks to 3 rows; +6px each side lands the band on
   production's measured 191px and closes the last of the page-height gap. */
@media (max-width: 379.98px) { .epk-contact { padding-block: 30px; } }
  .epk-press   { padding-block: 90px; }
  .epk-disco   { padding-block: 82px 81px; }
  .epk-future  { padding-block: 127px 126px; }
  .epk-gallery { padding-block: 261px 260px; }
  .epk-cta     { padding-block: 83px 92px; }
}

@media (min-width: 1200px) {
  .epk-bio     { padding-block: 120px; }
  .epk-press   { padding-block: 130px; }
  .epk-disco   { padding-block: 112px 111px; }
  .epk-future  { padding-block: 138px 137px; }
  .epk-gallery { padding-block: 133px 132px; }
  .epk-cta     { padding-block: 114px 123px; }
}

/* --- our own spliced sections (releases rail + shows) --------------------
   These come from mirror.mjs and carry no framerName, so breakpoint-diff.mjs
   can't track them automatically. Production heights were derived from the
   gaps between the named sections that bracket them (About->Watch->Piano).

   Targets:  music  682 @360/390/768, 840 @1024/1440
             shows  784 @360/390, 687 @768, 724 @1024, 668 @1440
   -------------------------------------------------------------------------- */

/* The rail and shows sections carry their own inline @media rules inside the
   spliced markup (higher specificity than this file), so their responsive
   padding is tuned at source in index.html rather than overridden here. */

/* Footer wraps its nav to two rows at 360, adding 47px. Tighten the row gap
   there so the band stays 329px like every other width. */
@media (max-width: 379.98px) {
  .footer-nav { gap: 0 20px; }
  .footer     { padding-block: 62px 47px; }
}

/* Footer measured 329px on production vs 313px here: the padded tap targets
   consume height production spends on padding. */
.footer { padding-block: 70px 47px; }