/**
 * Ruis en rust, front-end.
 *
 * Van assets/css/crc/why.css in het thema, alleen het podium. De kleuren staan
 * als custom properties op het blok, zodat een thema ze per sectie kan
 * overschrijven; de twee vlakken nemen daarnaast een paletklasse of een eigen
 * kleur uit de editor aan, die winnen van de standaard hieronder.
 */

.wp-block-vallem-ruis-en-rust {
	/* Waar de lijn loopt en de pil hangt. Het script leest dit voor de golf. */
	--vallem-rr-lijn: 63%;
	--vallem-rr-golf-punt: 106, 159, 255;
	--vallem-rr-golf-heet: 255, 120, 120;
	--vallem-rr-golf-lijn: rgba( 255, 255, 255, 0.5 );
	--vallem-rr-ruis: #0a1e45;
	--vallem-rr-rust: var( --wp--preset--color--primary, #183cdd );
	--vallem-rr-kaart: #0d2149;
	--vallem-rr-kop: var( --wp--preset--color--base, #fff );
	--vallem-rr-pil: var( --wp--preset--color--base, #fff );
	--vallem-rr-pil-tekst: var( --wp--preset--color--primary-darkest, #071a3a );
	--vallem-rr-vink: #16a34a;

	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 560px;
	border-radius: 8px;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

.wp-block-vallem-ruis-en-rust__vlak {
	position: relative;
	overflow: hidden;
	padding: 56px 40px;
}

.wp-block-vallem-ruis-en-rust__vlak--ruis {
	background-color: var( --vallem-rr-ruis );
}

.wp-block-vallem-ruis-en-rust__vlak--rust {
	background-color: var( --vallem-rr-rust );
}

.wp-block-vallem-ruis-en-rust__kop {
	position: relative;
	z-index: 3;
	margin: 0;
	font-size: clamp( 2rem, 1.1rem + 2.1vw, 3.25rem );
	font-weight: 420;
	line-height: 1.04;
	letter-spacing: -0.0223em;
	color: var( --vallem-rr-kop );
	text-wrap: balance;
}

/* Lagen, van onder naar boven: vlak, grote vragen, golf, achterste kaarten,
   koppen, voorste kaarten. De vlakken zetten geen z-index, dus alles stapelt
   in één context en het vlak knipt zijn kaarten nog steeds af. */
.wp-block-vallem-ruis-en-rust__golf {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.wp-block-vallem-ruis-en-rust__ruis {
	position: absolute;
	inset: 0;
}

/* Onzichtbaar tot het script ze plaatst en beweegt. */
.wp-block-vallem-ruis-en-rust__kaart {
	position: absolute;
	z-index: 4;
	opacity: 0;
}

.wp-block-vallem-ruis-en-rust__kaart.is-achter {
	z-index: 2;
}

.wp-block-vallem-ruis-en-rust__kaart--vraag {
	z-index: 0;
}

.wp-block-vallem-ruis-en-rust__kaart--vraag[data-voor] {
	z-index: 3;
}

/* Diepte door contrast: achter kleiner en doffer, voor helderder. */
.wp-block-vallem-ruis-en-rust__kaart.is-achter .wp-block-vallem-ruis-en-rust__kaart-in {
	font-size: 11px;
	color: rgba( 255, 255, 255, 0.5 );
}

.wp-block-vallem-ruis-en-rust__kaart.is-achter p,
.wp-block-vallem-ruis-en-rust__kaart.is-achter .wp-block-vallem-ruis-en-rust__van,
.wp-block-vallem-ruis-en-rust__kaart.is-achter time {
	color: rgba( 174, 187, 216, 0.45 );
}

.wp-block-vallem-ruis-en-rust__kaart.is-achter.wp-block-vallem-ruis-en-rust__kaart--chat p {
	font-size: 11.5px;
	color: rgba( 255, 255, 255, 0.5 );
}

.wp-block-vallem-ruis-en-rust__kaart.is-achter.wp-block-vallem-ruis-en-rust__kaart--melding .wp-block-vallem-ruis-en-rust__kaart-in,
.wp-block-vallem-ruis-en-rust__kaart.is-achter.wp-block-vallem-ruis-en-rust__kaart--chip .wp-block-vallem-ruis-en-rust__kaart-in {
	font-size: 10.5px;
}

.wp-block-vallem-ruis-en-rust__kaart:not( .is-achter ):not( .wp-block-vallem-ruis-en-rust__kaart--vraag ) .wp-block-vallem-ruis-en-rust__kaart-in {
	color: rgba( 255, 255, 255, 0.72 );
}

.wp-block-vallem-ruis-en-rust__kaart:not( .is-achter ).wp-block-vallem-ruis-en-rust__kaart--chat p {
	color: rgba( 255, 255, 255, 0.72 );
}

/* Dicht op het vlak: een vulling één stap lichter en een vage stippelrand. */
.wp-block-vallem-ruis-en-rust__kaart-in {
	min-width: 160px;
	max-width: 236px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var( --vallem-rr-kaart );
	border: 1px dashed rgba( 174, 187, 216, 0.16 );
	color: rgba( 255, 255, 255, 0.7 );
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: -0.006em;
	text-align: left;
	animation: vallem-rr-zweef var( --fd, 4s ) ease-in-out infinite alternate;
}

@keyframes vallem-rr-zweef {
	to {
		transform: translateY( var( --fa, 10px ) );
	}
}

.wp-block-vallem-ruis-en-rust__kaart b {
	display: block;
	font-weight: 600;
}

.wp-block-vallem-ruis-en-rust__kaart p {
	margin: 0;
	color: rgba( 174, 187, 216, 0.5 );
	font-size: inherit;
	line-height: inherit;
}

/* Chat: afzender in kleur, een hoekje als bubbelstaart, tijd met de blauwe dubbele vink. */
.wp-block-vallem-ruis-en-rust__kaart--chat .wp-block-vallem-ruis-en-rust__kaart-in {
	border-top-left-radius: 3px;
}

.wp-block-vallem-ruis-en-rust__kaart--chat b {
	margin-bottom: 2px;
	color: rgba( 106, 159, 255, 0.75 );
	font-size: 11.5px;
}

.wp-block-vallem-ruis-en-rust__kaart--chat p {
	color: rgba( 255, 255, 255, 0.7 );
	font-size: 12.5px;
}

.wp-block-vallem-ruis-en-rust__kaart--chat time {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
	font-size: 10.5px;
	color: rgba( 174, 187, 216, 0.55 );
}

.wp-block-vallem-ruis-en-rust__kaart--chat time::after {
	content: "";
	width: 16px;
	height: 10px;
	background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5.6l2.6 2.6 5.8-6M6.6 7.4l.8.8 5.8-6' fill='none' stroke='%236A9FFF' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

/* Meldingen in mono, zoals een monitoringtool ze print. */
.wp-block-vallem-ruis-en-rust__kaart--melding .wp-block-vallem-ruis-en-rust__kaart-in,
.wp-block-vallem-ruis-en-rust__kaart--chip .wp-block-vallem-ruis-en-rust__kaart-in {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11.5px;
	letter-spacing: -0.02em;
}

.wp-block-vallem-ruis-en-rust__kaart--melding b {
	font-weight: 500;
}

.wp-block-vallem-ruis-en-rust__badge {
	display: inline-block;
	margin-bottom: 5px;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba( 255, 99, 99, 0.12 );
	color: rgba( 255, 143, 143, 0.8 );
	font-family: Inter, sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0;
}

.wp-block-vallem-ruis-en-rust__icoon {
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
	margin-bottom: 5px;
	opacity: 0.8;
}

.wp-block-vallem-ruis-en-rust__icoon--waarschuwing {
	background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 2.5l7 12.5H2z' fill='none' stroke='%23FFC53D' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M9 7.2v3.6' stroke='%23FFC53D' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='12.9' r='.9' fill='%23FFC53D'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

.wp-block-vallem-ruis-en-rust__icoon--bel {
	background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 12.5V8a4.5 4.5 0 019 0v4.5l1.3 1.5H3.2z' fill='none' stroke='%23FF8F8F' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M7.3 15.6a1.9 1.9 0 003.4 0' fill='none' stroke='%23FF8F8F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

.wp-block-vallem-ruis-en-rust__kaart--chip .wp-block-vallem-ruis-en-rust__kaart-in {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 6px 10px;
	white-space: nowrap;
	color: rgba( 174, 187, 216, 0.65 );
}

.wp-block-vallem-ruis-en-rust__kaart--chip .wp-block-vallem-ruis-en-rust__icoon {
	margin: 0;
}

/* Mail: van wie, onderwerp, eerste regel. */
.wp-block-vallem-ruis-en-rust__van {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 3px;
	font-size: 10.5px;
	color: rgba( 174, 187, 216, 0.6 );
}

.wp-block-vallem-ruis-en-rust__van::before {
	content: "";
	width: 14px;
	height: 10px;
	background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Crect x='.75' y='.75' width='12.5' height='8.5' rx='1.2' fill='none' stroke='%23AEBBD8' stroke-width='1.2'/%3E%3Cpath d='M1.2 1.4L7 5.6l5.8-4.2' fill='none' stroke='%23AEBBD8' stroke-width='1.2'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

/* De vragen die iedereen stelt, groot en vaag, onder de golf. */
.wp-block-vallem-ruis-en-rust__kaart--vraag .wp-block-vallem-ruis-en-rust__kaart-in {
	min-width: 0;
	max-width: none;
	padding: 0;
	background: none;
	border: 0;
	white-space: nowrap;
	font-size: clamp( 1.75rem, 1rem + 1.8vw, 2.75rem );
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: rgba( 174, 187, 216, 0.11 );
}

.wp-block-vallem-ruis-en-rust__kaart--vraag[data-voor] .wp-block-vallem-ruis-en-rust__kaart-in {
	color: rgba( 174, 187, 216, 0.3 );
}

/* Het antwoord: een witte pil op de lijn, één zin tegelijk. */
.wp-block-vallem-ruis-en-rust__pil {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: var( --vallem-rr-lijn );
	transform: translate( -50%, -50% );
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 14px 22px 14px 16px;
	border-radius: 12px;
	background: var( --vallem-rr-pil );
	box-shadow: 0 18px 40px -18px rgba( 7, 26, 58, 0.55 );
	color: var( --vallem-rr-pil-tekst );
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.012em;
	white-space: nowrap;
}

.wp-block-vallem-ruis-en-rust__vink {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var( --vallem-rr-vink ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.6 11.4l3 3 5.9-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / 22px no-repeat;
}

/* Alle zinnen in één cel; het script zet de breedte op de zin die er staat. */
.wp-block-vallem-ruis-en-rust__rotor {
	display: inline-grid;
	overflow: hidden;
}

.wp-block-vallem-ruis-en-rust__zin {
	grid-area: 1 / 1;
	justify-self: start;
	width: max-content;
	opacity: 0;
	text-align: left;
}

.wp-block-vallem-ruis-en-rust__zin.is-actief {
	opacity: 1;
}

.wp-block-vallem-ruis-en-rust__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

@media ( max-width: 820px ) {

	.wp-block-vallem-ruis-en-rust {
		grid-template-columns: minmax( 0, 1fr );
		height: auto;
	}

	.wp-block-vallem-ruis-en-rust__vlak {
		padding: 40px 24px;
	}

	.wp-block-vallem-ruis-en-rust__vlak--ruis {
		height: 500px;
	}

	/* Ruimte voor een kop van drie regels boven de pil. */
	.wp-block-vallem-ruis-en-rust__vlak--rust {
		height: 340px;
	}

	.wp-block-vallem-ruis-en-rust__kaart[data-desk] {
		display: none;
	}

	.wp-block-vallem-ruis-en-rust__kaart-in {
		max-width: 210px;
	}

	.wp-block-vallem-ruis-en-rust__pil {
		padding: 12px 18px 12px 14px;
		font-size: 1rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.wp-block-vallem-ruis-en-rust__kaart-in {
		animation: none;
	}
}