// =============================================================================
// IMAGE-TEXT-BANNER — merged from full-page-image-with-text + text-inside-image
// Two variants: --full-bleed (viewport-wide) and --contained (beige + card).
// Both share: bg image + gradient overlay + bottom-anchored content.
// Mobile-first: base = 375px, desktop via respond-to('desktop')
// =============================================================================

@import '../mixins';

// ── Shared inner elements ────────────────────────────────────────────────────

.image-text-banner__bg {
  @include overlay-bg;
  // Subtle zoom on hover, clipped by the banner's own overflow:hidden
  // (@include image-overlay-base, applied to both variants' wrapping
  // element below). Transform-only, same technique and easing as
  // tab-component-2's card image hover — scale(1.05) rather than a bigger
  // jump since this banner is much larger on screen than a grid card.
  transition: transform 0.3s ease;
}

// Hovered on the two different wrapping elements each variant actually
// uses (--full-bleed has no separate card, --contained wraps in
// __card) — both already carry overflow:hidden via image-overlay-base.
.image-text-banner--full-bleed:hover .image-text-banner__bg,
.image-text-banner__card:hover .image-text-banner__bg {
  transform: scale(1.05);
}

.image-text-banner__overlay {
  @include overlay-gradient(22.035%, 112.89%);
}

.image-text-banner__content {
  @include overlay-content;
  padding: 0 16px 56px;
  gap: 32px;
}

.image-text-banner__text-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.image-text-banner__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: var(--lh-xl);
  color: var(--color-white);
  margin: 0;
}

.image-text-banner__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: 400;
  line-height: var(--lh-display-sm);
  letter-spacing: 0;
  color: var(--color-white);
  margin: 0;
}

.image-text-banner__body {
  @include body-text(var(--color-white));
  margin: 0;
}

// =============================================================================
// VARIANT: --full-bleed — viewport-wide, no outer padding, no border-radius
// =============================================================================

.image-text-banner--full-bleed {
  @include image-overlay-base;
  width: 100%;
  height: 620px;

  @include respond-to('desktop') {
    height: 706px;

    .image-text-banner__overlay {
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 42.075%,
        #000 112.89%
      );
    }

    .image-text-banner__content {
      padding: 0 120px 80px;
    }

    .image-text-banner__title {
      font-size: var(--fs-display-lg);
      line-height: var(--lh-display-lg);
      letter-spacing: -0.96px;
      max-width: 718px;
    }

    .image-text-banner__body {
      max-width: 776px;
    }
  }
}

// =============================================================================
// VARIANT: --contained — beige section outer, rounded card inner
// =============================================================================

.image-text-banner--contained {
  // Section rhythm: 56px mobile+tablet, 80px laptop+ (--section-space, tokens.scss).
  // Kept separate from the respond-to('desktop') block below, which is all
  // inner content/typography sizing tied to the 1440px layout breakpoint.
  padding-block: var(--section-space);   // bg via .bg-pampas on <section>; horizontal inset via .container

  // width:100% here fills whatever width this element's own TYPO3 ce-frame
  // .container wrapper provides at the current breakpoint (1200px normally,
  // 1800px at the xxxl/wide tier) — no max-width of its own. An explicit
  // max-width:var(--container-max) (1200px) used to sit here too, which
  // redundantly re-capped the card back to 1200px even once .container had
  // already widened to 1800px at ≥1920px viewports, leaving unused space to
  // its right instead of the card spanning the full container width.
  .image-text-banner__card {
    @include image-overlay-base;
    width: 100%;
    height: 706px;
    border-radius: var(--radius-xs);
  }

  .image-text-banner__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 42.075%,
      #000 112.89%
    );
  }

  .image-text-banner__content {
    gap: 24px;
  }

  .image-text-banner__text-group {
    gap: 8px;
  }

  @include respond-to('desktop') {
    .image-text-banner__content {
      padding: 0 60px 60px;
    }

    .image-text-banner__text-group {
      gap: 16px;
    }

    .image-text-banner__title {
      font-size: var(--fs-display-lg);
      line-height: var(--lh-display-lg);
      letter-spacing: -0.96px;
      max-width: 718px;
    }

  }
}