/* ==========================================================================
   CTA banner – image sizing + compact layout
   Loaded after style.min.css from the Master template.
   ========================================================================== */

/* SCOPE: only the standard in-page image CTA banner (e.g. "Support mental
   health across your organisation", "Explore Stress Control at Home").
   Header/hero banners, no-image, tight, bordered, image-underlay and
   special #id banners are deliberately excluded and are unaffected.

   1. Never distort a CTA illustration.
      The base rule sets width:100% + height:auto + max-height, so when the
      max-height kicks in the width stays at 100% and the image is stretched.
      object-fit: contain keeps the real aspect ratio inside that box.
      (SVG illustrations already behave like this, so they look the same.) */
section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__image img {
  object-fit: contain;
}

/* 2. Compact layout */
section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) {
  min-height: 0;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

/* offset-bottom is designed for artwork that hangs below the panel.
   A contained illustration doesn't, so it only adds a dead band. */
section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img)::before {
  height: 100%;
}
section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__text {
  padding-bottom: 0;
}

section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__text > h2 {
  padding-bottom: 1rem;
}
section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__text > p {
  padding-bottom: 1rem;
}
section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__text > p:last-of-type {
  padding-bottom: 1.5rem;
}

/* Mobile: copy first, smaller centred illustration underneath */
section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__inner {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}
section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__text {
  flex: 0 0 auto;
  order: 1;
}
section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__image {
  order: 2;
  flex: 0 0 auto;
  width: 100%;
  max-width: 300px;
  margin: 1.5rem auto 0;
  padding: 0 !important;
}
section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__image figure {
  width: 100%;
  margin: 0;
}
section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  aspect-ratio: auto;
}
section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .btn {
  min-height: 48px;
}

/* Tablet and up: side by side, text ~50%, image ~40%, gap between */
@media (min-width: 900px) {
  section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
  section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  section .cta-banner.alternate:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__inner {
    flex-direction: row-reverse;
  }
  section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__text {
    order: 0;
    flex: 0 1 52%;
    padding-left: 0;
    padding-right: 0;
  }
  section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__image {
    order: 0;
    flex: 0 1 44%;
    max-width: 480px;
    margin: 0;
  }
  section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) .cta-banner__image img {
    max-height: 380px;
  }
}

@media (min-width: 1366px) {
  section .cta-banner:not(.tight):not(.bordered):not(.image-underlay):not(.no-image):not([id]):has(.cta-banner__image img) {
    padding: 2.5rem 4.5rem;
  }
}

/* 3. Bordered CTA banners (e.g. "Gift a Membership" on How it works):
      only stop the illustration being stretched. Layout unchanged. */
section .cta-banner.bordered .cta-banner__image img {
  object-fit: contain;
}

/* 4. Tight CTA banners with an image (e.g. course session pages):
      only stop the illustration being stretched. Layout unchanged. */
section .cta-banner.tight .cta-banner__image img {
  object-fit: contain;
}

/* 5. Organisation logo strip (About Us): keep each logo's real
      proportions when the strip narrows on mobile. */
.logo-list__item img {
  object-fit: contain;
}