/* ============================================================================
   Reclame: kop met de drie bedragen, de kanaalgrafiek en de kaarten.
   ========================================================================== */

.rec-kop {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0; overflow: hidden;
}
.rec-kop__cijfers {
  padding: 20px; display: grid; gap: 18px; align-content: start;
  border-right: 1px solid var(--lijn);
}
.rec-kop__cel { position: relative; padding-left: 13px; }
.rec-kop__cel::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px;
  border-radius: 3px; background: var(--lijn-2);
}
.rec-kop__cel:first-child::before { background: var(--roest); }
.rec-kop__cel[data-teken="pos"]::before { background: var(--pos); }
.rec-kop__cel[data-teken="neg"]::before { background: var(--neg); }
.rec-kop__waarde {
  font-size: clamp(26px, 4.4vw, 38px); font-weight: 700; font-stretch: 90%;
  letter-spacing: -.02em; line-height: 1.05; margin: 3px 0 3px;
}
.rec-kop__cel[data-teken="pos"] .rec-kop__waarde { color: var(--goed-tekst); }
.rec-kop__cel[data-teken="neg"] .rec-kop__waarde { color: var(--slecht-tekst); }
.rec-kop__naast { padding: 20px; display: grid; gap: 12px; align-content: start; }
.rec-kop__zin { font-size: 14.5px; line-height: 1.55; }
.rec-kop__strip { border-top: 1px solid var(--lijn); padding-top: 12px; }
.rec-maanden { margin-top: 4px; }
.rec-kop__voorbehoud { display: flex; gap: 6px; align-items: flex-start; }
.rec-kop__voorbehoud svg { flex: none; margin-top: 2px; }

@media (max-width: 780px) {
  .rec-kop { grid-template-columns: 1fr; }
  .rec-kop__cijfers { border-right: 0; border-bottom: 1px solid var(--lijn);
    grid-template-columns: 1fr 1fr; gap: 14px; }
  .rec-kop__cel:last-child { grid-column: 1 / -1; }
}

/* ---- de grafiek ---- */
.grafiek .rec-naam { font-size: 12.5px; font-stretch: 88%; fill: var(--tekst); }
.grafiek .rec-bedrag { font-size: 11.5px; font-stretch: 88%; fill: var(--tekst-2); }
.grafiek .rec-netto { font-size: 13px; font-weight: 700; font-stretch: 88%; }
.grafiek .rec-netto[data-teken="pos"] { fill: var(--goed-tekst); }
.grafiek .rec-netto[data-teken="neg"] { fill: var(--slecht-tekst); }

/* ---- de kaarten ---- */
.rec-kaarten { display: grid; }
.rec-kaart { padding: 18px 20px; border-top: 1px solid var(--lijn); }
.rec-kaarten .rec-kaart:first-child { border-top: 0; }
.rec-kaart__kop {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
}
.rec-kaart__kop h4 { font-size: 15px; letter-spacing: -.012em; margin-bottom: 2px; }
.rec-kaart__kop .chip { margin-top: 2px; }

.rec-feiten {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--lijn); border: 1px solid var(--lijn);
  border-radius: var(--r-m); overflow: hidden;
}
.rec-feit { background: var(--opp); padding: 10px 12px; }
.rec-feit__label {
  font-size: 11px; font-weight: 700; font-stretch: 88%; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tekst-3);
}
.rec-feit__waarde {
  font-size: 17px; font-weight: 650; font-stretch: 92%; letter-spacing: -.015em;
  margin: 2px 0 1px;
}
.rec-feit[data-teken="pos"] { background: var(--goed-zacht); }
.rec-feit[data-teken="pos"] .rec-feit__waarde { color: var(--goed-tekst); }
.rec-feit[data-teken="neg"] { background: var(--slecht-zacht); }
.rec-feit[data-teken="neg"] .rec-feit__waarde { color: var(--slecht-tekst); }

.rec-kaart__uitleg { margin-top: 12px; display: grid; gap: 6px; }
.rec-kaart__waarom, .rec-kaart__actie {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; line-height: 1.5; color: var(--tekst-2);
}
.rec-kaart__waarom svg { flex: none; margin-top: 2px; }
.rec-kaart__actie { color: var(--roest-tekst); font-weight: 550; }
.rec-kaart__actie svg { flex: none; margin-top: 3px; }
.rec-kaart[data-oordeel="goed"] .rec-kaart__waarom svg { color: var(--goed); }
.rec-kaart[data-oordeel="let-op"] .rec-kaart__waarom svg { color: var(--let-op); }
.rec-kaart[data-oordeel="slecht"] .rec-kaart__waarom svg { color: var(--slecht); }

@media (max-width: 900px) {
  .rec-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .rec-kaart { padding: 15px; }
}