/* ==========================================================================
   Videosectie 9:16 — Tallow PDP
   --------------------------------------------------------------------------
   De basisvormgeving (.vids, .vid, .vid__play, .vid__meta, .vid__dur, .modal)
   staat al in pdp-base.css: dat bestand is de concept-CSS, byte voor byte.
   Alleen de markup en de JS waren bij het porten weggevallen.

   Dit bestand voegt daar toe wat het concept niet nodig had omdat het met
   gearceerde placeholders werkte in plaats van met echte media:

     1. een grid dat ook klopt bij 1, 2 of 3 video's
     2. tegels die echte <a>-links zijn (werkt dus zonder JavaScript)
     3. posterbeeld dat de tegel vult
     4. een modal die een <video> of een embed kan dragen, in de verhouding
        van de video zelf
     5. zichtbare focus, want een link zonder focusring is onbruikbaar
        met een toetsenbord
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Grid
   --------------------------------------------------------------------------
   Het concept zet hier hard vier kolommen. Dat klopt alleen bij precies vier
   video's; bij drie blijft er een gat staan en bij één wordt de tegel zo breed
   dat een 9:16-verhouding hem meters hoog maakt. Het aantal staat daarom als
   data-count op de container en bepaalt de kolomtelling.

   Let op de specificiteit: `.rn-pdp .vids` (0,2,0) wint van de `.vids` (0,1,0)
   uit pdp-base.css — óók van de media-query daar, want specificiteit gaat vóór
   volgorde. De mobiele variant moet hier dus opnieuw, anders blijft het op de
   telefoon bij vier kolommen.
   -------------------------------------------------------------------------- */
.rn-pdp .vids {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rn-pdp .vids[data-count="1"] {
	grid-template-columns: minmax(0, 300px);
	justify-content: center;
}
.rn-pdp .vids[data-count="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
}
.rn-pdp .vids[data-count="3"] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.rn-pdp .vids,
	.rn-pdp .vids[data-count="3"],
	.rn-pdp .vids[data-count="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: none;
	}
	.rn-pdp .vids[data-count="1"] {
		grid-template-columns: minmax(0, 260px);
	}
}

/* --------------------------------------------------------------------------
   2. De tegel is een link, geen div
   --------------------------------------------------------------------------
   In het concept is dit een <div> met een klik-handler: zonder JavaScript
   gebeurt er dan niets. Hier is elke tegel een echte <a> naar het videobestand
   (of naar YouTube/Vimeo). Werkt JS, dan onderschept pdp-video.js de klik en
   opent de modal; werkt het niet, dan speelt de browser de video gewoon zelf
   af. Ctrl/cmd-klik blijft "openen in nieuw tabblad" doen.
   -------------------------------------------------------------------------- */
.rn-pdp a.vid {
	display: block;
	color: var(--cream);
	text-decoration: none;
	background: #1a1918;
}
.rn-pdp a.vid:hover,
.rn-pdp a.vid:focus {
	color: var(--cream);
	text-decoration: none;
}
.rn-pdp a.vid:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Posterbeeld
   --------------------------------------------------------------------------
   Absoluut positioneren en niet gewoon width:100%, omdat de aspect-ratio van
   de tegel leidend is: een poster die net geen 9:16 is mag de tegel niet
   oprekken of een witte rand achterlaten.
   -------------------------------------------------------------------------- */
.rn-pdp .vid__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
	transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.rn-pdp a.vid:hover .vid__poster {
	transform: scale(1.04);
}

/*
 * Een donkere sluier over de poster. Zonder dat staat het gouden speelknopje
 * op een lichte foto zo goed als onzichtbaar, en dat is precies het element
 * dat moet vertellen dat hier iets te klikken valt.
 */
.rn-pdp .vid__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(16, 16, 16, .28) 0%, rgba(16, 16, 16, .05) 38%, rgba(16, 16, 16, .55) 100%);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Speelknop, duur en onderschrift
   -------------------------------------------------------------------------- */
