/* assets/css/components/page-banner.css
 * @layer components — Standardised interior page banner
 * ════════════════════════════════════════════════════════════════════
 * Used by template-parts/components/page-banner.php on every single-*,
 * archive-*, taxonomy-*, and content page template (except homepage and
 * the bespoke About hero). The component is the canonical hero for the
 * site — see CLAUDE.md for the rule.
 *
 * Loaded site-wide (except homepage) — moved out of page.css so it
 * works on sector taxonomies and event singles which don't load page.css.
 *
 * Background image source (resolved in PHP via vimta_get_banner_image_id):
 *   1. Post featured image
 *   2. ACF override on the post/term
 *   3. Global Options fallback image
 *   4. Teal gradient fallback (no image set at all)
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     PAGE BANNER — standardised interior hero used across ALL inner pages
     ════════════════════════════════════════════════════════════════════

     Height ladder (fixed px — viewport-independent, predictable):
       ≥1440px  560px
       ≥1280px  500px  (default desktop)
       ≥1024px  420px  (laptop)
        ≥768px  320px  (tablet)
        ≥480px  240px  (large mobile)
         <480px  220px  (small mobile — text moves below image)

     Overlay strategy — bottom-up gradient:
       Works for any photo composition (group shots, buildings, landscapes).
       Strong opacity band at the bottom guarantees text legibility.
       Tapers to transparent at top so the photo reads clearly above.

     Background image source (resolved in PHP):
       1. Post featured image
       2. Global Options fallback image
       3. Teal gradient fallback (no image set at all)
     ════════════════════════════════════════════════════════════════════ */

  .page-banner {
    position: relative;
    block-size: calc(380px + var(--header-height)); /* desktop default ~1280px; + nav height since header is fixed */
    display: flex;
    align-items: flex-end;
    padding-block-start: var(--header-height); /* clear fixed nav — header is taken out of flow */
    padding-block-end: var(--space-2xl);
    padding-inline: var(--gutter);
    overflow: hidden;
    /* Teal gradient — shown only when no __bg image child is present */
    background-color: var(--primary-dark);
    background-image: linear-gradient(
      155deg,
      var(--primary-ultra-dark)  0%,
      var(--primary-dark)       55%,
      var(--primary)            100%
    );
  }

  /* When a photo is present, suppress section's own gradient */
  .page-banner:has(.page-banner__bg) {
    background-image: none;
    background-color: var(--primary-ultra-dark);
  }

  /* ── Background photo layer ── */
  .page-banner__bg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center center; /* default; overridden per-page via style="object-position:..." */
    z-index: 0;
  }

  /* ── Overlay layer 1: bottom-up gradient (primary legibility zone) ──
     Concentrated in the lower 55% where text always sits.
     Fades cleanly to transparent so the upper photo reads naturally.
     Surgical — not a blanket dark wash across the whole image.         */
  .page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      color-mix(in oklch, var(--primary-ultra-dark) 78%, transparent)  0%,
      color-mix(in oklch, var(--primary-ultra-dark) 55%, transparent) 30%,
      color-mix(in oklch, var(--primary-ultra-dark) 22%, transparent) 55%,
      color-mix(in oklch, var(--primary-ultra-dark)  6%, transparent) 72%,
      transparent                                                      88%
    );
    z-index: 1;
  }

  /* ── Overlay layer 2: left-column boost ──
     Confined to left 50% — reinforces the text column without
     touching the right half of the image (Intertek principle).         */
  .page-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      color-mix(in oklch, var(--primary-ultra-dark) 28%, transparent)  0%,
      color-mix(in oklch, var(--primary-ultra-dark) 12%, transparent) 35%,
      transparent                                                       55%
    );
    z-index: 1;
  }

  /* No overlays needed when no photo — teal gradient is the entire bg */
  .page-banner:not(:has(.page-banner__bg))::before,
  .page-banner:not(:has(.page-banner__bg))::after {
    display: none;
  }

  .page-banner .container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  /* ── Typography ── */
  .page-banner__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: color-mix(in oklch, var(--primary-light) 90%, var(--white));
    margin: 0;
  }

  .page-banner__title {
    font-size: var(--heading-banner);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--text-on-dark);
    margin: 0;
  }

  .page-banner__subtitle {
    font-size: var(--text-l);
    line-height: var(--leading-relaxed);
    color: color-mix(in oklch, var(--text-on-dark) 80%, transparent);
    margin: 0;
    max-inline-size: var(--text-width-s);
  }

  /* keep old name working — same as subtitle */
  .page-banner__tagline {
    font-size: var(--text-l);
    line-height: var(--leading-relaxed);
    color: color-mix(in oklch, var(--text-on-dark) 80%, transparent);
    margin: 0;
    max-inline-size: var(--text-width-s);
  }

  /* Meta pills (client / industry on case-study banners) */
  .page-banner__meta {
    display: flex;
    gap: var(--space-s);
    flex-wrap: wrap;
    margin-block-start: var(--space-2xs);
  }

  .page-banner__meta-item {
    font-size: var(--text-xs);
    color: var(--text-on-dark-muted);
    padding: var(--page-meta-pill-padding);
    border: 1px solid var(--overlay-glass-medium);
    border-radius: var(--radius-s);
    letter-spacing: var(--tracking-snug);
  }

  /* ── Height ladder ──
     Each breakpoint adds --header-height to the visual target so the
     photo area stays the same size — the fixed nav overlaps the top. */
  @media (min-width: 90em) {           /* ≥1440px large desktop */
    .page-banner { block-size: calc(420px + var(--header-height)); }
  }

  @media (max-width: 80em) {           /* ≤1280px desktop */
    .page-banner { block-size: calc(360px + var(--header-height)); }
  }

  @media (max-width: 64em) {           /* ≤1024px laptop */
    .page-banner { block-size: calc(300px + var(--header-height)); }
  }

  @media (max-width: 48em) {           /* ≤768px tablet */
    .page-banner { block-size: calc(240px + var(--header-height)); }
  }

  @media (max-width: 30em) {           /* ≤480px mobile */
    .page-banner {
      block-size: calc(220px + var(--header-height));
      align-items: flex-end;
      padding-block-end: var(--space-l);
    }

    /* Shrink typography on mobile so title + eyebrow + subtitle fit
       comfortably at the bottom of the image area without forcing the
       section to get shorter. Image stays generous, text gets smaller. */
    .page-banner__title {
      font-size: var(--heading-xs);
    }

    .page-banner__subtitle,
    .page-banner__tagline {
      font-size: var(--text-s);
    }

    .page-banner .container {
      gap: var(--space-2xs);
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     CENTER VARIANT — used by testimonials page and other landing heroes
     that need a centered (vs. left-anchored) banner layout.
     ════════════════════════════════════════════════════════════════════ */

  .page-banner--center .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .page-banner--center .page-banner__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-m);
    max-inline-size: var(--text-width-s);
    margin-inline: auto;
  }

  .page-banner--center .page-banner__title {
    max-inline-size: 32rem;
  }


  /* ════════════════════════════════════════════════════════════════════
     BREADCRUMB CONTEXT OVERRIDES
     When a breadcrumb is rendered inside the DARK banner overlay (inside
     .container), invert its colours from the default link styling to
     white-on-dark. Scoped specifically to .container so the mobile strip
     breadcrumb — which sits on a LIGHT tinted background — keeps the
     default dark-on-light link tones from page.css.
     ════════════════════════════════════════════════════════════════════ */

  .page-banner .container .breadcrumb__item + .breadcrumb__item::before {
    color: var(--text-on-dark-subtle);
  }

  .page-banner .container .breadcrumb__link {
    color: var(--text-on-dark-muted);
  }

  .page-banner .container .breadcrumb__link:hover {
    color: var(--text-on-dark);
  }

  .page-banner .container .breadcrumb__current {
    color: var(--text-on-dark-subtle);
  }


  /* ════════════════════════════════════════════════════════════════════
     BREADCRUMB OVERFLOW COLLAPSE — narrow viewports
     ─────────────────────────────────────────────────────────────────────
     On narrow viewports (<48em), long breadcrumb trails collapse their
     middle items into a "…" indicator so the trail stays on one line.
     Pattern: Home > … > Current page. First and last items stay visible,
     everything between gets hidden, one separator is repurposed as the
     indicator with a "…" ::before inserted via CSS.

     Activation threshold: 4+ items. At 3 or fewer items the full trail
     is short enough to fit; we don't collapse it. Activation uses
     :has(.breadcrumb__item:nth-of-type(4)) — the parent <nav> has a 4th
     item child. Only fires at <48em so desktop is unaffected.

     Accessibility: hidden items use visibility:hidden + absolute positioning
     so they're removed from the visual flow but stay in the DOM / a11y tree.
     Screen readers still announce the full trail. Sighted users see
     Home > … > Current, still visually coherent.

     The last visible item gets min-inline-size:0 + overflow:hidden +
     text-overflow:ellipsis so its label truncates with "…" if it's
     itself longer than the remaining line width.
     ════════════════════════════════════════════════════════════════════ */

  @media (max-width: 48em) {
    .page-banner .container .breadcrumb {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      min-inline-size: 0;
      max-inline-size: 100%;
    }

    /* 4+ items → collapse middle. The :has() check targets .breadcrumb
       containers that have at least 4 .breadcrumb__item children. For
       those containers, hide all items except the first and last, AND
       hide every separator except the last one (which remains the
       chevron between "…" and the current page). */
    .page-banner .container .breadcrumb:has(.breadcrumb__item:nth-of-type(4)) .breadcrumb__item:not(:first-of-type):not(:last-of-type),
    .page-banner .container .breadcrumb:has(.breadcrumb__item:nth-of-type(4)) .breadcrumb__separator:not(:nth-last-of-type(1)) {
      /* Visually-hidden but kept in DOM + a11y tree so screen readers
         still announce the full trail. Positioning via absolute+clip is
         the standard .sr-only pattern. */
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    /* Insert the "…" indicator AFTER the first item (Home) when the
       trail is collapsed. Reads visually as: Home … > Current. */
    .page-banner .container .breadcrumb:has(.breadcrumb__item:nth-of-type(4)) .breadcrumb__item:first-of-type::after {
      content: '…';
      display: inline-block;
      margin-inline-start: var(--space-xs);
      color: var(--text-muted);
      font-weight: var(--weight-semibold);
      pointer-events: none;
    }

    /* Current item (last child, usually the page title) truncates with
       ellipsis if its label is still longer than the remaining width. */
    .page-banner .container .breadcrumb__item--current {
      min-inline-size: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

}