/* SmartHub 2026 - blokken van de werkgeverspagina
 *
 * Overgenomen uit concept/paginas/werkgevers.html met haal-css-vacatures.py:
 * de hero met zoekbalk, de rail met verse vacatures, het filterpaneel, de
 * resultatenlijst en de alertband.
 *
 * Alles is gescopet naar .sh-sectie, zodat het niets buiten onze secties raakt.
 */

@keyframes puls {0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}

@keyframes instroom {from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.sh-sectie .duo-strak {align-items:stretch}

.sh-sectie .duo-strak .foto {aspect-ratio:auto;height:100%;min-height:380px}

.sh-sectie .programmas .optie-chip, .sh-sectie .manifest .optie-chip, .sh-sectie .portaal .optie-chip, .sh-sectie .vacband .optie-chip {position:absolute;right:20px;bottom:16px;font-size:.68rem;letter-spacing:.06em;border:1.5px dashed rgba(255,255,255,.45);color:rgba(255,255,255,.75);padding:7px 13px;border-radius:var(--pill);z-index:3}

.sh-sectie .checks {list-style:none;display:grid;gap:12px;margin:14px 0 4px}

.sh-sectie .checks li {display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:.98rem}

.sh-sectie .checks li::before {content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--roze);
 mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4"><path d="M5 13l4 4 10-11"/></svg>') center/70% no-repeat;
 -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4"><path d="M5 13l4 4 10-11"/></svg>') center/70% no-repeat}

.sh-sectie .wg-kaart.cta .checks li::before {background:var(--roos)}

.sh-sectie .roadmap {list-style:none;display:grid;gap:12px;margin-top:28px}

.sh-sectie .roadmap li {display:flex;gap:16px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 18px;font-size:.95rem;transition:transform .2s ease,border-color .2s,background .2s;cursor:default}

.sh-sectie .roadmap li:hover {transform:translateX(8px);border-color:var(--roos);background:rgba(255,255,255,.12)}

.sh-sectie .roadmap li.live .wanneer {position:relative;padding-left:24px}

.sh-sectie .roadmap li.live .wanneer::before {content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff;animation:puls 1.6s ease infinite}

.sh-sectie .roadmap .wanneer {flex:none;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:var(--pill);background:rgba(255,255,255,.14)}

.sh-sectie .roadmap li.live .wanneer {background:var(--roze)}

.sh-sectie .baten {display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:46px}

.sh-sectie .baat {background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:30px 26px;transition:transform .2s ease,box-shadow .2s ease}

.sh-sectie .baat:hover {transform:translateY(-6px);box-shadow:var(--shadow-zwaar)}

.sh-sectie .baat .ic {width:48px;height:48px;border-radius:14px;background:var(--roze-08);color:var(--roze);display:grid;place-items:center;margin-bottom:16px}

.sh-sectie .baat .ic svg {width:24px;height:24px}

.sh-sectie .baat h3 {text-transform:none;letter-spacing:0;font-size:1.08rem;margin-bottom:8px}

.sh-sectie .baat p {color:var(--steen);font-size:.93rem}

@media(max-width:900px) {
	.sh-sectie .baten {grid-template-columns:1fr 1fr}
}

@media(max-width:600px) {
	.sh-sectie .baten {grid-template-columns:1fr}
}

.sh-sectie .vind {display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}

.sh-sectie .vind-kaart {background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:32px 28px;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}

.sh-sectie .vind-kaart:hover {transform:translateY(-6px);box-shadow:var(--shadow-zwaar)}

.sh-sectie .vind-kaart .nr {font-size:2.6rem;font-weight:900;color:var(--lijn);line-height:1;transition:color .25s;font-variant-numeric:tabular-nums}

.sh-sectie .vind-kaart:hover .nr {color:var(--roze)}

.sh-sectie .vind-kaart h3 {text-transform:none;letter-spacing:0;font-size:1.12rem;margin:12px 0 8px}

.sh-sectie .vind-kaart p {color:var(--steen);font-size:.95rem}

@media(max-width:900px) {
	.sh-sectie .vind {grid-template-columns:1fr}
}

.sh-sectie .vacband {background:linear-gradient(150deg,var(--paars),#5C083F);color:#fff;position:relative;overflow:hidden}

.sh-sectie .vacband .wrap {position:relative;z-index:2}

.sh-sectie .vacband .kicker {color:var(--roos)}

.sh-sectie .tiers {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;align-items:stretch}

.sh-sectie .tier {background:#fff;border:1px solid var(--lijn);border-radius:calc(var(--radius) + 4px);padding:36px 32px;display:flex;flex-direction:column;gap:14px;position:relative;transition:transform .22s ease,box-shadow .22s ease,border-color .22s}

.sh-sectie .tier:hover {transform:translateY(-6px);box-shadow:var(--shadow-zwaar)}

.sh-sectie .tier.populair {border:2px solid var(--roze);box-shadow:0 24px 54px rgba(209,0,116,.18)}

.sh-sectie .tier.actief-tier {border-color:var(--paars);box-shadow:0 0 0 4px rgba(162,0,103,.15),var(--shadow-zwaar);transform:translateY(-6px)}

.sh-sectie .tier .pop-badge {position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--roze);color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:6px 16px;border-radius:var(--pill)}

.sh-sectie .tier .fte {font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--steen)}

.sh-sectie .tier .prijs {font-size:2.3rem;font-weight:900;color:var(--paars);line-height:1}

.sh-sectie .tier .prijs small {font-size:.85rem;color:var(--steen);font-weight:700}

.sh-sectie .tier p {color:var(--steen);font-size:.94rem}

.sh-sectie .tier .checks {margin:6px 0 12px}

.sh-sectie .tier .checks li {font-size:.92rem}

.sh-sectie .tier .btn {margin-top:auto;justify-content:center}

@media(max-width:920px) {
	.sh-sectie .tiers {grid-template-columns:1fr}
	.sh-sectie .tier.populair {order:-1}
}

.sh-sectie .fte-schuif {background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:28px 32px;margin-top:34px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;box-shadow:var(--shadow)}

.sh-sectie .fte-schuif label {font-weight:800;font-size:.95rem;display:block;margin-bottom:14px}

.sh-sectie .fte-schuif output {font-weight:900;color:var(--roze)}

.sh-sectie .fte-schuif input[type=range] {width:100%;accent-color:var(--roze);height:6px;cursor:pointer}

.sh-sectie .fte-uitkomst {text-align:right}

.sh-sectie .fte-uitkomst b {display:block;font-size:1.7rem;font-weight:900;color:var(--paars);line-height:1.1}

.sh-sectie .fte-uitkomst span {font-size:.82rem;color:var(--steen);font-weight:700}

@media(max-width:720px) {
	.sh-sectie .fte-schuif {grid-template-columns:1fr}
	.sh-sectie .fte-uitkomst {text-align:left}
}

.sh-sectie .voorwaarden {max-width:820px;margin:26px auto 0;text-align:center;font-size:.84rem;color:var(--steen)}

.sh-sectie .voorwaarden details {display:inline-block;text-align:left;margin-top:8px}

.sh-sectie .voorwaarden summary {cursor:pointer;font-weight:800;color:var(--paars);list-style:none;text-align:center}

.sh-sectie .voorwaarden summary::-webkit-details-marker {display:none}

.sh-sectie .voorwaarden ul {margin:12px 0 0 18px;display:grid;gap:6px}

.sh-sectie #video-rail .video-kaart {scroll-snap-align:start}

.sh-sectie .video-kaart {position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/11;display:flex;align-items:flex-end;text-decoration:none;color:#fff;background:linear-gradient(160deg,var(--paars),#5C083F);transition:transform .22s ease,box-shadow .22s ease}

.sh-sectie .video-kaart:hover {transform:translateY(-6px);box-shadow:var(--shadow-zwaar)}

.sh-sectie .video-kaart .foto {position:absolute;inset:0;border-radius:0;box-shadow:none;aspect-ratio:auto}

.sh-sectie .video-kaart .overlay {position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(29,18,32,.85))}

.sh-sectie .video-kaart .vk-body {position:relative;z-index:2;padding:24px;display:flex;align-items:center;gap:14px;width:100%}

.sh-sectie .video-kaart .play {flex:none;width:52px;height:52px;border-radius:50%;background:var(--roze);display:grid;place-items:center;box-shadow:0 10px 26px rgba(209,0,116,.5);transition:transform .2s}

.sh-sectie .video-kaart:hover .play {transform:scale(1.12)}

.sh-sectie .video-kaart .play svg {width:20px;height:20px;margin-left:3px}

.sh-sectie .video-kaart b {display:block;font-size:1rem}

.sh-sectie .video-kaart span {font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);font-weight:700}

.sh-sectie .leden-zoek {display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}

.sh-sectie .leden-zoek .mini-zoek {max-width:320px;flex:1;min-width:220px;margin:0;background:#fff;border:1px solid var(--lijn)}

.sh-sectie .leden-chips {display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}

.sh-sectie .leden-chips .vac-tag {border-color:var(--lijn);color:var(--paars)}

.sh-sectie .leden-chips .vac-tag.actief {background:var(--paars);border-color:var(--paars);color:#fff}

.sh-sectie .leden-grid {display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:36px}

.sh-sectie .lid-tegel {background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;transition:transform .18s ease,box-shadow .18s ease,border-color .18s}

.sh-sectie .lid-tegel:hover {transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--roze)}

.sh-sectie .lid-tegel .logo-vlak {width:54px;height:54px;border-radius:14px;background:var(--paars-05);color:var(--paars);display:grid;place-items:center;font-weight:900;font-size:.95rem}

.sh-sectie .lid-tegel b {font-size:.76rem;line-height:1.3;color:var(--ink)}

.sh-sectie .lid-tegel span {font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steen);font-weight:700}

.sh-sectie .leden-grid .lid-tegel {animation:instroom .35s ease both}

.sh-sectie .leden-leeg {display:none;text-align:center;margin-top:28px;color:var(--steen)}

.sh-sectie .leden-leeg.zichtbaar {display:block}

.sh-sectie .leden-teller {text-align:center;margin-top:22px;font-size:.9rem;color:var(--steen);font-weight:700}

.sh-sectie .leden-teller b {color:var(--roze)}

@media(max-width:1000px) {
	.sh-sectie .leden-grid {grid-template-columns:repeat(3,1fr)}
}

@media(max-width:560px) {
	.sh-sectie .leden-grid {grid-template-columns:repeat(2,1fr)}
}

/* ── Werkgeverslogo op de ledentegel groter ────────────────────────────────────
   Het logo-vlak was 54x54 vierkant met object-fit:contain, terwijl de logo|s vrijwel
   allemaal breed zijn (circa 300x80). Een 300x80-logo paste zich dan in naar circa
   44x12px, terwijl de tegel ruim 150px breed is. Als het vlak de volle tegelbreedte
   krijgt en lager wordt, schaalt hetzelfde logo mee naar circa 150x40px. */
.sh-sectie .lid-tegel .logo-vlak {width:100%;height:64px;border-radius:12px;padding:10px 14px}
.sh-sectie .lid-tegel .logo-vlak img {width:100%;height:100%;object-fit:contain}

/* ---------------------------------------------------------------------------
   Videoposter in het verhaalduo

   In plaats van de foto kan er een YouTube-video in het rechterslot staan. Tot
   een klik is dat alleen de posterafbeelding; videoposter.js vervangt hem dan
   door het iframe. De maten volgen de foto ernaast, zodat het blok niet
   verspringt zodra de video geladen wordt.
   --------------------------------------------------------------------------- */

/* Een foto mag uitrekken tot de hoogte van de tekstkolom (.duo-strak zet
   height:100% met een min-height van 380px), maar een video niet: die heeft een
   vaste verhouding en houdt dan een strook van de gestreepte plaatshouder over.
   Vandaar 16:9, geen achtergrond en verticaal gecentreerd naast de tekst.
   De specificiteit moet gelijk zijn aan `.sh-sectie .duo-strak .foto` uit
   base.css, anders wint die alsnog. */
.sh-sectie .foto--video,
.sh-sectie .duo-strak .foto--video {
	position: relative;
	align-self: center;
	height: auto;
	min-height: 0;
	aspect-ratio: 16 / 9;
	background: var(--ink);
}

.sh-sectie .video-poster {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: inherit;
	overflow: hidden;
	background: var(--ink);
	cursor: pointer;
}

.sh-sectie .video-poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease, opacity .3s ease;
}

