/**
 * Kernel hero / jumbo chrome (titles, positions).
 * Structural stack + aspect live in page-layout.css (unlayered).
 * @layer so branded themes keep control of colours/type.
 *
 * Visual look (scrim, etc.) is opt-in only — never bare `.hero-jumbo::after`.
 * Enable via `data-hero-scrim` on the band (HeroField `scrim`) or theme
 * `html[data-hero-scrim]` (BitBee shell). Default off (Wolkenstein stays clean).
 */
@layer dropbits-hero {
  .hero-jumbo {
    background: color-mix(
      in srgb,
      var(--color-primary, #334) 18%,
      var(--color-bg, #f4f4f2)
    );
    animation: db-hero-in 0.55s ease-out both;
  }

  @keyframes db-hero-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-jumbo {
      animation: none;
    }
  }

  /* Pattern B — shared mechanism, site/widget turns it on */
  .hero-jumbo[data-hero-scrim]::after,
  html[data-hero-scrim] .hero-jumbo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--color-primary, #334) 72%, transparent) 0%,
      color-mix(in srgb, var(--color-primary, #334) 28%, transparent) 42%,
      transparent 78%
    );
  }

  .hero-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 clamp(1rem, 4vw, 1.75rem) 1.75rem;
    max-width: calc(var(--max-width, 42rem) + 8rem);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }

  .hero-title-box {
    max-width: min(34rem, 100%);
    padding: 0.85rem 0;
  }

  .hero-title {
    margin: 0;
    font-size: clamp(1.4rem, 4vw, 2.35rem);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
  }

  .hero-subtitle {
    margin: 0.4rem 0 0;
    font-family: var(--font-ui, inherit);
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    color: color-mix(in srgb, #fff 88%, var(--color-accent, #89a));
    text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
  }

  .hero-jumbo--bottom-left .hero-inner {
    align-items: flex-end;
    justify-content: flex-start;
  }
  .hero-jumbo--bottom-center .hero-inner {
    align-items: flex-end;
    justify-content: center;
  }
  .hero-jumbo--bottom-right .hero-inner {
    align-items: flex-end;
    justify-content: flex-end;
  }
  .hero-jumbo--center-left .hero-inner {
    align-items: center;
    justify-content: flex-start;
  }
  .hero-jumbo--center .hero-inner {
    align-items: center;
    justify-content: center;
  }
  .hero-jumbo--center-right .hero-inner {
    align-items: center;
    justify-content: flex-end;
  }
  .hero-jumbo--top-left .hero-inner {
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 1.5rem;
  }
  .hero-jumbo--top-center .hero-inner {
    align-items: flex-start;
    justify-content: center;
    padding-top: 1.5rem;
  }
  .hero-jumbo--top-right .hero-inner {
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 1.5rem;
  }

  @media (max-width: 480px) {
    .hero-jumbo .hero-subtitle {
      display: none;
    }
    .hero-jumbo:not([data-aspect="auto"]):not([data-aspect="tall"]) {
      max-height: var(--hero-max-height-narrow, min(42vh, 360px));
    }
  }
}