/* ============================================
   gs-cta — Section #9: final CTA
   Dark navy ground (--color-bg-dark) — bg image will land here
   later. White headline + description, white pill button as the
   primary action, secondary "talk to an expert" link below.
   ============================================ */

.gs-cta {
  /* Same dark-blue waves bg as the hero — bookends the page. */
  background-color: var(--color-bg-dark);
  background-image: url('https://www.giantswarm.io/hubfs/Illustrations/gs23-dark-blue-waves-bg.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 5rem 1.5rem;
  color: #ffffff;
  text-align: center;
}

.gs-cta__inner {
  max-width: var(--content-header);  /* 840px — narrow column for focus */
  margin: 0 auto;
}

.gs-cta__title {
  font-size: var(--text-h2);
  color: #ffffff;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.gs-cta__description {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 2rem;
  max-width: 600px;          /* match the live site's description column */
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

/* .gs-cta__button — no per-context overrides. Inherits padding
   (0.85rem 1.75rem) AND font-weight (medium) from base .gs-btn.
   Bold reads as too chunky on the pill shape; medium is the
   universal CTA weight across the site. */

.gs-cta__secondary {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.gs-cta__link {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.gs-cta__link:hover {
  color: var(--color-brand-accent);
}

/* ─── Horizontal variant ───────────────────────────────────
   Title + description on the left, button on the right. Used on
   pages where the closing CTA should feel like a thin band
   (e.g. /modernization-and-scaling/) instead of the
   stacked-and-centered homepage default.

   Slimmer vertical padding than the base .gs-cta (5rem) — the
   horizontal strip reads as a wrap-up band, not a hero-weight
   "bookend the page" moment. Locked in here so we stop overriding
   it page-by-page (partners-cta, podcasts-cta, etc. all landed
   on 3rem). The stacked .gs-cta keeps its bigger padding for the
   pages where the closing CTA IS the heavy register. */
.gs-cta--horizontal {
  text-align: left;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.gs-cta--horizontal .gs-cta__inner {
  max-width: var(--content-frame);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}

.gs-cta--horizontal .gs-cta__text {
  flex: 1;
}

.gs-cta--horizontal .gs-cta__title {
  margin-bottom: 0.5rem;
}

.gs-cta--horizontal .gs-cta__description {
  margin: 0;
  max-width: 640px;
  margin-left: 0;
  margin-right: 0;
}

.gs-cta--horizontal .gs-cta__action {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .gs-cta { padding: 3rem 1.5rem; }
  .gs-cta__description { margin-bottom: 1.5rem; }

  /* Horizontal collapses to stacked on phones — band layout is
     desktop/tablet only. */
  .gs-cta--horizontal {
    text-align: center;
  }
  .gs-cta--horizontal .gs-cta__inner {
    flex-direction: column;
    gap: 1.5rem;
  }
  .gs-cta--horizontal .gs-cta__description {
    margin-left: auto;
    margin-right: auto;
  }
}