/* ============================================================================
   Key for Change — Interior page hero band  (.kfc-band)

   Mike's inner-hero design (proposals/keyforchange-inner-heroes.html) wired into
   the live theme via task #1000958. One deep-purple band, six compositions keyed
   by [data-hero]; the shared chrome (bg + glow) and the H1 pattern are identical
   across all variants. Rendered by the page_hero() macro in
   partials/sections.html.twig — replaces the old .k4c-pagehead band.

   All rules are scoped under .kfc-band so the generic class names the design uses
   (.copy .crumbs .thumb .facts .creds .count .filters .chips …) cannot collide
   with the rest of the site (the guide-body band lives under .k4c-guide .band).
   Brand fonts + tokens only (Montserrat/Lato via --k4c-*, NOT the design file's
   Bricolage/Instrument which the theme dropped, #1000953). Width = .k4c-container
   (--k4c-container 1400px, #1000934). Loaded after pages.css.
   ========================================================================== */

.kfc-band {
  --kfc-deep: #2A153F;                 /* band background — deepest brand purple */
  --kfc-lilac: #C9A6F2;                /* accent / eyebrow on the band           */
  --kfc-on: #F4EEFA;                   /* body text on the band                  */
  --kfc-on-dim: #B9A6D4;               /* muted text (crumbs, meta, labels)      */
  --kfc-on-soft: #D9C6F0;             /* standfirst / softer copy               */
  position: relative;
  background: var(--kfc-deep);
  color: var(--kfc-on);
  overflow: hidden;
}
/* Single radial glow, top-right — decorative (design). */
.kfc-band::before {
  content: "";
  position: absolute; right: -200px; top: -260px;
  width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
     rgba(129,86,181,0.45) 0%, rgba(81,45,127,0.20) 45%, rgba(42,21,63,0) 70%);
  pointer-events: none;
}
.kfc-band > * { position: relative; z-index: 1; }

/* When the band is present it owns the top of the page and paints up under the
   transparent fixed nav (its hero copy clears the bar), so cancel nav.css's
   `body:not(.has-hero) main#start` scaffold offset (mirrors the old pagehead). */
body:has(.kfc-band) main#start { padding-top: 0; }

/* ---------- hero grid (shared) ------------------------------------------- */
.kfc-band__hero > .k4c-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--k4c-space-6);
  /* top padding clears the fixed nav; below it, the design's 44px breathing room */
  padding-block: calc(var(--k4c-nav-height) + var(--k4c-space-7)) var(--k4c-space-7);
  align-items: end;
}
.kfc-band .copy { display: flex; flex-direction: column; gap: var(--k4c-space-4); grid-column: span 8; min-width: 0; }

.kfc-band .crumbs { display: flex; align-items: center; gap: var(--k4c-space-2); font-size: var(--k4c-fs-sm); color: var(--kfc-on-dim); flex-wrap: wrap; }
.kfc-band .crumbs a { color: var(--kfc-on-dim); }
.kfc-band .crumbs a:hover { color: #fff; }
.kfc-band .crumbs svg { width: 12px; height: 12px; }
.kfc-band .crumbs span:last-child { color: #fff; }

.kfc-band .eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--k4c-font-heading);
  font-size: var(--k4c-fs-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--kfc-lilac); font-weight: var(--k4c-fw-semibold);
}
.kfc-band .eyebrow::before { content: ""; width: 24px; height: 1.5px; background: var(--kfc-lilac); flex: none; }

.kfc-band h1 {
  margin: 0; color: #fff;
  font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-extrabold);
  font-size: var(--k4c-fs-3xl); line-height: 1.02; letter-spacing: -0.02em;
  text-wrap: balance; overflow-wrap: break-word;
}
.kfc-band h1 .accent, .kfc-band h1 .k4c-accent { color: var(--kfc-lilac); }

.kfc-band .standfirst { margin: 0; max-width: 46rem; font-size: var(--k4c-fs-md); line-height: 1.5; color: var(--kfc-on-soft); text-wrap: pretty; }
.kfc-band .band-meta { margin: 0; font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); letter-spacing: 0.02em; color: var(--kfc-lilac); }

