/* ==========================================================================
   Landingspagina's — alle waarden gemeten op luxuryhairbydenise.nl
   (dameskapper-utrecht, 1425px breed venster)
   ========================================================================== */

/* --- Hero -------------------------------------------------------------- */
/* Gemeten: buitenste rij 1397 breed, padding 28,5px 71,25px (2%/5%),
   flexrij met gap 5%. Links tekstkolom 564, rechts beeld 627x627. */
.lp-hero { padding: 2% 5%; }
.lp-hero__grid {
  display: flex;
  align-items: center;
  gap: 5%;
}
.lp-hero__tekst {
  flex: 0 1 564px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;                          /* gemeten */
}
/* Gemeten: Inter Tight 56/600, kleur #212121 (niet volledig zwart) */
.lp-hero__titel {
  font-family: var(--font-kop);
  font-size: var(--tekst-hero-h1-lp);
  font-weight: 600;
  line-height: 1;
  color: #212121;
}
.lp-hero__intro { font-size: var(--tekst-body); line-height: 1.5; }
.lp-hero__beeld { flex: 0 1 627px; }
.lp-hero__beeld img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* --- Waarom ------------------------------------------------------------ */
/* Gemeten: container 1140, padding 30px 0, gap 30px tussen kop en lijst */
.lp-waarom__binnen {
  display: flex;
  flex-direction: column;
  gap: 25px;                          /* gemeten */
  padding-block: 30px;
}
/* Gemeten: gewone opsomming met bolletjes, 17px met regelhoogte 1.5 (26px/item) */
.lp-usps {
  list-style: disc;
  padding-inline-start: 20px;
}
.lp-usps li { font-size: var(--tekst-body); line-height: 1.5; }

/* --- Galerij ----------------------------------------------------------- */
/* Gemeten: kop Montserrat 36/600 gecentreerd; raster 4 kolommen van 240x300,
   horizontale tussenruimte 50px, verticale 20px. */
.lp-galerij { padding: 5px 0 55px; }
/* Gemeten: Montserrat 36/600 gecentreerd, met 35px erboven en 25px eronder */
.lp-galerij__kop {
  padding: 35px 0 25px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
/* De kolommen zijn maximaal 240px maar mogen krimpen: bij een venster tussen
   1025 en ~1125px is de container smaller dan de 1110px die vier vaste
   kolommen plus drie tussenruimtes van 50px nodig hebben. Met een vaste
   breedte liep de pagina daar over de rand. */
.lp-galerij__raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 240px));
  justify-content: center;
  column-gap: 50px;
  row-gap: 20px;
  margin-top: 20px;               /* gemeten tussenruimte onder de kop */
}
.lp-galerij__raster img {
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 300;        /* gemeten 240x300 */
  object-fit: cover;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .lp-hero__grid { flex-direction: column; align-items: stretch; gap: 30px; }
  .lp-hero__tekst { flex: 1 1 auto; }
  .lp-hero__beeld { flex: 1 1 auto; }
  /* Gemeten op tablet: nog steeds vier kolommen, maar de tegels krimpen mee
     (173x217 bij 753px) met 20px ertussen. auto-fit maakte er drie van 238. */
  .lp-galerij__raster {
    grid-template-columns: repeat(4, minmax(0, 240px));
    column-gap: 20px;
  }
}

@media (max-width: 767px) {
  /* Gemeten op mobiel: één kolom, en de tegel krimpt NIET mee — hij blijft
     240x300 en staat gecentreerd (60px marge aan weerszijden bij 360px). */
  .lp-galerij__raster { grid-template-columns: 240px; }
  .lp-galerij__kop { font-size: 27px; }
}

