/* Raamdecoland - hoofdcategorie (hoofdcategorie.php), herontwerp okt 2026 fase 2. Mobile-first.
   Alleen variabelen uit tokens.css. Basis van secties, koppen, productkaarten, FAQ en SEO-tekst: landing.css,
   onderdelen.css en productkaart.css. */

.rdl-lp--hoofd .rdl-hc-pijl { display: inline-block; margin-left: 6px; font-weight: 700; transition: transform .15s ease; }
.rdl-lp--hoofd a:hover .rdl-hc-pijl { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .rdl-lp--hoofd a:hover .rdl-hc-pijl { transform: none; } }

/* Kop met een link rechts ("Alle ruimtes →", "Alle plissés →") */
.rdl-hc-sectiekop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; margin-bottom: 16px; }
.rdl-lp .rdl-hc-sectiekop h2 { margin: 0; }
.rdl-lp .rdl-hc-meerlink { display: inline-flex; align-items: center; min-height: var(--rdl-tik); font-size: 16px; font-weight: 700; color: var(--rdl-magenta-ink); text-decoration: underline; text-underline-offset: 3px; }
.rdl-lp .rdl-hc-meerlink:hover { color: var(--rdl-magenta-hover); }

/* ---------- Hero, variant A (canvas HeroA / HeroAMobiel) ----------
   Mobiel: sfeerfoto 200px hoog over de volle breedte, dan kruimelpad, H1 28px, intro van één regel met "Lees meer"
   (klapt de volledige intro open) en de reviewregel (13px); geen grote knop, zodat de eerste tegel in beeld is.
   Vanaf 768px: kruimelpad, dan één afgeronde kaart (radius 12) van 400px hoog: links de tekst op het lichte vlak
   (padding 40px, H1 40px, intro max. 2 regels, knop + reviewregel), rechts de foto (cover). Grid 5fr | 7fr. */
