/* =========================================================
   Aanbiederspagina's (/inzicht/<slug>/)
   Alleen ingeladen op die route; zie functions.php.
   Kleuren en knoppen komen uit site.css — hier staat alleen wat deze pagina's
   eigen hebben: de kop met logo, de rentematrix en de nieuwslijst.
   ========================================================= */

/* ---- Kop: titel op volle breedte, daaronder het logo met de tekst ernaast ----
   Tot 2026-09-16 stond het logo klein náást de titel. Het is nu twee keer zo groot (96px in
   plaats van 48px) en staat ónder de titel, met het aanbiedersverhaal in een kolom ernaast.
   De logokolom krimpt niet mee (auto), de tekstkolom vult de rest; minmax(0,1fr) voorkomt dat
   een lange regel de kolom breder maakt dan de kaart. */
.ri-lender-h1{
  margin: 0 0 16px;
  font-size: clamp(22px, 2.4vw, 32px);
}
.ri-lender-head{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}
.ri-lender-logo{
  width: auto;
  height: 96px;
  max-width: 360px;
  object-fit: contain;
}
/* De eerste alinea naast het logo mag geen eigen marge meenemen: dan staat de tekst niet
   meer op één lijn met de bovenkant van het logo. */
.ri-lender-head-tekst > :first-child{ margin-top: 0; }

@media (max-width: 720px){
  .ri-lender-head{ grid-template-columns: 1fr; gap: 14px; }
}

/* ---- Elke rentetabel in een eigen kaart ---- */
.ri-lender-tabelkaart{ margin-top: 14px; }
.ri-lender-tabelkop{ margin: 0 0 10px; }
/* De caption herhaalt de kaartkop en gaat daarom visueel weg, maar blijft in de HTML staan:
   schermlezers en zoekmachines lezen daarmee nog steeds de volledige tabelomschrijving.
   Bewust GEEN display:none -- dan valt hij ook voor die twee weg. */
