/* Page headline band — CHR-4 (DONI-557)
 * =====================================================================
 *
 * The coral strip directly under the navigation on every interior page.
 * Locked site chrome: it renders from page.html.twig before any
 * component is placed, and it is not editor-placeable.
 *
 * MEASURED from the canonical Figma file `TJC7pZhPM2o5S0wuc1tnVI`
 * (fingerprint 29701:77158 = 6613px), node `28271:22733` "D - Headline",
 * 1440 x 70, sitting at y=111 — i.e. flush under the 111px header that
 * CHR-1 built. Corroborated on a second page: Efficacy's own band
 * instance is `29978:70060`, also 1440 x 70 at y=111.
 *
 *   +-- 24px ------------------------------------------------+
 *   |  Efficacy                            (swoop, anchored)  |  26px
 *   +-- 20px ------------------------------------------------+
 *
 * 24 + 26 + 20 = 70.
 */

.page-headline {
  position: relative;
  /* DONI-870: intentional — crops absolutely-positioned decorative children. */
  overflow: hidden;

  /* The band samples `var(--coral)` in the frame — the 2026 coral
   * #eb6f56, NOT the legacy #f16b50. Referenced through the token so
   * DONI-546 stays a one-line change, per the same rule CHR-1 followed
   * for the nav active state. Those two surfaces sit 24px apart and now
   * finally agree. */
  background-color: var(--color-coral);

  /* `padding: 24px 120px 20px` at the sign-off width.
   *
   * The gutter is fluid rather than flat, for exactly the reason
   * recorded on CHR-1: a fixed 120px reproduces the frame at 1440 and
   * overflows every width below it. FND-2 (DONI-542) moved that
   * expression into a token so the band, the nav and page content share
   * one definition.
   *
   * 🔴 --gutter-BLEED, not --gutter-fluid. This band is FULL-BLEED — the
   * coral has to reach the viewport edge, so unlike .nav-container it
   * has no max-width and is not centred. Padded with --gutter-fluid it
   * lines up with the nav only up to 1368 and then drifts: at 1920 the
   * nav's title sits at x=360 (276px centring margin + 84px padding)
   * while the band's would sit at x=84. Found by measuring at 1920, not
   * by reading the file. --gutter-bleed is the same expression with the
   * cap removed, which is exactly the centring margin the band lacks. */
  padding: 24px var(--gutter-bleed) 20px;
}

/* I28271:22733;28271:18883 — 22px Agenda BOLD, white, line-height
 * normal, with `font-feature-settings: "liga" 0`.
 *
 * The ligature kill is not decoration. It is in the frame, and this is a
 * regulated site where product names and superscript markers sit next to
 * each other; a `fi`/`fl` ligature changes the shape of an approved
 * string. Carried over verbatim rather than tidied away.
 *
 * ⚠️ NOT an <h1>, deliberately. In the design this band is the page's
 * only title, so an h1 is right there. In THIS theme it is not: 13 of
 * the 15 twigify templates already render their own <h1> — and
 * switch-patients renders FOUR — so adding one here would give almost
 * every page two or more. The band is a page LABEL over content that
 * carries its own heading. When the Canvas cutover makes the band the
 * page's only title, this becomes an h1 in one line. */
.page-headline__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-agenda);
  font-size: 22px;
  font-weight: 700;
  line-height: normal;
  color: var(--color-white);
  font-feature-settings: "liga" 0;
}

/* The swoop.
 *
 * A RASTER, and only because the design file cannot express its own
 * placement: Figma's codegen for `DONI_Circles_HCP_RGB 1` emits
 * `size: -654.86%` — a NEGATIVE CSS size, which is invalid. The source
 * artwork is a 3000x3000 PNG rotated -143.78deg and scaled past the
 * band on every side, so the visible sliver cannot be reconstructed
 * from the transform. A previous exhaustive sweep (4 rotations x 3 flips
 * x 7 scales x a 2-D FFT offset search) never got past IoU 0.38.
 *
 * So each page ships a crop of its OWN band render. The crops are NOT
 * interchangeable — the swoop enters the band at a different x per page,
 * which is why the measured widths differ (360, 450, 510, 590, 885 …).
 * Substituting one page's crop for another measures ~27 mean absolute
 * difference against ~2.45 for a correct re-cut.
 *
 * Right-anchored, because the crop's LEFT edge is already flat #eb6f56
 * and therefore seams invisibly into the background at any width. That
 * is what makes a fixed-width raster safe on a fluid band. */
.page-headline__art {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* DONI-557: the <picture> wrapper must not invent a box of its own — the
 * absolutely-positioned <img> inside is the only layout participant, and
 * a static <picture> would otherwise sit in normal flow under the title. */
.page-headline picture {
  display: contents;
}

/* Mobile — 29978:88135 "M - Headline", 375 x 70, measured not assumed:
 * its title node sits at x=24, y=24 and is 26px tall, so the padding is
 * `24px 24px 20px` and the band height is unchanged from desktop. The
 * 24px gutter matches the mobile masthead rather than the clamp. */
@media (max-width: 991px) {
  .page-headline {
    padding: 24px 24px 20px;
  }
}

@media (max-width: 425px) {
  .page-headline__title {
    max-width: 15rem;
  }
}