/*
 * Connect IT — Bento-blokken.
 *
 * Raster van kaarten: de eerste groot (links, twee rijen), de tweede breed,
 * de rest klein. Dezelfde elementen als elders op de site: .cit-eyebrow,
 * .cit-btn-primary, .cit-card__more / .cit-link-ghost, het lijnenraster en de
 * afronding van de CTA-band, en de hover van de dienst-kaart. Het raster
 * reageert op de widgetbreedte, elke kaart op zijn eigen breedte.
 */

.cit-bento { container: citbento / inline-size; }

.cit-bento__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}
@container citbento (min-width: 640px) {
	.cit-bento__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cit-bento__kaart--groot,
	.cit-bento__kaart--breed { grid-column: 1 / -1; }
}
@container citbento (min-width: 1000px) {
	.cit-bento__raster {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: minmax(300px, auto);
	}
	.cit-bento__kaart--groot { grid-column: 1 / 3; grid-row: span 2; }
	.cit-bento__kaart--breed { grid-column: 3 / 5; }
	.cit-bento__kaart--breed:last-child { grid-row: span 2; }
	.cit-bento__kaart:nth-child(3):last-child { grid-column: 3 / 5; }
	.cit-bento__kaart:only-child { grid-column: 1 / -1; grid-row: auto; }
}

/* -------------------------------- kaart --------------------------------- */

.cit-bento__kaart {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-width: 0;
	border-radius: 20px;
	container: citkaart / inline-size;
	transition: box-shadow .2s ease, transform .2s ease;
}
.cit-bento__kaart:has(.cit-bento__link):hover {
	box-shadow: 0 20px 44px -18px rgba(13, 27, 42, .16);
	transform: translateY(-3px);
}

