/**
 * @file
 * Banner / masthead styling for the Save Mo Lives theme.
 *
 * Covers the full-width homepage hero and the shorter interior page banners.
 */

.masthead {
  position: relative;
  width: 100%;
}

/* Remove Olivero's default 54px block bottom-margin inside the masthead region
 * so the hero and welcome banner sit flush against each other. */
.region--masthead .block {
  margin-bottom: 0;
}

.masthead img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Homepage hero: full-bleed image with gradient overlay and centred text.
 * ------------------------------------------------------------------------- */
.sml-hero {
  position: relative;
  overflow: hidden;
}

/* Absolutely fill the hero container so the image always covers the
 * full height, even when the overlapping text block extends below the
 * former fixed image height. */
.sml-hero__media {
  position: absolute;
  inset: 0;
}

.sml-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Match the derivative aspect ratio on the hero container so the image
   * fills without cropping. object-position center keeps the scene
   * centered on viewports where the hero grows beyond the ratio. */
  object-position: center center;
}

/* Soft dissolve at the bottom edge of the photo so it blends into the
 * welcome ribbon. Text legibility is handled separately by the scrim on
 * .sml-hero__text, which is why these stops stay light. */
.sml-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 28%,
    rgba(255, 255, 255, 0) 48%,
    rgba(255, 255, 255, 0.18) 62%,
    rgba(255, 255, 255, 0.35) 75%,
    rgba(255, 255, 255, 0.45) 84%
  );
  pointer-events: none;
}

.sml-hero__text {
  position: relative;
  z-index: 1;
  max-width: var(--sml-container-max);
  margin: 0 auto;
  padding: 0 var(--sml-container-pad) 2.5rem;
  text-align: center;
}

/* Scrim anchored to the text box rather than the image, so the white
 * backing follows the headline wherever it lands. The fade-in is measured
 * in rem from the top of the text so it reads the same at every width,
 * unlike percentage stops on the image. */
.sml-hero__text::before {
  content: '';
  position: absolute;
  top: -5.5rem;
  /* Bleed past the 1280px text container so no vertical seam shows on
   * wide viewports; .sml-hero clips the overhang with overflow: hidden. */
  right: -50vw;
  /* Run past the text to the foot of the hero so the white holds steady
   * into the welcome ribbon on wide viewports, where the hero is taller
   * than the text. */
  bottom: -100vh;
  left: -50vw;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.55) 3rem,
    rgba(255, 255, 255, 0.85) 5.5rem,
    rgba(255, 255, 255, 0.85) 100%
  );
  pointer-events: none;
}

.sml-hero__script-wrap {
  position: relative;
  width: 100%;
}

.sml-hero__script-rotate {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  transform: rotate(-2.42deg);
  transform-origin: center center;
}

.sml-hero__script {
  display: block;
  font-family: var(--sml-font-display);
  font-weight: 600;
  /* Fluid: 52px at 393 px viewport → 80px at 1728 px viewport. */
  font-size: clamp(3.25rem, 2.74rem + 2.1vw, 5rem);
  line-height: normal;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--sml-black);
  text-decoration: underline;
  text-decoration-color: var(--sml-primary);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.15em;
}

.sml-hero__tagline {
  margin: 0.5rem 0 0;
  font-family: var(--sml-font-code-pro-bold);
  font-weight: 400;
  /* Fluid: 32px at 393 px viewport → 48px at 1728 px viewport. */
  font-size: clamp(2rem, 1.71rem + 1.2vw, 3rem);
  line-height: normal;
  color: var(--sml-black);
}

/* Hero tagline treatment (script display face). */
.masthead .sml-script,
.masthead .display-font,
.banner__tagline {
  font-family: var(--sml-font-display);
  font-weight: 700;
  color: var(--sml-black);
}

/* ---------------------------------------------------------------------------
 * Welcome ribbon — gradient bar below the hero image.
 * Desktop (Figma 1060:165, 1728×144): centered horizontal row.
 * Mobile keeps the same row model, but scales typography/spacing down and
 * allows wrapping so title + subtitle stay in one compact band.
 * ------------------------------------------------------------------------- */
.masthead .welcome-ribbon,
.banner-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem var(--sml-container-pad);
  /* Black → orange → purple gradient per Figma design. */
  background: linear-gradient(
    90deg,
    var(--sml-black)  0%,
    var(--sml-black)  14%,
    var(--sml-orange) 42%,
    var(--sml-accent-magenta) 68%,
    var(--sml-purple) 100%
  );
  color: var(--sml-white);
}

.banner-ribbon__inner {
  display: flex;
  align-items: center;
  gap: 3.125rem;
}

.banner-ribbon__title {
  margin: 0;
  font-family: var(--sml-font-code-pro-bold);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: normal;
  max-width: 37.5rem;
}

/* Vertical white rule (desktop). */
.banner-ribbon__divider {
  flex-shrink: 0;
  width: 0;
  height: 2.9375rem;
  border-left: 2px solid var(--sml-white);
}