.rdl-hc-hero { position: relative; background: var(--rdl-wit); }
.rdl-hc-hero__raster { display: flex; flex-direction: column; }
.rdl-hc-hero__beeld { order: 0; height: 200px; margin: 0 calc(var(--lp-marge, 20px) * -1); overflow: hidden; background: var(--rdl-vlak); }
.rdl-hc-hero__beeld picture, .rdl-hc-hero__beeld img { display: block; width: 100%; height: 100%; }
.rdl-hc-hero__beeld img { object-fit: cover; object-position: var(--rdl-hc-focus, 50% 30%); }
.rdl-hc-hero__kruimel { order: 1; padding-top: 12px; }
.rdl-hc-hero__kaart { order: 2; font-family: var(--rdl-font-tekst); color: var(--rdl-tekst); }
.rdl-hc-hero.is-zonder-foto .rdl-hc-hero__kruimel { padding-top: 16px; }
/* Op een hoofdcategorie is het kruimelpad kort (Home / Plissé gordijnen): ook mobiel het hele pad, geen "← Home". */
.rdl-lp .rdl-hc-hero .rdl-lp-kruimel { display: block; margin: 0; }
.rdl-lp .rdl-hc-hero .rdl-lp-terug { display: none; }
.rdl-hc-hero .rdl-cp-label { margin: 8px 0 0; }
.rdl-lp .rdl-hc-hero h1 { margin: 4px 0 6px; font-family: var(--rdl-font-kop); font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.rdl-hc-hero__intro { max-width: 60ch; font-size: 15px; line-height: 1.5; color: var(--rdl-ink-soft); }
.rdl-hc-hero__intro p { margin: 0; }
.rdl-hc-hero__intro a { color: var(--rdl-magenta-ink); font-weight: 700; }
/* Mobiel: de korte intro op één regel + "Lees meer"; open = de volledige intro (onderdelen.js zet is-meer-open). */
.rdl-hc-hero__intro--lang { display: none; }
.rdl-hc-hero__intro--kort { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.rdl-hc-hero__kaart.is-meer-open .rdl-hc-hero__intro--kort { display: none; }
.rdl-hc-hero__kaart.is-meer-open .rdl-hc-hero__intro--lang { display: block; }
.rdl-hc-hero__kaart.is-meer-open .rdl-hc-hero__intro--lang p + p { margin-top: 8px; }
/* Zonder korte intro: de volledige op één regel. */
.rdl-hc-hero__kaart:not(:has(.rdl-hc-hero__intro--kort)) .rdl-hc-hero__intro--lang { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.rdl-hc-hero__kaart.is-meer-open:not(:has(.rdl-hc-hero__intro--kort)) .rdl-hc-hero__intro--lang { display: block; }
.rdl-lp .rdl-hc-hero__meer { display: inline-flex; align-items: center; min-height: var(--rdl-tik); margin: -10px 0 -6px; padding: 0; border: 0; background: none; font-family: var(--rdl-font-tekst); font-size: 15px; font-weight: 600; color: var(--rdl-tekst); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rdl-hc-hero__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 2px; }
.rdl-hc-hero__acties .rdl-knop { display: none; }
.rdl-hc-score { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: var(--rdl-tik); margin: 0; font-size: 13px; line-height: 1.3; color: var(--rdl-tekst-grijs); text-decoration: none; }
a.rdl-hc-score:hover .rdl-hc-score__tekst { text-decoration: underline; text-underline-offset: 2px; }
.rdl-hc-score strong { color: var(--rdl-tekst); font-size: inherit; }
.rdl-hc-score .rdlh-sterren { display: inline-flex; gap: 2px; }
@media (min-width: 768px) {
  .rdl-hc-hero__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "kruimel kruimel" "kaart beeld"; padding-top: 16px; }
  .rdl-hc-hero.is-zonder-foto .rdl-hc-hero__raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kruimel" "kaart"; }
  .rdl-hc-hero__kruimel { grid-area: kruimel; padding: 0 0 12px; }
  .rdl-hc-hero.is-zonder-foto .rdl-hc-hero__kruimel { padding-top: 0; }
  .rdl-hc-hero__beeld { position: relative; grid-area: beeld; height: auto; min-height: 400px; margin: 0; border-radius: 0 var(--rdl-radius) var(--rdl-radius) 0; }
  /* De foto telt niet mee voor de hoogte: de kaart (400px, of hoger bij veel tekst) bepaalt die. */
  .rdl-hc-hero__beeld picture { position: absolute; inset: 0; }
  .rdl-hc-hero__kaart { grid-area: kaart; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 400px; box-sizing: border-box; padding: 40px; border-top: 3px solid var(--rdl-lime); border-radius: var(--rdl-radius) 0 0 var(--rdl-radius); background: var(--rdl-vlak); }
  .rdl-hc-hero.is-zonder-foto .rdl-hc-hero__kaart { min-height: 0; border-radius: var(--rdl-radius); }
  .rdl-lp .rdl-hc-hero h1 { margin: 0; font-size: 32px; }
  .rdl-hc-hero__intro { font-size: 17px; line-height: 1.6; }
  /* Desktop: de volledige eerste alinea van de intro, nooit afgekapt; geen "Lees meer". */
  .rdl-hc-hero__intro--kort, .rdl-lp .rdl-hc-hero__meer { display: none !important; }
  .rdl-hc-hero__kaart .rdl-hc-hero__intro--lang,
  .rdl-hc-hero__kaart:not(:has(.rdl-hc-hero__intro--kort)) .rdl-hc-hero__intro--lang { display: block; overflow: visible; }
  .rdl-hc-hero__intro--lang > *:not(:first-child) { display: none; }
  .rdl-hc-hero__acties { gap: 12px 16px; margin-top: 4px; }
  .rdl-hc-hero__acties .rdl-knop { display: inline-flex; min-height: 48px; padding: 0 22px; font-size: 15px; }
  .rdl-hc-score { font-size: 14px; }
}
@media (min-width: 1024px) {
  .rdl-lp .rdl-hc-hero h1 { font-size: 40px; }
}

/* ---------- Kies je uitvoering: foto 4:3 (focus 50% 35%), badge, naam, zin, vanaf-prijs, knop ---------- */
/* Direct na de hero: 24px mobiel, 32px vanaf 768px (= de helft van --rdl-sectie). */
.rdl-lp-sectie.rdl-hc-kies { padding-top: 24px; }
@media (min-width: 768px) { .rdl-lp-sectie.rdl-hc-kies { padding-top: calc(var(--rdl-sectie, 64px) / 2); } }
.rdl-lp ul.rdl-hc-tegels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rdl-hc-tegel { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--rdl-rand); border-radius: var(--rdl-radius); background: var(--rdl-wit); color: var(--rdl-tekst); text-decoration: none; }
.rdl-hc-tegel:hover { color: var(--rdl-tekst); }
@media (hover: hover) { .rdl-hc-tegel:hover { outline: 2px solid var(--rdl-magenta); outline-offset: -1px; } }
.rdl-hc-tegel__beeld { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rdl-vlak); }
.rdl-lp .rdl-hc-tegel__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.rdl-hc-badge { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: var(--rdl-radius-pil); font-size: 13px; font-weight: 700; line-height: 1.2; }
.rdl-hc-badge--magenta { border: 1.5px solid var(--rdl-magenta); background: var(--rdl-wit); color: var(--rdl-magenta-ink); }
.rdl-hc-badge--wit { border: 1.5px solid var(--rdl-rand); background: var(--rdl-wit); color: var(--rdl-tekst); }
.rdl-hc-tegel__tekst { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; padding: var(--space-4, 16px); }
.rdl-hc-tegel__naam { font-family: var(--rdl-font-kop); font-size: 18px; font-weight: 600; line-height: 1.25; }
.rdl-hc-tegel__zin { font-size: 15px; line-height: 1.45; color: var(--rdl-tekst-grijs); }
.rdl-hc-tegel__prijs { font-size: 14px; color: var(--rdl-tekst-grijs); }
.rdl-hc-tegel__prijs strong { font-size: 16px; color: var(--rdl-magenta-ink); }
.rdl-hc-tegel__knop { display: inline-flex; align-items: center; min-height: var(--rdl-tik); margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 700; color: var(--rdl-magenta-ink); text-decoration: underline; text-underline-offset: 3px; }
.rdl-hc-tegel:hover .rdl-hc-tegel__knop { color: var(--rdl-magenta-hover); }
/* Tot 767px: 2 kolommen (gap 16px), tegel staand met de foto boven (4:3, cover, focus 50% 50%), daaronder naam (max. 3 regels),
   vanaf-prijs en de link. De zin staat verborgen (blijft in de HTML). 1 tegel = volle breedte; bij 3 blijft de laatste even breed
   als de andere (links). Tegels per rij even hoog (grid stretch), de link onderaan (margin-top: auto). */
