/**
 * Kitsune Fotolayout — frontend + editor gedeelde stijl.
 * Techniek: clip-path (vorm) + shape-outside (tekstomloop), pure CSS, geen JS.
 * Tekst die na dit blok volgt (gewone Paragraaf-blokken) loopt er vanzelf
 * omheen via de browser's eigen float-gedrag — dit blok bevat zelf geen tekst.
 *
 * KRITIEK: elke ".ktt-fl.ktt-fl--<variant>{width:...}"-selector heeft BEWUST
 * de klasse ".ktt-fl" dubbel (i.p.v. gewoon ".ktt-fl--<variant>"). Blocksy
 * zet op elk rechtstreeks kind van .is-layout-constrained (dus ook op ons
 * blok) een eigen "width: var(--theme-block-width)" via de selector
 * ".is-layout-constrained > :where(:not(.alignleft)...)" — en :where() telt
 * voor specificiteit als NUL. Bij een gewone ".ktt-fl--<variant>"-selector
 * (specificiteit 0,1,0) is dat dus een GELIJKSPEL met de thema-regel, en wint
 * simpelweg wie later in de broncode staat te laden — op de live site laadt
 * Blocksy's CSS ná deze stylesheet, dus won voorheen altijd het thema: elke
 * vormgeving zonder eigen inline-breedte (d.w.z. "Grootte"-schuifregelaar op
 * de standaardwaarde 1, zie render.php) rendert dan onopgemerkt op ~volle
 * content-breedte i.p.v. de bedoelde 23-56%, met kapotte tekstomloop tot
 * gevolg. In de block-editor trad dit niet op (andere/geen concurrerende
 * regel daar) — vandaar "in de editor goed, live niet". Dubbele klasse
 * (specificiteit 0,2,0) wint altijd, ongeacht laadvolgorde. Nooit terugzetten
 * naar een enkele ".ktt-fl--<variant>" op een selector die "width" zet.
 */

