/* ==========================================================================
   Homepage — alleen de secties die uitsluitend op de homepage staan.
   Contact, team, FAQ en reviews zijn gedeelde componenten met eigen bestanden.
   Alle waarden gemeten op de live site (1425px breed venster).
   ========================================================================== */

/* --- Hero -------------------------------------------------------------- */
/* Gemeten: min-height 450px, zwart met foto (cover, positie 100% 50%),
   padding 0 114px, kolom, gecentreerd. Op mobiel 35vh hoog. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-md);
  min-height: 450px;
  padding: var(--ruimte-md) var(--rand-zij);
  background-color: var(--kleur-zwart);
  background-image: url("/assets/images/hero-salon.webp");
  background-size: cover;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  text-align: center;
}
.hero__titel {
  font-family: var(--font-display);
  font-size: var(--tekst-hero-h1);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--kleur-zwart);
}
.hero__subtitel {
  font-family: var(--font-kop);
  font-size: var(--tekst-hero-h2);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--kleur-zwart);
  text-align: start;              /* gemeten: links op desktop, midden op mobiel */
}

/* --- Over ons ---------------------------------------------------------- */
/* Gemeten: container 1140, padding 45px 0, links 40% tekst / rechts 60% beeld,
   zonder tussenruimte — die komt uit de padding-right van de tekstkolom. */
/* Gemeten zijpadding: 20px desktop, 4% tablet, 3% mobiel */
.overons { background: var(--kleur-wit); padding-inline: 20px; }
.overons__grid {
  display: flex;
  align-items: center;
  gap: 0;
  /* Gemeten: 45px desktop, maar op tablet en mobiel percentueel — 12%/18% van
     de containerbreedte op tablet en 10% op mobiel. Met een vaste waarde was
     de sectie op tablet 212px te kort. */
  padding-block: var(--ruimte-lg);
}
.overons__tekst { flex: 0 0 40%; padding-inline-end: 15px; }
.overons__tekst > h2 { margin-bottom: 15px; }      /* gemeten */
.overons__tekst > p  { margin-bottom: 30px; }      /* gemeten */
.overons__tekst > p:last-child { margin-bottom: 0; }
/* Gemeten: twee kolommen die KOLOMSGEWIJS gevuld worden — foto 1 linksboven,
   foto 2 linksonder, foto 3 rechtsboven, foto 4 rechtsonder. Het origineel
   bouwt dat met twee losse kolommen; met grid-auto-flow:column komt dezelfde
   volgorde eruit. Rijsgewijs vullen zette foto 2 rechtsboven. */
.overons__beelden {
  flex: 1 1 60%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: var(--ruimte-md);
}
/* Gemeten: 332x221 bij een natuurlijke maat van 345x230 */
/* Gemeten: 332x221 bij een natuurlijke maat van 345x230. Het origineel rekt de
   foto niet verder uit dan die natuurlijke breedte — bij 399px blijft hij 345
   breed terwijl de kolom 375 is. Zonder max-width werd hij daar 375x250. */
.overons__beelden img { width: 100%; max-width: 345px; height: auto; aspect-ratio: 345 / 230; object-fit: cover; }

/* --- Waarom voor ons kiezen -------------------------------------------- */
/* Gemeten: bg rgba(231,231,231,.51), padding 48px 0, gap 80px.
   De items zijn 25% breed met gap 10% en space-between, waardoor de zichtbare
   tussenruimtes 12,5% worden en de items 299px bij een container van 1197px. */
/* Gemeten: 8% desktop, 5% tablet en mobiel — via --rand-zij */
.waarom { background: var(--kleur-grijs-vlak); padding-inline: var(--rand-zij); }
.waarom__binnen {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-xl);
  /* Gemeten: 4% desktop (48px bij 1197), 12% tablet, 20% mobiel */
  padding-block: 4%;
}
.waarom__lijst {
  display: flex;
  justify-content: space-between;
  gap: 10%;
  text-align: center;
}
/* Gemeten: 20px tussen het icoonvlak en het tekstblok */
.waarom__item {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ruimte-md);
}
/* Gemeten: wit icoon van 45x45 in een zwart vlak van 85x85, radius 12px */
.waarom__icoonvlak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 85px;
  padding: 20px;
  border-radius: 12px;
  background: var(--kleur-zwart);
}
.waarom__icoon { width: 45px; height: 45px; fill: var(--kleur-wit); }
.waarom__inhoud { display: block; }
.waarom__titel {
  font-size: var(--tekst-h3);
  font-weight: 600;
  line-height: 1.2;
  margin: 8px 0 10px;                /* gemeten */
}
.waarom__tekst { font-size: var(--tekst-body); line-height: 1.5; }

/* --- Behandelingen ----------------------------------------------------- */
/* Gemeten: container 1140, padding 40px 0, twee kolommen van 560, gap 20px.
   Linkerpaneel crème met padding 10px 20px 20px. */