/* Desktop: two subtitle spans render as one continuous inline sentence. */
.banner-ribbon__subtitle {
  display: block;
  margin: 0;
  font-family: var(--sml-font-jost);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: normal;
}

.banner-ribbon__subtitle-line {
  display: inline;
  margin: 0;
}

/* Natural whitespace between inline spans provides the word-space. */

/* ---------------------------------------------------------------------------
 * Interior page banner: image band with gradient overlay and overlaid title.
 * Figma node 1158:672 – ~350px height at 1728px wide, white fade to bottom,
 * page title in Code Pro Bold LC at the lower-left.
 * ------------------------------------------------------------------------- */
.sml-interior-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Figma frame: 1728×350 px. The aspect-ratio scales up to 350px at full
   * canvas width. min-height holds the Figma ceiling on all narrower desktop
   * viewports so the banner never collapses to the shallow proportional height
   * (~236px at 1168px wide) that was hiding the road/landscape scene. */
  aspect-ratio: 1728 / 350;
  min-height: 350px;
  border-bottom: 1px solid var(--sml-black);
}

/* Gradient overlay: transparent at top, fading to near-white at bottom,
 * matching the Figma gradient stops on node 1158:674. */
.sml-interior-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0)    28.43%,
    rgba(255, 255, 255, 0.298) 56.64%,
    rgba(255, 255, 255, 0.722) 68.46%,
    rgba(255, 255, 255, 0.85)  84.32%
  );
  pointer-events: none;
  z-index: 1;
}

/* Parent selector raises specificity to 0,0,2,0, beating .masthead img
 * (0,0,1,1) which otherwise forces height: auto and anchors the image at
 * the top of the container, hiding the road scene in non-Chromium browsers. */
.sml-interior-banner .sml-interior-banner__img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 80%;
}

/* Title wrapper sits at the bottom of the banner above the gradient.
 * max-width + margin-inline: auto on an absolutely-positioned element
 * with left: 0 and right: 0 centres the constrained box, matching the
 * main content container and logged-in tab alignment on wide screens. */
.sml-interior-banner__title-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  max-width: var(--sml-container-max);
  margin-inline: auto;
  padding: 0 var(--sml-container-pad);
}

/* Breadcrumb-parent eyebrow label above the page title. */
.sml-interior-banner__eyebrow {
  max-width: var(--sml-container-max);
  margin: 0 0 0.375rem;
  font-family: var(--sml-font-code-pro-bold);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sml-black);
}

.sml-interior-banner__title {
  max-width: var(--sml-container-max);
  margin: 0 0 1.5rem;
  font-family: var(--sml-font-code-pro-bold);
  font-weight: 400;
  /* Fluid: 32px at 480px viewport → 48px at 1728px viewport. */
  font-size: clamp(2rem, 1.56rem + 1.85vw, 3rem);
  line-height: normal;
  color: var(--sml-black);
}

/* On narrow viewports reduce the aspect-ratio so the image stays taller
 * and the title doesn't crowd the bottom edge. */
@media (max-width: 767px) {
  .sml-interior-banner {
    /* ~200px at 393px viewport. Reset min-height so the aspect-ratio governs. */
    aspect-ratio: 393 / 200;
    min-height: 0;
  }

  .sml-interior-banner__eyebrow {
    margin-bottom: 0.25rem;
  }

  .sml-interior-banner__title {
    margin-bottom: 0.75rem;
  }
}

/* ---------------------------------------------------------------------------
 * Interior banner: no-image placeholder.
 *
 * Displayed when the active savemo-menu trail has no field_banner image.
 * Uses a dark SML-branded gradient (near-black → orange-dark → near-black)
 * as the background to fill the same 350 px banner zone. The Figma node
 * 1273:2693 dark overlay treatment is reproduced by replacing the default
 * white ::after fade with the equivalent black-alpha stops from the design,
 * and the title text is set to white for legibility on the dark surface.
 * ------------------------------------------------------------------------- */

/* Dark branded gradient fills the banner zone instead of a photo. */
.sml-interior-banner--placeholder {
  background: linear-gradient(
    160deg,
    var(--sml-near-black)  0%,
    var(--sml-orange-dark) 55%,
    var(--sml-near-black)  100%
  );
}

/* Replace the white fade overlay with the Figma black-alpha version so the
 * gradient does not wash out under a white veil. Stops match Figma node
 * 1429:2528: 0→28%, 0.298→53%, 0.722→73%, 0.85→84%. */
.sml-interior-banner--placeholder::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0)     28.43%,
    rgba(0, 0, 0, 0.298) 53.42%,
    rgba(0, 0, 0, 0.722) 73.03%,
    rgba(0, 0, 0, 0.85)  84.32%
  );
}

/* White title and eyebrow on the dark placeholder background. */
.sml-interior-banner--placeholder .sml-interior-banner__title,
.sml-interior-banner--placeholder .sml-interior-banner__eyebrow {
  color: var(--sml-white);
}

