/*
 * Verkooppunten (inc/verkooppunten.php, 02-10-2026).
 * Eén blok dat meegroeit: bij één winkel een brede regel, bij meer een rij kaartjes.
 * Logo's staan altijd op een licht vlakje, zodat ze ook in een donkere sectie leesbaar zijn.
 */

.boozt-vkp,
.boozt-vkp *,
.boozt-vkp-compact,
.boozt-vkp-compact * {
	box-sizing: border-box;
}

/* ------------------------------------------------------ blok (productpagina) */

.boozt-vkp {
	margin-block: 0;
}

/* De ruimte staat op de groep in het template, niet als marge op het blok (valkuil 6: niet vechten met de
   flow-layout). Zonder verkooppunten rendert de shortcode niets en verdwijnt de hele band. */
.boozt-product__verkooppunten {
	padding-bottom: var(--wp--preset--spacing--60, 4rem);
}

.boozt-product__verkooppunten:not(:has(.boozt-vkp)) {
	display: none;
}

.boozt-vkp__kop {
	margin: 0 0 0.4em;
}

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

.boozt-vkp__lijst {
	display: grid;
	/* 15.5rem: op de brede lijn (72rem) passen er dan vier naast elkaar; smaller worden het er minder en dan 1 kolom. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Vier of meer winkels: auto-fit maakt er op een tablet of smal venster 3 + 1 van, met één kaartje alleen op de
   tweede rij. Daar dus twee per rij. Vanaf 1100px passen er vier naast elkaar; bij vijf of meer zou dat 4 + 1 geven,
   dus dan drie per rij (3 + 2, 3 + 3). Onder 600px staan ze onder elkaar. */
@media (min-width: 600px) and (max-width: 1099px) {
	.boozt-vkp__lijst:has(> :nth-child(4)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.boozt-vkp__lijst:has(> :nth-child(5)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.boozt-vkp__kaart {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.5rem;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--line, #dccbba);
	border-radius: 1.25rem;
}

.boozt-vkp__logo {
	display: block; /* geen grid: in een auto-rij telt een hoogte in procenten niet, en dan stak een hoog logo uit */
	flex: none;
	width: 6.5rem;
	height: 5rem;
	padding: 0.6rem;
	background-color: #fff;
	border-radius: 0.75rem;
}

/* Twee classes: WooCommerce zet op productpagina's `img { height: auto }` (valkuil 11). */
/* Het logo vult het vlakje (blok met vaste hoogte, dus 100% is hier wél een echte maat) en past zich met
   object-fit in. Het bijna vierkante logo van Wijnklas stak eerst 20px boven en onder het vlakje uit (05-10). */
.boozt-vkp__logo .boozt-vkp__logo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.boozt-vkp__kaart .boozt-vkp__logo {
	padding: 0;
}

/* Licht logo (vinkje in het beheer): donker vlakje in plaats van wit. In het witte kaartje heeft het vlakje dan
   wél binnenruimte nodig, anders raakt het logo de rand. */
.boozt-vkp__logo.is--donker {
	background-color: var(--wp--preset--color--ink, #1b0b09);
}

.boozt-vkp__kaart .boozt-vkp__logo.is--donker {
	padding: 0.55rem;
}

/* Foto in plaats van logo (vinkje in het beheer): vult het vlakje, afgerond. Uitsnede iets boven het midden, want
   op een foto van een winkelpui staat de naam meestal bovenaan. */
.boozt-vkp__logo.is--foto {
	padding: 0;
	overflow: hidden;
}

.boozt-vkp__logo.is--foto .boozt-vkp__logo-img {
	object-fit: cover;
	object-position: 50% 20%;
}

/* Geen logo: zandkleurig vlakje met een winkelicoon, zodat de kaartjes in een rij gelijk blijven. */
.boozt-vkp__logo.is--leeg {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--cream, #ebe0d6);
	color: var(--wp--preset--color--wine, #70041c);
}

.boozt-vkp__logo.is--leeg svg {
	width: 1.75rem;
	height: 1.75rem;
}

.boozt-vkp__naam {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	line-height: 1.25;
}

.boozt-vkp__adres {
	margin: 0.35rem 0 0;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
	line-height: 1.5;
}

.boozt-vkp__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: auto;
}

.boozt-vkp__link {
	font-weight: 600;
	text-underline-offset: 0.2em;
}

/* Link naar de pagina Verkooppunten, onder de rij op de productpagina. */
.boozt-vkp__alle {
	margin: 1.25rem 0 0;
	font-weight: 600;
}

.boozt-vkp__alle a {
	text-underline-offset: 0.2em;
}

/* Eén winkel: een brede regel in plaats van een eenzaam kaartje. */
@media (min-width: 782px) {
	.boozt-vkp.is--een .boozt-vkp__lijst {
		grid-template-columns: minmax(0, 1fr);
	}

	.boozt-vkp.is--een .boozt-vkp__kaart {
		flex-direction: row;
		align-items: center;
		gap: 1.75rem;
		padding: 1.5rem 2rem;
	}

	.boozt-vkp.is--een .boozt-vkp__gegevens {
		flex: 1 1 auto;
		min-width: 0;
	}

	.boozt-vkp.is--een .boozt-vkp__links {
		flex: none;
		margin-top: 0;
	}
}

/* ------------------------------------------- compacte regel (zakelijke pagina) */

/* Logostrook: elk logo op een even groot vlakje met de naam er klein onder (08-10, Victor: naam naast het logo oogde
   rommelig, want elke naam is anders lang en de logo's stonden daardoor op ongelijke afstand). Nu staan de vlakjes
   op een vast ritme en is de naam een bijschrift. */
.boozt-vkp-compact {
	--vkp-vlak-b: 6.5rem;
	--vkp-vlak-h: 5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	padding-top: var(--wp--preset--spacing--40, 2rem);
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.boozt-vkp-compact__kop {
	margin: 0;
	font-weight: 600;
}

.boozt-vkp-compact__lijst {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.boozt-vkp__chip > a,
.boozt-vkp__chip > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	width: var(--vkp-vlak-b);
	color: inherit;
	text-decoration: none;
}

.boozt-vkp__chip .boozt-vkp__logo {
	width: var(--vkp-vlak-b);
	height: var(--vkp-vlak-h);
	padding: 0.6rem;
}

/* Donker vlakje in een donkere sectie: een dunne rand, anders is het vlakje zelf niet te zien. */
.boozt-vkp__chip .boozt-vkp__logo.is--donker,
.boozt-vkp__chip .boozt-vkp__logo.is--leeg {
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

/* In de donkere sectie geen zandkleurig vlak (dat leest als een logo), maar alleen de rand met het icoon in zand. */
.boozt-vkp__chip .boozt-vkp__logo.is--leeg {
	background-color: transparent;
	color: inherit;
}

.boozt-vkp__chip .boozt-vkp__naam {
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
}

.boozt-vkp__chip > a:hover .boozt-vkp__naam,
.boozt-vkp__chip > a:focus-visible .boozt-vkp__naam {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Breed genoeg: "Al te koop bij" links van de strook, op de hoogte van het midden van de vlakjes (niet van het
   midden van vlakje + naam, dan zakt de regel onder de logo's). */
@media (min-width: 782px) {
	.boozt-vkp-compact {
		flex-direction: row;
		gap: 2rem;
	}

	.boozt-vkp-compact__kop,
	.boozt-vkp-compact__alle {
		flex: none;
		line-height: var(--vkp-vlak-h);
		white-space: nowrap;
	}

	.boozt-vkp-compact__lijst {
		flex: 0 1 auto;
		min-width: 0;
	}
}

/* Link naar de pagina Verkooppunten, achter de strook (smal: eronder). */
.boozt-vkp-compact__alle {
	margin: 0;
	font-weight: 600;
}

.boozt-vkp-compact__alle a {
	color: inherit;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------- pagina Verkooppunten */

/* Per land een kop met de kaartjes eronder. De kaartjes zijn hier groter: het beeld (logo, foto of leeg vlak) staat
   over de volle breedte bovenaan, de plaats staat boven de naam. auto-fill in plaats van auto-fit: een land met één
   winkel krijgt dan een kaartje van gewone breedte in plaats van een over de hele regel. */
.boozt-vkp--pagina {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
}

.boozt-vkp--pagina .boozt-vkp__landkop {
	margin: 0 0 1.25rem;
}

.boozt-vkp--pagina .boozt-vkp__lijst {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: 1.25rem;
}

/* De regels voor vier of meer winkels op de productpagina (2 of 3 per rij) gelden hier niet. */
@media (min-width: 600px) {
	.boozt-vkp--pagina .boozt-vkp__lijst:has(> :nth-child(4)) {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	}
}

.boozt-vkp--pagina .boozt-vkp__kaart .boozt-vkp__logo {
	width: 100%;
	height: 10.5rem;
	padding: 1.5rem 2rem;
	border: 1px solid var(--wp--preset--color--line, #dccbba);
	border-radius: 0.9rem;
}

.boozt-vkp--pagina .boozt-vkp__kaart .boozt-vkp__logo.is--foto {
	padding: 0;
	border: 0;
}

.boozt-vkp--pagina .boozt-vkp__kaart .boozt-vkp__logo.is--donker,
.boozt-vkp--pagina .boozt-vkp__kaart .boozt-vkp__logo.is--leeg {
	border: 0;
}

.boozt-vkp--pagina .boozt-vkp__logo.is--leeg svg {
	width: 2.25rem;
	height: 2.25rem;
}

.boozt-vkp__plaats {
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
	color: var(--wp--preset--color--wine, #70041c);
}

/* Telefoon: iets kleinere vlakjes, zodat er drie naast elkaar passen. */
@media (max-width: 480px) {
	.boozt-vkp-compact {
		--vkp-vlak-b: 5.75rem;
		--vkp-vlak-h: 4.5rem;
	}

	.boozt-vkp-compact__lijst {
		gap: 1rem 0.75rem;
	}

	/* Precies vier winkels: 2 × 2 in plaats van drie en één alleen eronder. Bij vijf geeft de gewone rij 3 + 2. */
	.boozt-vkp-compact__lijst:has(> :nth-child(4):last-child) {
		display: grid;
		grid-template-columns: repeat(2, var(--vkp-vlak-b));
		gap: 1.25rem;
	}
}

/* Productblok ("Niet in de buurt?") op zand, zodat het loskomt van de witte kaartjes op linnen erboven. */
.boozt-lsectie--verkooppunten + .boozt-lsectie--product {
	background-color: var(--wp--preset--color--cream, #ebe0d6);
}