.ktt-fl {
	--ktt-ink: #192a3d;
	--ktt-rose: #ef476f;
	--ktt-on-photo: #faf6ef;
	--ktt-shadow: 220 30% 15%;
	--ktt-fl-scale: 1; /* "Grootte"-schuifregelaar (render.php/index.js), zie toelichting hieronder */
	/* Compensatie voor een float-eigenaardigheid: WordPress/Blocksy centreren
	   een gewone (niet-zwevende) paragraaf binnen .entry-content via
	   "width: var(--theme-block-width)" + "margin-left/right: auto". Voor een
	   GEFLOATE box negeert de browser "margin: auto" per CSS-spec (het wordt
	   altijd 0) -- dus zonder deze compensatie plakt een .ktt-fl--<variant>
	   tegen de rauwe linker-/rechterrand van .entry-content, terwijl de tekst
	   zelf netjes gecentreerd is binnen een smallere kolom. Zichtbaar gevolg:
	   de foto stak buiten de marge van de tekst. Deze variabele rekent exact
	   hetzelfde gat uit als waar de tekst "gratis" al mee gecentreerd wordt
	   (dezelfde theme-block-width/content-size-variabelen), en wordt hieronder
	   bij elke vormgeving toegevoegd aan de buitenste marge (dus links bij
	   ktt-fl--side-left, rechts bij ktt-fl--side-right) -- geverifieerd op
	   1280px (70px) en 900px (45px) tegen de daadwerkelijke tekstpositie. */
	--ktt-fl-inset: max(0px, calc((100% - min(var(--theme-block-width, 100%), var(--wp--style--global--content-size, 1140px))) / 2));
	/* LET OP: hieronder staat bij elke vormgeving "!important" op de
	   margin-regel. Dat is GEEN slordigheid maar noodzaak: WordPress' eigen
	   ".is-layout-constrained > :where(...) { margin-left/right: auto
	   !important }" wint een cascade-gelijkspel niet via specificiteit maar
	   via importance -- een gewone (niet-important) regel verliest ALTIJD
	   van een !important-regel, ongeacht specificiteit of laadvolgorde, zelfs
	   een inline style verliest hiervan. Zonder !important hier resolven
	   margin-left/right van een gefloat element dus altijd naar 0 (auto ->
	   0 bij float, per CSS-spec), wat zowel de inset hierboven als de
	   gewone tekst-tussenruimte (1.6em e.d.) volledig had platgeslagen --
	   ontdekt doordat zelfs een handmatig geforceerde inline margin-left
	   geen enkel effect had. Alleen margin-top/bottom zijn hier niet geraakt
	   (het thema zet alleen left/right op auto), dus die stonden al goed. */
	margin: 0 0 1.6em;
	position: relative;
}
/* Vaste breedtes i.p.v. procenten voor de 10 zwevende/tekstomloop-vormgevingen
   (diagonaal, medaillon, blob, duo, polaroid, citaat, filmstrip, hoofdletter,
   rol, split) -- op verzoek van de eigenaar, na een concreet gemeld verschil
   tussen editor en live: bij een percentage-breedte ziet dezelfde vormgeving
   er anders uit naargelang de content-kolom (editor-canvas vs. live, en zelfs
   verschillende live-breedtes tussen ~480-1140px), want de tekst-lettergrootte
   schaalt niet mee met een bredere/smallere kolom -- hoeveel tekst er naast de
   foto past verschuift dus subtiel per context, ook zonder bugs. Drie vaste
   waarden (desktop/tablet/telefoon) i.p.v. vloeiend schalen maakt het
   voorspelbaar en overal gelijk: desktop-getallen = de oude %-waarde x 1140px
   (de effectieve content-breedte hier, zie [[custom-gutenberg-blok-fotolayout]]),
   tablet-getallen = dezelfde verhouding x ~700px (de content-breedte rond het
   bestaande 782px-omslagpunt). Zowel render.php als index.js zetten bij een
   afwijkende "Grootte"-instelling alleen nog de kale schaalfactor als
   "--ktt-fl-scale" (geen breedte meer uitrekenen in PHP/JS) -- de calc()'s
   hieronder passen 'm toe, dus de schuifregelaar werkt nu ook correct op
   tablet-breedte (voorheen won een inline breedte altijd, ongeacht scherm). */
.ktt-fl__frame {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: #eee;
	box-shadow: 0 10px 24px -14px hsl(var(--ktt-shadow) / 0.55);
}
.ktt-fl__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ktt-fl__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 1;
	margin: 0;
	padding: 20px 14px 10px;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--ktt-on-photo);
	background: linear-gradient(0deg, hsl(var(--ktt-shadow) / 0.75), transparent);
}

/* ---------- 1. Diagonale snit ---------- */
/* aspect-ratio staat bewust op .ktt-fl__frame (binnen), niet op dit
   zwevende element zelf: Safari/WebKit faalt stil op de combinatie
   float + aspect-ratio + shape-outside/clip-path op hetzelfde element —
   de hoogte komt dan niet op tijd binnen voor de tekstomloop van latere
   blokken, met platte tekst-overlap op de foto tot gevolg (zie
   [[custom-gutenberg-blok-fotolayout]]). Met aspect-ratio op een gewoon
   in-flow kind-element (frame) telt de hoogte gewoon mee via normale
   content-sizing, wat in elke browser altijd al betrouwbaar werkt —
   zelfde patroon als citaat/polaroid/rol hieronder, die dit probleem
   al die tijd al niet hadden.
   Chroom is hier niet gevoelig voor, dus dit was onzichtbaar tot een
   Safari-check. */
