/* =============================================================================
   Wood, collectiepagina

   De secties van het categorie-archief. Eigen bestand, zodat style.css met rust
   gelaten kan worden terwijl er aan de duurzaamheidspagina gewerkt wordt.

   Alles wat beweegt is ingetogen: opkomen bij het scrollen en een korte
   overgang bij het filteren. Geen dingen die binnenvliegen; voor een
   vloerenzaak die rust uitstraalt werkt dat tegen.
   ============================================================================= */

/*
 * De kleuren één keer voor de hele site (3 okt 2026). Ze stonden alleen per sectie,
 * en een sectie die niet in zo'n lijst stond (de homehero) kreeg dan geen inktkleur:
 * de knop erfde het wit van de hero. De blokken hieronder en in de andere bestanden
 * herhalen dezelfde waarden en mogen blijven staan.
 */
:root {
  --wood-groen: #004339;
  --wood-bosgroen: #004339;
  --wood-goud: #D9B976;
  --wood-goud-zacht: #C29E66;
  --wood-creme: #FAF7F1;
  --wood-zand: #EDE6DB;
  --wood-inkt: #35332E;
  --wood-lijn: #D7CCB8;
}

.wood-hero,
.wood-verhaal,
.wood-vloeren,
.wood-reviews,
.wood-terecht,
.wood-seo,
.wood-stalen {
  --wood-groen: #004339;
  --wood-bosgroen: #004339;
  --wood-goud: #D9B976;
  --wood-creme: #FAF7F1;
  --wood-zand: #EDE6DB;
  --wood-tekst: #004339;
  --wood-inkt: #35332E;         /* de tekstkleur uit de kit van de site */
  --wood-goud-zacht: #C29E66;   /* de aanhef boven een verhaalblok */
  --wood-serif: "Libre Baskerville", Georgia, serif;
  --wood-rond: 14px;
  /* Foto's en kaders staan recht (afgesproken 11 sep 2026). */
  --wood-rond-foto: 0;
  /* Hetzelfde stramien als de secties die in Elementor staan: de sectie loopt
     over de volle breedte, de inhoud staat in een kolom van 1140px. */
  --wood-inhoud: 1140px;
}

/* --- Gedeelde onderdelen ------------------------------------------------- */

.wood-binnen {
  width: 100%;
  max-width: var(--wood-inhoud);
  margin-inline: auto;
}

/*
 * Telefoon, mobiel en e-mail: overal dezelfde opmaak, op de contactpagina en in
 * de vloerzoeker (Tim, 3 okt 2026). Het label halfvet en zwart, het nummer in de
 * linkkleur. Bij aanwijzen, tikken en op een telefoon verandert er niets.
 */
