/* ┌──────────────────────────────────────────────────────────────┐
   │  BRAND-CONTACT-HERO — module.css                             │
   │  Classes: cth-*                                               │
   │                                                               │
   │  Compacte contact-hero met blauw-paarse achtergrond.         │
   │  Titel + subtekst gecentreerd, met overlap-vlak onderaan     │
   │  zodat de pagina-achtergrond met ronde bovenhoeken over de   │
   │  hero heen valt (Moneybird-stijl).                           │
   │                                                               │
   │  1. Buitenwrapper + sectie + achtergrond + overlap-vlak      │
   │  2. Content wrapper                                           │
   │  3. Heading + body typografie                                 │
   │  4. Responsive                                                │
   └──────────────────────────────────────────────────────────────┘ */

.cth-4cee,
.cth-4cee * {
  box-sizing: border-box;
}



/* ══════════════════════════════════════════════
   1. BUITENWRAPPER + SECTIE + ACHTERGROND
   ══════════════════════════════════════════════ */

.cth-outer {
  width: 100%;
  background: #fafafa;
}

.cth-4cee {
  position: relative;
  width: 100%;

  min-height: clamp(440px, 50vh, 580px);

  /* overflow: hidden zorgt dat de shadow van het overlap-vlak
     alleen NAAR BOVEN zichtbaar is (binnen de hero) en niet
     naar beneden op de pagina eronder wordt geprojecteerd. */
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Overlap-vlak — valt met ronde bovenhoeken over de onderkant
   van de hero heen. Zelfde kleur als pagina-achtergrond (#fafafa)
   zodat het visueel doorloopt in de content eronder.

   Shadow projecteert naar boven (Y: -6) op de blauwe hero,
   wat diepte creëert. De shadow naar beneden wordt geknipt door
   overflow: hidden op de hero. */
.cth-4cee::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: #fafafa;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  z-index: 2;
  pointer-events: none;

  box-shadow: 0 -6px 25px 0 rgba(0, 0, 0, 0.25);
}

  /* Drop shadow uit Figma:
     - X: 0
     - Y: -6 (naar boven schijnend)
     - Blur: 25
     - Spread: 0
     - Color: #000000 op 25% opacity */
  box-shadow: 0 -6px 25px 0 rgba(0, 0, 0, 0.25);
}

.cth-4cee,
.cth-4cee .dnd-section,
.cth-4cee > .row-fluid-wrapper {
  box-shadow: none !important;
}

.cth-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cth-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cth-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(30, 25, 150, 0.2) 0%,
    rgba(80, 40, 180, 0.1) 100%
  );
}



/* ══════════════════════════════════════════════
   2. CONTENT WRAPPER

   Content is verticaal gecentreerd, maar met asymmetrische
   padding om te compenseren voor:
   - navigatiebalk boven de hero (~90px)
   - overlap-vlak onder de hero (~40px)

   Zo staat de tekst optisch in het midden van het ZICHTBARE
   deel van de hero, niet in het rekenkundige midden.
   ══════════════════════════════════════════════ */

.cth-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;

 padding: 70px 80px 30px;
  
  transform: translateY(8px);

}



/* ══════════════════════════════════════════════
   3. HEADING + BODY

   Zelfde typografie als sub-hero (hos-):
   - H1: Onest 600, clamp(40px, 5vw, 68px), wit
   - Body: Onest 500, 19px, wit
   - Instrument Serif accent op cursief
   ══════════════════════════════════════════════ */

.cth-heading {
  width: 100%;
  margin-bottom: 20px;
}

.cth-4cee .cth-heading h1,
.cth-4cee .cth-heading h2,
.cth-4cee .cth-heading h3,
.cth-4cee .cth-heading p,
.cth-4cee .cth-heading div {
  font-family: 'Onest', system-ui, sans-serif !important;
  font-size: clamp(40px, 5vw, 68px) !important;
  font-weight: 450 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: -2px !important;
  text-align: center !important;
}

.cth-4cee .cth-heading em,
.cth-4cee .cth-heading i {
  font-family: 'Instrument Serif', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: calc(1em + 4px) !important;
  letter-spacing: 0 !important;
}

.cth-body {
  max-width: 710px;
}

.cth-4cee .cth-body p,
.cth-4cee .cth-body div {
  font-family: 'Onest', system-ui, sans-serif !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  opacity: 1;
  margin: 0 !important;
}



/* ══════════════════════════════════════════════
   4. RESPONSIVE
   ══════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .cth-4cee {
    min-height: clamp(430px, 50vh, 560px);
  }

  .cth-content {
      padding: 90px 40px 42px;
  }

  .cth-4cee .cth-body p {
    font-size: 17px !important;
  }
}

@media (max-width: 768px) {
  .cth-4cee {
    min-height: clamp(360px, 44vh, 460px);
  }

  .cth-4cee::after {
    height: 24px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }

  .cth-content {
    padding: 70px 24px 24px;
  }

  .cth-heading {
    margin-bottom: 14px;
  }

  .cth-4cee .cth-heading h1,
  .cth-4cee .cth-heading p {
    letter-spacing: -0.5px !important;
  }

  .cth-4cee .cth-body p {
    font-size: 17px !important;
  }
}