/**
 * Datablokken: prijsgrafiek, actiegrafiek en bundelrekensom binnen de
 * contentsecties (verbeterpunten 29 en 45). Vormtaal van deze gids: rechte
 * hoeken, dunne lijnen, geen schaduw en geen gevulde kaartvlakken. Alle
 * kleuren via var(--avo-*), geen hex. Breakpoints 480 / 600 / 860, plus een
 * eigen ondergrens van 1100px voor de brede kaart.
 */

/* =========================================================================
 * 1. Kaartstijl (gedeeld door prijstabel, prijsgrafiek, actiegrafiek,
 *    bundelrekensom binnen de content-hub-tekst).
 * ========================================================================= */
.avo-datablok {
	background: var( --avo-card );
	border: 1px solid var( --avo-border );
	border-top: 2px solid var( --avo-rule-strong );
	border-radius: 0;
	box-shadow: none;
	padding: 26px 26px 22px;
	margin: 2em 0;
}
/* Op deze site is de tekstkolom van de SEO-sectie zelf al ruim 850px breed
   (container 1180 minus de jumpnav van 240 en de kolomafstand). Een datablok
   vult die kolom en steekt er bewust NIET buiten: links staat de sticky
   jumpnav, en een negatieve marge zou daar overheen vallen. */
.avo-datablok--breed { max-width: 100%; width: 100%; margin-inline: 0; }
.avo-datablok__svg { display: block; width: 100%; height: auto; }
.avo-datablok__foot { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var( --avo-border ); font-size: .84rem; color: var( --avo-muted ); text-align: left; }

/* [avo_prijstabel] binnen de content-hub krijgt dezelfde kaartstijl om het
   "als onderdeel van een tekstblok" te laten aansluiten bij de andere 3
   datacomponenten (RONDE-18, punt 1: niet meer als losse sectie). */
.avo-seo-tekst .avo-datablok .avo-prijstabel-wrap { margin: 0; }

/* =========================================================================
 * 2. Actiegrafiek-legenda (actieprijs vs. prijs na de actie).
 * ========================================================================= */
.avo-actiegrafiek__legend { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 16px; font-size: .88rem; font-weight: 600; color: var( --avo-text ); }
.avo-actiegrafiek__legend-item { display: inline-flex; align-items: center; gap: 8px; }
.avo-actiegrafiek__dot { width: 12px; height: 12px; border-radius: 0; display: inline-block; }
.avo-actiegrafiek__dot--actie { background: var( --avo-primary ); }
.avo-actiegrafiek__dot--normaal { background: var( --avo-tint-1 ); border: 1px solid var( --avo-border ); }

/* =========================================================================
 * 3. Bundelrekensom-tabel.
 * ========================================================================= */
/* Geen eigen min-width: op desktop vult de tabel de kaart (tot 900px breed);
   op mobiel (<=600px) zorgt de generieke regel in style.css (.avo-prose
   table th/td { min-width:120px }) al voor 3 x 120px = 360px, dicht genoeg
   bij de kaartbreedte om de caption (die de tabelbreedte volgt, zie
   .avo-bundeltabel caption hieronder) leesbaar te houden zonder een
   onnodig brede scrollcontainer. */
.avo-bundeltabel { width: 100%; border-collapse: collapse; }
/* display:table-caption (standaard) laten staan: display:block bleek de
   caption via de anonymous-table-object-regels ACHTER de thead te plaatsen
   in plaats van ervoor. De caption volgt daardoor de tabelbreedte (net als
   de rest van de tabel); de tekst is daarom kort gehouden (shortcode-
   datablokken.php) zodat hij ook op mobiel op 1-2 regels past. */
.avo-bundeltabel caption { text-align: left; font-size: .92rem; color: var( --avo-muted ); margin-bottom: 14px; font-weight: 600; white-space: normal; }
.avo-bundeltabel th, .avo-bundeltabel td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var( --avo-border ); }
.avo-bundeltabel thead th { color: var( --avo-muted ); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
/* Geen white-space:nowrap op de rijkop: op mobiel (375px) zou de langste
   label ("Maandprijs (na de actieperiode)") anders de volledige breedte van
   de scrollcontainer opeisen, waardoor de waardekolommen buiten beeld
   verdwijnen zonder dat er iets van te zien is om naar te scrollen. */
.avo-bundeltabel tbody th { font-weight: 600; color: var( --avo-ink ); }
.avo-bundeltabel tbody td { font-family: var( --avo-font-head ); font-weight: 700; color: var( --avo-ink ); }
.avo-bundeltabel__slot { background: var( --avo-tint-1 ); }
.avo-bundeltabel__slot th, .avo-bundeltabel__slot td { border-bottom: none; font-weight: 700; color: var( --avo-primary-dark ); font-family: var( --avo-font-body ); }

@media ( max-width: 600px ) {
	.avo-datablok { padding: 20px; }
}