/*
 * Vergelijkingstabel — "Comparison Table (Basic)" (Osmo Supply). Structuur en de
 * layout via één variabele (--columns-in-view) ongewijzigd. Eigen aanpassingen:
 * box-sizing (valkuil 5), kleuren/typografie uit theme.json, de sticky kop plakt
 * ónder de webshopbalk, en ja/nee via classes (is--ja / is--nee) in plaats van
 * Osmo's Engelse aria-labels. Geen JavaScript.
 */

.comparison-wrap,
.comparison-wrap * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------- sectie */

.boozt-vergelijking__kop {
	margin: 0 0 0.5em;
}

.boozt-vergelijking__intro {
	color: var(--wp--preset--color--ink-muted, #6b5a52);
	max-width: 44rem;
	margin: 0 0 var(--wp--preset--spacing--40, 2.5rem);
}

.boozt-vergelijking__kop + .comparison-wrap {
	margin-top: var(--wp--preset--spacing--40, 2.5rem);
}

/* -------------------------------------------------------------- tabel */

.comparison-wrap {
	width: 100%;
	position: relative;
	--columns-in-view: 3;
	border-top: 1px solid var(--wp--preset--color--line, #dccbba);
}

.comparison-header {
	z-index: 10;
	background-color: var(--wp--preset--color--base, #f8f5f1);
	border-bottom: 1px solid var(--wp--preset--color--line, #dccbba);
	display: flex;
	position: sticky;
	top: var(--vino2-bar-h, 4.5rem); /* onder de plakkende webshopbalk */
}

.comparison-header__corner {
	min-width: 0;
	max-width: calc(100% / (var(--columns-in-view) + 1));
	flex: 1;
}

.comparison-header__list {
	display: flex;
}

.comparison-header__col {
	grid-column-gap: 0.3em;
	grid-row-gap: 0.3em;
	text-align: center;
	min-width: 0;
	max-width: calc(100% / var(--columns-in-view));
	flex-flow: column;
	flex: 1;
	justify-content: center;
	align-items: center;
	padding: 1.25em 0.5em;
	display: flex;
}

.comparison-header__inner {
	flex: var(--columns-in-view);
	min-width: 0;
	max-width: calc(var(--columns-in-view) * 100% / (var(--columns-in-view) + 1));
}

.comparison-header__name {
	letter-spacing: -0.02em;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 700;
	font-size: 1.125em;
	line-height: 1.1;
	color: var(--wp--preset--color--ink, #1b0b09);
}

.comparison-header__col.is--accent .comparison-header__name {
	color: var(--wp--preset--color--wine, #70041c);
}

.comparison-header__meta {
	color: var(--wp--preset--color--ink-muted, #6b5a52);
	margin: 0;
	font-size: 0.8125em;
	font-weight: 500;
	line-height: 1.2;
}

.comparison-row {
	border-bottom: 1px solid var(--wp--preset--color--line, #dccbba);
	display: flex;
}

.comparison-row:nth-of-type(even) {
	background-color: color-mix(in srgb, var(--wp--preset--color--cream, #ebe0d6) 45%, transparent);
}

.comparison-row__name {
	max-width: calc(100% / (var(--columns-in-view) + 1));
	flex: 1;
	justify-content: flex-start;
	align-items: center;
	padding-left: 1.25em;
	padding-right: 1.25em;
	display: flex;
}

.comparison-row__cells {
	flex: var(--columns-in-view);
	max-width: calc(var(--columns-in-view) * 100% / (var(--columns-in-view) + 1));
	display: flex;
}

.comparison-row__h {
	margin: 0;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink, #1b0b09);
}

.comparison-row__pill {
	color: var(--wp--preset--color--wine, #70041c);
	background-color: var(--wp--preset--color--cream, #ebe0d6);
	border-radius: 100em;
	margin: 0;
	padding: 0.5em 0.75em;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1;
	position: relative;
}

.comparison-row__cell {
	text-align: center;
	min-width: 0;
	max-width: calc(100% / var(--columns-in-view));
	flex-flow: column;
	flex: 1;
	justify-content: center;
	align-items: center;
	padding: 1.25em 0.75em;
	display: flex;
}

.comparison-row__label {
	color: var(--wp--preset--color--ink, #1b0b09);
	opacity: 0.8;
	margin: 0;
	font-size: 0.9375em;
	line-height: 1.3;
}

/* Ja/nee met kleur (29-09, Maik: "het vinkje mis groen en het streepje een rood kruis, dat het wat meer kracht
   heeft"). Bewust géén tokens in theme.json: dit zijn functionele kleuren van deze tabel, geen merkkleuren, en ze
   horen niet in de kleurkiezer van de editor. Het groen is warm en gedempt zodat het naast bordeaux niet schreeuwt;
   het rood is duidelijk lichter dan bordeaux (#70041C), anders lees je het kruis als merkkleur. Ja is gevuld en
   nee alleen getint: zo springt de VinO₂-kolom eruit zonder dat de tabel een rij alarmbellen wordt. */
.comparison-row__icon {
	aspect-ratio: 1;
	width: 1.75em;
	padding: 0.34em;
	border-radius: 50%;
	stroke-width: 2.4;
	display: block;
}

.comparison-row__cell.is--ja .comparison-row__icon {
	color: var(--wp--preset--color--base, #f8f5f1);
	background-color: #2f6b4b;
}

.comparison-row__cell.is--nee .comparison-row__icon {
	color: #b3372c;
	background-color: color-mix(in srgb, #b3372c 14%, transparent);
}

/* ------------------------------------------------------------- mobiel */

@media screen and (max-width: 767px) {
	.comparison-header__corner {
		display: none;
	}

	.comparison-header__inner {
		max-width: none;
	}

	.comparison-header__name {
		font-size: 1em;
	}

	.comparison-row {
		flex-flow: column;
		justify-content: flex-start;
		align-items: stretch;
	}

	.comparison-row__name {
		max-width: none;
		padding-top: 1em;
		padding-bottom: 0.25em;
	}

	.comparison-row__cells {
		max-width: none;
	}

	.comparison-row__cell {
		padding-top: 0.75em;
		padding-bottom: 1.25em;
	}
}