/*! Cakery Over ons. Instelbare waarden komen als custom properties binnen op
 *  .cabout, zodat dit bestand statisch blijft. Laadt bewust geen fonts. */

/* The class is in there twice. The Elementor kit sets h1 to h3 and p with a
   class plus an element (.elementor-kit-000 h1), and that beats a single class.
   Without this doubling the kit would decide the colour and the typeface here.
   Your own settings in the widget still come first: Elementor writes those with
   the wrapper included and so more specifically still. */

.cabout {
	--cabout-gold: #A9A083;
	--cabout-gold-deep: #877E63;
	--cabout-ink: #2A2117;
	--cabout-ink-soft: #867C6D;
	--cabout-line: rgba(42, 33, 23, .15);
	--cabout-gap: 74px;
	--cabout-ratio: .9fr 1.1fr;
	--cabout-tilegap: 14px;
	--cabout-height: min(640px, 80vh);
	--cabout-tilt: -8deg;
	--cabout-row: 150px;
	--cabout-width: 78%;
	--cabout-fade: 13%;
	--cabout-cut: 14px;
	--cabout-zoom: 1.04;
	--cabout-sat: .95;
	--cabout-bright: .98;
	--cabout-speed-a: 46s;
	--cabout-speed-b: 52s;
	color: var(--cabout-ink);
	/* Vertical breathing room: the site setting wins, with this section's own
	   design value as the fallback. */
	padding-top: var(--cakery-space-top, 0px);
	padding-bottom: var(--cakery-space-bottom, 0px);
}

.cabout__grid {
	display: grid;
	grid-template-columns: var(--cabout-ratio);
	gap: var(--cabout-gap);
	align-items: center;
}

.cabout--flip .cabout__media { order: -1; }
/* ---------- Tekst ---------- */
.cabout__kicker.cabout__kicker {
	margin: 0;
	color: var(--cabout-gold-deep);
	font-size: 10.5px;
	letter-spacing: .3em;
	text-transform: uppercase;
}
.cabout__title.cabout__title {
	max-width: var(--cabout-title-w, none);
	margin: 16px 0 0;
	font-family: "Myorie", Georgia, serif;
	font-size: clamp(30px, 3.8vw, 46px);
	font-weight: 400;
	line-height: 1.12;
}
.cabout__txt.cabout__txt {
	max-width: var(--cabout-txt-w, 40ch);
	margin: 20px 0 0;
	color: var(--cabout-ink-soft);
	font-size: 16px;
	line-height: 1.8;
}

.cabout__txt + .cabout__txt { margin-top: 14px; }

.cabout__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 44px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--cabout-line);
}

.cabout__fact b {
	display: block;
	font-family: "Myorie", Georgia, serif;
	font-size: 27px;
	font-weight: 400;
	line-height: 1;
}

.cabout__fact span {
	display: block;
	margin-top: 7px;
	color: var(--cabout-ink-soft);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.cabout__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(169, 160, 131, .55);
	color: var(--cabout-ink);
	font-size: 11px;
	letter-spacing: .2em;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color .35s ease, color .35s ease;
}

.cabout__more svg {
	width: 15px;
	height: 15px;
	transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.cabout__more:hover,
.cabout__more:focus-visible {
	border-color: var(--cabout-gold-deep);
	color: var(--cabout-gold-deep);
}

.cabout__more:hover svg,
.cabout__more:focus-visible svg { transform: translateX(4px); }

/* ---------- De twee scheve kolommen ---------- */

/* De fade boven en onder zorgt dat de kolommen nergens hard afbreken. */
.cabout__media {
	position: relative;
	height: var(--cabout-height);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--cabout-fade), #000 calc(100% - var(--cabout-fade)), transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 var(--cabout-fade), #000 calc(100% - var(--cabout-fade)), transparent 100%);
}

/* De inzet loopt bewust buiten het kader: door de draaiing komen de hoeken
   anders leeg in beeld. De kolommen zelf zijn smaller dan het kader, zodat de
   tegels kleiner worden en er meer beeld tegelijk zichtbaar is. */
