/* ==========================================================================
   banner.css — de banner (paginakop) van alle pagina's behalve de homepage.
   Eén ontwerp: tekst links, rechts de afbeelding of de kaartjes.
   Elk banner item animeert los bij hover (alleen met een echte muis).
   ========================================================================== */

.banner { padding: 4px 0 8px; }
.banner > .container { max-width: none; padding-inline: var(--rand); }
.banner__kaart {
	--p: 0;
	--vlak-x: max(var(--gutter), calc((100% - var(--container)) / 2));
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center;
	padding: clamp(32px, 5.5vw, 80px) var(--vlak-x);
	border-radius: var(--radius-lg);
	background: linear-gradient(160deg, var(--blue-50), #fff 72%);
	border: 1px solid rgba(var(--blue-rgb), .12);
}
.banner__kaart--twee { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.banner__kaart::after {
	content: ""; position: absolute; z-index: -1; right: -6%; bottom: -40%; width: 40%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--lime-rgb), .45), transparent);
	transform: translateY(calc(var(--p) * -60px));
}
.banner__raster {
	position: absolute; inset: 0; z-index: -1; opacity: .6;
	background-image: linear-gradient(rgba(var(--blue-rgb), .08) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--blue-rgb), .08) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 80% 40%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse 60% 70% at 80% 40%, #000 30%, transparent 75%);
}

/* ---------- Tekst ---------- */
.banner__tekst { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.banner__titel { margin: 0; font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.2rem); max-width: 18ch; }
.banner__kaart:not(.banner__kaart--twee) .banner__titel { max-width: 24ch; }
.banner__intro { max-width: 64ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: #3b4456; }
.banner__vinkjes { margin: 0; }
.banner__vinkjes strong { font-weight: 750; color: var(--ink); }
.banner__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; color: var(--muted); font-size: .92rem; }
.banner__onder { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }

/* ---------- Rechts: afbeelding ---------- */
.banner__beeld { margin: 0; align-self: center; justify-self: center; width: 100%; }
.banner__beeld img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; border-radius: var(--radius); filter: drop-shadow(0 24px 34px rgba(var(--ink-rgb), .18)); }

