/**
 * home-nieuw.css
 *
 * Alleen de stijlen die template-home-nieuw.php toevoegt bovenop style.css.
 * Bewust een apart bestand: style.css blijft ongewijzigd, zodat een
 * theme-update of een handmatige aanpassing op de live site hier niets raakt.
 * Wordt uitsluitend ingeladen op de template "Home nieuw".
 */

/* ─────────────────────────────────────────────────────────────
   HERO — titel, subtitel en lopende tekst in drie duidelijke trappen
   ───────────────────────────────────────────────────────────── */
.home-nieuw .hero-heading { max-width: 12em; margin-bottom: 14px; }

.home-nieuw .hero-subheading {
  font-size: clamp(19px, 1.9vw, 30px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--azure-46, #0081EA);
  max-width: 15em;
  margin: 0 0 26px;
  animation: fadeUp 0.95s ease both 0.68s;
}

.home-nieuw .hero-sub { max-width: 30em; }

/* ─────────────────────────────────────────────────────────────
   NAVIGATIEKAARTEN — features, doelgroepen, verder lezen
   ───────────────────────────────────────────────────────────── */
.hn-navgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1120px;
  margin: 38px auto 0;
}

a.hn-navcard {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  padding: 24px 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.hn-navcard:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 129, 234, 0.35);
  box-shadow: 0 14px 34px rgba(16, 32, 56, 0.09);
}

.hn-navcard h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--grey-10, #0E1116);
  letter-spacing: -0.01em;
}

.hn-navcard p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--grey-42, #5B6B7E);
  margin: 0 0 14px;
}

.hn-navcard span {
  font-size: 13px;
  font-weight: 600;
  color: var(--azure-46, #0081EA);
}

.hn-navcard span::after { content: " \2192"; }

/* Doorverwijzing onder een tekstblok */
.hn-more {
  display: inline-block;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--azure-46, #0081EA);
  text-decoration: none;
}

.hn-more::after {
  content: " \2192";
  display: inline-block;
  transition: margin-left 0.18s ease;
}

.hn-more:hover::after { margin-left: 5px; }

/* ─────────────────────────────────────────────────────────────
   SECTORENRIJ
   ───────────────────────────────────────────────────────────── */
.hn-sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
}

a.hn-sector {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--grey-10, #0E1116);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  padding: 9px 18px;
  background: #fff;
  transition: border-color 0.2s ease, color 0.2s ease;
}

a.hn-sector:hover {
  border-color: var(--azure-46, #0081EA);
  color: var(--azure-46, #0081EA);
}

/* ─────────────────────────────────────────────────────────────
   RESULTAAT ALS KLEINE TITEL BOVEN EEN QUOTE
   Geen badge of accentkleur: zelfde kleur als de quote eronder
   (--grey-42), alleen groter en vet. Staat los van de bestaande
   .testimonial-card opmaak, zodat avatar en bedrijfslogo
   onveranderd blijven werken.
   ───────────────────────────────────────────────────────────── */
.hn-metric {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--grey-42, #5B6B7E);
  margin-bottom: 10px;
}

/* ─────────────────────────────────────────────────────────────
   LOOP-DIAGRAM IN DE BEELDKOLOM
   style.css geeft .image-col padding-right 0 en overflow hidden, zodat
   productscreenshots bewust van het scherm aflopen. Een diagram moet juist
   volledig binnen de kolom vallen, vandaar deze modifier.
   ───────────────────────────────────────────────────────────── */
.feature-section .image-col.hn-diagram-col,
.feature-section.reversed .image-col.hn-diagram-col {
  padding: 16px 48px;
  overflow: visible;
}

.hn-loopsvg {
  width: 100%;
  height: auto;
  max-width: 600px;
  display: block;
  margin: 0 auto;
}

.hn-loopsvg text { font-family: inherit; }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hn-navgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .home-nieuw .hero-heading,
  .home-nieuw .hero-subheading,
  .home-nieuw .hero-sub { max-width: none; }

  .feature-section .image-col.hn-diagram-col,
  .feature-section.reversed .image-col.hn-diagram-col { padding: 16px 24px; }
}

@media (max-width: 640px) {
  .hn-navgrid { grid-template-columns: 1fr; }
}