.cabout__inner {
	position: absolute;
	inset: -16%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cabout-tilegap);
	width: var(--cabout-width);
	margin-inline: auto;
	transform: rotate(var(--cabout-tilt));
}

.cabout__col { overflow: hidden; }

.cabout__track {
	display: grid;
	gap: var(--cabout-tilegap);
	will-change: transform;
}

/* De reeks staat er twee keer in, vandaar -50% min een halve gap. */
.cabout__col--a .cabout__track { animation: caboutUp var(--cabout-speed-a) linear infinite; }
.cabout__col--b .cabout__track { animation: caboutUp var(--cabout-speed-b) linear infinite reverse; }

.cabout--pause .cabout__media:hover .cabout__track,
.cabout--pause .cabout__media:focus-within .cabout__track {
	animation-play-state: paused;
}

@keyframes caboutUp {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(0, calc(-50% - var(--cabout-tilegap) / 2), 0); }
}

.cabout-tile {
	--c: var(--cabout-cut);
	position: relative;
	overflow: hidden;
	margin: 0;
	aspect-ratio: 4 / 5;
	background: #E7DFCF;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

/* The class is in there twice on purpose. Elementor sets .elementor img to
   height:auto, with exactly the same specificity as a single class; which of the
   two wins then depends on the order the stylesheets come in. That order is not
   fixed, so we give this one the last word here. */
.cabout-tile.cabout-tile img,
.cabout-tile video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(var(--cabout-sat)) brightness(var(--cabout-bright));
	transition: transform 1.2s cubic-bezier(.2, .7, .3, 1), filter .7s ease;
}

.cabout-tile:hover img,
.cabout-tile:hover video {
	filter: none;
	transform: scale(var(--cabout-zoom));
}

/* ---------- Responsive ---------- */

@media (max-width: 940px) {
	.cabout__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cabout {
		--cabout-height: min(520px, 70vh);
		--cabout-width: 86%;
		--cabout-tilt: -6deg;
	}

	/* Op een kolom hoort het beeld boven de tekst. */
	.cabout__media { order: -1; }
}

@media (max-width: 560px) {
	.cabout {
		--cabout-width: 100%;
	}

	.cabout__facts { gap: 28px; }

	/* ---------- Twee rijen in plaats van twee scheve kolommen ----------
	   Op een smal scherm valt van een gedraaide kolom weinig te zien: de foto's
	   worden klein en de hoeken lopen leeg. Twee rijen boven elkaar die tegen
	   elkaar in schuiven laten meer beeld zien op dezelfde hoogte, en de scheefte
	   heeft geen ruimte meer nodig.

	   De vervaging draait mee: op de kolommen loopt hij van boven naar beneden,
	   hier van links naar rechts. */
	.cabout__media {
		height: auto;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--cabout-fade), #000 calc(100% - var(--cabout-fade)), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 var(--cabout-fade), #000 calc(100% - var(--cabout-fade)), transparent 100%);
	}

	/* De inzet stond buiten het kader om de lege hoeken van de draaiing op te
	   vangen. Zonder draaiing hoeft dat niet meer. */
	.cabout__inner {
		position: static;
		inset: auto;
		grid-template-columns: 1fr;
		width: 100%;
		transform: none;
	}

	.cabout__col { height: var(--cabout-row); }

	.cabout__track {
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		height: 100%;
	}

	.cabout__col--a .cabout__track { animation-name: caboutSide; }
	.cabout__col--b .cabout__track { animation-name: caboutSide; }

	.cabout-tile {
		height: 100%;
		width: calc(var(--cabout-row) * 4 / 5);
		aspect-ratio: auto;
	}
}

/* De rijen schuiven opzij in plaats van omhoog. De reeks staat er twee keer in,
   vandaar -50% min een halve gap: dat valt precies samen met het beginpunt. */
@keyframes caboutSide {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(-50% - var(--cabout-tilegap) / 2), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.cabout__track { animation: none !important; }

	.cabout-tile.cabout-tile img,
	.cabout-tile video {
		filter: none;
		transition: none;
	}

	.cabout-tile:hover img,
	.cabout-tile:hover video { transform: none; }

	.cabout__more svg { transition: none; }
}