.rn-pdp .vid__play {
	/* het driehoekje staat optisch links van het midden; 2px terugduwen */
	padding-left: 3px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
.rn-pdp .vid__meta b {
	line-height: 1.3;
}
.rn-pdp .vid__meta span {
	display: block;
	margin-top: 2px;
	line-height: 1.45;
}

/* --------------------------------------------------------------------------
   5. Modal
   --------------------------------------------------------------------------
   .modal / .modal__box / .modal__close komen uit de concept-CSS. Wat daar
   ontbreekt is een plek voor de video zelf, want daar zat een placeholder.

   DE VERHOUDING KOMT VAN DE VIDEO, NIET VAN DE TEGEL
   --------------------------------------------------
   In het concept staat de box hard op `aspect-ratio:9/16; width:min(400px,92vw)`.
   Dat klopt voor de tegels (die zijn staand), maar niet voor de lightbox: een
   liggende 1920x1080-video werd in dat staande venster geperst en bleef een
   klein blokje beeld met dikke zwarte balken erboven en eronder.

   pdp-video.js zet daarom drie variabelen op de modal zodra de maat van de
   video bekend is. Staan ze er niet, dan gelden de fallbacks hieronder en
   gedraagt de lightbox zich precies zoals voorheen (9:16, 400px). De override
   loopt via specificiteit — `.rn-pdp-vidmodal .modal__box` (0,2,0) wint van
   `.modal__box` (0,1,0) — zodat pdp-base.css onaangeroerd blijft.

     --rn-vid-ar     verhouding voor aspect-ratio, bv. "16 / 9"
     --rn-vid-ratio  dezelfde verhouding als kaal getal (breedte ÷ hoogte)
     --rn-vid-w      gewenste breedte: 400px staand, 900px liggend

   De derde waarde in de min() is de hoogtebegrenzing: breedte = hoogte × ratio,
   dus door de breedte te maximeren op (vensterhoogte − ruimte voor de
   sluitknop) × ratio kan de box nooit hoger worden dan het scherm. De regel
   staat twee keer: eerst met vh, dan met svh voor de browsers die dat kennen
   (op mobiel is svh de hoogte die je echt ziet). Kent een browser svh niet,
   dan negeert hij die tweede regel en blijft de eerste staan.
   -------------------------------------------------------------------------- */
.rn-pdp-vidmodal .modal__box {
	background: #000;
	border: 1px solid var(--line-dark);
	aspect-ratio: var(--rn-vid-ar, 9 / 16);
	width: min(var(--rn-vid-w, 400px), 92vw, calc((100vh - 110px) * var(--rn-vid-ratio, 0.5625)));
	width: min(var(--rn-vid-w, 400px), 92vw, calc((100svh - 110px) * var(--rn-vid-ratio, 0.5625)));
}
.rn-pdp-vidmodal .rn-vidstage {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
}
.rn-pdp-vidmodal .rn-vidstage video,
.rn-pdp-vidmodal .rn-vidstage iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #000;
}
/*
 * contain en niet cover: een video is geen decoratie. Liever twee zwarte
 * balken dan een bijgesneden beeld waarin de helft van de handeling wegvalt.
 * Met de juiste verhouding op de box zijn die balken er in de praktijk niet
 * meer, maar het blijft de veilige uitkomst als de metadata ooit afwijkt van
 * het werkelijke beeld.
 */
.rn-pdp-vidmodal .rn-vidstage video {
	object-fit: contain;
}
.rn-pdp-vidmodal .modal__close {
	background: none;
	border: 0;
	padding: 6px 2px;
	cursor: pointer;
}
.rn-pdp-vidmodal .modal__close:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}
/*
 * Op een kleine telefoon past "top:-46px" niet meer boven de box. Alleen de
 * sluitknop opschuiven dus — de breedte wordt hierboven al door de min()
 * begrensd (92vw), en die hier terugzetten op 400px zou een liggende video
 * juist weer in een staand venster duwen.
 */
@media (max-height: 720px), (max-width: 460px) {
	.rn-pdp-vidmodal .modal__close {
		top: -34px;
		font-size: 11px;
	}
}

/* de titel is er voor schermlezers, niet voor het oog */
.rn-pdp-vidmodal .rn-vidtitle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   6. Beheerdersbalk
   --------------------------------------------------------------------------
   Zelfde vormgeving als bij de voor/na-sectie, maar bewust een eigen class:
   pdp-ba.css wordt alleen ingeladen als dát blok rendert, dus die stijl lenen
   zou hier een onzichtbare afhankelijkheid opleveren.
   -------------------------------------------------------------------------- */
.rn-pdp .vid-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 .vid-adminbar b { font-family: var(--h); }
.rn-pdp .vid-adminbar ul { margin: 8px 0 0; padding-left: 18px; }
.rn-pdp .vid-adminbar li { margin-top: 3px; }

/* de placeholdertegels in het beheerdersvoorbeeld zijn niet klikbaar */
.rn-pdp .vid--demo {
	cursor: default;
}
.rn-pdp .vid--demo:hover {
	transform: none;
}

/* --------------------------------------------------------------------------
   7. Zonder JavaScript
   --------------------------------------------------------------------------
   De tegels blijven werken (het zijn links), alleen opent de video dan in een
   eigen tabblad in plaats van in de modal. Dat is het vermelden waard, want
   anders lijkt het alsof de pagina wegspringt.
   -------------------------------------------------------------------------- */
.rn-pdp .vid-nojs { display: none; }

/* --------------------------------------------------------------------------
   8. Minder beweging
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rn-pdp a.vid,
	.rn-pdp .vid__poster,
	.rn-pdp .vid__play {
		transition: none !important;
	}
	.rn-pdp a.vid:hover {
		transform: none;
	}
	.rn-pdp a.vid:hover .vid__poster {
		transform: none;
	}
}