/* ==========================================================================
   Section: Closing CTA
   Full-bleed photographic call-to-action with white headline + orange pill.
   ========================================================================== */

.section-closing-cta {
  --cc-overlay-alpha: 0.45;
  --cc-space-y: 110px;
  --cc-headline-max: 720px;
  --cc-min-height: 686px;

  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  min-height: var(--cc-min-height);
  overflow: hidden;
  color: var(--color-white);
  background-color: var(--color-black);
  background-image: var(--cc-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   1. Dark overlay (only when an image is set)
   -------------------------------------------------------------------------- */

.cc-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, var(--cc-overlay-alpha));
  pointer-events: none;
}

.section-closing-cta:not(.cc-has-image) .cc-overlay {
  display: none;
}

/* --------------------------------------------------------------------------
   2. Layout
   -------------------------------------------------------------------------- */

.cc-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding-top: var(--cc-space-y);
  margin-top: var(--cc-container-offset, 20rem);
}

.cc-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
}

.section-closing-cta.cc-align-center .cc-inner {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* --------------------------------------------------------------------------
   3. Headline
   -------------------------------------------------------------------------- */

.cc-headline {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--cc-headline-max);
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

@media screen and (min-width: 1024px) {
  .cc-headline {
    font-size: clamp(34px, 3.2vw + 10px, 56px);
  }
}

/* --------------------------------------------------------------------------
   4. CTA button (orange pill)
   -------------------------------------------------------------------------- */

.cc-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;
  border: none;
  border-radius: 999px;
  background-color: var(--color-cta);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-btn, 14px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-fast, 0.18s) ease,
    transform var(--duration-fast, 0.18s) ease;
}

.cc-button:hover,
.cc-button:focus-visible {
  background-color: var(--color-cta-hover);
  color: var(--color-white);
  outline: none;
  transform: translateY(-1px);
}

.cc-button--static {
  cursor: default;
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1023px) {
  .section-closing-cta {
    --cc-space-y: 80px;
    --cc-min-height: 520px;
    --cc-container-offset: 10rem;
  }

  .cc-button {
    height: 52px;
    padding: 0 28px;
  }
}

@media screen and (max-width: 767px) {
  .section-closing-cta {
    --cc-space-y: 48px;
    --cc-min-height: 380px;
    --cc-container-offset: 4rem;
  }

  .cc-container {
    padding-bottom: var(--cc-space-y);
    justify-content: flex-end;
  }

  .cc-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .section-closing-cta.cc-align-center .cc-inner {
    align-items: center;
  }

  .cc-headline {
    max-width: 100%;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.015em;
  }

  .cc-button {
    height: 48px;
    padding: 0 24px;
    font-size: 13px;
  }
}

@media screen and (max-width: 479px) {
  .section-closing-cta {
    --cc-space-y: 36px;
    --cc-min-height: 340px;
    --cc-container-offset: 2rem;
  }

  .cc-inner {
    gap: 18px;
  }

  .cc-headline {
    font-size: 26px;
  }

  .cc-button {
    width: 100%;
    height: 46px;
  }

  .section-closing-cta.cc-align-center .cc-button {
    width: auto;
  }
}