/* Page-specific tweaks for the home page. All values read from the Folios
   Figma (frame "01", 2012px artboard / 1200px content container) via the REST
   API, so they are 1× real px — no PNG ÷3 guesswork. */

/* Hero band is a fixed 320px (Figma); the art box drives the height and the
   books/disc overflow is clipped at the band's bottom edge. */
.page--home .hero { padding-block: 0; min-height: 320px; }

/* …but that 320px band has NO real padding: `.hero__inner` fills it and centres
   its columns, so the ~63px above the title on a wide screen is centring SLACK,
   not padding. Below ~1160px the fixed-size art no longer fits, the content
   outgrows the band, the slack disappears and the title sits flush on the pink
   edge (measured: 0px at every width ≤1120). Padding the band unconditionally
   would inflate the desktop hero to 440px and break the Figma 320px, so we swap
   the slack for real 60px padding exactly where the band can no longer hold its
   content. Above this the slack is already ≥60px, so nothing is lost. */
@media (max-width: 1240px) {
  .page--home .hero { padding-block: 60px; min-height: 0; }
}

/* Section vertical rhythm: every home section has 60px top/bottom padding, so
   white sections breathe 60px and the full-bleed bands keep 60px inset. */
.page--home .section { padding-block: 60px; }

/* Section header: title→content 30px; the header text block is ~963px wide
   (Figma), wider than the global default, so the quality intro wraps like the
   design instead of into a narrow column. */
.page--home .section__header { max-width: 963px; margin-bottom: 30px; }

.page--home .what-we-do { background: var(--color-white); }
.page--home .why-we-do  { background: var(--color-bg-shaded); }

/* #6526 — on phones remove only the banner IMAGE, not the banner itself.
   Measured on live Booktime's home page: `.page-banner` is `display:flex` at
   EVERY width (250px at 1440 growing to 358px at 325px) and only
   `.home-page .page-banner__img` flips to `display:none`, via a single
   `@media screen and (max-width:991px)` rule.

   Breakpoint: 991px — literal Booktime parity, confirmed by measuring the live
   site (image present at 992px, gone at 991px). This was 640px (Booktime's phone
   tier) on the reading that #6526 wanted phones only; the decision is to match
   Booktime exactly instead, so the image also drops on tablets. The banner
   itself — title, subtitle, CTAs — still shows at every width, as Booktime's
   does. */
@media (max-width: 991px) {
  .page--home .hero__art { display: none; }
}