/*
 * InspireSphere Theme — CTA Section (Call to Action)
 *
 * Background: blue (#034083), full-width.
 *
 * Desktop: two-column flex, gap 88px.
 *   Left col: flex-1 — h2 (40px Bold white) + p (16px Regular white) + white outline btn.
 *   Right col: 384px wide — program photo.
 *
 * Decorative elements (all aria-hidden, pointer-events none):
 *   - .cta__bg-blob    : SVG shape, bottom-left, partially off-screen.
 *   - .cta__bg-ellipse : SVG ellipse, top-right, partially off-screen.
 *   - .cta__diamond    : 4 white 8%-opacity rotated squares, left edge.
 *
 * Mobile (≤ 768px): single column, image below content, gap 72px.
 *   h2 → 24px Bold, content left-aligned.
 *
 * Padding-inline NOT set here — .container inside handles it.
 */

/* ── Section ─────────────────────────────────────────────────────── */
.section--cta {
  background: var(--color-blue);
  position: relative;
  overflow: hidden;
  padding-block: 66px;
}

/* ── Decorative background layer ─────────────────────────────────── */
.cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/*
 * Blob: blurred #0B63E5 glow — bottom-left corner, extends below section.
 * SVG uses a Gaussian blur filter; no extra opacity needed.
 */
.cta__bg-blob {
  position: absolute;
  top: 252px;
  left: -21px;
  width: 834px;
  height: 840px;
}

/*
 * Ellipse: two-ring shape (filled inner + stroke outer).
 * SVG has fill-opacity: 0.14 + stroke-opacity: 0.05 already baked in.
 * Desktop: top-right (overflows top edge).
 * Mobile: bottom-right (overflows bottom-right — see media query).
 */
.cta__bg-ellipse {
  position: absolute;
  top: -417px;
  right: -120px;
  width: 720px;
  height: 725px;
}

/* ── Diamond shapes (4 rotated squares, left edge) ───────────────── */
.cta__diamond {
  position: absolute;
  width: 86px;
  height: 86px;
  background: var(--color-white);
  border-radius: 14px;
  opacity: 0.08;
  transform: rotate(45.2deg) skewX(0.4deg);
}

.cta__diamond--1 {
  left: 21px;
  top: -60px;
}

.cta__diamond--2 {
  left: 65px;
  top: 40px;
}

.cta__diamond--3 {
  left: -7px;
  top: 112px;
}

.cta__diamond--4 {
  left: -51px;
  top: 12px;
}

/* ── Inner layout ─────────────────────────────────────────────────── */
.cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 88px;
}

/* ── Left: text content ──────────────────────────────────────────── */
.cta__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

/* h2: 40px Bold white — Figma uses 40px (h1 token size) for CTA heading */
.cta__heading {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: 1.2;
}

.cta__desc {
  font-size: var(--font-size-body-md);
  color: var(--color-white);
  line-height: 1.6;
}

/*
 * CTA button: white bg, light-grey border, black text.
 * Uses global .btn + .btn--outline — no extra overrides needed here.
 */

/* ── Right: photo ────────────────────────────────────────────────── */
.cta__image {
  flex-shrink: 0;
  width: 384px;
  /* border-radius: var(--radius-lg); */
  overflow: hidden;
}

.cta__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ── Mobile (≤ 768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section--cta {
    padding-block: 48px;
  }

  .cta__inner {
    flex-direction: column;
    gap: 72px;
    align-items: flex-start;
  }

  /* h2 → 24px Bold on mobile */
  .cta__heading {
    font-size: var(--font-size-h2-mobile);
    font-weight: var(--font-weight-bold);
  }

  .cta__content {
    gap: 40px;
  }

  .cta__image {
    width: 100%;
  }

  /* Blob shifts further off-screen bottom-left on mobile */
  .cta__bg-blob {
    left: -341px;
    top: 512px;
  }

  /* Ellipse moves from top-right (desktop) → bottom-right (mobile) */
  .cta__bg-ellipse {
    top: 373px;
    right: -204px;
  }
}