// ==========================================================================
// b-image-banner — Single hero image banner
// ==========================================================================

.b-image-banner {
  margin: 0; // Reset <figure> default margin

  // -------------------------
  // Media wrapper
  // -------------------------
  &__media {
    position: relative;
    overflow: hidden;
    line-height: 0; // Collapse inline whitespace around <picture>

    picture {
      display: block;
      width: 100%;
    }
  }

  // -------------------------
  // Image
  // -------------------------
  &__image {
    display: block;
    width: 100%;
    height: auto;
  }

  .c-copyright--overlay {
    display: none;
  }

  // -------------------------
  // Full-width variant
  // — image spans the full viewport, no container constraint
  // -------------------------
  &--full-width {
    .b-image-banner__image {
      width: 100%;
    }
  }

  // -------------------------
  // Aspect ratio variants
  // Applied on the media wrapper; image fills it with object-fit: cover
  // -------------------------
  &--16x9,
  &--4x3,
  &--21x9,
  &--3x1 {
    .b-image-banner__media {
      picture {
        height: 100%;
      }
    }

    .b-image-banner__image {
      height: 100%;
      object-fit: cover;
    }
  }

  &--16x9 .b-image-banner__media {
    aspect-ratio: 16 / 9;
  }
  &--4x3 .b-image-banner__media {
    aspect-ratio: 4 / 3;
  }
  &--21x9 .b-image-banner__media {
    aspect-ratio: 21 / 9;
  }
  &--3x1 .b-image-banner__media {
    aspect-ratio: 3 / 1;
  }

  // -------------------------
  // Caption: always visible (below image, normal flow)
  // -------------------------
  &--caption-always {
    .c-copyright--overlay {
      display: block;
    }
  }

  &--caption-hover {
    &:hover .c-copyright--overlay,
    &:focus-within .c-copyright--overlay {
      display: block;
    }
  }
}