.wood-gegevens {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wood-gegevens li {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 2;
}

.wood-gegevens .wood-gegevens__label {
  display: inline-block;
  min-width: 88px;
  font-weight: 500;
  color: var(--wood-inkt);
}

.wood-gegevens a,
.wood-gegevens a:visited,
.wood-gegevens a:hover,
.wood-gegevens a:focus,
.wood-gegevens a:active {
  color: var(--wood-groen);
  text-decoration: none;
}

.wood-kop {
  max-width: 720px;
  margin: 0 0 44px;
}

.wood-kop--midden {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

/*
 * Aanhef en titel volgen de maten uit de Elementor-secties van de site:
 * Inter Tight 12px met 0,13em spatiëring in hoofdletters, en daaronder
 * Libre Baskerville 18px, ook in hoofdletters, met 0,1em spatiëring.
 */
.wood-kop__aanhef,
.wood-hero__aanhef {
  margin: 0 0 8px;
  color: var(--wood-bosgroen);
  font-size: 12px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Sinds 14 okt 2026 is de aanhef in de collectie-hero een H1 (zoekwoord).
 * Houd het lettertype van de kleine regel gelijk aan de oude <p>. */
h1.wood-hero__aanhef,
h1.wood-home-hero__aanhef,
h1.wood-kop__aanhef {
	font-family: "Inter Tight", sans-serif;
}

h1.wood-home-hero__aanhef {
	line-height: 1.5;
}

/*
 * Twee klassen in de selector, expres. In de Elementor-kit van deze site staat
 * `.elementor-kit-7 h3 { line-height: 1.3px }`, met een eenheid die er niet
 * hoort te staan. Die regel is specifieker dan één klasse en duwt de regels dan
 * over elkaar heen. Met twee klassen winnen deze regels.
 */
.wood-kop .wood-kop__titel {
  margin: 0;
  font-family: var(--wood-serif);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wood-inkt);
}

.wood-kop__tekst {
  margin: 16px 0 0;
  max-width: 62ch;
}

/*
 * De rand en de achtergrond staan er expliciet op. Zonder die twee komt de
 * knopstijl van Elementor eroverheen, en dan krijgt elke knop een randje in de
 * kleur uit de kit.
 */
.wood-knop,
a.wood-knop,
button.wood-knop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Zelfde knop als in Elementor: 12px bij 24px, 14px letter (Tim, 2 okt), 0,12em ruimte. */
  padding: 12px 24px;
  border: 0;
  outline: 0;
  border-radius: 1000px;
  background: var(--wood-goud);
  background-image: none;
  color: var(--wood-inkt);
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  font-weight: 300;
  /* Geen hoofdletters (Tim, 26 sep), wel de ruime spatiëring van de hero-knop:
     dat is de huisstijl voor alle knoppen (Tim, 2 okt). */
  letter-spacing: 0.12em;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/*
 * Bij het aanwijzen komt een knop alleen heel licht omhoog. De vulling blijft
 * staan: een achtergrond die meeverandert leidt af (Tim, 11 sep).
 */
.wood-knop:hover,
.wood-knop:focus-visible {
  transform: translateY(-2px);
}

.wood-knop--zacht,
a.wood-knop--zacht,
button.wood-knop--zacht {
  background: transparent;
  color: var(--wood-groen);
  box-shadow: inset 0 0 0 1px rgba(0, 67, 57, 0.22);
}

/* Bij de open knop wordt alleen het lijntje iets dikker, van 1 naar 2. */
.wood-knop--zacht:hover,
.wood-knop--zacht:focus-visible {
  background: transparent;
  color: var(--wood-groen);
  box-shadow: inset 0 0 0 2px rgba(0, 67, 57, 0.38);
}

.wood-foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wood-rond-foto);
}

/* --- Hero ---------------------------------------------------------------- */

/*
 * Gemeten op de hero die Tim zelf in Elementor bouwde (/voorbeeld-categorie/).
 * Alle waarden komen daar vandaan, niets is zelf bedacht:
 *
 *   sectie   630px hoog, 16px zijpadding, foto cover op 50% 100% (onderaan
 *            uitgelijnd) op een bodem van #004339, zonder verloop eroverheen
 *   inner    1140px, flex kolom, links uitgelijnd, verticaal gecentreerd,
 *            padding 96px boven en 80px onder, 20px tussen de onderdelen
 *   kolom    730px breed
 *   aanhef   Inter Tight 18px/18px, 300, 2,34px spatiëring, hoofdletters, wit
 *   titel    Libre Baskerville 37px/41,6px, 500, 3,7px spatiëring, hoofdletters
 *   knop     Inter Tight 15px/15px, 300, 1,8px, 12px bij 24px
 */
.wood-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 630px;
  padding: 0 16px;
  overflow: hidden;
  background: var(--wood-groen);
}

.wood-hero__beeld {
  position: absolute;
  inset: 0;
}

/* Elementor zet height:auto op elke img; met twee klassen wint deze regel. */
.wood-hero__beeld .wood-hero__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Onderaan uitgelijnd, zoals de achtergrondpositie 50% 100% in zijn sectie. */
  object-position: 50% 100%;
}

.wood-hero__inhoud {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 1140px;
  min-height: 630px;
  padding: 96px 0 80px;
  color: #fff;
}

.wood-hero__aanhef,
.wood-hero .wood-hero__titel,
.wood-hero__tekst,
.wood-hero__knoppen {
  max-width: 730px;
}

