.d35-section-cta__inner {
  /* Stay within the site content width and centre, like the other sections. */
  width: min(100%, var(--d35-container));
  margin-inline: auto;
  padding-inline: var(--d35-gap);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

/* Dark variant: the full-bleed dark band comes from the shared
   .d35-section-dark utility, and the nested SectionHeader carries its own dark
   text treatment via --variant-dark — so nothing dark-specific is needed here. */

.d35-section-cta__body {
  min-width: 0;
}

/* The nested SectionHeader ships with its own card chrome and centered
   actions in stacked layout; strip both so the CTA reads as one section with
   flush, left-aligned content and buttons. */
.d35-section-cta__body .d35-section-header {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.d35-section-cta__body .d35-section-header__actions {
  justify-content: flex-start;
}

.d35-section-cta__media {
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--d35-radius, 0);
  background: var(--d35-color-light, #e9edf2);
}

.d35-section-cta__media--2-1 {
  aspect-ratio: 2 / 1;
}

.d35-section-cta__media--4-3 {
  aspect-ratio: 4 / 3;
}

.d35-section-cta__media--3-2 {
  aspect-ratio: 3 / 2;
}

.d35-section-cta__media--1-1 {
  aspect-ratio: 1 / 1;
}

.d35-section-cta__image,
.d35-section-cta__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.d35-section-cta--media-left .d35-section-cta__media {
  order: -1;
}

/* Overlay layout: the image + dark scrim live inside the constrained, rounded
   inner box (the surrounding section stays on the page background), with the
   content layered on top. The nested header uses its dark variant for readable
   light text. */
.d35-section-cta--layout-overlay > .d35-section-cta__inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The box carries its own inner padding, so subtract a side gutter from the
     width to keep it off the viewport edges on narrow screens (the base
     padding-inline gutter now sits inside the box). */
  width: min(calc(100% - 2 * var(--d35-gap)), var(--d35-container));
  border-radius: var(--d35-radius);
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(18rem, 26vw, 24rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  align-content: center;
}

.d35-section-cta--layout-overlay .d35-section-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--d35-color-dark);
}

.d35-section-cta--layout-overlay .d35-section-cta__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.64) 55%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

.d35-section-cta--layout-overlay .d35-section-cta__body {
  position: relative;
  z-index: 2;
}

.d35-section-cta--layout-overlay .d35-section-header {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (max-width: 782px) {
  .d35-section-cta__inner {
    grid-template-columns: 1fr;
  }

  .d35-section-cta--media-left .d35-section-cta__media {
    order: 0;
  }
}