/* Gerelateerde producten, letterlijke extractie uit het statische prototype.
   Bron: raamdecohuis-screens-prototype/index.html
   Sectie-HTML: regels 1173 tot 1183 (section.block.soft#related)
   Stijlen: .wrap (35), buttons (39 tot 46, 48), section.block (317 tot 321),
   .rel* (577 tot 588), responsive (618 en 633 tot 636).
   De eyebrow en de kop uit het ontwerp staan hier niet: het blok bestaat alleen uit
   de kaarten en de pagina eromheen zorgt zelf voor een kop.
   Eigen scope .rdh-related met dezelfde variabelen als de configurator, zodat dit
   blok ook werkt op een pagina zonder configurator. Enige toevoeging buiten het
   prototype: de img-regel in .rdh-ph (het prototype had daar alleen een svg) en
   een focusstijl op de links.
   Geen enkele waarde is aangepast of afgerond. */

.rdh-related{
  --rdh-green:#41C138; --rdh-green-600:#37a82f; --rdh-green-700:#2d8f27; --rdh-green-050:#eef9ec; --rdh-green-100:#dcf3d8;
  --rdh-ink:#20343A; --rdh-ink-700:#2b444c; --rdh-ink-600:#3a565f;
  --rdh-text:#243035; --rdh-muted:#6a7a7f; --rdh-muted-2:#8b979b;--rdh-body-grey:#676767;
  --rdh-line:#e5eae9; --rdh-line-2:#eef2f1;
  --rdh-grey-btn:#dfe3e3; --rdh-grey-btn-h:#d2d8d8;
  --rdh-bg:#ffffff; --rdh-bg-soft:#f4f8f6; --rdh-bg-soft-2:#eef4f2;
  --rdh-r-xs:8px; --rdh-r-sm:12px; --rdh-r-md:16px; --rdh-r-lg:22px; --rdh-r-xl:30px; --rdh-r-pill:999px;
  --rdh-shadow-sm:0 2px 8px rgba(32,52,58,.06);
  --rdh-shadow:0 10px 30px rgba(32,52,58,.10);
  --rdh-shadow-lg:0 24px 60px rgba(32,52,58,.16);
  --rdh-maxw:1220px;
  --rdh-font-head:'Comfortaa','Poppins',system-ui,sans-serif;
  --rdh-font-body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
}