.wood-hero .wood-hero__aanhef {
  margin: 0;
  font-size: 18px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 2.34px;
  text-transform: uppercase;
  color: #fff;
}

.wood-hero .wood-hero__titel {
  margin: 0;
  font-family: var(--wood-serif);
  font-size: 37px;
  line-height: 41.6px;
  font-weight: 500;
  letter-spacing: 3.7px;
  text-transform: uppercase;
  color: #fff;
}

.wood-hero__tekst {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

.wood-hero__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}

/* De knop uit zijn hero: kleiner en lichter dan de knop verderop de pagina. */
.wood-hero .wood-knop {
  padding: 12px 24px;
  font-size: 14px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 1.8px;
  color: #35332E;
}

.wood-hero .wood-knop--zacht {
  color: var(--wood-creme);
  box-shadow: inset 0 0 0 2px rgba(250, 247, 241, 0.5);
}

.wood-hero .wood-knop--zacht:hover {
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}


/* --- Verhaalblok --------------------------------------------------------- */

.wood-verhaal {
  padding: 0 32px;
}

/* Verhouding en tussenruimte van de verhaalblokken in Elementor: 660 om 440. */
.wood-verhaal__binnen {
  display: grid;
  grid-template-columns: minmax(0, 660fr) minmax(0, 440fr);
  align-items: center;
  gap: 40px;
  padding: 96px 0 0;
}

.wood-verhaal--rechts .wood-verhaal__tekst { order: 2; }

.wood-verhaal .wood-kop__aanhef {
  color: var(--wood-goud-zacht);
}

.wood-verhaal .wood-verhaal__titel {
  margin: 8px 0 16px;
  font-family: var(--wood-serif);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wood-inkt);
}

.wood-verhaal__body {
  max-width: 58ch;
}

/*
 * Gemeten op /voorbeeld-categorie/, het blok dat Tim zelf in Elementor bouwde.
 * Twee dingen die er eerst naast zaten:
 *
 * 1. Bij het spiegelen wisselden de kolombreedtes mee, waardoor de tekst 440
 *    breed werd in plaats van 660. Vandaar de smalle kolom met veel wit. De
 *    kolommen draaien nu mee met de kant, de tekst blijft altijd 660.
 * 2. De blokken grijpen in elkaar: in het eerste blok staat de tekstkolom 100px
 *    omhoog, in het tweede de beeldkolom 86px. Daardoor loopt de onderste foto
 *    van het ene blok langs de tekst van het volgende.
 */
.wood-verhaal--rechts .wood-verhaal__binnen {
  grid-template-columns: minmax(0, 440fr) minmax(0, 660fr);
  padding: 0 0 96px;
}

.wood-verhaal--links .wood-verhaal__tekst {
  margin-top: -100px;
}

.wood-verhaal--rechts .wood-verhaal__beeld {
  margin-top: -86px;
}

/*
 * De grote foto staat links in zijn kolom, de kleine rechts met 45px marge en
 * 101px omhoog. Geen schaduw en geen afronding, net als in zijn blok.
 */
.wood-verhaal__beeld {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
}

/* Twee klassen in de selector: anders wint de img-regel van Elementor. */
.wood-verhaal .wood-verhaal__foto-1 {
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.wood-verhaal .wood-verhaal__foto-2 {
  width: 62.5%;
  max-width: 250px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  /* auto links duwt hem naar rechts, de 45px is de marge uit zijn blok. */
  margin: -101px 45px 0 auto;
}

/* --- De vloeren ---------------------------------------------------------- */

.wood-vloeren,
.wood-reviews {
  padding: 0 16px;
}

.wood-vloeren .wood-binnen,
.wood-reviews .wood-binnen {
  padding: 96px 0;
}

/* Dezelfde houtnerf als in het reviewblok in Elementor: nerf.svg op 4%. */
.wood-reviews {
  position: relative;
}

.wood-reviews::before {
  content: "";
  position: absolute;
  inset: -1px 0 0;
  background: url("/wp-content/uploads/nerf.svg") 0 0 / cover repeat;
  opacity: 0.04;
  pointer-events: none;
}

/*
 * Het blok "klaar voor je nieuwe vloer" is omhoog getrokken en overlapt de
 * onderkant van de reviewsectie. De nerf is absoluut geplaatst en kwam daardoor
 * over dat bruine vlak heen te liggen. Met deze drie lagen stopt hij precies
 * waar het bruin begint:
 *
 *   1. de nerf, onderop
 *   2. het bruine blok eroverheen
 *   3. de reviewkaarten daar weer boven, zodat ze mooi over de rand doorlopen
 *
 * Bewust met lagen en niet met een afstand in pixels: die zou opnieuw mis gaan
 * zodra de overlap verandert.
 */
.wood-terecht {
  position: relative;
  z-index: 1;
}

.wood-reviews .wood-binnen {
  position: relative;
  z-index: 2;
}

.wood-vloeren {
  background: var(--wood-creme);
}

.wood-patronen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 36px;
}

