/* ============================================================================
   Key for Change — Laptop hero slim-down  (#1001932, Keeley 4 Oct 2026, points 3+8)

   "The thickness of the banner is too broad on the laptop view." Every page's
   top purple band was 630–870px tall at 1366×768 / 1440×900, i.e. the whole
   screen. This sheet is the ONE place that slims them for laptop widths only:
   it drops the 700px --kfc-hero-min floor, trims the nav-clearance padding,
   scales the display H1s and photos down, and removes the 144px quark2 .hero
   padding that was inflating the pillar-guide band.

   Scope: 1001–1700px wide. Desktop (≥1701px) and tablet/mobile (≤1000px) keep
   their own rules untouched. Loaded last (base.html.twig, after the page
   sheets) so equal-specificity rules here win. Two-column page heroes that
   stack ≤1100px get their photo/column rules from 1101px up only.
   ========================================================================== */

/* ---------- shared interior band (.kfc-band) + home + guide + video -------- */
@media (min-width: 1001px) and (max-width: 1700px) {
  /* inner-hero.css: kill the 700px floor on listing/programme bands */
  .kfc-band[data-hero="listing"] .kfc-band__hero > .k4c-container,
  .kfc-band[data-hero="programme"] .kfc-band__hero > .k4c-container { min-height: 0; }
  .kfc-band__hero > .k4c-container {
    padding-block: calc(var(--k4c-nav-height) + var(--k4c-space-4)) var(--k4c-space-5);
  }
  .kfc-band .copy { gap: var(--k4c-space-3); }
  .kfc-band h1 { font-size: clamp(2.25rem, 1.2rem + 1.9vw, 3rem); }
  .kfc-band[data-hero="programme"] .photo { height: 240px; }
  .kfc-band[data-hero="person"] .photo { height: 320px; }
  .kfc-band .facts .k4c-container { padding-block: var(--k4c-space-4); }

  /* events hub: photo layer is absolute, so the band height is the copy's */
  /* play pill pinned top-right so it clears the shorter headline + counts */
  .kfc-band--media .ev-hero-play { top: calc(var(--k4c-nav-height) + 16px); left: auto; right: 32px; transform: none; }
  .kfc-band--media .ev-hero-media:hover .ev-hero-play,
  .kfc-band--media .ev-hero-media:focus-visible .ev-hero-play { transform: scale(1.04); }

  /* pillar guides: quark2's .hero adds 144px top + bottom inside the band */
  .k4c-guide .hero { padding: 0; }
  .k4c-guide .hero .container { padding-top: calc(var(--k4c-nav-height) + 24px); padding-bottom: 28px; }
  .k4c-guide .hero .copy { gap: 14px; }
  .k4c-guide .hero h1 { font-size: clamp(40px, 3.4vw, 54px); }

  /* video posts */
  .k4c-vid__hero { padding-top: 20px; padding-bottom: 28px; }

  /* home (static hero; scrub is off) */
  :root:not(.kfc-scrub) .kfc-hero-sticky {
    padding-top: calc(var(--k4c-nav-height) + var(--k4c-space-4));
    padding-bottom: var(--k4c-space-5);
  }
  :root:not(.kfc-scrub) .kfc-hero__copy { gap: var(--k4c-space-4); }
  :root:not(.kfc-scrub) .kfc-hero__hook { font-size: 1.125rem; }
  .kfc-hero-shell .kfc-hero__title { font-size: clamp(2.25rem, 0.9rem + 2.2vw, 3rem); }
  .kfc-hero-shell .kfc-hero__title { max-width: 24em; }   /* "STOP RESEARCHING NARCISSISM." on one line */
  :root:not(.kfc-scrub) .kfc-hero__copy { max-width: 64rem; }
  :root:not(.kfc-scrub) .kfc-hero__lede { font-size: 1.0625rem; max-width: 50rem; }
  :root:not(.kfc-scrub) .kfc-hero__foot-inner {
    padding-top: var(--k4c-space-3);
    padding-bottom: var(--k4c-space-4);
  }
}

/* ---------- scoped page heroes (two-column from 1101px) -------------------- */
@media (min-width: 1101px) and (max-width: 1700px) {
  /* about — portrait arch 540px → 380px */
  .k4c-about .abt-hero h1 { font-size: clamp(40px, 3.6vw, 56px); }
  .k4c-about .abt-copy { gap: 14px; padding-bottom: 32px; }
  .k4c-about .abt-standfirst { font-size: 18px; }
  .k4c-about .abt-photo-col { height: 360px; }
  .k4c-about .abt-photo { height: 360px; }   /* = col height, so the arch never rises under the nav */
  .k4c-about .abt-pressbar .abt-container { padding-top: 12px; padding-bottom: 12px; }

  /* changemakers — people collage card capped so it doesn't set the height */
  .k4c-programme .prg-hero h1 { font-size: clamp(40px, 3.6vw, 56px); }
  .k4c-programme .prg-copy { gap: 16px; padding-bottom: 32px; }
  .k4c-programme .prg-standfirst { font-size: 18px; max-width: 720px; }
  .k4c-programme .prg-fact b { font-size: 19px; }
  .k4c-programme .prg-fact span { display: block; line-height: 1.4; }
  .k4c-programme .prg-hero .prg-photo-col:has(.prg-photo--people) { padding-bottom: 32px; }
  .k4c-programme .prg-photo.prg-photo--people { max-height: 330px; }
  .k4c-programme .prg-photo.prg-photo--people img { object-fit: cover; }
  .k4c-programme .prg-facts .prg-container { padding-top: 14px; padding-bottom: 16px; }

  /* success stories — drop the 652px floor */
  .k4c-success .ss-hero > .ss-container { min-height: 0; padding-top: calc(var(--k4c-nav-height) + 20px); padding-bottom: 24px; }
  .k4c-success .ss-hero h1 { font-size: clamp(40px, 3.6vw, 54px); }
  .k4c-success .ss-hero .ss-standfirst { font-size: 17px; }

  /* contact */
  .k4c-contact .cx-hero > .cx-container { padding-top: calc(var(--k4c-nav-height) + 8px); padding-bottom: 28px; }
  .k4c-contact .cx-hero h1 { font-size: clamp(36px, 3.3vw, 48px); margin-top: 8px; max-width: 22ch; }
  .k4c-contact .cx-standfirst { font-size: 18px; margin-top: 12px; max-width: 640px; }

  /* library — drop the 635px floor */
  .k4c-lib .lib-hero > .lib-container { min-height: 0; padding-top: calc(var(--k4c-nav-height) + 20px); padding-bottom: 24px; }
  .k4c-lib .lib-hero h1 { font-size: clamp(38px, 3.4vw, 50px); }
  .k4c-lib .lib-hero .lib-standfirst { font-size: 18px; margin-top: 12px; }
}