/* ==========================================================================
   SECTION HEADER (label + title + description + optional CTA)
   Width is set with a modifier: .section-header--span-5 / -6 / -8
   (number of grid columns on desktop).
   ========================================================================== */

.section-header {
  grid-column: 1 / span 8;
}

.section-header--span-5 { grid-column: 1 / span 5; }
.section-header--span-6 { grid-column: 1 / span 6; }
.section-header--span-8 { grid-column: 1 / span 8; }

.section-header:has(+ *) {
  margin-bottom: var(--space-8);
}

.section-header > .label {
  margin-bottom: var(--space-5);
}

.section-header__title + .section-header__desc {
  margin-top: var(--space-5);
}

.section-header > * + .section-header__cta {
  margin-top: var(--space-6);
}

.section-header__desc {
  max-width: calc(var(--grid-column-width) * 5 + var(--grid-column-gap) * 4);
  color: var(--muted);
}

.section-header__desc.type-body-headline {
  max-width: calc(var(--grid-column-width) * 7 + var(--grid-column-gap) * 6);
}

/* Tablet: headers get a few more columns so long titles keep their rhythm */
@media (max-width: 1023px) {
  .section-header--span-5 { grid-column: 1 / span 8; }
  .section-header--span-6 { grid-column: 1 / span 9; }
  .section-header--span-8 { grid-column: 1 / span 11; }

  .section-header__desc,
  .section-header__desc.type-body-headline {
    max-width: calc(var(--grid-column-width) * 9 + var(--grid-column-gap) * 8);
  }
}

@media (max-width: 767px) {
  .section-header,
  .section-header[class*="--span-"] {
    grid-column: 1 / -1;
  }

  .section-header:has(+ *) {
    margin-bottom: var(--space-7);
  }

  .section-header > .label {
    margin-bottom: var(--space-4);
  }

  .section-header__title + .section-header__desc {
    margin-top: var(--space-4);
  }

  .section-header__desc,
  .section-header__desc.type-body-headline {
    max-width: 100%;
  }

  .section-header > * + .section-header__cta {
    margin-top: var(--space-5);
  }
}

/* ==========================================================================
   HEADING REVEAL (js/modules/reveal.js splits text into lines)
   data-reveal="slide" → lines slide up from a mask (hero title)
   data-reveal="fade"  → lines fade in from below (section titles)
   ========================================================================== */
.js [data-reveal]:not(.is-split) {
  visibility: hidden;
  /* Failsafe: show the text anyway if the script doesn't run */
  animation: reveal-failsafe 0s linear 3s forwards;
}

@keyframes reveal-failsafe {
  to { visibility: visible; }
}

.reveal-line-wrap {
  display: block;
  width: fit-content;
  /* Extra room above the mask so accents on capitals (Á, É, Ñ…) are not
     clipped; the negative margin keeps the original line spacing. */
  margin-top: -.2em;
  padding-top: .2em;
  padding-bottom: .08em;
  margin-bottom: -.08em;
  padding-right: .12em;
  overflow: hidden;
}

.reveal-line {
  display: block;
  white-space: nowrap;
  transition: transform .7s var(--ease-out-quart), opacity .7s var(--ease-out-quart);
  transition-delay: calc(var(--line-index, 0) * 70ms);
}

[data-reveal="slide"]:not(.is-revealed) .reveal-line {
  transform: translateY(105%);
}

[data-reveal="fade"]:not(.is-revealed) .reveal-line {
  opacity: 0;
  transform: translateY(40%);
}

[data-reveal].is-resetting .reveal-line {
  transition: none;
}