.wood-patroon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--wood-groen);
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 67, 57, 0.07);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.wood-patroon:hover { transform: translateY(-1px); }

.wood-patroon.is-aan {
  background: var(--wood-groen);
  color: var(--wood-creme);
}

.wood-patroon__aantal {
  font-size: 0.78rem;
  opacity: 0.6;
}

/*
 * Vaste kolommen in plaats van auto-fill: vijf vloeren per rij en drie reviews
 * per rij, zodat een rij altijd vol staat. Met auto-fill hing het van de
 * schermbreedte af en bleef er een halve rij over.
 */
.wood-raster {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}

.wood-reviews__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

@media (max-width: 1200px) {
  .wood-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .wood-raster,
  .wood-reviews__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .wood-raster,
  .wood-reviews__raster { grid-template-columns: minmax(0, 1fr); }
  /* De vloeren van de collectie twee naast elkaar (Tim, 5 okt 2026). */
  .wood-vloeren .wood-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wood-vloeren .wood-kaart .wood-kaart__titel { font-size: 15px; }
}

.wood-kaart {
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.wood-kaart__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.wood-kaart__beeld {
  position: relative;
  overflow: hidden;
  border-radius: var(--wood-rond-foto);
  /* Vaste verhouding, anders verspringt de pagina terwijl de foto's laden. */
  aspect-ratio: 4 / 3;
  background: var(--wood-zand);
}

.wood-kaart__beeld .wood-kaart__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.wood-kaart__link:hover .wood-kaart__foto { transform: scale(1.04); }

.wood-kaart .wood-kaart__titel {
  margin: 16px 0 0;
  font-family: var(--wood-serif);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--wood-tekst);
}

.wood-kaart.is-verborgen,
.wood-review.is-verborgen,
.wood-kaart.is-weg {
  display: none;
}

.wood-vloeren__leeg {
  margin: 28px 0 0;
  max-width: 52ch;
  color: rgba(0, 67, 57, 0.7);
}

.wood-vloeren__meer,
.wood-reviews__meer {
  margin-top: 40px;
  text-align: center;
}

/* --- Reviews ------------------------------------------------------------- */

/*
 * Nagemeten aan het reviewblok dat in Elementor staat: wit vlak met een heel
 * licht gouden randje, geen afronding en geen schaduw. Binnenruimte 20px, en
 * 20px tussen de quote en de naam.
 */
.wood-review {
  margin: 0;
  padding: 20px;
  border: 0.8px solid rgba(217, 185, 118, 0.18);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.wood-review .wood-review__tekst {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--wood-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.53;
  letter-spacing: 0.01em;
  color: var(--wood-inkt);
}

.wood-review__aanhaling {
  margin-right: 3px;
  color: var(--wood-goud);
  font-size: 30px;
  line-height: 0;
  vertical-align: -0.1em;
}

.wood-review__naam {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wood-groen);
}

/* --- Klaar voor je nieuwe vloer ------------------------------------------ */

/*
 * Overgenomen van het blok in Elementor: zandkleurig vlak dat 185px omhoog
 * schuift, zodat de onderste rij reviews eroverheen valt. De inhoud begint
 * daarom pas 144px lager, en de tekstkolom houdt onderaan ruimte vrij zodat de
 * foto tot de onderrand doorloopt.
 */