/* ---------------------------------------------------------------------------
 * Interior banner: dark overlay (event/campaign detail).
 *
 * Figma 1273:2693 / 1429:2528 — black-alpha fade over the masthead image with
 * white title and region eyebrow. Applied in addition to --placeholder when
 * the route is an event node so image and gradient states both match design.
 * ------------------------------------------------------------------------- */
.sml-interior-banner--dark::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0)     28.43%,
    rgba(0, 0, 0, 0.298) 53.42%,
    rgba(0, 0, 0, 0.722) 73.03%,
    rgba(0, 0, 0, 0.85)  84.32%
  );
}

.sml-interior-banner--dark .sml-interior-banner__title,
.sml-interior-banner--dark .sml-interior-banner__eyebrow {
  color: var(--sml-white);
}

/* Page title shown in the content region (no masthead). */
.page__content .block-page-title-block h1,
.page-title {
  margin-bottom: 1.5rem;
  font-size: 2.25rem;
}

/* ---------------------------------------------------------------------------
 * Suppress the standalone page-title block in the content region when the
 * interior banner already renders the title. Uses :has() on the masthead
 * sibling to target the matching main element.
 * ------------------------------------------------------------------------- */
.masthead:has(.sml-interior-banner) ~ main .block-page-title-block {
  display: none;
}

@media (max-width: 767px) {
  /* Reserve portrait-height space so the absolutely-positioned image
   * scales smoothly across mobile/tablet widths without hard jumps. */
  .sml-hero {
    min-height: clamp(280px, 78vw, 412px);
  }

  /* Keep most of the photo clear on mobile and fade only near the foot
   * where the hero transitions into the welcome ribbon. */
  .sml-hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 75%,
      rgba(255, 255, 255, 0.18) 88%,
      rgba(255, 255, 255, 0.3) 100%
    );
  }

  .sml-hero__text {
    /* Keep the copy lower on phones, but cap growth on wider mobile widths. */
    margin-top: clamp(210px, 64vw, 300px);
    padding-bottom: 1.5rem;
  }

  /* Compress the text scrim so it starts closer to the copy and does not
   * wash across the middle of the hero image. */
  .sml-hero__text::before {
    top: -2.25rem;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.55) 1.25rem,
      rgba(255, 255, 255, 0.85) 2.25rem,
      rgba(255, 255, 255, 0.85) 100%
    );
  }

  /* Keep mobile tagline compact so the hero image remains visible. */
  .sml-hero__tagline {
    font-size: clamp(1.125rem, 0.9rem + 1.2vw, 1.5rem);
  }

  /* Mobile ribbon: stack title above subtitle with compact spacing. */
  .banner-ribbon {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0.75rem clamp(1.25rem, 4vw, 1.75rem);
  }

  .banner-ribbon__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
  }

  .banner-ribbon__title {
    display: block;
    margin: 0;
    font-size: 1.25rem;
    max-width: none;
  }

  .banner-ribbon__divider {
    display: none;
  }

  .banner-ribbon__subtitle {
    display: block;
    margin: 0;
    font-size: 1rem;
  }

  .banner-ribbon__subtitle-line {
    display: inline;
  }

  .banner-ribbon__subtitle-line::after {
    content: ' ';
  }

  .banner-ribbon__subtitle-line:last-child::after {
    content: '';
  }
}

/* Desktop hero: prefer the 1920×1029 masthead ratio (Figma 841:15998) but
 * never exceed the space under the header so the bottom-anchored headline
 * stays in the first screen on short laptop viewports. */
@media (min-width: 768px) {
  .sml-hero {
    /* 1920 ÷ 1029 ≈ 1.866:1 — same ratio as the masthead derivative.
     * min() caps that against the remaining viewport (header + toolbar)
     * so object-fit: cover shortens the photo instead of pushing text
     * below the fold. min-height rather than aspect-ratio so a tall
     * wrapped headline can still grow the hero. */
    min-height: min(
      clamp(412px, calc(100vw * 1029 / 1920), 760px),
      calc(100dvh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px))
    );
    /* Park the text against the foot of the hero. A viewport-width margin
     * would reserve a fixed slice of the window below the text, but the
     * headline and tagline sizes clamp out (5rem at ~1722px, 3rem at
     * ~1371px), so that reserve grows into dead white space on wide
     * screens. Bottom-anchoring keeps the gap to the ribbon constant. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .sml-hero__text {
    max-width: 1280px;
    padding-bottom: clamp(2.5rem, 3.5vw, 4.25rem);
  }

  .sml-hero__tagline {
    white-space: nowrap;
    font-size: clamp(1.5rem, 3.5vw, 3rem);
  }
}

@media (min-width: 1500px) {
  .banner-ribbon {
    min-height: 9rem;
  }

  .banner-ribbon__subtitle {
    white-space: nowrap;
  }
}