/**
 * Ronde 18 (RONDE-18-DATACONTENT.md): datacomponenten in de homepage-
 * content-hub (prijsgrafiek, actiegrafiek, bundelrekensom, en de kaartstijl
 * rond de teruggekeerde prijstabel). Alle kleuren via var(--aie-*), geen
 * hex hier. Breakpoints: 480 / 600 / 860px (huisstijl), plus een eigen
 * ondergrens van 1100px voor de "brede" kaart (zie hieronder).
 */

/* =========================================================================
 * 1. Kaartstijl (gedeeld door prijstabel, prijsgrafiek, actiegrafiek,
 *    bundelrekensom binnen de content-hub-tekst).
 * ========================================================================= */
.aie-datablok {
	background: var( --aie-card );
	border: 1px solid var( --aie-border );
	border-radius: var( --aie-radius );
	box-shadow: var( --aie-shadow-1 );
	padding: 28px;
	margin: 1.6em 0;
}
/* De contenthub-kolom is vast 760px (style.css 23f); vanaf 1100px viewport
   is er in de 1fr-gridkolom naast de jumpnav aantoonbaar >900px ruimte
   (container 1180px - 40px padding - 260px jumpnav - 48px gap = 832px, dus
   ruim), zodat een brede kaart tot 900px zonder overlap kan "bleeden".
   Onder 1100px blijft de kaart binnen de veilige 760px-kolom: geen risico
   op overlap met de sticky jumpnav op middelgrote viewports. */
@media ( min-width: 1100px ) {
	.aie-datablok--breed {
		max-width: 900px;
		width: calc( 100% + 140px );
		margin-inline: -70px;
	}
}
.aie-datablok__svg { display: block; width: 100%; height: auto; }
.aie-datablok__foot { margin: 14px 0 0; font-size: .85rem; color: var( --aie-muted ); font-weight: 600; text-align: center; }

/* [aie_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). */
.aie-seo-tekst .aie-datablok .aie-prijstabel-wrap { margin: 0; }

/* =========================================================================
 * 2. Actiegrafiek-legenda (actieprijs vs. prijs na de actie).
 * ========================================================================= */
.aie-actiegrafiek__legend { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 16px; font-size: .88rem; font-weight: 600; color: var( --aie-text ); }
.aie-actiegrafiek__legend-item { display: inline-flex; align-items: center; gap: 8px; }
.aie-actiegrafiek__dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.aie-actiegrafiek__dot--actie { background: var( --aie-primary ); }
.aie-actiegrafiek__dot--normaal { background: var( --aie-tint-1 ); border: 1px solid var( --aie-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 (.aie-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
   .aie-bundeltabel caption hieronder) leesbaar te houden zonder een
   onnodig brede scrollcontainer. */
.aie-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. */
.aie-bundeltabel caption { text-align: left; font-size: .92rem; color: var( --aie-muted ); margin-bottom: 14px; font-weight: 600; white-space: normal; }
.aie-bundeltabel th, .aie-bundeltabel td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var( --aie-border ); }
.aie-bundeltabel thead th { color: var( --aie-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. */
.aie-bundeltabel tbody th { font-weight: 600; color: var( --aie-ink ); }
.aie-bundeltabel tbody td { font-family: var( --aie-font-head ); font-weight: 700; color: var( --aie-ink ); }
.aie-bundeltabel__slot { background: var( --aie-tint-3 ); }
.aie-bundeltabel__slot th, .aie-bundeltabel__slot td { border-bottom: none; font-weight: 700; color: var( --aie-success-dark ); font-family: var( --aie-font-body ); }

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

/* =========================================================================
 * 4. [aie_duel] duel-vergelijkingsblok (kennisbank-duelartikelen).
 * ========================================================================= */
.aie-duel__head { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 18px; }
.aie-duel__provider { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var( --aie-font-head ); font-weight: 700; color: var( --aie-ink ); text-align: center; }
.aie-duel__provider img { height: 34px; width: auto; max-width: 120px; object-fit: contain; }
.aie-duel__vs { font-family: var( --aie-font-head ); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var( --aie-on-primary ); background: var( --aie-primary ); border-radius: 999px; padding: 6px 12px; flex-shrink: 0; }
.aie-duel__table { width: 100%; border-collapse: collapse; }
.aie-duel__table th, .aie-duel__table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var( --aie-border ); }
.aie-duel__table thead th:not(:first-child) { font-family: var( --aie-font-head ); font-weight: 700; color: var( --aie-ink ); }
.aie-duel__table tbody th { font-weight: 600; color: var( --aie-muted ); font-size: .92rem; }
.aie-duel__table tbody td { font-family: var( --aie-font-head ); font-weight: 700; color: var( --aie-ink ); }
.aie-duel__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; justify-content: center; }
.aie-duel__ctas .aie-btn { flex: 1 1 200px; text-align: center; justify-content: center; }
@media ( max-width: 480px ) {
	.aie-duel__head { gap: 10px; }
	.aie-duel__provider img { height: 26px; }
}