.ktt-fl.ktt-fl--diagonaal { width: calc(524px * var(--ktt-fl-scale)); }
.ktt-fl.ktt-fl--diagonaal { position: static; } /* zie toelichting bij medaillon: overbodig, .ktt-fl__frame heeft al position:relative */
.ktt-fl--diagonaal.ktt-fl--side-right {
	float: right; margin: 0 var(--ktt-fl-inset) 1.2em 1.8em !important;
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
	shape-outside: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
/* side-left heeft BEWUST geen "shape-outside" (side-right wel): op de
   eigenaar's Safari bleek links-zwevend + shape-outside stelselmatig
   kapot (tekst zonder gereserveerde ruimte, exact zoals eerder bij
   medaillon), terwijl rechts-zwevend + shape-outside daar wél gewoon
   werkte -- zelfde bug, alleen aan één kant. clip-path (de zichtbare
   diagonale knip van de fóto zelf) blijft gewoon staan, dus de foto ziet
   er nog steeds diagonaal uit; alleen de tekst eromheen volgt links nu een
   rechte rand i.p.v. de diagonaal (klein driehoekig wit vlak in de hoek),
   ipv rechts wel netjes de diagonaal volgt. Zie [[custom-gutenberg-blok-fotolayout]]. */
.ktt-fl--diagonaal.ktt-fl--side-left {
	float: left; margin: 0 1.8em 1.2em var(--ktt-fl-inset) !important;
	clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}
.ktt-fl--diagonaal .ktt-fl__frame { width: 100%; aspect-ratio: 4 / 5; border-radius: 0; }

/* ---------- 2. Medaillon ---------- */
.ktt-fl.ktt-fl--medaillon { width: calc(342px * var(--ktt-fl-scale)); }
/* side-right krijgt de ronde omloop gewoon terug via shape-outside (rechts
   bleek nooit het probleem te hebben, zie diagonaal hieronder). side-left
   NIET: een progressive-enhancement-poging via JS (--ktt-fl-shape +
   frontend.js, ná het laden alsnog shape-outside toevoegen + een
   float-toggle-nudge) is geprobeerd en door de eigenaar getest -- bleek
   in zowel Safari als Brave alsnog niet te werken, dus weer teruggedraaid.
   side-left blijft daarom bewust op de simpele, betrouwbare rechte
   omloop staan, zonder shape-outside en zonder JS-afhankelijkheid. Niet
   opnieuw proberen zonder een nieuw idee over de ECHTE oorzaak. */
.ktt-fl--medaillon.ktt-fl--side-left { float: left; margin: 0.2em 1.6em 1em var(--ktt-fl-inset) !important; }
.ktt-fl--medaillon.ktt-fl--side-right { float: right; margin: 0.2em var(--ktt-fl-inset) 1em 1.6em !important; shape-outside: circle(50% at 50% 50%); }
/* GEEN expliciete shape-outside meer (ook geen "margin-box"): via Safari's
   eigen Web Inspector (Berekend-paneel, bij de eigenaar) bleek de CSS 100%
   correct -- float, breedte, marges én "shape-outside: margin-box" kwamen
   allemaal precies goed aan -- en toch bedekte de foto zichtbaar het BEGIN
   van elke regel eronder (bijv. "Nikko ligt twee uur van Tokyo" werd "gt
   twee uur van Tokyo"), zelfs na een volledige Safari-herstart + gloednieuwe
   privésessie. Dus geen cache-, specificiteit- of schrijfwijze-probleem meer
   -- de tekst reserveerde kennelijk HELEMAAL geen ruimte, ondanks correct
   berekende stijlen. Twee dingen weggehaald die dat kunnen veroorzaken:
   1) deze expliciete shape-outside-declaratie zelf (ook al is "margin-box"
      spec-technisch de standaardwaarde voor een float, EXPLICIET zetten kan
      in Safari een andere, kennelijk minder betrouwbare CSS-Shapes-
      rekenroute triggeren dan gewoon niets zetten en op het float-eigen
      standaardgedrag vertrouwen);
   2) "position: relative" op dit element (hieronder expliciet teruggezet
      naar "static") -- .ktt-fl__frame (de kaderelement hieronder) heeft
      zélf ook al "position: relative", en medaillon's onderschrift zit
      daar altijd binnenin, dus de buitenste figure heeft geen positionering
      nodig; float + position:relative gecombineerd met CSS Shapes is een
      bekende categorie WebKit-valkuilen. Beide zijn hypotheses, niet 100%
      bevestigd als dé oorzaak (nog niet opnieuw in Safari geverifieerd),
      maar allebei veilig: geen enkele functionaliteit gaat hierdoor
      verloren. Zie [[custom-gutenberg-blok-fotolayout]]. */
.ktt-fl.ktt-fl--medaillon { position: static; }
.ktt-fl--medaillon .ktt-fl__frame { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; }
/* een balonderschrift past niet op de smalle onderkant van een cirkel: hoger, gecentreerd en smal zetten */
.ktt-fl--medaillon .ktt-fl__caption {
	bottom: 16%; left: 50%; right: auto;
	transform: translateX(-50%);
	max-width: 64%; text-align: center;
	background: none; padding: 0;
	text-shadow: 0 1px 8px hsl(var(--ktt-shadow) / 0.95), 0 1px 3px hsl(var(--ktt-shadow) / 0.9);
}

/* ---------- 3. Organische knip ---------- */
.ktt-fl.ktt-fl--blob {
	width: calc(502px * var(--ktt-fl-scale));
	position: static; /* zie toelichting bij medaillon/diagonaal hierboven */
	/* aspect-ratio staat op .ktt-fl__frame, zie toelichting bij Diagonale snit hierboven. */
	/* organische blob als polygon: clip-path/shape-outside path() rekent in vaste px,
	   niet in %, en schaalt dus niet mee met een responsief element. */
	--ktt-blob: polygon(95.4% 50.0%, 91.9% 67.4%, 83.2% 83.2%, 67.8% 93.0%, 50.0% 94.0%, 32.1% 93.3%, 17.1% 82.9%, 16.0% 64.1%, 19.4% 50.0%, 21.7% 38.3%, 29.5% 29.5%, 38.7% 22.7%, 50.0% 18.0%, 61.1% 23.1%, 70.9% 29.1%, 86.2% 35.0%);
	clip-path: var(--ktt-blob);
}
/* shape-outside hier BEWUST alleen op side-right (niet meer gedeeld op de
   basisregel hierboven): zelfde links/shape-outside-bug in Safari als bij
   diagonaal/medaillon, zie de toelichting daar. clip-path (de zichtbare
   blob-vorm van de fóto) staat nog gewoon op de basisregel, dus de foto
   zelf ziet er links en rechts identiek uit -- alleen de tekstomloop volgt
   links nu de rechthoekige marge-box i.p.v. de organische vorm. */
.ktt-fl--blob.ktt-fl--side-right { float: right; margin: 0 var(--ktt-fl-inset) 1.1em 1.6em !important; shape-outside: var(--ktt-blob); }
.ktt-fl--blob.ktt-fl--side-left { float: left; margin: 0 1.6em 1.1em var(--ktt-fl-inset) !important; }
.ktt-fl--blob .ktt-fl__frame { width: 100%; aspect-ratio: 1 / 1; border-radius: 0; }

/* ---------- 4. Foto-duo, verspringend ---------- */
/* Geen frame-element hier (duo-a/duo-b zijn direct position:absolute), dus
   geen gewoon kind om de hoogte via content-sizing aan op te hangen. Los dit
   op met een onzichtbaar ::before-blokje dat wel gewoon in-flow meetelt —
   zelfde achterliggende reden als bij Diagonale snit hierboven, en blijft
   correct meeschalen met de "Grootte"-schuifregelaar omdat het net als
   .ktt-fl__frame elders altijd 100% van de eigen (evt. geschaalde) breedte is. */
.ktt-fl.ktt-fl--duo { width: calc(638px * var(--ktt-fl-scale)); }
.ktt-fl--duo::before { content: ""; display: block; width: 100%; aspect-ratio: 5 / 4; }
/* side-left heeft BEWUST geen shape-outside meer (side-right wel) -- zelfde
   links/shape-outside-bug in Safari als bij diagonaal/blob/medaillon, zie
   de toelichting bij Medaillon hierboven. LET OP: "position: relative" is
   hier NIET weggehaald (anders dan bij de andere vormgevingen) -- duo-a/
   duo-b zijn hier, anders dan overal elders, DIRECT position:absolute
   binnen dit element (geen .ktt-fl__frame-kind om op te leunen), dus deze
   figure heeft haar eigen positioneringscontext echt nodig. */
.ktt-fl--duo.ktt-fl--side-left {
	float: left; margin: 0.3em 1.6em 1.3em var(--ktt-fl-inset) !important;
}
.ktt-fl--duo.ktt-fl--side-right {
	float: right; margin: 0.3em var(--ktt-fl-inset) 1.3em 1.6em !important;
	shape-outside: polygon(100% 0, 18% 0, 18% 35%, 0 35%, 0 100%, 100% 100%);
}
.ktt-fl__duo-a { position: absolute; border-radius: 7px; overflow: hidden; box-shadow: 0 10px 24px -14px hsl(var(--ktt-shadow) / 0.55); }
.ktt-fl__duo-b { position: absolute; width: 52%; aspect-ratio: 1/1; border-radius: 7px; overflow: hidden; border: 4px solid var(--ktt-page-bg, #fff); box-shadow: 0 12px 22px -10px hsl(var(--ktt-shadow) / 0.6); }
.ktt-fl--duo.ktt-fl--side-left .ktt-fl__duo-a { inset: 0 18% 14% 0; }
.ktt-fl--duo.ktt-fl--side-left .ktt-fl__duo-b { right: 0; bottom: 0; }
.ktt-fl--duo.ktt-fl--side-right .ktt-fl__duo-a { inset: 0 0 14% 18%; }
.ktt-fl--duo.ktt-fl--side-right .ktt-fl__duo-b { left: 0; bottom: 0; }

/* ---------- 5. Volle breedte, ademmoment (geen omloop) ---------- */
.ktt-fl.ktt-fl--vol { width: 100%; float: none; clear: both; margin: 0 0 1.6em; }
.ktt-fl--vol .ktt-fl__frame { aspect-ratio: 20 / 7; }
.ktt-fl--vol .ktt-fl__pill {
	display: inline-block;
	margin: -1.4em 0 0 1.6em;
	position: relative; z-index: 2;
	background: #fff; color: var(--ktt-ink);
	border: 1px solid rgba(0,0,0,0.08);
	padding: 0.6em 1em; border-radius: 9px;
	font-size: 0.9rem; max-width: 34em;
	box-shadow: 0 8px 18px -12px hsl(var(--ktt-shadow) / 0.5);
}

/* ---------- 6. Polaroid, scheef ---------- */
.ktt-fl.ktt-fl--polaroid { width: calc(388px * var(--ktt-fl-scale)); }
.ktt-fl--polaroid.ktt-fl--side-left { float: left; margin: 0.4em 1.6em 1.3em calc(var(--ktt-fl-inset) - 0.3em) !important; transform: rotate(-4.5deg); }
.ktt-fl--polaroid.ktt-fl--side-right { float: right; margin: 0.4em calc(var(--ktt-fl-inset) - 0.3em) 1.3em 1.6em !important; transform: rotate(4.5deg); }
.ktt-fl--polaroid { background: #fff; padding: 10px 10px 34px; border-radius: 3px; box-shadow: 0 16px 28px -14px hsl(var(--ktt-shadow) / 0.65); }
.ktt-fl.ktt-fl--polaroid { position: static; } /* zie de toelichting bij medaillon: shape-outside/position:relative-combinatie is onbetrouwbaar in Safari, hier ook niet nodig (het onderschrift gebruikt geen position:absolute) */
.ktt-fl--polaroid .ktt-fl__frame { aspect-ratio: 1/1; border-radius: 1px; box-shadow: none; }
.ktt-fl--polaroid .ktt-fl__polaroid-cap {
	display: block; margin-top: 10px;
	font-family: Georgia, 'Iowan Old Style', serif; font-style: italic;
	font-size: 0.86rem; color: #6b7280; text-align: center;
}

/* ---------- 7. Citaat-foto ---------- */
.ktt-fl.ktt-fl--citaat { width: calc(536px * var(--ktt-fl-scale)); }
.ktt-fl--citaat.ktt-fl--side-right { float: right; margin: 0 var(--ktt-fl-inset) 1.2em 1.6em !important; }
.ktt-fl--citaat.ktt-fl--side-left { float: left; margin: 0 1.6em 1.2em var(--ktt-fl-inset) !important; }
.ktt-fl.ktt-fl--citaat { position: static; } /* zie toelichting bij medaillon/polaroid hierboven */
.ktt-fl--citaat .ktt-fl__frame { aspect-ratio: 4/5; border-radius: 10px 10px 3px 10px; }
.ktt-fl--citaat .ktt-fl__quote {
	background: var(--ktt-rose); color: #fff;
	font-family: Georgia, 'Iowan Old Style', serif; font-style: italic;
	font-size: 0.98rem; margin: 10px 0 0; padding: 12px 15px;
	border-radius: 12px 12px 12px 3px;
}

/* ---------- 8. Filmstrip-trio ---------- */
.ktt-fl.ktt-fl--filmstrip { width: calc(262px * var(--ktt-fl-scale)); display: flex; flex-direction: column; gap: 8px; position: static; } /* zie toelichting bij medaillon hierboven */
.ktt-fl--filmstrip.ktt-fl--side-right { float: right; margin: 0 var(--ktt-fl-inset) 1.2em 1.6em !important; }
.ktt-fl--filmstrip.ktt-fl--side-left { float: left; margin: 0 1.6em 1.2em var(--ktt-fl-inset) !important; }
.ktt-fl__strip-item { aspect-ratio: 1/1; border-radius: 6px; overflow: hidden; }
.ktt-fl__strip-item .ktt-fl__img { border-radius: 6px; }

/* ---------- 9. Hoofdletter-foto (gebruik core/paragraph's "Hoofdletter" i.c.m. dit blok) ---------- */
.ktt-fl.ktt-fl--hoofdletter { width: calc(262px * var(--ktt-fl-scale)); float: left; margin: 0.3em 1.2em 0.6em var(--ktt-fl-inset) !important; position: static; } /* zie toelichting bij medaillon hierboven */
.ktt-fl--hoofdletter .ktt-fl__frame { aspect-ratio: 1/1; }

/* ---------- 10. Tekst-op-foto opener ---------- */
.ktt-fl.ktt-fl--opener { width: 100%; float: none; clear: both; margin: 0 0 1.6em; }
.ktt-fl--opener .ktt-fl__frame { aspect-ratio: 16 / 9; }
.ktt-fl--opener .ktt-fl__overlay-title {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	margin: 0; padding: 4em 1.4em 1.1em;
	background: linear-gradient(0deg, hsl(var(--ktt-shadow) / 0.86) 0%, hsl(var(--ktt-shadow) / 0.45) 60%, transparent 100%);
	color: var(--ktt-on-photo);
	font-size: 1.7rem; font-weight: 700; line-height: 1.15;
	text-wrap: balance;
}

/* ---------- 11. Mozaïek-kwartet ---------- */
.ktt-fl.ktt-fl--mozaiek {
	width: 100%; float: none; clear: both; margin: 0 0 1.6em;
	aspect-ratio: 1 / 1;
	display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px;
}
.ktt-fl--mozaiek .ktt-fl__strip-item { border-radius: 8px; overflow: hidden; }

/* ---------- 12. Hangende rol ---------- */
.ktt-fl.ktt-fl--rol { width: calc(296px * var(--ktt-fl-scale)); padding: 15px 0; }
.ktt-fl--rol.ktt-fl--side-left { float: left; margin: 0.3em 1.8em 1.2em var(--ktt-fl-inset) !important; }
.ktt-fl--rol.ktt-fl--side-right { float: right; margin: 0.3em var(--ktt-fl-inset) 1.2em 1.8em !important; }
.ktt-fl.ktt-fl--rol { position: static; } /* zie toelichting bij medaillon hierboven; onderschrift zit al binnen .ktt-fl__frame, die heeft zelf al position:relative */
.ktt-fl--rol .ktt-fl__frame { aspect-ratio: 3 / 5; border-radius: 2px; }
.ktt-fl--rol::before, .ktt-fl--rol::after {
	content: ""; display: block; height: 9px; margin: 0 -9px;
	background: var(--ktt-ink); border-radius: 5px;
	box-shadow: 0 2px 4px hsl(var(--ktt-shadow) / 0.4);
}
.ktt-fl--rol::before { margin-bottom: 7px; }
.ktt-fl--rol::after { margin-top: 7px; }

/* ---------- 13. Vergelijking, gesplitst ---------- */
/* aspect-ratio op .ktt-fl__frame, zie toelichting bij Diagonale snit hierboven. */
.ktt-fl.ktt-fl--split { width: calc(570px * var(--ktt-fl-scale)); }
.ktt-fl--split.ktt-fl--side-left { float: left; margin: 0.3em 1.6em 1.2em var(--ktt-fl-inset) !important; }
.ktt-fl--split.ktt-fl--side-right { float: right; margin: 0.3em var(--ktt-fl-inset) 1.2em 1.6em !important; }
.ktt-fl.ktt-fl--split { position: static; } /* zie toelichting bij medaillon hierboven; split-a/split-b/split-divider/split-tag zitten al binnen .ktt-fl__frame, die heeft zelf al position:relative */
.ktt-fl--split .ktt-fl__frame { width: 100%; aspect-ratio: 4 / 5; }
.ktt-fl__split-a, .ktt-fl__split-b { position: absolute; inset: 0; overflow: hidden; }
.ktt-fl__split-a { clip-path: inset( 0 50% 0 0 ); }
.ktt-fl__split-b { clip-path: inset( 0 0 0 50% ); }
.ktt-fl__split-divider {
	position: absolute; top: 0; bottom: 0; left: 50%; z-index: 2;
	width: 3px; background: var(--ktt-on-photo); transform: translateX(-50%);
	box-shadow: 0 0 0 1px hsl(var(--ktt-shadow) / 0.35);
}
.ktt-fl__split-tag {
	position: absolute; top: 8px; z-index: 3;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--ktt-rose); color: #fff;
	font-size: 11px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.ktt-fl__split-tag--a { left: 8px; }
.ktt-fl__split-tag--b { right: 8px; }

/* ---------- Responsief: op smallere schermen valt de omloop weg ---------- */
@media (max-width: 782px) {
	/* Tablet-tier: eigen vaste breedte per vormgeving (i.p.v. de desktop-
	   breedte gewoon te laten doorlopen), zelfde reden als hierboven bij
	   .ktt-fl -- op ~700px content-breedte (rond dit omslagpunt) voelt de
	   desktop-maat al snel te dominant t.o.v. de resterende tekstruimte. */
	.ktt-fl.ktt-fl--diagonaal { width: calc(378px * var(--ktt-fl-scale)); }
	.ktt-fl.ktt-fl--medaillon { width: calc(210px * var(--ktt-fl-scale)); }
	.ktt-fl.ktt-fl--blob { width: calc(308px * var(--ktt-fl-scale)); }
	.ktt-fl.ktt-fl--duo { width: calc(392px * var(--ktt-fl-scale)); }
	.ktt-fl.ktt-fl--polaroid { width: calc(238px * var(--ktt-fl-scale)); }
	.ktt-fl.ktt-fl--citaat { width: calc(329px * var(--ktt-fl-scale)); }
	.ktt-fl.ktt-fl--filmstrip { width: calc(161px * var(--ktt-fl-scale)); }
	.ktt-fl.ktt-fl--hoofdletter { width: calc(161px * var(--ktt-fl-scale)); }
	.ktt-fl.ktt-fl--rol { width: calc(182px * var(--ktt-fl-scale)); }
	.ktt-fl.ktt-fl--split { width: calc(350px * var(--ktt-fl-scale)); }
}
@media (max-width: 480px) {
	.ktt-fl.ktt-fl--diagonaal,
	.ktt-fl.ktt-fl--medaillon,
	.ktt-fl.ktt-fl--blob,
	.ktt-fl.ktt-fl--duo,
	.ktt-fl.ktt-fl--polaroid,
	.ktt-fl.ktt-fl--citaat,
	.ktt-fl.ktt-fl--filmstrip,
	.ktt-fl.ktt-fl--hoofdletter,
	.ktt-fl.ktt-fl--rol,
	.ktt-fl.ktt-fl--split {
		/* De dubbele ".ktt-fl"-klasse hier is BEWUST, zelfde reden als overal
		   elders in dit bestand: specificiteit 0,2,0 nodig om te tippen met
		   desktop-regels als ".ktt-fl--medaillon.ktt-fl--side-left" (ook
		   0,2,0) -- bij een gelijke specificiteit EN allebei !important wint
		   de regel die later in dit bestand staat, en deze media query staat
		   bewust helemaal onderaan. Zonder deze dubbele klasse verloor deze
		   media query dat gelijkspel op een telefoonbreedte, met een foto
		   die het scherm uit liep tot gevolg (gemeld door de eigenaar).
		   !important op ALLE regels hier, ook margin/max-width: de desktop-
		   marges hebben zelf inmiddels ook !important (nodig om WordPress'
		   eigen "margin-left/right: auto !important" te verslaan, zie de
		   toelichting bovenaan dit bestand) -- zonder !important hier zou
		   die desktop-marge (incl. de berekende --ktt-fl-inset, die op een
		   telefoonbreedte een verkeerde/te grote waarde kan geven) op mobiel
		   blijven winnen ondanks deze media query, met een foto die het
		   scherm uit loopt tot gevolg (gemeld door de eigenaar). !important
		   wint hier bewust ook van een eventuele per-instantie inline
		   breedte (de "Grootte"-schuifregelaar) — op de telefoon altijd
		   volle breedte, gecentreerd, ongeacht wat er op desktop is
		   ingesteld. */
		float: none !important;
		width: 100% !important;
		max-width: 320px !important;
		margin: 0 auto 1.4em !important;
		shape-outside: none !important;
		transform: none;
		display: block;
	}
	.ktt-fl--medaillon .ktt-fl__caption { bottom: 10%; }
	.ktt-fl--vol .ktt-fl__pill { margin-left: 0.8em; max-width: calc(100% - 1.6em); }
	.ktt-fl--opener .ktt-fl__overlay-title { font-size: 1.3rem; padding: 3em 1em 0.9em; }
	.ktt-fl--mozaiek { gap: 6px; }
	/* filmstrip is normaal een flex-kolom met "gap: 8px" als tussenruimte
	   tussen de 3 foto's (zie de basisregel bovenaan dit bestand) -- de
	   gedeelde mobiele regel hierboven zet "display: block", en "gap" doet
	   niets meer op een blok-element, dus de foto's plakten tegen elkaar
	   zonder tussenruimte (gemeld door de eigenaar). Hier expliciet
	   "display: flex" terugzetten voor filmstrip specifiek: ziet er nog
	   steeds als een gestapelde kolom uit (flex-direction is toch al
	   column), maar "gap" werkt daardoor weer. */
	.ktt-fl.ktt-fl--filmstrip { display: flex !important; flex-direction: column; gap: 8px; }
}