/*
 * Expanding Feature Pills (Osmo Supply) als FAQ. Structuur, maten en overgangen
 * ongewijzigd; kleuren uit theme.json. Twee eigen aanpassingen: box-sizing
 * (valkuil 5) en de kaart blijft op mobiel donker — Osmo maakt hem daar
 * doorzichtig, wat op onze zandkleurige sectie de tekst onzichtbaar zou maken.
 */

.feature-pills__wrap,
.feature-pills__wrap * {
	box-sizing: border-box;
}

.feature-pills__wrap {
	color: var(--wp--preset--color--cream, #ebe0d6);
	background-color: var(--wp--preset--color--ink, #1b0b09);
	border: 2px solid rgba(235, 224, 214, 0.15);
	border-radius: 1.25em;
	width: 100%;
	max-width: 75em;
	height: 45em; /* het ontwerp; op desktop schaalt hij mee met de schermhoogte, zie hieronder */
	position: relative;
	overflow: clip;
}

/*
 * Lage schermen (02-10-2026). De kaart knipt af wat er niet in past, en de lijst is het hoogst als er een vraag
 * OPEN staat: met zes vragen is dat ±39em. Eerder was alleen de dichte lijst nagemeten (29em), waardoor op een
 * 13-inch scherm de bovenste en onderste vraag 40 tot 70px buiten de kaart vielen zodra je er een opende.
 * Alles in dit blok is in em, dus in plaats van de kaart verder in te korten schaalt de letter mee: de kaart is
 * altijd minstens 40,5em hoog (39em nodig, de rest is marge), en op een laag scherm wordt die em kleiner (tot 13px) zodat kop en kaart toch
 * samen in beeld passen. faq.js meet opnieuw bij een resize.
 * Zevende vraag erbij of veel langere antwoorden: de 40.5 hieronder mee omhoog (±4,5em per vraag) en nameten
 * met een vraag open.
 */
@media screen and (min-width: 992px) {
	.feature-pills__wrap {
		font-size: clamp(13px, calc(var(--boozt-media-max-h-kop) / 40.5), 1em);
		/* 35rem als extra ondergrens: niet alles in de pillen is em (randen, de 8px-padding), dus op de kleinste
		   letter is de open lijst naar verhouding hoger (±541px bij 13px). Liever 20px voorbij de onderrand dan
		   een afgeknipte vraag. */
		height: clamp(max(40.5em, 35rem), var(--boozt-media-max-h-kop), 45em);
	}
}

.feature-pills__layout {
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
}

.feature-pills__col {
	width: 50%;
	position: relative;
}

.feature-pills__visual-collection {
	z-index: 0;
	width: 100%;
	height: 100%;
	position: relative;
}

.feature-pills__visual-item {
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0%;
}

.feature-pills__visual-list {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

/* Twee classes: WooCommerce zet op productpagina's `.woocommerce-page img { height: auto }`
   en won daarmee van één class — de foto vulde de kolom dan niet (valkuil 11). */
.feature-pills__wrap .feature-pills__visual-img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.feature-pills__info-collection {
	flex-flow: column;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	padding-left: 1.25em;
	padding-right: 1.25em;
	display: flex;
}

.feature-pills__info-list {
	grid-column-gap: 1em;
	grid-row-gap: 1em;
	max-width: var(--content-item-expanded);
	flex-flow: column;
	flex: none;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	list-style: none;
	display: flex;
}

.feature-pills__info-item {
	padding: 0;
	position: relative;
}

.feature-pills__item-bg {
	z-index: 0;
	background-color: rgba(235, 224, 214, 0.08);
	border-radius: 2em;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0%;
}

.feature-pills__item-button {
	z-index: 1;
	grid-column-gap: 0.625em;
	grid-row-gap: 0.625em;
	background-color: #0000;
	flex-flow: row;
	justify-content: flex-start;
	align-items: center;
	padding: 0.75em 1.25em;
	display: flex;
	position: relative;
	cursor: pointer;
	border: none;
	font: inherit;
	color: inherit;
}

.feature-pills__item-label {
	letter-spacing: -0.015em;
	white-space: nowrap;
	flex: none;
	font-size: 1.25em;
	font-weight: 600;
}

.feature-pills__item-icon {
	aspect-ratio: 1;
	background-color: rgba(235, 224, 214, 0.2);
	border-radius: 100em;
	flex: none;
	justify-content: center;
	align-items: center;
	width: 1.25em;
	padding: 0;
	display: flex;
	position: relative;
}

.feature-pills__item-icon-bar {
	background-color: var(--wp--preset--color--cream, #ebe0d6);
	flex: none;
	width: 1px;
	height: 50%;
	padding: 0;
	position: absolute;
}

.feature-pills__item-icon-bar.is--horizontal {
	width: 50%;
	height: 1px;
}

.feature-pills__visual-cover {
	z-index: 1;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0%;
}

.feature-pills__wrap .feature-pills__visual-cover-img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.feature-pills__item-content {
	z-index: 2;
	pointer-events: none;
	position: absolute;
	inset: 0%;
}

.feature-pills__item-mask {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.feature-pills__item-inner {
	max-width: var(--content-item-expanded);
	flex-flow: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: max-content;
	padding: 1.5em 1.5em 2em;
	display: flex;
}

.feature-pills__item-body {
	margin: 0;
	font-size: 1.25em;
	font-weight: 600;
}

.feature-pills__item-body-span {
	opacity: 0.65;
	font-weight: 400;
}

.feature-pills__close {
	z-index: 2;
	position: absolute;
	top: 1em;
	right: 1em;
}

.feature-pills__close-button {
	aspect-ratio: 1;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background-color: rgba(235, 224, 214, 0.12);
	border-radius: 10em;
	justify-content: center;
	align-items: center;
	width: 2em;
	padding: 8px;
	display: flex;
	position: relative;
	cursor: pointer;
	border: none;
	font: inherit;
}

@media screen and (max-width: 991px) {
	.feature-pills__wrap {
		height: auto;
		/* Osmo: doorzichtig zonder rand — hier bewust donker gehouden (zie boven). */
		border-radius: 1.25em;
	}

	.feature-pills__layout {
		flex-flow: column;
	}

	.feature-pills__col {
		width: 100%;
	}

	.feature-pills__col.is--visual {
		aspect-ratio: 1;
		border-radius: 1.25em 1.25em 0 0;
		order: -9999;
		overflow: hidden;
	}

	.feature-pills__info-collection {
		padding: 2.5em 1.25em 4em;
	}

	.feature-pills__info-list {
		flex-flow: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		max-width: none;
	}

	.feature-pills__info-item {
		width: var(--content-item-expanded);
	}

	.feature-pills__item-button {
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.feature-pills__item-label {
		white-space: normal;
		text-align: left;
		/* Osmo: flex none → de tekst kreeg zijn max-content-breedte en liep de pil uit
		   (lange vragen op mobiel, 15-09). Laten krimpen zodat hij afbreekt. */
		flex: 1 1 auto;
		min-width: 0;
	}

	.feature-pills__item-inner {
		max-width: 100%;
	}
}

/* Desktop: lange vragen breken af in plaats van de pil over de foto te duwen (Engelse vertaling, 22-09:
   "What if it doesn't live up to my expectations?" schoof achter de foto). Osmo's nowrap + flex:none gaf de
   pil de breedte van de hele zin; nu is hij hooguit zo breed als de lijst (--content-item-expanded) en breekt
   de vraag daarbinnen op twee regels. Korte vragen blijven op één regel. faq.js meet de pil gewoon opnieuw. */
@media screen and (min-width: 992px) {
	.feature-pills__info-item {
		max-width: 100%;
	}

	.feature-pills__item-label {
		white-space: normal;
		flex: 0 1 auto;
		min-width: 0;
		text-align: left; /* de knop centreert standaard; afgebroken vraag hoort links, plusje ernaast */
	}
}

/* Max width of expanded pill/content */
[data-feature-pills-init] {
	--content-item-expanded: 25em;
}

/* Brede schermen: de linkerkolom biedt ruimte voor 30em, zodat gewone vragen op één regel blijven en alleen echt
   lange (Engelse) vragen afbreken. Vaste em-waarde: faq.js animeert de breedte naar deze variabele. */
@media screen and (min-width: 1280px) {
	[data-feature-pills-init] {
		--content-item-expanded: 30em;
	}
}

@media screen and (max-width: 991px) {
	[data-feature-pills-init] {
		--content-item-expanded: calc(50% - 0.5em);
	}
}

@media screen and (max-width: 767px) {
	[data-feature-pills-init] {
		--content-item-expanded: 100%;
	}
}

/* Default state + transition */
[data-feature-pills-button] {
	opacity: 1;
	transition: opacity 400ms ease-in-out 300ms;
}

[data-feature-pills-inner] {
	opacity: 0;
	transition: opacity 300ms ease-in-out 0ms;
}

[data-feature-pills-visual] {
	opacity: 0;
	transition: opacity 350ms ease-in-out;
}

[data-feature-pills-cover] {
	opacity: 1;
	transition: opacity 350ms ease-in-out;
}

/* Active Pill */
[data-feature-pills-item][data-active="true"] [data-feature-pills-button] {
	opacity: 0;
	transition: opacity 50ms ease-in-out 0ms;
}

[data-feature-pills-item][data-active="true"] [data-feature-pills-inner] {
	opacity: 1;
}

/* Active Visual */
[data-feature-pills-visual][data-active="true"] {
	opacity: 1;
}

[data-feature-pills-cover][data-active="false"] {
	opacity: 0;
}

/* Close button */
[data-feature-pills-close] {
	transform: scale(0) rotate(135deg);
	opacity: 0;
	pointer-events: none;
	transition: all 500ms cubic-bezier(0.7, 0, 0.3, 1);
}

[data-feature-pills-active="true"] [data-feature-pills-close] {
	transform: scale(1) rotate(45deg);
	opacity: 1;
	pointer-events: auto;
}

/* 'edit' mode where buttons are hidden and inner content is shown */
[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-collection] {
	overflow: auto;
	justify-content: start;
}

[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-button] {
	display: none;
}

[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-content] {
	position: relative;
	pointer-events: auto;
}

[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-inner] {
	opacity: 1;
	transform: translate(0px, 0em);
}

/* Filmkorrel (boozt-grain) mag de knoppen niet afdekken. */
.boozt-faq.boozt-grain::after {
	z-index: 1;
	pointer-events: none;
}