/* Blok papendorp/bedrijven (papendorp-core/inc/blocks-bedrijven.php): één muur met zoekveld en filter op branche, in
   willekeurige volgorde. Rechte hoeken, dunne lijnen, logo's in hun eigen kleuren op wit; zonder logo de naam in de tegel.
   Mobiel eerst, twee kolommen. */

.pd-bedrijven {
	--pd-lijn: color-mix(in srgb, var(--wp--preset--color--antraciet) 18%, transparent);
}
.pd-bedrijven [hidden] { display: none !important; }

.pd-bedrijven__zoek { display: grid; gap: 0.4rem; max-width: 28rem; margin-bottom: var(--wp--preset--spacing--20); }
.pd-bedrijven__zoek label {
	font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters);
}
.pd-bedrijven__zoek input {
	box-sizing: border-box; width: 100%; min-height: 3rem; padding: 0 1rem;
	border: 2px solid var(--wp--preset--color--antraciet); border-radius: var(--pd-radius);
	background: var(--wp--preset--color--wit); color: var(--wp--preset--color--antraciet);
	font: inherit; font-size: 1rem;
}
.pd-bedrijven__aantal { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--klein); }

.pd-bedrijven__muur {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 0.75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 40rem) { .pd-bedrijven__muur { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 64rem) { .pd-bedrijven__muur { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Tegel: logo boven, naam eronder. Zonder website is het een span in plaats van een link. */
.pd-bedrijf {
	box-sizing: border-box; display: grid; grid-template-rows: 1fr auto; height: 100%;
	border: 1px solid var(--pd-lijn); background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--antraciet); text-decoration: none;
	transition: border-color 0.15s ease;
}
a.pd-bedrijf:hover,
a.pd-bedrijf:focus-visible { border-color: var(--wp--preset--color--antraciet); }
a.pd-bedrijf:hover .pd-bedrijf__naam,
a.pd-bedrijf:focus-visible .pd-bedrijf__naam {
	text-decoration: underline; text-decoration-color: var(--wp--preset--color--oranje);
	text-decoration-thickness: 3px; text-underline-offset: 0.3em;
}
.pd-bedrijf__vlak {
	display: grid; place-items: center; box-sizing: border-box;
	height: 6.5rem; padding: 1.25rem 1.25rem 0.75rem; overflow: hidden;
}
/* Vaste hoogte-grens: een SVG zonder eigen afmetingen vult anders de hele tegel en erbuiten. */
.pd-bedrijf__logo {
	display: block; max-width: 100%; max-height: 4.5rem; width: auto; height: auto; min-width: 0; object-fit: contain;
}
/* Gemeten logo (blocks-bedrijven.php): alleen de inkt, op een grootte naar oppervlak. Breedte groeit met de wortel
   van de verhouding, nooit breder dan de tegel en nooit hoger dan --pd-logo-max. */
.pd-bedrijf__inkt {
	--pd-logo-basis: 4.25rem; --pd-logo-max: 4.5rem;
	position: relative; display: block; overflow: hidden; aspect-ratio: var(--a);
	width: min(100%, calc(var(--pd-logo-basis) * sqrt(var(--a))), calc(var(--pd-logo-max) * var(--a)));
}
.pd-bedrijf__inkt .pd-bedrijf__logo {
	position: absolute; max-width: none; max-height: none; object-fit: fill;
	width: calc(100% / var(--w)); height: calc(100% / var(--h));
	left: calc(-100% * var(--l) / var(--w)); top: calc(-100% * var(--t) / var(--h));
}
.pd-bedrijf__naam {
	display: block; padding: 0.55rem 0.75rem 0.7rem;
	font-size: 0.75rem; font-weight: 500; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.06em;
	overflow-wrap: anywhere;
}

/* Bedrijf zonder logo: de naam zelf in het vlak, in de koppenletter, tussen de logo's in plaats van in een aparte lijst
   eronder. Geen verzonnen beeldmerk; de straat staat eronder op de plek van de naam. */
.pd-bedrijf__woordmerk {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
	--pd-woord-max: 1.125rem;
	font-family: var(--wp--preset--font-family--display); font-weight: 600; line-height: 1.2;
	/* Kleiner als het langste woord (--pd-letters, uit de PHP) anders niet in de tegel past: nooit midden in een woord breken. */
	font-size: clamp(0.75rem, 100cqi / (var(--pd-letters, 10) * 0.64), var(--pd-woord-max));
	text-align: center; text-wrap: balance; overflow-wrap: anywhere;
}
.pd-bedrijf--naam .pd-bedrijf__vlak { container-type: inline-size; }
a.pd-bedrijf--naam:hover .pd-bedrijf__woordmerk,
a.pd-bedrijf--naam:focus-visible .pd-bedrijf__woordmerk {
	text-decoration: underline; text-decoration-color: var(--wp--preset--color--oranje);
	text-decoration-thickness: 3px; text-underline-offset: 0.2em;
}

.pd-bedrijven__leeg { margin-top: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--normaal); }
.pd-bedrijven__alle { min-height: 2.75rem; margin-left: 0.25rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--wp--preset--color--oranje); text-decoration-thickness: 2px; text-underline-offset: 0.3em; cursor: pointer; }
.pd-bedrijven__alle[hidden] { display: none; }

