/* Case study header: the standard opening for every case study.
   A centred H1 and H2, then a 50 / 50 split: on one side Role + Date, a subtitle and body text; on the other an image.
   The H1 can carry the case study's gradient (set by a theme class on <body>, see case-themes.css): add .case-header--gradient.
   <header class="case-header case-header--gradient">
     <div class="case-header__intro">
       <h1 class="case-header__title t-h1">Title</h1>
       <p class="case-header__subtitle t-h2">Sub title</p>
     </div>
     <div class="split">
       <div class="split__text">
         <div class="facts-list">…lockup meta rows (Role, Date)…</div>
         <p class="t-subtitle">…</p>
         <p class="t-body">…</p>
       </div>
       <div class="split__media"><div class="media media--placeholder" role="img" aria-label="…"></div></div>
     </div>
   </header> */
.case-header { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }   /* at least one full screen; the history row under the title runs to the bottom of it, as in Figma */
.case-header .split { flex: 1; }
.case-header .split__media { min-height: 0; overflow: hidden; }   /* the history row starts at the middle of the screen and is clipped by the right edge */
.case-header .split__text { align-self: start; padding: 81px 11px 0 var(--split-edge); }   /* text 81px below the top of the screens, 11px short of the middle, as in Figma (599px wide at 1728) */
.case-header__intro {
  width: min(var(--container), 100%); margin: 0 auto;
  padding: clamp(6rem, 12.5svh, 10rem) var(--gutter) 61px;   /* title block 139px down at 1113 tall; 61px to the screens */
  display: grid; justify-items: center; text-align: center; gap: var(--space-8);   /* 40px between the H1 and H2 */
}
.case-header__title, .case-header__subtitle { margin: 0; color: var(--color-headline); text-wrap: balance; }
.case-header__subtitle { max-width: 72rem; }
.case-header--gradient .case-header__title {
  background-image: var(--case-gradient, none);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* The title box is trimmed to the cap height, and a gradient only paints inside the box, so ascenders and descenders would lose their
     fill. Padding grows the painted area; the matching negative margin keeps the layout exactly where it was. */
  padding-block: 0.35em; margin-block: -0.35em;
  padding-inline: 0.12em; margin-inline: -0.12em;   /* room at the sides too: letters that overhang the text box would be clipped by the gradient fill */
}

/* text half: Role / Date rows (lock-up meta lines; the second overlaps the first by 5px, as in Figma), then the subtitle and the body, each 28px apart. Trimmed like the Figma text so the gaps match. */
.case-header .split__text > * + * { margin-top: 28px; }
.case-header .lockup__meta-stack > .lockup__meta + .lockup__meta { margin-top: -5px; }
.case-header .split__text .t-subtitle, .case-header .split__text .t-body {
  color: var(--color-headline); text-box: trim-both cap alphabetic;
}
/* Explore sits at the left, under the text, in the case header (centred on the landing page): left edge 6px inside the container edge, 72px up from the bottom. */
.case-header .explore--anchored { left: calc(var(--bleed-edge) + 29.5px); bottom: 72px; }

/* Narrow screens: the text sits above the history row, in the page gutters, and the row is its own sideways-scrolling strip (see history.css). */
@media (max-width: 900px) {
  .case-header .split { grid-template-columns: minmax(0, 1fr); }   /* the history row is wider than the screen: the column must not grow to fit it, the row scrolls instead */
  .case-header .split__text { align-self: auto; padding: 0 var(--gutter); }
  .case-header .split__media { overflow: visible; }
  .case-header .explore { display: none; }   /* no Explore cue on phones: the page is scrolled by hand and the cue would sit on top of the text */
}