.kfc-band .byline { display: flex; align-items: center; gap: 10px; font-size: var(--k4c-fs-sm); color: var(--kfc-on-dim); }
.kfc-band .byline .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(160deg, #C9B7DC 0%, #512D7F 100%); flex: none; }
.kfc-band .byline b { display: block; font-size: var(--k4c-fs-sm); color: #fff; font-weight: var(--k4c-fw-semibold); }

.kfc-band .ctas { display: flex; flex-wrap: wrap; gap: var(--k4c-space-3); margin-top: var(--k4c-space-2); }

/* ---------- 1 · guide (pillar) — copy spans wide + right meta ------------- */
.kfc-band[data-hero="guide"] .copy { grid-column: span 9; }
.kfc-band[data-hero="guide"] .meta { grid-column: span 3; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; text-align: right; font-size: var(--k4c-fs-xs); color: var(--kfc-on-dim); padding-bottom: 4px; }
.kfc-band[data-hero="guide"] .meta .byline { text-align: left; }

/* ---------- 2 · article (child guide, no video) -------------------------- */
.kfc-band[data-hero="article"] .copy { grid-column: span 8; }
.kfc-band[data-hero="article"] .aside {
  grid-column: span 4; align-self: end;
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--k4c-space-5); border-radius: var(--k4c-radius-lg);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  font-size: var(--k4c-fs-sm); color: var(--kfc-on-soft);
}
.kfc-band[data-hero="article"] .aside b { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kfc-lilac); }
.kfc-band[data-hero="article"] .aside p { margin: 0; line-height: 1.5; }
.kfc-band[data-hero="article"] .aside p strong { color: #fff; font-weight: var(--k4c-fw-semibold); }
/* utility / copy-only pages: let the copy use the full width when no aside */
.kfc-band[data-hero="article"] .copy:only-child { grid-column: span 10; }

/* ---------- 3 · video (transcript page) ---------------------------------- */
.kfc-band[data-hero="video"] .kfc-band__hero > .k4c-container { align-items: center; }
.kfc-band[data-hero="video"] .copy { grid-column: span 6; }
.kfc-band[data-hero="video"] .thumb {
  grid-column: span 6; position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--k4c-radius-lg); overflow: hidden;
  background: linear-gradient(160deg, #6B4A96 0%, #3A2160 100%);
  box-shadow: var(--k4c-shadow-lg);
  display: flex; align-items: center; justify-content: center;
}
.kfc-band[data-hero="video"] .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kfc-band[data-hero="video"] .thumb .play { position: relative; width: 84px; height: 84px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.kfc-band[data-hero="video"] .thumb .play svg { width: 30px; height: 30px; margin-left: 4px; }
.kfc-band[data-hero="video"] .thumb .dur { position: absolute; right: 16px; bottom: 14px; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; font-weight: var(--k4c-fw-semibold); }

/* ---------- 4 · programme / service -------------------------------------- */
.kfc-band[data-hero="programme"] .copy { grid-column: span 8; }
.kfc-band[data-hero="programme"] .photo-col { grid-column: span 4; align-self: end; }
.kfc-band[data-hero="programme"] .photo { height: 340px; }
.kfc-band .facts { border-top: 1px solid rgba(255,255,255,0.14); }
.kfc-band .facts .k4c-container { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--k4c-space-5); padding-block: var(--k4c-space-5); }
.kfc-band .fact b { display: block; font-family: var(--k4c-font-heading); font-size: var(--k4c-fs-xl); font-weight: var(--k4c-fw-bold); color: #fff; }
.kfc-band .fact span { font-size: var(--k4c-fs-sm); color: var(--kfc-on-dim); }

/* ---------- 5 · person (About Keeley) ------------------------------------ */
.kfc-band[data-hero="person"] .kfc-band__hero > .k4c-container { align-items: end; }
/* Explicit row 1 on both — the copy is DOM-first but sits in the right columns,
   so without this the photo (placed in cols 1–4) auto-flows onto row 2. */
.kfc-band[data-hero="person"] .photo-col { grid-column: 1 / span 4; grid-row: 1; align-self: end; }
.kfc-band[data-hero="person"] .copy { grid-column: 5 / span 8; grid-row: 1; padding-bottom: var(--k4c-space-7); }
.kfc-band[data-hero="person"] .photo { height: 460px; border-radius: 220px 220px 0 0; }
.kfc-band[data-hero="person"] .creds { display: flex; flex-wrap: wrap; gap: 8px; }
.kfc-band[data-hero="person"] .creds span { padding: 8px 14px; border-radius: var(--k4c-radius-pill); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); font-size: var(--k4c-fs-sm); color: #fff; }
.kfc-band[data-hero="person"] .press { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; font-family: var(--k4c-font-heading); font-size: var(--k4c-fs-base); font-weight: var(--k4c-fw-bold); color: var(--kfc-on-dim); }
.kfc-band[data-hero="person"] .press .label { font-family: var(--k4c-font-body); font-size: 11px; font-weight: var(--k4c-fw-medium); letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- 6 · listing (Videos, Events, Success Stories, Glossary …) ----- */
.kfc-band[data-hero="listing"] .kfc-band__hero > .k4c-container { align-items: end; }
.kfc-band[data-hero="listing"] .copy { grid-column: span 7; }
.kfc-band[data-hero="listing"] .count { grid-column: span 5; display: flex; justify-content: flex-end; gap: var(--k4c-space-7); align-self: end; padding-bottom: 4px; }
.kfc-band[data-hero="listing"] .count div { text-align: right; }
.kfc-band[data-hero="listing"] .count b { display: block; font-family: var(--k4c-font-heading); font-size: var(--k4c-fs-2xl); font-weight: var(--k4c-fw-extrabold); letter-spacing: -0.03em; color: #fff; line-height: 1; }
.kfc-band[data-hero="listing"] .count span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kfc-on-dim); }
.kfc-band .filters { border-top: 1px solid rgba(255,255,255,0.14); }
.kfc-band .filters .k4c-container { display: flex; align-items: center; justify-content: space-between; gap: var(--k4c-space-4); padding-block: var(--k4c-space-3); }
.kfc-band .tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.kfc-band .tabs a { padding: 9px 14px; border-radius: var(--k4c-radius-pill); font-size: var(--k4c-fs-sm); font-weight: var(--k4c-fw-medium); color: var(--kfc-on-soft); }
.kfc-band .tabs a[aria-current] { background: #fff; color: var(--kfc-deep); font-weight: var(--k4c-fw-semibold); }
.kfc-band .search { display: flex; align-items: center; gap: 10px; width: 320px; max-width: 100%; padding: 10px 14px; border-radius: var(--k4c-radius-pill); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); font-size: var(--k4c-fs-sm); color: var(--kfc-on-dim); }
.kfc-band .search svg { width: 16px; height: 16px; flex: none; }

/* ---------- shared photo frame ------------------------------------------- */
.kfc-band .photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--k4c-radius-lg); box-shadow: var(--k4c-shadow-lg); background: linear-gradient(160deg, #9A7CC0 0%, #5E3A90 60%, var(--kfc-deep) 100%); }
.kfc-band .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- trailing "In this guide" chip strip -------------------------- */
.kfc-band .chips { border-top: 1px solid rgba(255,255,255,0.14); }
.kfc-band .chips .k4c-container { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-block: var(--k4c-space-4) var(--k4c-space-5); }
.kfc-band .chips .label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kfc-on-dim); margin-right: 6px; }
.kfc-band .chip { padding: 8px 14px; border-radius: var(--k4c-radius-pill); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: var(--k4c-fs-sm); font-weight: var(--k4c-fw-medium); }
.kfc-band .chip:hover { background: rgba(255,255,255,0.12); }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1000px) {
  .kfc-band__hero > .k4c-container { grid-template-columns: 1fr; gap: var(--k4c-space-5); }
  .kfc-band .copy,
  .kfc-band .meta,
  .kfc-band .aside,
  .kfc-band .thumb,
  .kfc-band .photo-col,
  .kfc-band .count { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .kfc-band[data-hero="guide"] .meta { align-items: flex-start; text-align: left; }
  .kfc-band[data-hero="person"] .photo-col,
  .kfc-band[data-hero="programme"] .photo-col { order: -1; }
  .kfc-band[data-hero="person"] .photo { height: 300px; }
  .kfc-band[data-hero="programme"] .photo { height: 240px; }
  .kfc-band .facts .k4c-container { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kfc-band[data-hero="listing"] .count { justify-content: flex-start; }
  .kfc-band[data-hero="listing"] .count div { text-align: left; }
  .kfc-band .filters .k4c-container { flex-direction: column; align-items: stretch; }
  .kfc-band .search { width: auto; }
  .kfc-band .tabs { overflow-x: auto; }
}
@media (max-width: 560px) {
  .kfc-band h1 { font-size: var(--k4c-fs-2xl); }
  .kfc-band .ctas .k4c-btn { width: 100%; }
}

/* ---------- hero height consistency (#1001097) --------------------------------
   Level the section-landing bands (listing = events/shop/glossary/videos;
   programme = contact & service pages) with the programme hero on desktop. The
   grid bottom-aligns, so the floor adds nav-clearance space above the copy.
   listing floors at the target minus its ~66px filters strip; programme has no
   trailing strip on these pages, so it floors at the full target. Content-page
   variants (article, guide, video, person, event) are deliberately left compact —
   they are read for their body, not their header. Stacks < 1000px = natural. */
@media (min-width: 1001px) {
  .kfc-band[data-hero="listing"] .kfc-band__hero > .k4c-container { min-height: calc(var(--kfc-hero-min) - 66px); }
  .kfc-band[data-hero="programme"] .kfc-band__hero > .k4c-container { min-height: var(--kfc-hero-min); }
}