/* ============================================
   gs-wgs-section — generic section shell with bg modifiers.
   Provides consistent padding, centered intro (title + lede),
   and three background variants:
     --muted   pale-blue alt section
     --white   neutral white
     --dark    dark navy + waves illustration

   Plus the `.gs-cta--muted` modifier override of the base
   .gs-cta (defined in sections/cta.css) — used as a soft
   closing CTA variant on inner pages.
   ============================================ */

.gs-wgs-section {
  padding: 5rem 1.5rem;
}

/* Tight variant — minimal top/bottom padding. Used for sections
   that hold a self-contained card (e.g. the Learn-page Table of
   Contents) and shouldn't stack a full 5rem of empty space above
   or below the card. */
.gs-wgs-section--tight {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.gs-wgs-section--muted {
  background: var(--color-bg-muted);
  color: var(--color-fg);
}

/* Deeper-tinted muted — used when a section needs to read as
   distinct from neighboring `--muted` bands (e.g. the Industrial
   IoT "Revolutionize" section sitting next to "Main Challenges"). */
.gs-wgs-section--muted-deep {
  background: var(--color-bg-muted-deep);
  color: var(--color-fg);
}

.gs-wgs-section--white {
  background: var(--color-bg);
  color: var(--color-fg);
}

.gs-wgs-section--dark {
  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;
  color: #fff;
}

.gs-wgs-section__inner {
  max-width: var(--content-frame);
  margin: 0 auto;
}

/* Section intro — title (h2) + optional lede. Centered, with
   max-width for the lede so 2–3-line wraps don't get too wide. */
/* Default: no top margin. The section's own padding (5rem)
   already provides enough space above the title.
   The exception is sections where the fixed header *overlaps*
   the content (i.e. heroes on dark bgs). Those add their own
   top margin via the hero modifier — see `.gs-learn-hero` in
   learn-content.css and `.gs-uc-hero--centered` in
   uc-modernization.css. Don't bake hero-specific spacing into
   this base rule; it bleeds into every other section. */
.gs-wgs-section__intro {
  text-align: center;
  max-width: var(--content-header);
  margin: 0 auto 2.5rem;
}

/* Legacy flush-top modifier — no longer needed since the default
   is now flush-top. Kept as a no-op so any HTML still using the
   class doesn't break. Safe to remove on cleanup pass. */
.gs-wgs-section__intro--flush-top {
  margin-top: 0;
}

/* Title-only variant — used when the lede is moved into the body
   row (e.g. Industrial IoT "Revolutionize" section). Without the
   lede taking up vertical space, the gap to the row feels tight,
   so bump the bottom margin to keep breathing room. */
.gs-wgs-section__intro--title-only {
  margin-bottom: 5rem;
}

/* Wide-lede variant — for longer ledes that read better as 2 lines
   instead of 3 (e.g. Industrial IoT "Key IIoT Platform Benefits").
   Widens the lede cap and adds a bit more space below the intro. */
.gs-wgs-section__intro--wide-lede {
  margin-bottom: 4.5rem;
}

.gs-wgs-section__intro--wide-lede .gs-wgs-section__lede {
  max-width: 52rem;
}

/* Narrow variant — for a short one-line title with no lede (or a
   short one), where the default 840px column leaves too much
   unused width on either side and the block reads as sparse. */
.gs-wgs-section__intro--narrow {
  max-width: var(--content-narrow);
  margin: 0 auto 3.5rem;
}

.gs-wgs-section__title {
  font-size: var(--text-h2);
  margin: 0 0 1rem;
  text-wrap: balance;
}

/* Sub-style variant — for sections where the headline functions
   more as a tagline than a hero title (e.g. Industrial IoT customer
   stats: "With Giant Swarm, our customers have been in the fast
   lane..."). Drops one step down to h3 size so it doesn't
   overpower the visual it sits above. */
.gs-wgs-section__title--sub {
  font-size: var(--text-h3);
}

.gs-wgs-section--dark .gs-wgs-section__title {
  color: #fff;
}

.gs-wgs-section__lede {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0 auto;
  /* Wider cap so longer ledes don't wrap to 4+ lines. ~52rem
     (832px) gives roughly 90 chars/line at 16px — typical
     section ledes (200–280 chars) fit in 2–3 lines. */
  max-width: 52rem;
  text-wrap: balance;
}

/* Inline links inside the lede — same recipe as the rest of the
   site's body prose: inherit text color, thin underline, coral
   on hover. Works on both light and dark variants because
   `color: inherit` picks up the parent's text color. */
.gs-wgs-section__lede a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.gs-wgs-section__lede a:hover {
  color: var(--color-brand-accent);
}

.gs-wgs-section--dark .gs-wgs-section__lede {
  color: rgba(255, 255, 255, 0.85);
}

/* Centered CTA row below the lede — flex row, wraps to a stack on
   narrow viewports. Same shape used ad-hoc across uc-modernization
   heroes; centralised here so any centered `.gs-wgs-section__intro`
   can place buttons under its lede without one-off CSS. */
.gs-wgs-section__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ─── Closing CTA muted modifier ─────────────
   Override of the base .gs-cta (sections/cta.css) — soft muted
   closing band instead of the homepage's dark navy. */
.gs-cta.gs-cta--muted {
  background-color: var(--color-bg-muted);
  background-image: none;
  color: var(--color-fg);
}

.gs-cta.gs-cta--muted .gs-cta__title {
  color: var(--color-fg);
}

.gs-cta.gs-cta--muted .gs-cta__description {
  color: var(--color-fg-body);
}

@media (max-width: 767px) {
  .gs-wgs-section { padding: 3rem 1.5rem; }
  .gs-wgs-section__intro { margin-bottom: 2.5rem; }
}