.rdh-related *{box-sizing:border-box}
.rdh-related{margin:0;font-family:var(--rdh-font-body);color:var(--rdh-text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.rdh-related h2,.rdh-related h3{font-family:var(--rdh-font-head);color:var(--rdh-ink);font-weight:700;line-height:1.2;margin:0}
.rdh-related a{color:inherit;text-decoration:none}
.rdh-related img{max-width:100%;display:block}
.rdh-related .rdh-wrap{max-width:var(--rdh-maxw);margin:0 auto;padding:0 24px}

.rdh-related .rdh-rel-block{padding:64px 0;background:var(--rdh-bg-soft)}

.rdh-related .rdh-rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.rdh-related .rdh-rel .rdh-ph{aspect-ratio:4/3;border-radius:var(--rdh-r-lg);background:linear-gradient(135deg,#e7eeeb,#dbe6e2);display:grid;place-items:center;color:#aebbb8;overflow:hidden}
.rdh-related .rdh-rel .rdh-ph svg{width:44px;height:44px;opacity:.5}
.rdh-related .rdh-rel .rdh-ph img{width:100%;height:100%;object-fit:cover}
.rdh-related .rdh-rel h3{font-size:18px;margin:16px 0 4px;display:inline-block;position:relative}
.rdh-related .rdh-rel h3::after{content:"";position:absolute;left:0;bottom:-5px;width:46px;height:3px;background:var(--rdh-green);border-radius:2px}
.rdh-related .rdh-rel ul{list-style:none;padding:0;margin:14px 0 16px}
.rdh-related .rdh-rel ul li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--rdh-ink-600);margin-bottom:8px}
.rdh-related .rdh-rel ul li svg{width:16px;height:18px;flex:none}
.rdh-related .rdh-rel .rdh-vanaf{font-family:var(--rdh-font-head);font-weight:700;color:var(--rdh-ink);font-size:15px}
.rdh-related .rdh-rel .rdh-vanaf small{font-weight:400;color:var(--rdh-muted);font-size:12px}

/* De hele kaart aanklikbaar, met een uitgerekte link in plaats van een kaart binnen een
   <a>. De knop is de enige link op de kaart; zijn ::after spant zich over de kaart, dus
   een klik naast de knop volgt diezelfde link. Voordelen boven een JS-klik op de kaart:
   er is en blijft precies een link, de focus en het rechtsklikmenu blijven werken en er
   zit niets in een link genest. */
.rdh-related .rdh-rel-klikbaar{position:relative !important}
.rdh-related .rdh-rel-klikbaar .rdh-rel-link::after{content:"" !important;position:absolute !important;inset:0 !important;z-index:1}
/* De knop mag bij indrukken niet meer verschuiven. Een transform op de link maakt de link
   zelf het containing block van dit uitgerekte vlak, dus kromp het vlak bij mousedown
   terug van de hele kaart naar de knop. De mouseup viel daardoor buiten het vlak en dan
   volgt er geen klik: de kaart voelde aanklikbaar maar linkte niet door. */
.rdh-related .rdh-rel-klikbaar .rdh-rel-link:active{transform:none !important}
/* Hover: de kaart wordt iets groter, zodat te zien is dat het geheel aanklikbaar is. De
   knop houdt zijn eigen hoverkleur uit het ontwerp. Alleen op apparaten met een echte
   aanwijzer, want op touch blijft :hover na een tik hangen. */
@media (hover: hover) {
  .rdh-related .rdh-rel-klikbaar{transition:transform .18s ease}
  .rdh-related .rdh-rel-klikbaar:hover{transform:scale(1.02)}
}
.rdh-related .rdh-rel-klikbaar:hover .rdh-btn-primary{background:var(--rdh-green-600)}
.rdh-related .rdh-rel-klikbaar:hover h3{color:var(--rdh-green-700)}
@media (prefers-reduced-motion: reduce) {
  .rdh-related .rdh-rel-klikbaar{transition:none}
  .rdh-related .rdh-rel-klikbaar:hover{transform:none}
}
/* Toetsenbordfocus hoort op de kaart te zien te zijn, niet alleen op de knop zelf. Via
   :has en niet via :focus-within, want een muisklik zet ook focus op de link en dan stond
   die groene rand na elke klik om de kaart. De ring op de link zelf gaat alleen weg als
   :has werkt, zodat er zonder die selector nog altijd een focusstijl overblijft. */
.rdh-related .rdh-rel-klikbaar:has(.rdh-rel-link:focus-visible){outline:3px solid var(--rdh-green);outline-offset:4px;border-radius:var(--rdh-r-xs)}
.rdh-related .rdh-rel-klikbaar:has(.rdh-rel-link:focus-visible) .rdh-rel-link:focus-visible{outline:none}
.rdh-related .rdh-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.rdh-related .rdh-btn{border:0;cursor:pointer;font-family:var(--rdh-font-head);font-weight:700;font-size:16px;border-radius:var(--rdh-r-xs);padding:14px 16px 14px 22px;display:inline-flex;align-items:center;justify-content:center;gap:12px;transition:transform .12s,background .15s,box-shadow .15s;text-align:left;line-height:1.2}
.rdh-related .rdh-btn:active{transform:translateY(1px)}
.rdh-related .rdh-btn .rdh-hex{width:30px;height:30px;flex:none;background:var(--rdh-ink);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);display:grid;place-items:center}
.rdh-related .rdh-btn .rdh-hex svg{width:13px;height:13px;color:#fff}
.rdh-related .rdh-btn-primary{background:var(--rdh-green);color:#fff;box-shadow:0 8px 20px rgba(65,193,56,.30)}
.rdh-related .rdh-btn-primary:hover{background:var(--rdh-green-600)}
.rdh-related .rdh-rel .rdh-btn{width:100%;font-size:17.5px}

.rdh-related a:focus-visible{outline:2px solid var(--rdh-green-700);outline-offset:2px;border-radius:4px}
.rdh-related .rdh-btn:focus-visible{outline:2px solid var(--rdh-ink);outline-offset:2px}

@media (max-width:1000px){
  .rdh-related .rdh-rel-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .rdh-related .rdh-rel-grid{grid-template-columns:1fr}
  .rdh-related .rdh-rel-block{padding:48px 0}
}