/* Gemeten: 30px desktop en tablet, 10px mobiel */
.behandelingen { background: var(--kleur-wit); padding-inline: 30px; }
.behandelingen__grid {
  display: flex;
  justify-content: center;
  gap: var(--ruimte-md);
  padding-block: 40px;
}
.behandelingen__paneel {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ruimte-md);
  padding: 10px 20px 20px;
  background: var(--kleur-creme);
}
/* Gemeten: de kopwidget heeft 20px boven en 28px onder (mobiel 30/20) */
.behandelingen__paneel > h2 { padding: 20px 0 28px; }
.behandelingen__beeld { flex: 1 1 560px; min-width: 0; display: flex; align-items: center; }
.behandelingen__beeld img { width: 100%; height: 653px; object-fit: cover; }

/* Gemeten: geen gap maar 15px marge onder elk item, en 10px onder de titelregel */
.prijslijst { display: flex; flex-direction: column; gap: 0; }
.prijslijst > li { margin-bottom: 15px; }
.prijslijst__regel { display: flex; align-items: center; gap: var(--ruimte-sm); margin-bottom: 10px; }
.prijslijst__titel,
.prijslijst__prijs {
  font-family: var(--font-kop);
  font-size: var(--tekst-h4);        /* gemeten 22px/600 */
  font-weight: 600;
  line-height: 1.5;
}
.prijslijst__prijs { white-space: nowrap; }
/* Gemeten: 1px dotted zwart */
.prijslijst__streep { flex: 1 1 auto; border-bottom: 1px dotted var(--kleur-zwart); }
.prijslijst__omschrijving { font-size: var(--tekst-body); font-weight: 500; line-height: 1.5; }

/* Op hairsalon-utrecht staat ditzelfde blok met een andere kolomverdeling:
   672 tekst en 448 beeld in plaats van 570/570, en de kop heeft daar geen
   extra padding (hij past er op één regel). Gemeten op het origineel. */
.behandelingen--lp .behandelingen__paneel { flex: 0 0 672px; }
.behandelingen--lp .behandelingen__beeld  { flex: 0 0 448px; }
.behandelingen--lp .behandelingen__beeld img { height: 522px; }
.behandelingen--lp .behandelingen__paneel > h2 { padding: 0; }
@media (max-width: 1024px) {
  .behandelingen--lp .behandelingen__paneel,
  .behandelingen--lp .behandelingen__beeld { flex: 0 0 calc(50% - 10px); }
  .behandelingen--lp .behandelingen__beeld img { height: auto; }
}
@media (max-width: 767px) {
  .behandelingen--lp .behandelingen__paneel,
  .behandelingen--lp .behandelingen__beeld { flex: 0 0 auto; }
}

/* --- Instagram --------------------------------------------------------- */
/* Gemeten: 4 kolommen desktop, 2 tablet, 1 mobiel, gap 10px, verhouding 1:1.
   Gemeten op de LIVE site (de lokale kopie laadt de feed niet en stort in):
   16 foto's op desktop en tablet, 8 op mobiel — de feed staat op num=16 met
   nummobile=8 en verbergt de rest met .sbi_num_diff_hide. */
/* Gemeten: 1% op elk formaat (14px bij 1425, 19px bij 1905, 4px bij 360) */
.insta { padding: var(--ruimte-md) 1% var(--ruimte-lg); }
.insta__raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ruimte-sm);
  margin-top: var(--ruimte-md);
}
/* height:auto is nodig: het height-attribuut op de <img> telt als
   presentational hint en blokkeert anders de aspect-ratio. Gemeten op de
   live site zijn de tegels vierkant (278x278). */
.insta__raster img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.insta__raster a { display: block; transition: opacity var(--transitie); }
@media (hover: hover) and (min-width: 1025px) {
  .insta__raster a:hover { opacity: 0.85; }
}
/* Gemeten: blauwe volgknop van de Instagram-plugin, 161x34, 13px wit */
.insta__volg { margin-top: var(--ruimte-md); text-align: center; }
.insta__volgknop {
  display: inline-block;
  padding: 7px 14px;
  background: rgb(64, 139, 209);
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  text-decoration: none;
  border-radius: 4px;
}
@media (hover: hover) and (min-width: 1025px) {
  .insta__volgknop:hover { background: rgb(52, 118, 182); }
}

/* --- Rondleiding ------------------------------------------------------- */
/* Gemeten: 2% boven en onder op elk formaat (29px bij 1425, 15 bij 753, 7 bij 360) */
.rondleiding { padding: 2% 0; }
.rondleiding__kader { margin-top: var(--ruimte-md); }
.rondleiding__kader iframe { width: 100%; height: 450px; display: block; border: 0; }