/* --- Behandelingenblok -------------------------------------------------- */
/* Gemeten op herenkapper-utrecht (1440px venster):
     sectie   volle breedte, crème #F1E9E4, padding 0 1%
     rij      1140 breed, flex row, padding 14,1px 0
     kolom    570 breed, padding 11,39px, kolom met 20px tussenruimte, gecentreerd
     beeld    547x479
     titel    Inter Tight 28/600
     tekst    Nunito 17/400, 14,4px marge onder
     prijs    Inter Tight 20/400
   Tekst en beeld wisselen per rij van kant. */
.lp-beh {
  background: var(--kleur-creme);
  padding-inline: 1%;
}
/* Gemeten: het kopblok heeft 10px zijpadding (mobiel 15px) en 50px boven en
   onder (mobiel 40 boven, 25 onder). Er stond 30px boven en niets eronder,
   waardoor dit blok 70px te laag was. */
.lp-beh__kop-houder { padding: 50px 10px; }
/* Gemeten: 1% boven en onder, relatief aan de rijbreedte (13,95px bij 1425,
   7,38 bij 753) — op mobiel 10px boven en 50px onder. */
.lp-beh__rij {
  display: flex;
  align-items: center;
  padding-block: 1%;
}
.lp-beh__rij--gedraaid { flex-direction: row-reverse; }

.lp-beh__tekst,
.lp-beh__beeld {
  flex: 1 1 50%;
  /* Gemeten: 1% van de rij — 11,39px bij 1140, 7,38 bij 738, 3,39 bij 340 */
  padding: 1%;
}
.lp-beh__tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Gemeten: 20px tussen titel, tekst en prijs — alle drie gelijk. Er stond
     20px onder de titel en 14,4px onder de tekst. */
  gap: 20px;
}
.lp-beh__titel {
  font-family: var(--font-kop);
  font-size: var(--tekst-h3);          /* gemeten 28px/600 */
  font-weight: 600;
  line-height: 1;
}
.lp-beh__oms {
  font-size: var(--tekst-body);
  line-height: 1.5;
}
.lp-beh__prijs {
  font-family: var(--font-kop);
  font-size: var(--tekst-groot);       /* gemeten 20px/400 */
  font-weight: 400;
  line-height: 1.5;
}
/* Gemeten: de foto houdt zijn verhouding op elk formaat — 547x479 op desktop,
   354x310 op tablet, 333x292 op mobiel. Met een vaste hoogte van 479px bleef
   hij op tablet even hoog als op desktop en werd het beeld uitgesneden. */
.lp-beh__beeld img {
  width: 100%;
  height: auto;
  aspect-ratio: 547 / 479;
  object-fit: cover;
}

/* Waarom-blok met lopende tekst. Gemeten: kolom met 25px tussen de kop en de
   tekst; de tekst bestaat uit alinea's met een opsomming ertussen. */
.lp-waarom__tekst { font-size: var(--tekst-body); line-height: 1.5; }
.lp-waarom__tekst p + p,
.lp-waarom__tekst ul { margin-top: var(--ruimte-md); }
.lp-waarom__tekst ul { list-style: disc; padding-inline-start: 20px; }
.lp-waarom__tekst li + li { margin-top: 2px; }

@media (max-width: 767px) {
  /* Zodra de rij een kolom wordt, slaat flex-basis: 50% op de HOOGTE. Het
     beeldblok kromp daardoor tot 22x22 en de foto werd 0x0 — op mobiel was er
     dus helemaal geen foto te zien. */
  .lp-beh { padding-inline: 10px; }
  /* Gemeten: deze kop blijft op mobiel 38px (zoals "Het Team"), terwijl de
     meeste koppen naar 32px zakken — drie regels van 38 is 114px. */
  .lp-beh__kop-houder { padding: 40px 15px 25px; }
  .lp-beh__kop-houder h2 { font-size: 38px; line-height: 38px; }
  .lp-beh__rij,
  .lp-beh__rij--gedraaid { flex-direction: column; padding-block: 10px 50px; }
  .lp-beh__tekst,
  .lp-beh__beeld { flex: 0 0 auto; width: 100%; }
}