.cit-bento__kaart--donker { background: var(--cit-grad-dark, linear-gradient(135deg, #0A1626, #134155)); }
/* Het lijnenraster van de CTA-band. */
.cit-bento__kaart--donker::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(83, 214, 238, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(83, 214, 238, .06) 1px, transparent 1px);
	background-size: 48px 48px;
}
.cit-bento__kaart--licht { background: var(--cit-cyan-bg, #E6F6FA); }
.cit-bento__kaart--wit { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--cit-line, #E2E9F0); }
.cit-bento__kaart--teal { background: var(--cit-teal, #0E7490); }

.cit-bento__binnen {
	--pad: clamp(28px, 7cqi, 48px);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "inhoud" "beeld" "voet";
	grid-template-rows: auto 1fr auto;
	row-gap: 28px;
	height: 100%;
	padding: var(--pad);
}
.cit-bento__inhoud { grid-area: inhoud; }
.cit-bento__beeld { grid-area: beeld; align-self: end; min-width: 0; }
.cit-bento__voet { grid-area: voet; align-self: end; }

@container citkaart (min-width: 560px) {
	/* Groot: titel boven, paneel rechtsonder, knop linksonder. */
	.cit-bento__kaart--groot .cit-bento__beeld { justify-self: end; }
	.cit-bento__kaart--groot .cit-bento__paneel { width: 360px; }
}
/* Breed, middelgroot (zoals op de site met een raster van 1156px): titel over
   de volle breedte, link linksonder, paneel rechtsonder. */
@container citkaart (min-width: 500px) {
	.cit-bento__kaart--breed .cit-bento__binnen {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "inhoud inhoud" "voet beeld";
		grid-template-rows: auto 1fr;
		column-gap: 24px;
	}
}
/* Breed, ruim: tekst links, paneel rechts. Pas vanaf 600px, want het paneel
   is minstens zo'n 260px breed en de titel heeft ernaast ook ruimte nodig. */
@container citkaart (min-width: 600px) {
	.cit-bento__kaart--breed .cit-bento__binnen {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-areas: "inhoud beeld" "voet beeld";
		grid-template-rows: 1fr auto;
		column-gap: 36px;
	}
	.cit-bento__kaart--breed .cit-bento__beeld { align-self: center; justify-self: end; }
}

/* ------------------------------ typografie ------------------------------ */

.cit-bento .cit-bento__eyebrow { margin: 0 0 14px; }
.cit-bento__kaart--donker .cit-bento__eyebrow { color: var(--cit-cyan, #53D6EE); }
.cit-bento__kaart--teal .cit-bento__eyebrow { color: rgba(255, 255, 255, .78); }

.cit-bento .cit-bento__titel {
	margin: 0;
	font-family: var(--cit-font-head, 'Archivo', sans-serif);
	font-weight: 700;
	font-size: clamp(22px, 6cqi, 30px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--cit-ink, #0D1B2A);
	text-wrap: balance;
}
.cit-bento .cit-bento__kaart--groot .cit-bento__titel { font-size: clamp(28px, 7cqi, 46px); line-height: 1.1; }
.cit-bento .cit-bento__kaart--breed .cit-bento__titel { font-size: clamp(24px, 4.6cqi, 34px); }
.cit-bento .cit-bento__kaart--donker .cit-bento__titel,
.cit-bento .cit-bento__kaart--teal .cit-bento__titel { color: #FFFFFF; }

.cit-bento .cit-bento__tekst {
	margin: 14px 0 0;
	max-width: 46ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cit-muted, #5B6B7E);
}
.cit-bento .cit-bento__kaart--donker .cit-bento__tekst { color: var(--cit-on-dark, #B7C4D4); }
.cit-bento .cit-bento__kaart--teal .cit-bento__tekst { color: rgba(255, 255, 255, .85); }

/* De hele kaart is klikbaar: de link spant over de kaart (en de tekst-roll
   van de knop speelt dan bij hover op de hele kaart). */
.cit-bento .cit-bento__link { position: static; }
.cit-bento .cit-bento__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* Telefoon: iets minder binnenruimte (gelijk aan de 24px goot van de site) en
   op een smalle kaart een compactere knop, zodat een label als "Plan een
   adviesgesprek" vanaf 360px schermbreedte op één regel blijft. */
@container citbento (max-width: 639.98px) {
	.cit-bento__binnen { --pad: clamp(24px, 7cqi, 48px); }
}
@container citkaart (max-width: 319.98px) {
	.cit-bento .cit-btn-primary { gap: 10px; padding-left: 22px; padding-right: 12px; }
}

/* -------------------------------- paneel -------------------------------- */

.cit-bento__paneel {
	width: 100%;
	max-width: 360px;
	padding: 20px 22px;
	border-radius: 14px;
	background: #FFFFFF;
	box-shadow: 0 20px 44px -18px rgba(13, 27, 42, .16);
}
.cit-bento__kaart--donker .cit-bento__paneel,
.cit-bento__kaart--teal .cit-bento__paneel { box-shadow: 0 28px 56px -24px rgba(7, 15, 27, .55); }

.cit-bento .cit-bento__paneel-titel {
	margin: 0 0 10px;
	font-family: var(--cit-font-head, 'Archivo', sans-serif);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: var(--cit-ink, #0D1B2A);
}
.cit-bento .cit-bento__regels {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cit-bento .cit-bento__regel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid var(--cit-line-2, #EDF2F6);
	font-size: 14px;
	line-height: 1.35;
	color: var(--cit-text, #33475C);
}
.cit-bento .cit-bento__regel:first-child { border-top: 0; padding-top: 2px; }
.cit-bento .cit-bento__regel:last-child { padding-bottom: 0; }
.cit-bento__regel-label { flex: 1; min-width: 0; }
.cit-bento__live { display: flex; align-items: center; gap: 10px; }

.cit-bento__stip {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cit-green, #34D399);
}
.cit-bento__regel.is-let-op .cit-bento__stip { background: #F5A524; }
.cit-bento__stip.is-closed { background: #E8635F; }

.cit-bento__waarde {
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: var(--cit-radius-pill, 999px);
	background: var(--cit-cyan-bg, #E6F6FA);
	font-size: 12.5px;
	color: var(--cit-teal, #0E7490);
	white-space: nowrap;
}
.cit-bento__regel.is-let-op .cit-bento__waarde { background: #FFF4DE; color: #8F5B00; }

/* ---------------------------------- foto -------------------------------- */

/* Eigen foto: een uitgesneden portret dat op de onderrand van de kaart staat.
   Drie composities, naar de vorm van de kaart:
   - smal (standaard): titel en knop boven, de foto gecentreerd eronder;
   - liggend (kaart vanaf 640px breed, zoals op tablet over de volle breedte):
     tekst links, de foto rechts over de hele hoogte;
   - staand (de grote kaart in het raster van vier kolommen): titel bovenaan
     over de volle breedte, de foto rechtsonder.
   De onderrand van de kaart snijdt steeds net onder de handen door (--snit),
   zodat de persoon aanwezig is zoals in een halfportret. */
.cit-bento__kaart--foto .cit-bento__binnen {
	--foto-h: clamp(340px, 112cqi, 480px);
	--snit: calc(var(--foto-h) * .18);
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "inhoud" "voet" "beeld";
	grid-template-rows: auto auto 1fr;
	column-gap: 0;
}
.cit-bento__kaart--foto .cit-bento__voet { align-self: start; }
.cit-bento__beeld--foto {
	position: relative;
	z-index: 0;
	align-self: end;
	justify-self: center;
	margin-bottom: calc(-1 * var(--pad) - var(--snit));
}
.cit-bento__beeld--foto img {
	display: block;
	width: auto;
	max-width: none;
	height: var(--foto-h);
}

/* Liggend. De foto staat los van het raster; tekst en knop (z-index werkt op
   rasteritems zonder position, zodat de klikbare kaart heel blijft) liggen
   erboven. */
@container citkaart (min-width: 640px) {
	.cit-bento__kaart--foto .cit-bento__binnen {
		--foto-h: min(66cqi, 640px);
		--snit: calc(var(--foto-h) * .18);
		position: relative;
		grid-template-areas: "inhoud" "leeg" "voet";
		grid-template-rows: auto 1fr auto;
		min-height: 60cqi;
	}
	.cit-bento__kaart--foto .cit-bento__inhoud,
	.cit-bento__kaart--foto .cit-bento__voet {
		z-index: 1;
		max-width: calc(58cqi - var(--pad));
	}
	.cit-bento__kaart--foto .cit-bento__voet { align-self: end; }
	.cit-bento .cit-bento__kaart--foto .cit-bento__titel { font-size: clamp(28px, 5.2cqi, 46px); }
	.cit-bento__kaart--foto .cit-bento__beeld--foto {
		position: absolute;
		grid-area: auto;
		right: 4cqi;
		bottom: calc(-1 * var(--snit));
		margin: 0;
	}
}

/* Staand: de grote kaart in het raster van vier kolommen, zodra die minstens
   560px breed is (raster 1144px: twee kolommen plus goot). Smaller is hij
   hoog en smal, en staat de smalle compositie beter. Minimaal zo hoog dat het
   hoofd onder een titel van twee, drie regels blijft. */
@container citbento (min-width: 1144px) {
	.cit-bento__kaart--groot.cit-bento__kaart--foto .cit-bento__binnen {
		--foto-h: clamp(380px, 90cqi, 560px);
		--snit: calc(var(--foto-h) * .18);
		position: relative;
		grid-template-areas: "inhoud" "leeg" "voet";
		grid-template-rows: auto 1fr auto;
		min-height: calc(var(--foto-h) * .82 + 200px);
	}
	.cit-bento__kaart--groot.cit-bento__kaart--foto .cit-bento__inhoud,
	.cit-bento__kaart--groot.cit-bento__kaart--foto .cit-bento__voet {
		z-index: 1;
		max-width: none;
	}
	.cit-bento__kaart--groot.cit-bento__kaart--foto .cit-bento__voet { align-self: end; }
	.cit-bento .cit-bento__kaart--groot.cit-bento__kaart--foto .cit-bento__titel { font-size: clamp(28px, 7cqi, 46px); }
	.cit-bento__kaart--groot.cit-bento__kaart--foto .cit-bento__beeld--foto {
		position: absolute;
		grid-area: auto;
		right: 2cqi;
		bottom: calc(-1 * var(--snit));
		margin: 0;
	}
}

/* Live servicedesk-status bij de foto. Smal en liggend onderaan, op de foto
   (liggend op één lijn met de knop); staand in de lege ruimte naast het
   gezicht. */
.cit-bento__status {
	position: absolute;
	left: 50%;
	bottom: calc(var(--snit) + 24px);
	z-index: 2;
	max-width: calc(100cqi - 24px);
	padding: 10px 16px;
	border-radius: var(--cit-radius-pill, 999px);
	background: #FFFFFF;
	box-shadow: 0 24px 48px -20px rgba(7, 15, 27, .55);
	font-size: 14px;
	line-height: 1.3;
	color: var(--cit-text, #33475C);
	white-space: nowrap;
	transform: translateX(-50%);
}
.cit-bento__status [data-cit-ot-txt] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
@container citkaart (min-width: 640px) {
	.cit-bento__status { bottom: calc(var(--snit) + var(--pad) + 5px); }
}
@container citbento (min-width: 1144px) {
	.cit-bento__kaart--groot .cit-bento__status {
		left: auto;
		right: 60%;
		top: 17%;
		bottom: auto;
		transform: none;
	}
}