/* ==========================================================================
   Responsive — breakpoints 1-op-1 uit Elementor (1024 / 767)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Gemeten zijpadding op tablet */
  .overons { padding-inline: 4%; }
  .insta__raster { grid-template-columns: repeat(2, 1fr); }
  /* Gemeten op tablet: de rij breekt af, de tekst neemt de volle breedte en
     het beeldblok blijft daaronder op 60% staan — niet op volle breedte.
     Bij 753px: tekst 693 breed, beelden 416 (= 60%). */
  .overons__grid { flex-wrap: wrap; padding-block: 12% 18%; }
  /* Gemeten: zodra de rij afbreekt krijgt de tekstkolom 10% marge onder zich
     (69,27px bij 753, 33,83px bij 360) en heeft de tekst zelf een binnenmarge
     van 10% rechts en 5% links. */
  .overons__tekst {
    flex: 0 0 100%;
    margin-bottom: 10%;
    padding-inline: 5% calc(15px + 10%);
  }
  .overons__beelden { flex: 0 0 60%; }
  /* Gemeten op tablet (753px): de iconen breken af naar 2 per rij, elk 32%
     breed met 16% ertussen en 90px onder elkaar. Het derde staat links op de
     tweede rij. Eerder stonden ze hier alle drie naast elkaar. */
  .waarom__binnen { padding-block: 12%; }
  .waarom__lijst {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 16%;
    row-gap: 90px;
  }
  .waarom__item { flex: 0 0 32%; }

  /* Gemeten: op tablet staan tekstpaneel en beeld nog naast elkaar
     (337 en 336 breed). Pas onder 768px stapelen ze. */
  .behandelingen__beeld img { height: auto; }
  /* Gemeten: op tablet zijn de twee kolommen even breed (337 en 336).
     Niet via flex: 1 1 0 — met box-sizing: border-box telt flex-basis vanaf de
     border-box, waardoor de 40px binnenpadding van het paneel bovenop de
     gelijke verdeling kwam (357 tegen 317). Een expliciete helft min de halve
     gap geeft wel twee gelijke kolommen. */
  .behandelingen__paneel,
  .behandelingen__beeld { flex: 0 0 calc(50% - 10px); }
}

@media (max-width: 767px) {
  /* Het origineel toont op mobiel 8 van de 16 foto's */
  .insta__raster li:nth-child(n+9) { display: none; }

  /* Gemeten zijpadding op mobiel */
  .overons       { padding-inline: 3%; }
  .behandelingen { padding-inline: 10px; }
  .contact       { padding-inline: 10px; }
  .rondleiding   { padding-inline: 2%; }
  .faq           { padding-inline: 3%; }

  /* Gemeten: het origineel verbergt de derde en vierde foto op mobiel
     (elementor-hidden-mobile) en zet de overige twee onder elkaar op volle
     breedte — 338x226 bij een venster van 375px. */
  .overons__grid { padding-block: 10%; }
  .overons__tekst { padding-inline: 5%; }
  /* Het origineel houdt op mobiel een lege tweede beeldkolom over; die voegt
     via de gap van 20px blanco ruimte onder de foto's toe. */
  .overons__beelden { padding-bottom: 20px; }
  .overons__beelden {
    flex: 0 0 100%;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .overons__beelden img:nth-child(n+3) { display: none; }

  /* Gemeten: de hero is op mobiel 35vh hoog (284px bij 812px, 315px bij 900px) */
  .hero { min-height: 35vh; padding-inline: 5%; }
  .hero__subtitel { text-align: center; }
  /* Gemeten: de Instagram-feed staat op mobiel in één kolom */
  .insta__raster { grid-template-columns: 1fr; }
  /* Gemeten: op mobiel 60px tussen kop en lijst (desktop en tablet 80px) */
  .waarom__binnen { padding-block: 20%; gap: 60px; }
  .waarom__lijst { flex-direction: column; gap: var(--ruimte-lg); }
  .waarom__item { flex: 1 1 auto; }
  /* Gemeten: op mobiel is de verticale padding 10px, niet 40px. En zodra de
     rij een kolom wordt, slaat flex-basis: 560px op de HOOGTE — daardoor werd
     het beeldblok 560px hoog terwijl de foto 397px is. Vandaar flex: 0 0 auto. */
  .behandelingen__grid { flex-direction: column; padding-block: 10px; }
  .behandelingen__paneel,
  .behandelingen__beeld { flex: 0 0 auto; }
  .behandelingen__paneel { gap: var(--ruimte-sm); }
  .behandelingen__paneel > h2 { padding: 30px 0 20px; }
  /* Gemeten: de omschrijving zakt op mobiel naar 14px/21 */
  .prijslijst__omschrijving { font-size: 14px; line-height: 21px; }
  /* Gemeten: het origineel laat de prijsregel op mobiel NIET afbreken; de
     titel wordt twee regels en de prijs staat er verticaal gecentreerd naast. */
  .prijslijst__streep { min-width: 20px; }
  /* Gemeten: de kaart blijft op elk formaat 450px hoog; hier stond 320px.
     De kop van dit blok is op mobiel 25px, niet de gebruikelijke 32px. */
  .rondleiding h2 { font-size: 25px; line-height: 25px; }
}