.wood-terecht {
  margin-top: -185px;
  padding: 0 16px;
  background: #E6E0D5;
}

.wood-terecht__binnen {
  display: grid;
  grid-template-columns: minmax(0, 611fr) minmax(0, 509fr);
  align-items: end;
  gap: 20px;
  padding: 144px 0 0;
}

.wood-terecht__tekst {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 153px;
}

.wood-terecht .wood-kop__aanhef {
  margin: 0;
}

.wood-terecht .wood-terecht__titel {
  margin: 0;
  font-family: var(--wood-serif);
  font-size: 28px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wood-inkt);
}

.wood-terecht__lijstblok {
  color: var(--wood-inkt);
}

.wood-terecht__lijst {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

/* De regels staan dicht op elkaar, met het vinkje op 28px inspringing. */
.wood-terecht__lijst li {
  position: relative;
  margin: 0 0 1px;
  padding: 0 0 0 28px;
  font-size: 16px;
  line-height: 1.5;
}

/* Hetzelfde vinkje als .custom-list in style.css, zodat de lijsten gelijk zijn. */
.wood-terecht__lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background-color: var(--wood-goud);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5C4.5 12.8 6.5 15 9 18.5C12 14 16 8 21 3.5' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5C4.5 12.8 6.5 15 9 18.5C12 14 16 8 21 3.5' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.wood-terecht__slot {
  margin: 0;
}

.wood-terecht__knop {
  margin: 0;
}

.wood-terecht__beeld {
  align-self: end;
  margin-left: 30px;
}

/* De foto staat op 60% van de kolom en raakt met de onderkant de sectierand,
   net als in het blok in Elementor (daar 304px binnen een kolom van 509px). */
.wood-terecht__beeld .wood-terecht__foto {
  display: block;
  width: 64%;
  height: auto;
}

/* --- SEO-tekst ----------------------------------------------------------- */

/*
 * Gemeten op de onderste sectie van /voorbeeld-categorie/: witte achtergrond,
 * 20px zijpadding, inhoud in 1140px met 80px boven en onder, en de tekstkolom
 * 684px breed midden in die 1140. Koppen Libre Baskerville 18px in hoofdletters,
 * lopende tekst Inter Tight 16px/24px.
 */
.wood-seo {
  padding: 0 20px;
  background: #fff;
}

.wood-seo .wood-binnen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
}

.wood-seo__tekst {
  position: relative;
  width: 100%;
  max-width: 684px;
  color: var(--wood-inkt);
}

/*
 * Ingeklapt loopt de tekst weg in een verloop. 400px is ongeveer vijftien regels:
 * genoeg om er echt in te beginnen, en kort genoeg om de pagina niet te laten
 * eindigen in een muur tekst.
 */
.wood-seo__tekst.is-dicht {
  max-height: 400px;
  overflow: hidden;
}

.wood-seo__tekst.is-dicht::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

.wood-seo__tekst img {
  max-width: 100%;
  height: auto;
  border-radius: var(--wood-rond-foto);
}

.wood-seo .wood-seo__tekst p,
.wood-tekstpagina .wood-tekstpagina__tekst p {
  margin: 0 0 14.4px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
}

.wood-seo .wood-seo__tekst h2,
.wood-seo .wood-seo__tekst h3,
.wood-tekstpagina .wood-tekstpagina__tekst h2,
.wood-tekstpagina .wood-tekstpagina__tekst h3 {
  margin: 8px 0 16px;
  font-family: var(--wood-serif);
  font-size: 18px;
  line-height: 23.4px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--wood-inkt);
}

/*
 * De SEO-teksten hebben twee kopniveaus (6 h2's en 11 h3's op /houten-vloeren/).
 * Even groot leest als één lange lijst koppen, dus staat de h3 een maat kleiner.
 */
.wood-seo .wood-seo__tekst h3,
.wood-tekstpagina .wood-tekstpagina__tekst h3 {
  margin-top: 24px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 1.5px;
}

.wood-seo .wood-seo__tekst h2,
.wood-tekstpagina .wood-tekstpagina__tekst h2 {
  margin-top: 32px;
}

