/* ==========================================================================
   Rover Nature — voor/na-slider (sectie "Voor & na")
   --------------------------------------------------------------------------
   Aanvulling op pdp-base.css, dat de .ba-stijlen uit het concept al bevat.
   Hier staat alleen wat het concept NIET had, omdat het daar met placeholder-
   blokjes werkte in plaats van met echte foto's, en zonder toetsenbord.

   Laadt na pdp-live.css. Alles is gescopet op .rn-pdp zodat het nooit
   buiten deze ene productpagina kan lekken.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Echte foto's in de panelen
   De panelen zijn position:absolute;inset:0 binnen een 4/3-kader. De twee
   foto's moeten exact even groot renderen, anders vergelijk je appels met
   peren zodra de slider beweegt: object-fit:cover dwingt dat af, ook als de
   klant twee licht verschillende uitsnedes aanlevert.
   -------------------------------------------------------------------------- */
.rn-pdp .ba__pane img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* voorkomt dat de browser de foto als sleepbaar plaatje oppakt */
	-webkit-user-drag: none;
	user-select: none;
}

/* Het kader zelf: zolang er nog niets geladen is geen wit gat maar de
   donkere achtergrond van de sectie. */
.rn-pdp .ba {
	background: #1a1918;
	/* --------------------------------------------------------------------
	   KRITIEK — het concept had hier touch-action:none. Dat blokkeert op een
	   telefoon ook VERTICAAL scrollen, en dit blok is 4:3 en vult daar bijna
	   het hele scherm: de bezoeker komt met zijn duim op de foto de pagina
	   niet meer door. pan-y geeft verticaal scrollen terug aan de browser en
	   houdt alleen de horizontale beweging voor de slider.
	   -------------------------------------------------------------------- */
	touch-action: pan-y;
}

/* --------------------------------------------------------------------------
   2. Toetsenbord en focus
   De handle is in het concept een div met pointer-events:none (zodat je op de
   foto zelf kunt slepen). Hij is nu ook een echte slider met tabindex, dus
   moet hij een zichtbare focusring hebben — op de grip, want de handle zelf
   is maar 2px breed.
   -------------------------------------------------------------------------- */
.rn-pdp .ba__handle:focus { outline: none; }

.rn-pdp .ba__handle:focus-visible .ba__grip {
	outline: 3px solid var(--beige);
	outline-offset: 3px;
}

/* Fallback voor browsers zonder :focus-visible */
.rn-pdp .ba__handle:focus .ba__grip {
	outline: 3px solid var(--beige);
	outline-offset: 3px;
}
.rn-pdp .ba__handle:focus:not(:focus-visible) .ba__grip {
	outline: none;
}

/* Tijdens het slepen geen tekstselectie over de hele sectie */
.rn-pdp .ba.is-dragging { cursor: ew-resize; }
.rn-pdp .ba.is-dragging * { user-select: none; }

/* --------------------------------------------------------------------------
   3. Onderschrift
   In het concept is .ba__cap een flexbox met flex-wrap:wrap. Zodra de linker
   tekst wat langer is, klapt de rechterkant ("2x per dag · 28 dagen") naar een
   tweede regel — dat zie je in het concept ook gebeuren bij de linker kaart,
   terwijl de rechter het wel op één regel houdt. Scheef beeld. Alleen de
   linkertekst mag krimpen; min-width:0 is nodig omdat een flex-item anders
   weigert kleiner te worden dan zijn inhoud.
   -------------------------------------------------------------------------- */
.rn-pdp .ba__cap {
	flex-wrap: nowrap;
	align-items: baseline;
}
.rn-pdp .ba__cap > :first-child {
	flex: 1 1 auto;
	min-width: 0;
}
.rn-pdp .ba__cap > :last-child {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Op smalle schermen is één regel niet eerlijk te doen: dan liever netjes
   onder elkaar dan een afgekapt onderschrift. */
@media (max-width: 560px) {
	.rn-pdp .ba__cap { flex-wrap: wrap; }
	.rn-pdp .ba__cap > :last-child { white-space: normal; }
}

/* --------------------------------------------------------------------------
   4. Sectie zelf
   Het concept zette de achtergrond met een inline style; dat hoort in CSS.
   -------------------------------------------------------------------------- */
.rn-pdp .sec--ba { background: var(--ink-2); }

.rn-pdp .sec--ba .ba__grip {
	/* de pijl mag niet meeslepen met de tekstcursor */
	cursor: ew-resize;
}

/* --------------------------------------------------------------------------
   5. Beheerdersvoorbeeld
   Zolang er geen echte, vrijgegeven fotoparen zijn, ziet een bezoeker dit
   blok NIET. Een ingelogde beheerder ziet het wel, met deze balk erboven,
   zodat het verschil niet stilletjes is.
   -------------------------------------------------------------------------- */
.rn-pdp .ba-adminbar {
	border: 1px dashed var(--gold);
	background: rgba(198, 171, 116, .08);
	color: var(--beige);
	padding: 16px 20px;
	margin: 0 auto 34px;
	max-width: 880px;
	font-size: 13.5px;
	line-height: 1.7;
}
.rn-pdp .ba-adminbar b { font-family: var(--h); }
.rn-pdp .ba-adminbar ul { margin: 8px 0 0; padding-left: 18px; }
.rn-pdp .ba-adminbar li { margin-top: 3px; }

/* De placeholderpanelen in dat voorbeeld: nadrukkelijk niet-echt laten ogen. */
.rn-pdp .ba--demo .ph__lbl { max-width: 80%; }

/* --------------------------------------------------------------------------
   6. Bewegingsvoorkeur
   De "knipoog"-animatie die de slider bij binnenkomst even heen en weer laat
   gaan, is puur decoratief. Wie reduced motion aan heeft, krijgt hem niet —
   dat regelt pdp-ba.js, maar we zetten hier ook de CSS-transitions uit voor
   het geval er ooit een transition op de handle komt.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rn-pdp .ba__handle,
	.rn-pdp .ba__pane--after { transition: none !important; }
}

/* --------------------------------------------------------------------------
   7. Zonder JavaScript
   Dan valt er niets te slepen. De slider staat dan vast op 50%, de grip en de
   uitlegtekst zijn misleidend ("sleep de slider" terwijl dat niet kan), dus
   die verbergen we en we tonen in plaats daarvan beide foto's naast elkaar.
   -------------------------------------------------------------------------- */
.rn-pdp .ba-nojs { display: none; }