@media (max-width: 767px) {
  .rdl-lp ul.rdl-hc-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4, 16px); }
  .rdl-lp ul.rdl-hc-tegels > li:only-child { grid-column: 1 / -1; }
  .rdl-lp .rdl-hc-tegel__beeld img { object-position: 50% 50%; }
  .rdl-hc-badge { top: 8px; left: 8px; max-width: calc(100% - 16px); padding: 3px 8px; font-size: 11px; }
  .rdl-hc-tegel__tekst { gap: 4px; min-width: 0; padding: var(--space-3, 12px); }
  .rdl-hc-tegel__naam { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: 16px; overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .rdl-hc-tegels .rdl-hc-tegel__zin { display: none; } /* sterker dan de line-clamp-regel hieronder */
  .rdl-hc-tegel__prijs strong { font-size: 15px; }
  .rdl-hc-tegel__knop { min-height: var(--rdl-tik, 44px); padding-top: 0; font-size: 14px; }
}
@media (min-width: 768px) { .rdl-lp ul.rdl-hc-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rdl-hc-tegel__tekst { padding: var(--rdl-kaart-pad, 24px); } }
/* Vanaf 1024px: aantal kolommen = aantal tegels, maximaal 4 per rij (--rdl-tegels uit rdl_hc_blok_tegels(); bij meer dan 4 tegels 3 kolommen en doorlopen).
   Minimaal 2 kolommen: 1 tegel is net zo breed als 1 van 2 (links uitgelijnd), hij rekt niet over de rij. Van 600 tot 1023px zijn het altijd 2 kolommen. */
