/*
 * De galerij van de productpagina (spec 5-6, 5c "De galerij"; afwijking 7
 * en 8 van het plan): Woo's Product Gallery in de vorm van DreamGlow, en de
 * bediening die Woo niet heeft.
 *
 * Dit blad hoort bij dreamglow/galerijbediening. Het blok staat in het
 * sjabloon altijd in de viewer van de galerij, dus dit blad laadt met de
 * galerij, en vormt ook Woo's eigen delen: het vlak, de foto, de pijlen en de
 * dialoog. Haalt de eigenaar het blok uit de galerij, dan heeft die weer
 * Woo's eigen vorm en bediening: pijlen en een klik op de foto (spec,
 * Risico's r. 1072-1073).
 *
 * Alleen op de site: de wortel van Woo's galerij heeft daar
 * data-wp-interactive (ProductGallery.php r. 273), in de Site Editor niet.
 * Zo blijven de binnenblokken in de editor aan te klikken. Woo zet zijn eigen
 * regels bijna allemaal in :where() (specificiteit 0); deze selectors winnen
 * dus ongeacht de volgorde van de bladen, ook van Woo's regel die de pijlen
 * tot en met 600 px verbergt (twee klassen).
 *
 * Alleen tokens (ontwerpsysteem §8). Het percentage van de teller komt uit
 * --wp--custom--dekking--teller (kruiscontrole D5-1, keuze a).
 * --dg-galerij-stand zet view.js; hier staat zijn beginwaarde.
 */

/* Het vlak: beige (jade), zoals kaart D (blocks/productkaart/style.css r. 123-139). */
.wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-product-gallery-large-image {
	--dg-galerij-stand: 0;
	background-color: var(--wp--preset--color--jade);
}

/* De foto vult het vlak en staat er heel in (contain), op hetzelfde beige
   als zijn eigen achtergrond (13-10-2026; was multiply op crème). Woo geeft elke foto een vak van
   1:1; in een vlak van 792 × 680 is dat 792 hoog, en viel de foto boven en
   onder weg. Elk vak heeft zelf ook het beige. */
.wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-product-gallery-large-image__container {
	block-size: 100%;
}

.wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-product-gallery-large-image__wrapper {
	block-size: 100%;
	aspect-ratio: auto;
	background-color: var(--wp--preset--color--jade);
}

.wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-woocommerce-product-gallery-large-image__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* De glijstand (spec 5c, "Wisselen": 600 ms op de standaardcurve). Woo
   wisselt met scrollTo en de gladde scroll van de browser, met een duur die
   geen blad kan zetten. view.js zet .dg-galerij-glijdt zodra het de galerij
   volgt. Dan scrolt de rij niet meer (overflow visible, dus Woo's scrollTo
   doet niets), en schuift elk vak met transform; de rij zelf blijft staan.
   Het vlak knipt af met clip, dat ook een focus of een script niet kan
   scrollen. Zonder view.js blijft Woo's eigen wissel. Een nieuwe reeks foto's
   (een andere variant) springt (.dg-galerij-direct), en bij
   prefers-reduced-motion springt elke wissel. */
.wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-product-gallery-large-image.dg-galerij-glijdt {
	overflow: clip;
}

.wp-block-woocommerce-product-gallery[data-wp-interactive] .dg-galerij-glijdt .wc-block-product-gallery-large-image__container {
	overflow: visible;
}

.wp-block-woocommerce-product-gallery[data-wp-interactive] .dg-galerij-glijdt .wc-block-product-gallery-large-image__wrapper {
	transform: translateX(calc(-1 * var(--dg-galerij-stand) * 100%));
	transition: transform var(--wp--custom--duur--carrousel) var(--wp--custom--curve);
}

.wp-block-woocommerce-product-gallery[data-wp-interactive] .dg-galerij-glijdt.dg-galerij-direct .wc-block-product-gallery-large-image__wrapper {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-product-gallery[data-wp-interactive] .dg-galerij-glijdt .wc-block-product-gallery-large-image__wrapper {
		transition: none;
	}
}

/* Woo zet de binnenblokken 5 px binnen de rand; teller, knop en pijlen meten
   vanaf de rand van het vlak. De laag vangt geen klik: een klik of veeg op
   de foto hoort bij Woo (volledig scherm, vegen). */
.wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-product-gallery-large-image__inner-blocks {
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	pointer-events: none;
}

/* Woo's pijlen (spec 5c, "Bediening"): rond, van --dg-raakvlak (40, 44 bij
   aanraken), rechtsonder, 12 ertussen, op elke breedte. De vorm van de
   carrousel (blocks/carrouselbediening/style.css). */
.wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-product-gallery-large-image .wc-block-next-previous-buttons {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--24);
	inset-inline-end: var(--wp--preset--spacing--24);
	display: flex;
	gap: var(--wp--preset--spacing--12);
	inline-size: auto;
	block-size: auto;
}

.wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-next-previous-buttons .wc-block-next-previous-buttons__button {
	display: inline-grid;
	place-items: center;
	inline-size: var(--dg-raakvlak);
	block-size: var(--dg-raakvlak);
	padding: 0;
	border: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--kop);
	border-radius: var(--wp--custom--radius--rond);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--kop);
	box-sizing: border-box;
}

/* Aan een uiteinde stiller, zoals de carrousel. Woo zet het pijltje daar ook
   nog op 30 %; dat valt weg. */
.wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-next-previous-buttons .wc-block-next-previous-buttons__button[aria-disabled="true"] {
	border-color: var(--wp--preset--color--line);
	background: var(--wp--preset--color--line);
	color: var(--wp--preset--color--metadata);
}

.wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-next-previous-buttons__button[aria-disabled="true"] .wc-block-next-previous-buttons__icon {
	opacity: 1;
}

@media (hover: hover) {
	.wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-next-previous-buttons .wc-block-next-previous-buttons__button:not([aria-disabled="true"]):hover {
		background: var(--wp--preset--color--grain-soft);
	}
}

/* Woo's dialoog: de dim van het thema (open vraag 13: één dim), en een ronde
   sluitknop van --dg-raakvlak op wit, die op de dim te zien blijft. Woo geeft
   de dialoog width 100vw en height 100vh (in :where()), maar laat de rand van
   de browser staan (3 px, content-box): 6 px te groot, en een zwarte streep
   links en boven. Zonder rand dekt hij het venster precies. */
.wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-product-gallery-dialog {
	border: 0;
	background-color: var(--wp--custom--dim);
}

.wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-product-gallery-dialog__close-button {
	display: inline-grid;
	place-items: center;
	inline-size: var(--dg-raakvlak);
	block-size: var(--dg-raakvlak);
	padding: 0;
	border: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--kop);
	border-radius: var(--wp--custom--radius--rond);
	background: var(--wp--preset--color--paper);
	fill: var(--wp--preset--color--kop);
	box-sizing: border-box;
}

/* De bediening: een laag over het vlak, boven de foto's (Woo zet die op laag
   1). Alleen de vergrootknop vangt een klik. De klasse zet alleen render.php,
   dus in de editor geldt dit niet. */
.dg-galerijbediening {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	pointer-events: none;
}

/* De teller linksonder: 32 hoog, 14/24, 24 van de randen, op wit met
   --wp--custom--dekking--teller (spec 5c, "Bediening"). */
.dg-galerijbediening__teller {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--24);
	inset-inline-start: var(--wp--preset--spacing--24);
	display: flex;
	align-items: center;
	block-size: var(--wp--preset--spacing--32);
	margin: 0;
	padding-inline: var(--wp--preset--spacing--12);
	border-radius: var(--wp--custom--radius--pil);
	background-color: color-mix(in srgb, var(--wp--preset--color--paper) var(--wp--custom--dekking--teller), transparent);
	color: var(--wp--preset--color--kop);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--leading--s);
	box-sizing: border-box;
}

/* Rechtsboven, rond en van --dg-raakvlak, zoals de pijlen. */
.dg-galerijbediening__vergroot {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--24);
	inset-inline-end: var(--wp--preset--spacing--24);
	display: inline-grid;
	place-items: center;
	inline-size: var(--dg-raakvlak);
	block-size: var(--dg-raakvlak);
	padding: 0;
	border: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--kop);
	border-radius: var(--wp--custom--radius--rond);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--kop);
	cursor: pointer;
	pointer-events: auto;
	box-sizing: border-box;
}

.dg-galerijbediening__vergroot svg {
	inline-size: var(--wp--preset--spacing--24);
	block-size: var(--wp--preset--spacing--24);
}

@media (hover: hover) {
	.dg-galerijbediening__vergroot:hover {
		background: var(--wp--preset--color--grain-soft);
	}
}

/* Zonder view.js staan teller en knop er niet (render.php zet hidden); de
   display hierboven mag dat niet overschrijven. */
.dg-galerijbediening__teller[hidden],
.dg-galerijbediening__vergroot[hidden] {
	display: none;
}