/* path: wp-content/themes/bedrebyttede/assets/css/components/hero.css */
@layer components {

  /* ============ HERO ============ */
  .bb-surface-hero {
    background-color: var(--surface-2);
    background-image: var(--bb-hero, none);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: var(--hero-h, var(--bb-hero-h, 220px));
    min-height: 220px;
    border-radius: var(--radius-2);
    position: relative;
    transition:
      border-radius var(--dur-1) var(--ease-in-out, ease-in-out);
  }

  .bb-surface-hero.is-expanded {
    flex-shrink: 0;
    min-height: 320px;
    background: var(--surface);
    border-radius: 0;
    transition:
      height var(--dur-1) var(--ease-in-out, ease-in-out),
      border-radius var(--dur-1) var(--ease-in-out, ease-in-out),
      background var(--dur-1) var(--ease-in-out, ease-in-out);
  }

  /* Centered and contained images in expanded view */
  .bb-surface-hero.is-expanded>img,
  .bb-surface-hero.is-expanded>video,
  .bb-surface-hero.is-expanded .bb-carousel__item img {
    object-fit: contain;
    background: transparent;
  }

  .bb-surface-hero>img,
  .bb-surface-hero>video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: object-fit var(--dur-2) var(--ease-in-out);
    border-radius: var(--radius-2);
  }

  /* Letterbox contain only in expanded — collapsed always covers */
  .bb-surface-hero.is-expanded.bb-hero--letterbox>img {
    object-fit: contain;
    background: #000;
    border-radius: var(--radius-2);
  }

  /* Size tokens */
  .bb-surface-hero.bb-hero--sm {
    --hero-h: 160px;
  }

  .bb-surface-hero.bb-hero--md {
    --hero-h: 220px;
  }

  /* default */
  .bb-surface-hero.bb-hero--lg {
    --hero-h: 320px;
  }

  .bb-surface-hero.bb-hero--xl {
    --hero-h: clamp(320px, 42vh, 520px);
  }

  @media (min-width: 48rem) {
    .bb-surface-hero.bb-hero--sm {
      --hero-h: 240px;
    }

    .bb-surface-hero.bb-hero--md {
      --hero-h: 320px;
    }

    .bb-surface-hero.bb-hero--lg {
      --hero-h: 380px;
    }

    .bb-surface-hero.bb-hero--xl {
      --hero-h: clamp(420px, 52vh, 640px);
    }
  }

  /* Letterbox variant (top & bottom bars) */
  .bb-surface-hero--letterbox::before,
  .bb-surface-hero--letterbox::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-in-out, ease-in-out);
  }

  /* Top bar */
  .bb-surface-hero--letterbox::before {
    top: 0;
    height: clamp(8px, 5vh, 24px);
    background: var(--surface-veil);
    opacity: 0;
    /* styling choice */
  }

  /* Bottom bar */
  .bb-surface-hero--letterbox::after {
    bottom: 0;
    height: clamp(24px, 10vh, 96px);
    background: var(--surface-letterbox-grad);
    opacity: 1;
    border-radius: var(--card-radius);
  }

  /* Fade the bars when the hero is expanded */
  .bb-surface-hero.is-expanded.bb-surface-hero--letterbox::before,
  .bb-surface-hero.is-expanded.bb-surface-hero--letterbox::after {
    opacity: 0;
  }

  /* Generic hero block */
  .bb-hero {
    position: relative;
    /* contain: paint; REMOVED */
  }

  @supports (overflow: clip) {
    .bb-hero {
      overflow: clip;
    }
  }

  .bb-hero img,
  .bb-hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .bb-hero.bb-hero--letterbox::before,
  .bb-hero.bb-hero--letterbox::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-in-out, ease-in-out);
  }

  .bb-hero.bb-hero--letterbox::before {
    top: 0;
    height: clamp(8px, 5vh, 24px);
    background: var(--surface-veil);
    opacity: .9;
  }

  .bb-hero.bb-hero--letterbox::after {
    bottom: 0;
    height: clamp(24px, 10vh, 96px);
    background: var(--surface-letterbox-grad);
    opacity: 1;
    border-radius: var(--card-radius);
  }

  .bb-hero.is-expanded.bb-hero--letterbox::before,
  .bb-hero.is-expanded.bb-hero--letterbox::after {
    opacity: 0;
  }

  /* Fallback hero texture */
  .bb-surface-hero.bb-image--fallback {
    background-image: url("/wp-content/themes/bedrebyttede/assets/brand/mark.webp");
    background-repeat: repeat;
    background-size: 44%;
    background-position: center;
    filter: grayscale(1) opacity(.6);
    background-color: var(--surface-2);
  }
}