.ri-rategrid-cap-sr{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Rentematrix ----
   Rentevaste periode verticaal, LTV horizontaal. De eerste kolom blijft staan bij
   horizontaal scrollen: zonder die anker-kolom weet je op een telefoon niet meer
   welke periode je leest zodra je naar rechts scrolt. */
/* Horizontaal scrollen binnen de tabel loopt via .ri-hscroll uit site.css (t/m 900px), dat er
   ook het pijlknopje bij zet. Wat hier staat is aanvullend: overscroll-behavior houdt de swipe
   binnen de tabel zodat je aan het einde van een rij niet de pagina meesleept, en de
   overflow-regel laat de tabel óók boven 900px scrollen — op een smal bureaubladvenster is dat
   net zo nodig. De eerste kolom blijft sticky staan (zie hieronder), anders weet je op een
   telefoon niet meer welke rentevaste periode je leest. */
.ri-rategrid-wrap{
  margin-top: 12px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
/* .ri-hscroll is gemaakt voor KAARTENstroken en reserveert daarom 14px links en rechts binnen
   de scrollruimte (voor kaartschaduwen), gecompenseerd met negatieve marges, plus een gap en
   scroll-snap. Bij een tabel werkt die linkerpadding averechts: `position: sticky; left: 0`
   plakt aan de padding-rand, dus in die strook van 14px blijven de scrollende kolommen
   zichtbaar links van de rentevast-kolom. Hier zetten we die kaart-specifieke ruimte en het
   snappen uit; het swipe-gedrag en het pijlknopje van .ri-hscroll blijven werken.
   Deze regel staat ná site.css in de laadvolgorde en heeft dezelfde specificiteit, dus hij
   wint — géén !important nodig. */
.ri-rategrid-wrap.ri-hscroll{
  padding: 0;
  margin: 12px 0 0;
  gap: 0;
  scroll-snap-type: none;
  scroll-padding: 0;
}
.ri-rategrid{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  /* Onder deze breedte scrollt de wrapper in plaats van dat de kolommen knijpen. Verhoogd van
     560 naar 640 nu de tabel het volledige LTV-rooster toont (t/m 85%, dus acht kolommen). */
  min-width: 640px;
  font-size: 14px;
}
/* De tabeltitel blijft staan bij horizontaal scrollen (user 2026-08-29). Een <caption> is
   standaard zo breed als de tabel en schuift dus mee de scrollrichting uit; met max-content
   krimpt hij tot zijn tekst en houdt sticky links hem op zijn plek. Bewust géén los kopje
   buiten de tabel: <caption> is de enige vorm die schermlezers als tabeltitel aankondigen. */
.ri-rategrid-cap{
  caption-side: top;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15, 23, 42, .62);
  padding: 0 0 8px;
  position: sticky;
  left: 0;
  width: max-content;
  max-width: 100%;
}
/* Tarieven gecentreerd in hun cel (user 2026-09-03): de koppen luiden sinds dezelfde dag
   voluit "t/m 50% LTV" en zijn breder dan de tarieven, waardoor rechts uitlijnen de getallen
   los van hun kop trok. De rijkop (de periode) blijft links — die regel staat verderop. */
.ri-rategrid th,
.ri-rategrid td{
  padding: 9px 12px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid rgba(15, 23, 42, .10);
}
.ri-rategrid thead th{
  font-weight: 800;
  color: rgba(15, 23, 42, .90);
  border-bottom-width: 2px;
  /* De koppen luiden voluit "t/m 50% LTV" (user 2026-09-03) en zijn daarmee een stuk breder
     dan het kale percentage. Ze mogen daarom afbreken — de harde spatie in de markup houdt
     "t/m 50%" bijeen, zodat er hooguit een tweede regel met "LTV" onder komt en de tabel
     niet op elk bureaubladvenster in de horizontale scroll schuift. De cellen zelf houden
     hun nowrap uit de regel hierboven. */
  white-space: normal;
  line-height: 1.25;
}
/* Rijkop (de periode) links uitgelijnd en vastgezet tijdens horizontaal scrollen. De
   scrollende kolommen moeten er ÁCHTER verdwijnen, niet doorheen schemeren of er links naast
   opduiken — vandaar een dekkende achtergrond én een z-index boven de gewone cellen. De
   randschaduw rechts markeert de scheiding, zodat je ziet dat de kolom blijft staan. */
.ri-rategrid tbody th,
.ri-rategrid th.ri-rategrid-corner,
.ri-rategrid-corner{
  /* De extra th-variant is nodig: ".ri-rategrid th" (element+klasse) won anders op
     specificiteit van ".ri-rategrid-corner" en zette de kop "Rentevast" rechts (user
     2026-09-03, opgemerkt in het eerste rentenieuwsbericht). */
  text-align: left;
  font-weight: 800;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 1px 0 0 rgba(15, 23, 42, .10);
}
/* Zebra-strepen DEKKEND houden. Met een doorzichtige laag (rgba .025) schemeren de scrollende
   cellen door de sticky kolom heen; #F9F9FA is diezelfde tint op wit, dus visueel identiek
   maar wél ondoorzichtig. */
.ri-rategrid tbody tr:nth-child(even) th,
.ri-rategrid tbody tr:nth-child(even) td{
  background: #F9F9FA;
}
/* Cijfers onder elkaar uitlijnen: tabular-nums houdt de kolommen recht ook al
   verschillen de cijferbreedtes per glyph. */
.ri-rategrid td{
  font-variant-numeric: tabular-nums;
}
.ri-rategrid td.is-empty{
  color: rgba(15, 23, 42, .34);
}

/* ---- Nieuwslijst ---- */
.ri-lender-news{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ri-lender-news li{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.ri-lender-news li:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.ri-lender-news-date{
  flex: 0 0 auto;
  font-size: 13px;
  color: rgba(15, 23, 42, .58);
}

@media (max-width: 560px){
  .ri-lender-logo{ height: 72px; }
  .ri-rategrid{ font-size: 13px; }
  .ri-rategrid th,
  .ri-rategrid td{ padding: 8px 10px; }
}

/* Elk tarief linkt naar de rentetool op die combinatie van periode en LTV (user 2026-08-29).
   De link erft de celopmaak — kleur, gewicht en tabular-nums komen van de td — zodat de tabel
   niet verandert in een muur van blauwe links en de cijfers recht onder elkaar blijven staan.
   De affordance zit in de hover: een onderstreping in het merkgroen (--brand-green uit
   styles.css), dezelfde kleur als de actieve cel in de rentetool zelf (user 2026-08-29). */
.ri-rategrid .ri-rategrid-link{
  /* !important is hier nodig: site.css kleurt élke link merkgroen met
     a:not(.ri-btn):not(.ri-nav a):not(.ri-mobile a):not(.ri-footer a):not(.ri-knowledge-link),
     en die selector weegt door de vijf :not()'s zwaarder dan wat hier haalbaar is zonder de
     regel onleesbaar te maken. De tarieven zijn data, geen navigatie: ze horen zwart te zijn,
     net als in de rentetool zelf. Het alternatief — deze class toevoegen aan de uitsluitingen
     in site.css — valt af omdat dat bestand buiten git in de webroot staat. */
  color: inherit !important;
  text-decoration: none;
}
.ri-rategrid .ri-rategrid-link:hover,
.ri-rategrid .ri-rategrid-link:focus-visible{
  text-decoration: underline;
  /* Letterlijke waarde en geen var(--brand-green): styles.css van de rentetool wordt op deze
     pagina niet geladen, dus de custom property bestaat hier niet. Bij een kleurwijziging dus
     beide bestanden nalopen. */
  text-decoration-color: #64CAB9;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ri-rategrid .ri-rategrid-link:focus-visible{
  outline: 2px solid #64CAB9;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Vraag-en-antwoordsectie onder de rentetabel (2026-09-04).

   Bewust géén uitklap-accordeon: de pagina is kort genoeg om alles open te tonen, en volledig
   zichtbare tekst is het veiligst voor zoekmachines en AI-crawlers. De vragen zijn h3's onder
   één h2, zodat ze alle even zwaar wegen — elk vraag-antwoordpaar moet los citeerbaar zijn.
   ───────────────────────────────────────────────────────────────────────────── */
.ri-qa-list{ margin-top: 4px; }
.ri-qa-item + .ri-qa-item{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 23, 42, .08);
}
.ri-qa-q{
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 6px;
  color: inherit;
}
.ri-qa-a{
  margin: 0 0 8px;
  line-height: 1.65;
}
.ri-qa-a:last-child{ margin-bottom: 0; }

@media (max-width: 640px){
  .ri-qa-q{ font-size: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Voetnoot onder de rentetabel (2026-09-04): voorwaarden die het getoonde tarief raken, zoals
   een duurzaamheidskorting. Ingetogen gehouden — het is een aanvulling op de cijfers, geen
   tweede blikvanger naast de tabel.
   ───────────────────────────────────────────────────────────────────────────── */
.ri-rate-note{
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid #64CAB9;
  background: rgba(100, 202, 185, .07);
  border-radius: 0 8px 8px 0;
}
.ri-rate-note-p{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.ri-rate-note-p + .ri-labelgrid{ margin-top: 10px; }
.ri-labelgrid + .ri-rate-note-p{ margin-top: 10px; }

/* Kleine tweekolomstabel (Domivest-staffel). Bewust smal: hij hoort niet te concurreren met de
   tarieventabel erboven. */
.ri-labelgrid{
  border-collapse: collapse;
  font-size: 14px;
  min-width: 220px;
}
.ri-labelgrid .ri-labelgrid-cap{
  caption-side: top;
  text-align: left;
  font-weight: 700;
  padding-bottom: 6px;
  /* De kop staat al in de alinea erboven; voor schermlezers blijft hij nuttig. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ri-labelgrid th,
.ri-labelgrid td{
  padding: 5px 16px 5px 0;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.ri-labelgrid thead th{
  font-weight: 700;
  border-bottom-width: 2px;
}
.ri-labelgrid tbody th{ font-weight: 600; }
.ri-labelgrid td{
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 0;
}
.ri-labelgrid tbody tr:last-child th,
.ri-labelgrid tbody tr:last-child td{ border-bottom: 0; }