/* De lopende tekst staat op 300; vet moet daar duidelijk van afsteken. */
.wood-seo .wood-seo__tekst strong,
.wood-seo .wood-seo__tekst b,
.wood-tekstpagina .wood-tekstpagina__tekst strong,
.wood-tekstpagina .wood-tekstpagina__tekst b {
  font-weight: 600;
}

.wood-seo .wood-seo__tekst ul,
.wood-seo .wood-seo__tekst ol,
.wood-tekstpagina .wood-tekstpagina__tekst ul,
.wood-tekstpagina .wood-tekstpagina__tekst ol {
  margin: 0 0 20px;
  padding-left: 22px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
}

.wood-seo .wood-seo__tekst li,
.wood-tekstpagina .wood-tekstpagina__tekst li {
  margin-bottom: 8px;
}

/* Galerijen uit de oude teksten: twee naast elkaar, zoals daar. */
.wood-seo__galerij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 20px;
}

.wood-seo__galerij img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
  .wood-seo__galerij {
    grid-template-columns: 1fr;
  }
}

.wood-seo__knop {
  display: block;
  margin: 28px auto 0;
  border: 0;
  cursor: pointer;
}

/* --- Opkomen bij het scrollen -------------------------------------------- */

.wood-op {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.wood-op.is-zichtbaar {
  opacity: 1;
  transform: none;
}

/* --- Smaller scherm ------------------------------------------------------ */

@media (max-width: 900px) {
  /*
   * Ook de gespiegelde variant expliciet noemen: die staat op desktop met twee
   * klassen in de selector en wint anders van deze regel, ook binnen een media
   * query. Zonder dit werd de tekst van het tweede blok 108px breed.
   */
  .wood-verhaal__binnen,
  .wood-verhaal--rechts .wood-verhaal__binnen,
  .wood-terecht__binnen {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * Op een smal scherm staat alles onder elkaar. De negatieve marges die de
   * blokken op desktop in elkaar laten grijpen moeten dan weg, anders schuift de
   * tekst over de foto erboven.
   */
  .wood-verhaal__binnen,
  .wood-verhaal--rechts .wood-verhaal__binnen {
    padding: 56px 0 0;
  }

  .wood-verhaal--links .wood-verhaal__tekst,
  .wood-verhaal--rechts .wood-verhaal__beeld {
    margin-top: 0;
  }

  .wood-verhaal--rechts .wood-verhaal__tekst { order: 0; }

  .wood-verhaal__foto-2 {
    margin: -60px 24px 0 auto;
  }

  /*
   * Eén fotoserie is genoeg op een telefoon. Met twee krijg je tekst, foto,
   * tekst, foto onder elkaar en dat leest rommelig (Tim, 11 sep). De volgorde
   * wordt daarmee: aanhef en verhaal 1, de foto's, dan aanhef en verhaal 2.
   */
  .wood-verhaal--rechts .wood-verhaal__beeld {
    display: none;
  }

  .wood-verhaal--rechts .wood-verhaal__binnen {
    padding-bottom: 56px;
  }

  /*
   * De onderste reviewkaart valt ook op een telefoon over het bruine blok heen,
   * net als op desktop. De overlap is kleiner omdat alles compacter staat: 120
   * in plaats van 185. De binnenruimte bovenin moet die overlap opvangen, anders
   * komt de kop onder de kaart te liggen.
   */
  .wood-terecht {
    margin-top: -120px;
  }

  .wood-terecht__binnen { padding-top: 168px; }

  .wood-terecht__tekst { padding-bottom: 32px; }

  .wood-terecht__beeld {
    max-width: 320px;
    margin-left: 0;
  }

  .wood-vloeren .wood-binnen,
  .wood-reviews .wood-binnen { padding: 56px 0; }
}

/* Wie beweging heeft uitgezet in het systeem krijgt geen animaties. */
@media (prefers-reduced-motion: reduce) {
  .wood-hero__beeld .wood-hero__foto { animation: none; }

  .wood-op,
  .wood-kaart,
  .wood-kaart__foto {
    transition: none;
    opacity: 1;
    transform: none;
  }
}