/* ---------- Rechts: kaartjes ---------- */
.banner__visual { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; align-self: center; perspective: 1200px; }
/* Met een afbeelding: de afbeelding bepaalt de hoogte, score en labels zweven over de randen. */
.banner__visual--beeld { aspect-ratio: auto; max-width: none; padding: 30px 12px 52px; }
.banner__visual--beeld .banner__stapel { position: relative; inset: auto; }
.banner__visual--beeld .lkaart--rating { top: -30px; right: 0; }
.banner__visual--beeld .lkaart--chip { left: 0; bottom: -46px; }
.banner__visual--beeld .lkaart--chip2 { left: auto; right: 4%; bottom: -54px; }
.banner__stapel {
	/* Recht en stil: alleen de losse kaarten bewegen (bij hover elk apart). */
	position: absolute; inset: 0; transform-style: preserve-3d;
}
.lkaart { position: absolute; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -25px rgba(var(--ink-rgb), .35), 0 0 0 1px rgba(var(--ink-rgb), .05); }
.lkaart--hoofd {
	inset: 10% 8% 14% 8%; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 28px;
	background: var(--blue); color: #fff; border-radius: 32px;
}
.lkaart--lime { background: var(--lime); color: var(--ink); }
.lkaart--ink { background: var(--ink); }
.lkaart--soft { background: var(--soft); color: var(--ink); }
.lkaart__icoon { position: absolute; top: 26px; left: 26px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: rgba(255, 255, 255, .18); }
.lkaart--lime .lkaart__icoon, .lkaart--soft .lkaart__icoon { background: rgba(var(--ink-rgb), .08); }
.lkaart__naam { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); line-height: 1; letter-spacing: -.04em; font-weight: 800; }
.lkaart__lijn { display: block; height: 10px; width: 70%; border-radius: 6px; background: currentColor; opacity: .25; }
.lkaart__lijn--kort { width: 45%; }
.lkaart__ster { position: absolute; z-index: -1; right: -18px; top: -18px; opacity: .25; }
.lkaart__ster .icoon { width: 140px; height: 140px; }
.lkaart--rating { right: -2%; top: 4%; display: flex; align-items: center; gap: 10px; padding: 12px 16px; transform: translateZ(90px) rotate(5deg); }
.lkaart--rating strong { font-size: 1.3rem; }
.lkaart--chip { left: -4%; bottom: 6%; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--radius-pill); font-weight: 700; font-size: .9rem; transform: translateZ(110px) rotate(-4deg); }
.lkaart--chip .icoon { color: var(--blue); }
.lkaart--chip2 { left: auto; right: 0; bottom: -2%; background: var(--ink); color: #fff; transform: translateZ(60px) rotate(3deg); }
.lkaart--chip2 .icoon { color: var(--lime); }
@media (prefers-reduced-motion: no-preference) {
	.js:not(.geen-animaties) .lkaart--rating { animation: zweef 6s ease-in-out infinite; }
	.js:not(.geen-animaties) .lkaart--chip { animation: zweef 7s ease-in-out -3s infinite; }
}
@keyframes zweef { 50% { translate: 0 -10px; } }

/* ---------- Hover: elk item los ----------
   Met de losse eigenschappen scale/rotate (niet transform), zodat de 3D-stand
   en het zweven van de kaartjes blijven werken. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.banner__item, .lkaart, .banner__vinkjes .icoon {
		transition: scale .45s var(--ease), rotate .45s var(--ease), translate .45s var(--ease), box-shadow .45s var(--ease), filter .45s var(--ease);
	}
	.banner__vinkjes li:hover { translate: 6px 0; }
	.banner__vinkjes li:hover .icoon { scale: 1.2; rotate: -10deg; }
	.banner__onder:hover { scale: 1.04; }
	.banner__beeld:hover { scale: 1.03; rotate: -.8deg; }
	.banner__beeld:hover img { filter: drop-shadow(0 34px 44px rgba(var(--ink-rgb), .24)); }
	.lkaart--hoofd:hover { scale: 1.03; rotate: -1.5deg; }
	.lkaart--rating:hover { scale: 1.12; rotate: -4deg; box-shadow: 0 34px 60px -20px rgba(var(--ink-rgb), .45), 0 0 0 1px rgba(var(--ink-rgb), .05); }
	.lkaart--chip:hover { scale: 1.12; rotate: 4deg; }
	.lkaart--chip2:hover { scale: 1.12; rotate: -5deg; }
	.banner__visual { pointer-events: none; }
	.lkaart, .banner__beeld { pointer-events: auto; }
}

/* ---------- Knoppen in de banner ----------
   Beide knoppen: alleen een donkere rand (#0E1420), geen achtergrond, ook niet bij hover.
   Bij hover komen beide knoppen omhoog. */
.banner .knoppen .btn { transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease), border-color .25s var(--ease), translate .3s var(--ease); }
.banner .btn--primary, .banner .btn--primary:hover,
.banner .btn--ghost, .banner .btn--ghost:hover { --btn-bg: transparent; --btn-fg: #0E1420; --btn-bd: #0E1420; }
.banner .btn--primary .btn__pijl { background: #0E1420; color: #fff; }
.banner .knoppen .btn:hover { translate: 0 -3px; box-shadow: 0 14px 26px -14px rgba(14, 20, 32, .45); }

/* ---------- Ademhaling (dienst-, plaats-, branche- en projectpagina's) ----------
   De afbeelding zelf staat stil en blijft daardoor haarscherp: een doorlopend geschaalde
   afbeelding tekent de browser als uitgerekte kopie (wazig). Het ademen zit in een zachte
   gloed áchter de afbeelding (alleen opacity/transform van een verloop: licht en scherp).
   De blauwe kaart (zonder afbeelding) ademt zoals voorheen. */
.banner__beeld { position: relative; isolation: isolate; }
.banner__beeld::before {
	content: ""; position: absolute; z-index: -1; inset: 8% 6% 4%; border-radius: 50%; pointer-events: none;
	background: radial-gradient(closest-side, rgba(var(--blue-rgb), .22), rgba(var(--blue-rgb), .08) 55%, transparent);
	opacity: .7;
}
@media (prefers-reduced-motion: no-preference) {
	.js:not(.geen-animaties) .banner--puls .banner__beeld::before { animation: banner-gloed 4.5s ease-in-out infinite; }
	.js:not(.geen-animaties) .banner--puls .lkaart--hoofd { animation: banner-puls 4.5s ease-in-out infinite; }
}
@keyframes banner-gloed { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes banner-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* ---------- Mobiel ---------- */
@media (max-width: 960px) {
	.banner__kaart--twee { grid-template-columns: minmax(0, 1fr); }
	.banner__visual { max-width: 380px; }
	.banner__beeld img { max-height: 340px; }
}
@media (max-width: 520px) {
	.banner__kaart { padding: 26px 18px; border-radius: 26px; }
	.banner .knoppen .btn { width: 100%; justify-content: space-between; }
	.banner__onder .g-rating { flex-wrap: nowrap; white-space: nowrap; font-size: .84rem; }
}