/*
 * Homepage — Martha Kindercoaching
 * ----------------------------------------
 * Alleen op de voorpagina geladen (zie functions.php, is_front_page()).
 * Hero, verhaal en waarom-kaarten. Gedeelde parts (checklist, cta-blok)
 * staan in components.css.
 */

/* ----------------------------------------
 * HERO — tekst links, afbeelding rechts
 * ---------------------------------------- */

.hero-home {
  padding-block: var(--space-16) var(--space-20);
}

.hero-home__inner {
  display:               grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap:                   var(--space-16);
  align-items:           center;
}

.hero-home__eyebrow {
  margin: 0 0 var(--space-5);
}

.hero-home__title {
  margin:      0 0 var(--space-6);
  font-size:   clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: var(--font-bold);
  line-height: 1.1;
}

.hero-home__title-dark,
.hero-home__title-green {
  display: block;
}

.hero-home__title-dark  { color: var(--ink); }
.hero-home__title-green { color: var(--sage-deep); }

.hero-home__lead {
  margin:      0 0 var(--space-8);
  max-width:   46ch;
  color:       var(--muted-foreground);
  font-size:   var(--text-lg);
  line-height: var(--leading-relaxed);
}

.hero-home__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-3);
}

.hero-home__media {
  position: relative;
}

.hero-home__image {
  width:         100%;
  height:        auto;
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
  object-fit:    cover;
}

/* Zachte entree bij laden (eenmalig) — keyframe staat in components.css */
.hero-home__eyebrow,
.hero-home__title,
.hero-home__lead,
.hero-home__actions,
.hero-home__media {
  animation: martha-fade-up 0.7s ease both;
}

.hero-home__title   { animation-delay: 0.08s; }
.hero-home__lead    { animation-delay: 0.16s; }
.hero-home__actions { animation-delay: 0.24s; }
.hero-home__media   { animation-delay: 0.12s; animation-duration: 0.8s; }

@media (prefers-reduced-motion: reduce) {
  .hero-home__eyebrow,
  .hero-home__title,
  .hero-home__lead,
  .hero-home__actions,
  .hero-home__media {
    animation: none;
  }
}

/* ----------------------------------------
 * VERHAAL — afbeelding links, tekst rechts
 * Twee-koloms + beeld-styling komen uit de generieke .media-split
 * (components.css). Hier alleen de tekst-specifieke regels.
 * ---------------------------------------- */

.verhaal__eyebrow {
  margin: 0 0 var(--space-3);
}

.verhaal__title {
  margin-bottom: var(--space-5);
}

.verhaal__body {
  color:       var(--foreground);
  line-height: var(--leading-relaxed);
}

.verhaal__body p {
  color: var(--foreground);
}

/* ----------------------------------------
 * WAAROM — vier kaarten met vast icoon
 * ---------------------------------------- */

.waarom__head {
  max-width:     56ch;
  margin-bottom: var(--space-12);
}

.waarom__intro {
  color: var(--muted-foreground);
}

.waarom__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-6);
}

.waarom__card {
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-4);
  padding:          var(--space-8) var(--space-6);
  background-color: var(--background);
  border:           1px solid var(--border);
  border-radius:    var(--radius-xl);
  box-shadow:       var(--shadow-sm);
  transition:       transform var(--transition-fast),
                    box-shadow var(--transition-fast);
}

.waarom__card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* .waarom__icon: styling komt uit de generieke .icon-chip (components.css) */

.waarom__card-title {
  margin:      0;
  font-size:   var(--text-lg);
  font-weight: var(--font-semibold);
}

.waarom__card-text {
  margin:      0;
  color:       var(--muted-foreground);
  font-size:   var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ----------------------------------------
 * RESPONSIVE
 * ---------------------------------------- */

@media (max-width: 980px) {

  .waarom__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {

  .hero-home__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Beeld onder de tekst op mobiel */
  .hero-home__media { order: 2; }
  .hero-home__text  { order: 1; }
}

@media (max-width: 560px) {

  .waarom__grid {
    grid-template-columns: 1fr;
  }
}