/* =========================================================================
   Formule tabel  —  block-formule.css
   Vergelijkingstabel met donkergroene hoofding + "Samen sterker"-kolom.
   Desktop: grid-tabel.  Mobiel (<=760px): gestapelde kaarten.
   ========================================================================= */

.formule-tabel-blok {
	/* ---- kleuren (gekoppeld aan thema-variabelen, met fallback) ---- */
	--f-groen:      var(--wp--preset--color--brandcolor-1, #2D4A38);   /* hoofding */
	--f-tekst:      var(--wp--preset--color--brandcolor-1, #22312a);
	--f-tekst-sub:  var(--wp--preset--color--colorgrey, #6d7a71);
	--f-rand:       var(--wp--preset--color--colorlightgrey, #e7ebe5);
	--f-wit:        var(--wp--preset--color--colorwhite, #ffffff);

	/* lichte groentinten afgeleid van de merkkleur */
	--f-samen-bg:   color-mix(in srgb, var(--f-groen) 14%, var(--f-wit));
	--f-samen-rand: color-mix(in srgb, var(--f-groen) 22%, var(--f-wit));

	/* ---- maatvoering (uit bestaande thema-variabelen) ---- */
	--f-radius:     calc(var(--radius, 4px)*2);
	--f-pad:        var(--block-padding-half, 18px);

	box-sizing: border-box;
	width: 100%;
	margin: 0;
	color: var(--f-tekst);
	font-family: inherit;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}
.formule-tabel-blok *,
.formule-tabel-blok *::before,
.formule-tabel-blok *::after { box-sizing: border-box; }

/* Scroll-omhulsel: laat de tabel op smalle desktop/tablet horizontaal scrollen */
.formule-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--f-radius);
}

/* ---- De tabel ---------------------------------------------------------- */
.formule-tabel {
	--aantal-producten: 2;               /* wordt inline overschreven vanuit PHP */
	min-width: 640px;
	width: 100%;
	border: 1px solid var(--f-rand);
	border-radius: var(--f-radius);
	overflow: hidden;
}

/* Elke rij is een eigen grid met identieke kolommen -> perfect uitgelijnd */
.formule-rij {
	display: grid;
	grid-template-columns:
		minmax(0, 1.5fr)
		repeat(var(--aantal-producten), minmax(0, 1fr))
		minmax(0, 1.2fr);
	background-color: rgba(255,255,255,0.9);
}
.formule-rij:nth-child(even) { 
	background-color: rgba(255,255,255,0.5);
}

/* ---- Cellen ------------------------------------------------------------ */
.formule-cel {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	padding: var(--f-pad);
	border-top: 1px solid var(--f-rand);
	min-width: 0;
	font-size: .9rem;
}
.formule-rij:first-child .formule-cel { border-top: 0; }

.formule-cel-tekst { min-width: 0; overflow-wrap: anywhere; }

/* ---- Hoofding ---------------------------------------------------------- */
.formule-rij--hoofding .formule-cel {
	background: var(--f-groen);          /* aspect blijft vol groen als anker */
	color: var(--f-wit);
	border-top: 0;
	font-weight: 600;
	letter-spacing: .2px;
}
/* producten: ~70% transparant (= 30% dekking) -> lichte tint, donkere tekst */
.formule-rij--hoofding .formule-cel--product {
	background: color-mix(in srgb, var(--f-groen) 90%, transparent);
}
/* samen sterker: ~30% transparant (= 70% dekking) -> donkere tint, witte tekst */
.formule-rij--hoofding .formule-cel--samen {
	background: color-mix(in srgb, var(--f-groen) 80%, transparent);
	color: var(--f-wit);
	border-left: 0;
	font-weight: 600;
}
.formule-aspect-kop,
.formule-product-kop,
.formule-samen-kop { font-size: .95rem; }

/* ---- Aspect-kolom ------------------------------------------------------ */
.formule-cel--aspect { flex-direction: column; gap: 4px; }
.formule-aspect-titel { font-size: 0.9rem; }
.formule-aspect-sub   { color: var(--f-tekst-sub); font-size: .85rem; line-height: 1.35; }

/* ---- Samen sterker-kolom (datarijen) ---------------------------------- */
.formule-cel--samen {
	background: var(--f-samen-bg);
	border-left: 1px solid var(--f-samen-rand);
	font-weight: 500;
}

/* ---- Lege-staat (editor) ---------------------------------------------- */
.formule-tabel-blok--leeg {
	padding: 28px;
	text-align: center;
	color: var(--f-tekst-sub);
	background: var(--f-hover);
	border: 1px dashed var(--f-rand);
	border-radius: var(--f-radius);
}

/* =========================================================================
   MOBIEL  —  gestapelde kaarten (<= 760px)
   ========================================================================= */
@media (max-width: 760px) {

	.formule-scroll { overflow: visible; border-radius: 0; }

	.formule-tabel {
		display: block;
		min-width: 0;
		border: 0;
		background: transparent;
		overflow: visible;
	}

	/* hoofding verbergen: de labels komen inline terug via data-label */
	.formule-rij--hoofding { display: none; }

	/* elke datarij wordt een kaart */
	.formule-rij--data {
		display: block;
		background: var(--f-wit);
		border: 1px solid var(--f-rand);
		border-radius: var(--f-radius);
		margin-bottom: 16px;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(20, 40, 25, .05);
	}
	.formule-rij--data:last-child { margin-bottom: 0; }

	.formule-cel {
		border-top: 1px solid var(--f-rand);
		padding: 14px 16px;
	}

	/* aspect als donkergroene kaartkop */
	.formule-cel--aspect {
		background: var(--f-groen);
		color: var(--f-wit);
		border-top: 0;
	}
	.formule-cel--aspect .formule-aspect-sub { color: rgba(255, 255, 255, .78); }

	/* product- en samen-cellen: label boven, dan de tekst */
	.formule-cel--product,
	.formule-cel--samen {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 4px;
		border-left: 0;
	}
	.formule-cel--product::before,
	.formule-cel--samen::before {
		content: attr(data-label);
		flex: 0 0 100%;
		margin-bottom: 2px;
		font-size: .72rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .5px;
		color: var(--f-tekst-sub);
	}
	/* geen label -> geen lege regel */
	.formule-cel--product[data-label=""]::before,
	.formule-cel--samen[data-label=""]::before { display: none; }

	.formule-cel--samen { background: var(--f-samen-bg); }
	.formule-cel--samen::before { color: color-mix(in srgb, var(--f-groen) 55%, var(--f-wit)); }

}

/* ---- Toegankelijkheid -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.formule-tabel-blok * { transition: none !important; }
}