/* Raamdecoland - onderdelenpagina (reserveonderdelen.php, reserveonderdelen-sjabloon.php). Mobile-first.
   Bouwt voort op contact.css (kop, knoppen, formulier); hier alleen de kop zonder beeld, de kaarten per soort,
   "Zo gaat het", de terugval zonder formulier en de FAQ. Kleuren uit tokens.css. */

/* Kop: tekst op het lichte vlak, intro leesbaar breed */
.rdl-od .rdl-od-kop { max-width: 760px; }
.rdl-od .rdl-od-kop__intro { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--rdl-ink-soft); }
.rdl-od .rdl-ct-banner h1 { font-size: 30px; }
@media (min-width: 768px) {
  .rdl-od .rdl-ct-banner h1 { font-size: clamp(30px, 3vw, 44px); }
  .rdl-od .rdl-od-kop__intro { font-size: 18px; }
  .rdl-od .rdl-od-kop .rdl-ct-knoppen { flex-direction: row; flex-wrap: wrap; }
}

/* Soorten onderdelen: mobiel onder elkaar, 2 kolommen vanaf 600px, 3 vanaf 1024px. Rijen altijd vol:
   bij een oneven aantal in 2 kolommen neemt de laatste kaart de hele breedte; vanaf 1024px op een raster van 6,
   zodat 5 kaarten als 3 + 2 (twee bredere) staan en een losse laatste kaart de hele breedte neemt. */
.rdl-od .rdl-od-soorten { padding-top: 36px; padding-bottom: 8px; }
.rdl-od .rdl-od-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
@media (min-width: 600px) {
  .rdl-od .rdl-od-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdl-od .rdl-od-kaart:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .rdl-od .rdl-od-soorten { padding-top: 56px; }
  .rdl-od .rdl-od-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .rdl-od .rdl-od-kaart, .rdl-od .rdl-od-kaart:last-child:nth-child(odd) { grid-column: span 2; }
  .rdl-od .rdl-od-kaart:nth-last-child(2):nth-child(3n + 1), .rdl-od .rdl-od-kaart:last-child:nth-child(3n + 2) { grid-column: span 3; }
  .rdl-od .rdl-od-kaart:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
.rdl-od .rdl-od-kaart { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px; border: 1px solid var(--rdl-border); border-radius: 12px; background: #fff; }
@media (min-width: 768px) { .rdl-od .rdl-od-kaart { padding: 24px; } }
.rdl-od .rdl-od-kaart__titel { margin: 0; font-family: Sora, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--rdl-ink); }
.rdl-od .rdl-od-kaart__tekst { font-size: 16px; line-height: 1.5; color: var(--rdl-ink-soft); }
.rdl-od .rdl-od-kaart__lijst { margin: 0; padding: 0 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--rdl-ink-muted); }
.rdl-od .rdl-od-kaart__lijst li { margin: 0; }
/* Link: tikvlak minstens 44px hoog (12px boven en onder), het pijltje blijft aan het laatste woord vast */
.rdl-od .rdl-od-kaart__link { display: block; align-self: flex-start; margin-top: auto; padding: 12px 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--rdl-magenta-ink); text-decoration: underline; text-underline-offset: 3px; }
.rdl-od .rdl-od-kaart__link:hover { text-decoration-thickness: 2px; }
.rdl-od .rdl-od-kaart__link::after { content: "\00a0\2192"; display: inline; }

/* Keuzelijst "Voor welk product?" (contact.css kent geen select): zelfde maat en rand als de invoervelden, eigen pijltje */
.rdl-ct .rdl-cf select {
  display: block; width: 100%; max-width: 100%; min-height: 54px; margin: 0; padding: 14px 44px 14px 16px; border: 2px solid #b9bfb2; border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316201a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 16px;
  font-family: inherit; font-size: 17px; line-height: 1.4; color: var(--rdl-ink); -webkit-appearance: none; appearance: none; cursor: pointer; }
.rdl-ct .rdl-cf select:focus { border-color: var(--rdl-ink); outline: 2px solid var(--rdl-ink); outline-offset: 0; }
.rdl-ct .rdl-cf select.wpcf7-not-valid { border-color: #b3261e; }
.rdl-ct .rdl-cf input::placeholder { color: var(--rdl-ink-muted); opacity: 1; }

/* Formulier: anker niet onder een vaste header laten vallen; focus van het anker niet tonen */
.rdl-od #formulier { scroll-margin-top: 16px; outline: none; }

/* Zonder formulier: bel- en mailknop */
.rdl-od .rdl-od-terugval { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--rdl-border); border-radius: 12px; background: var(--rdl-tint); font-size: 17px; line-height: 1.5; }
@media (min-width: 768px) { .rdl-od .rdl-od-terugval { padding: 24px; } }
.rdl-od .rdl-od-terugval .rdl-ct-knop { white-space: normal; }

/* Zo gaat het (rechterkolom vanaf 900px) */
.rdl-od .rdl-od-stappen { padding: 0 0 40px; }
@media (min-width: 900px) { .rdl-od .rdl-od-stappen { padding: 0; } }
.rdl-od .rdl-od-stappen__lijst { display: grid; gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: rdlod; }
.rdl-od .rdl-od-stappen__lijst li { position: relative; margin: 0; padding-left: 44px; font-size: 16px; line-height: 1.5; color: var(--rdl-ink-soft); counter-increment: rdlod; }
.rdl-od .rdl-od-stappen__lijst li::before { content: counter(rdlod); position: absolute; left: 0; top: -2px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--rdl-ink); color: #fff; font-family: Sora, sans-serif; font-size: 15px; font-weight: 700; }
.rdl-od .rdl-od-stappen__lijst strong { color: var(--rdl-ink); }
.rdl-od .rdl-od-stappen__liever { margin-top: 20px; font-size: 16px; line-height: 1.5; color: var(--rdl-ink-soft); }
.rdl-od .rdl-od-stappen__liever a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--rdl-magenta-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Veelgestelde vragen (opmaak van .rdl-faq staat in onderdelen.css) */
.rdl-od .rdl-od-faq { padding-top: 8px; padding-bottom: 56px; }
.rdl-od .rdl-od-faq .rdl-faq { max-width: 860px; }
@media (min-width: 900px) { .rdl-od .rdl-od-faq { padding-bottom: 72px; } }