@media (min-width: 1024px) {
  .rdl-lp ul.rdl-hc-tegels { grid-template-columns: repeat(var(--rdl-tegels, 3), minmax(0, 1fr)); gap: 20px; }
  .rdl-hc-tegel__tekst { padding: var(--space-4, 16px); }
}
/* Tekst maximaal 3 regels (de volledige tekst blijft in de HTML). */
.rdl-hc-tegel__zin { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* ---------- Voor jouw raam: grijs vlak, vier witte kaarten ---------- */
.rdl-hc-ramen__vlak { padding: var(--space-4, 16px); border-radius: var(--rdl-radius); background: var(--rdl-vlak); }
.rdl-lp .rdl-hc-ramen__vlak h2 { margin: 0 0 4px; }
.rdl-hc-ramen__intro { margin: 0 0 16px; font-size: 15px; color: var(--rdl-tekst-grijs); }
.rdl-lp ul.rdl-hc-ramen__lijst { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rdl-hc-raam { display: flex; align-items: center; gap: 14px; height: 100%; min-height: 72px; padding: 14px 16px; border-radius: var(--rdl-radius); background: var(--rdl-wit); color: var(--rdl-tekst); text-decoration: none; }
.rdl-hc-raam:hover { color: var(--rdl-tekst); }
@media (hover: hover) { .rdl-hc-raam:hover { outline: 2px solid var(--rdl-magenta); outline-offset: 0; } }
.rdl-hc-raam .rdl-hc-pijl { color: var(--rdl-magenta-ink); }
.rdl-hc-raam__icoon { flex: none; display: flex; color: var(--rdl-tekst); }
.rdl-hc-raam__tekst { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.rdl-hc-raam__kop { font-size: 16px; font-weight: 700; line-height: 1.3; }
.rdl-hc-raam__zin { font-size: 14px; line-height: 1.4; color: var(--rdl-tekst-grijs); }
.rdl-hc-raam .rdl-hc-pijl { flex: none; }
.rdl-hc-ramen__hulp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: var(--rdl-blok, 32px); }
.rdl-hc-ramen__hulp p { flex: 1 1 100%; margin: 0; font-size: 15px; font-weight: 600; }
.rdl-lp .rdl-hc-bel { display: inline-flex; align-items: center; min-height: var(--rdl-tik); font-weight: 700; color: var(--rdl-magenta-ink); text-decoration: underline; text-underline-offset: 3px; }
.rdl-lp .rdl-hc-bel:hover { color: var(--rdl-magenta-hover); }
@media (max-width: 479px) { .rdl-hc-ramen__hulp .rdl-knop { flex: 1 1 100%; } }
@media (min-width: 600px) { .rdl-lp ul.rdl-hc-ramen__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .rdl-hc-ramen__vlak { padding: var(--rdl-kaart-pad, 24px); } }
@media (min-width: 1024px) {
  .rdl-lp ul.rdl-hc-ramen__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .rdl-hc-raam { flex-direction: column; align-items: flex-start; padding: 18px; }
  .rdl-hc-raam .rdl-hc-pijl { margin: auto 0 0; }
  .rdl-hc-ramen__hulp p { flex: 0 1 auto; }
}

/* ---------- Per ruimte: kaarten zoals de productkaart (productkaart.css): witte kaart met rand en radius 12,
   foto 1:1 (cover), naam + pijl in de kaart; hover = donkerdere rand. Zelfde raster en tussenruimte als de kaarten. */
.rdl-lp ul.rdl-hc-ruimtes__lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.rdl-hc-ruimtes__lijst li { display: flex; min-width: 0; }
.rdl-hc-ruimte { display: flex; flex-direction: column; width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--rdl-rand); border-radius: var(--rdl-radius); background: var(--rdl-wit); color: var(--rdl-tekst); text-decoration: none; }
.rdl-hc-ruimte:hover { color: var(--rdl-tekst); }
@media (hover: hover) { .rdl-hc-ruimte:hover { outline: 2px solid var(--rdl-magenta); outline-offset: -1px; } }
.rdl-hc-ruimte__naam .rdl-hc-pijl { color: var(--rdl-magenta-ink); }
.rdl-hc-ruimte__beeld { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--rdl-foto-vlak); }
.rdl-lp .rdl-hc-ruimte__beeld img, .rdl-hc-ruimte__beeld .rdl-ruimte-leeg { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rdl-hc-ruimte__tekst { display: flex; flex: 1 1 auto; padding: 10px; }
.rdl-hc-ruimte__naam { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 6px; min-height: 24px; font-size: 15px; font-weight: 700; line-height: 1.25; }
.rdl-hc-ruimte:hover .rdl-hc-ruimte__naam > span { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 768px) { .rdl-hc-ruimte__tekst { padding: 12px 14px; } .rdl-hc-ruimte__naam { font-size: 16px; } }
@media (min-width: 1024px) { .rdl-lp ul.rdl-hc-ruimtes__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; } }

/* ---------- Meest gekozen: vier kaarten (2 naast elkaar tot 1024px, dan 4) ---------- */
@media (min-width: 600px) and (max-width: 1023px) { .rdl-lp ul.rdl-hc-populair__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Knoppen naar meten, monteren en extra categorieën ---------- */
.rdl-lp .rdl-hc-links__kop { margin-bottom: 14px; font-size: 22px; }
.rdl-lp ul.rdl-hc-links__lijst { display: flex; flex-wrap: wrap; gap: 10px; }
.rdl-hc-links__lijst li { flex: 1 1 100%; }
.rdl-lp .rdl-hc-knop--omlijnd, .rdl-lp .rdl-hc-knop--omlijnd:visited { width: 100%; border-color: var(--rdl-tekst); background: var(--rdl-wit); color: var(--rdl-tekst); }
.rdl-lp .rdl-hc-knop--omlijnd:hover { background: var(--rdl-vlak); color: var(--rdl-tekst); }
@media (min-width: 600px) { .rdl-hc-links__lijst li { flex: 0 0 auto; } .rdl-lp .rdl-hc-knop--omlijnd { width: auto; } }
@media (min-width: 768px) { .rdl-lp .rdl-hc-links__kop { font-size: 26px; } }