/* Wit logo (gemaakt voor een donkere kop): op een donkere tegel, zodat het zichtbaar is zoals het bedoeld is. */
/* Iets zachter dan nacht: de witte logo's blijven helder, maar de muur wordt minder een dambord (criticus). */
.pd-bedrijf--donker { --pd-tegel-donker: color-mix(in srgb, var(--wp--preset--color--nacht) 86%, var(--wp--preset--color--wit)); background: var(--pd-tegel-donker); color: var(--wp--preset--color--warmwit); border-color: var(--pd-tegel-donker); }
a.pd-bedrijf--donker:hover, a.pd-bedrijf--donker:focus-visible { border-color: var(--wp--preset--color--oranje); }

/* Filter op branche (B-027): een rij knoppen, de gekozen branche is oranje. */
.pd-bedrijven__branches { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 var(--wp--preset--spacing--20); padding: 0; }
.pd-bedrijven__branche-knop {
	min-height: 2.75rem; padding: 0 0.8rem; border: 2px solid var(--wp--preset--color--antraciet); border-radius: var(--pd-radius);
	background: transparent; color: inherit; font: inherit; font-size: 0.875rem; cursor: pointer;
}
.pd-bedrijven__branche-knop span { margin-left: 0.35rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.pd-bedrijven__branche-knop:hover { background: var(--wp--preset--color--antraciet); color: var(--wp--preset--color--wit); }
.pd-bedrijven__branche-knop[aria-pressed="true"] { background: var(--wp--preset--color--nacht); border-color: var(--wp--preset--color--nacht); color: var(--wp--preset--color--wit); } /* Was oranje; minder oranje sinds 19 okt (B-030). */
.pd-bedrijven__branche-knop[aria-pressed="true"] span { opacity: 1; } /* Grijs getal op donker haalt geen 4,5:1. */

/* Straat bij een bedrijf zonder logo (B-017), op de plek van de naam bij een logo; sinds B-027 geen filter meer. */
.pd-bedrijf__straat {
	display: block; padding: 0.55rem 0.75rem 0.7rem;
	font-size: 0.75rem; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--wp--preset--color--antraciet) 75%, transparent);
}
.pd-bedrijven__correctie { margin-top: var(--pd-ritme); padding-top: var(--wp--preset--spacing--30); border-top: 1px solid var(--pd-lijn); font-size: var(--wp--preset--font-size--klein); }

/* Zoekveld en brancheknoppen werken alleen met script: zonder pd-js (gezet in wp_head, voor de eerste paint) verborgen. */
html:not(.pd-js) .pd-bedrijven__zoek, html:not(.pd-js) .pd-bedrijven__branches, html:not(.pd-js) .pd-bedrijven__branche-kies { display: none; }

/* Branchekeuze: op de telefoon een keuzelijst onder het zoekveld, vanaf 40rem de knoppen. */
.pd-bedrijven__branche-kies { display: grid; gap: 0.4rem; max-width: 28rem; margin-bottom: var(--wp--preset--spacing--20); }
.pd-bedrijven__branche-kies label { font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); }
.pd-bedrijven__branche-kies select {
	box-sizing: border-box; width: 100%; min-height: 3rem; padding: 0 2.5rem 0 1rem;
	border: 2px solid var(--wp--preset--color--antraciet); border-radius: var(--pd-radius);
	background: var(--wp--preset--color--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23282d32' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 1rem center;
	color: var(--wp--preset--color--antraciet); font: inherit; font-size: 1rem; appearance: none;
}
@media (max-width: 39.99rem) { .pd-bedrijven__branches { display: none; } }
@media (min-width: 40rem) { .pd-bedrijven__branche-kies { display: none; } }

/* Rustpunt elke 30 logo's: echte foto's van het park over de volle breedte, met lucht erboven en eronder.
   Telefoon twee foto's, vanaf 40rem drie. Bij zoeken of filteren verborgen (site.js). */
.pd-bedrijven__rust {
	grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;
	margin-block: var(--wp--preset--spacing--30);
}
.pd-bedrijven__rust-foto { margin: 0; min-width: 0; }
.pd-bedrijven__rust-foto:nth-child(3) { display: none; }
.pd-bedrijven__rust-beeld {
	display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%;
	background: var(--wp--preset--color--warmwit);
}
.pd-bedrijven__rust-bijschrift { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.4; color: color-mix(in srgb, var(--wp--preset--color--antraciet) 80%, transparent); }
.pd-bedrijven__rust-bijschrift a { display: inline-block; margin-block: -0.85rem; padding-block: 0.85rem; color: inherit; text-underline-offset: 0.2em; } /* Tikvlak 44px. */
@media (min-width: 40rem) {
	.pd-bedrijven__rust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
	.pd-bedrijven__rust-foto:nth-child(3) { display: block; }
	.pd-bedrijven__rust-beeld { aspect-ratio: 3 / 2; }
}

/* Telefoon: twee kolommen met compacte tegels en de naam in gewone letters (kapitalen braken af en lazen klein).
   Zo blijven logo's leesbaar en wordt de muur toch een stuk korter. */
@media (max-width: 39.99rem) {
	.pd-bedrijf__vlak { height: 5.25rem; padding: 0.9rem 0.9rem 0.35rem; }
	.pd-bedrijf__logo { max-height: 3.5rem; }
	.pd-bedrijf__inkt { --pd-logo-basis: 3.5rem; --pd-logo-max: 3.25rem; }
	.pd-bedrijf__naam { padding: 0.35rem 0.75rem 0.6rem; font-size: 0.8125rem; text-transform: none; letter-spacing: 0; }
	.pd-bedrijf__woordmerk { --pd-woord-max: 1rem; }
	.pd-bedrijf__straat { padding: 0.35rem 0.75rem 0.6rem; font-size: 0.8125rem; text-transform: none; letter-spacing: 0; }
	.pd-bedrijven__rust { margin-block: 1rem; }
}