.sh-sectie .video-poster:hover img,
.sh-sectie .video-poster:focus-visible img {
	transform: scale(1.03);
	opacity: .82;
}

.sh-sectie .video-poster__knop {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	margin: -37px 0 0 -37px;
	border-radius: 50%;
	background: var(--roze);
	color: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
	transition: transform .25s ease;
}

.sh-sectie .video-poster:hover .video-poster__knop {
	transform: scale(1.08);
}

.sh-sectie .video-poster__knop svg {
	width: 30px;
	height: 30px;
	margin-left: 4px;
}

.sh-sectie .video-poster__titel {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 44px 20px 18px;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
}

.sh-sectie .video-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: inherit;
}

/* Het lege fotoslot is een plaatshouder voor een ontbrekend beeld; naast een
   video heeft het niets te zoeken. */
.sh-sectie .foto--video .slot {
	display: none;
}

/* Op mobiel valt de video terug op de kolombreedte, en dan is 16:9 nog maar zo'n
   190px hoog: een klein vlak met veel lucht eromheen. Daar mag hij de volle
   schermbreedte pakken. De negatieve marge haalt hem uit de wrap; die 28px komt
   uit `.wrap` en is dezelfde waarde die de rest van de pagina aanhoudt. */
@media (max-width: 900px) {

	.sh-sectie .duo .foto--video,
	.sh-sectie .duo-strak .foto--video {
		width: calc(100% + 56px);
		margin-inline: -28px;
		border-radius: 0;
	}

	/* De tekstkolom en de video staan dan dichter op elkaar; de ruimte die het
	   duo-grid ertussen laat is bedoeld voor een staande foto, niet voor een
	   liggend videovlak. */
	.sh-sectie .duo:has(.foto--video) {
		row-gap: 26px;
	}
}