/*
 * De fotorij met de puntjes (productpagina in de opzet van Tower 28, spec 5
 * "Fotohelft" en "Telefoon"; taak 5).
 *
 * Het blok staat in de groep is-style-fotohelft (inc/modules/product/
 * blokstijlen.css: een raster van één kolom, wit). Zijn rij en puntjes zijn
 * cellen van dat raster (display: contents op het blok):
 * - onder 1024: de foto, de puntjes eronder, en een rij miniaturen van
 *   custom.miniatuur (72) die horizontaal scrolt, op de zijmarge;
 * - vanaf 1024: rechts van de foto een verticale rij van
 *   custom.fotorij.miniatuur (100), zo hoog als de foto en scrollend; de
 *   puntjes onder de foto.
 * Dit blad laadt alleen als de rij er is (WP_Block::render(), inc/blokken.php).
 *
 * Zonder JavaScript staat de rij er niet (hidden van render.php), en krijgt hij
 * geen plek. Met JavaScript houdt dit blad zijn plek al vrij voor view.js hem
 * toont (zichtbaarheid verborgen, dezelfde maten): zo verspringt er niets
 * (ProductpaginaIndelingTest, CLS). Een browser zonder (scripting) toont de
 * rij pas na view.js.
 *
 * Alleen tokens (ontwerpsysteem §8).
 */

.wp-block-dreamglow-fotorij.dg-fotorij {
	display: contents;
}

.wp-block-dreamglow-fotorij.dg-fotorij[hidden] {
	display: none;
}

@media (scripting: enabled) {
	.wp-block-dreamglow-fotorij.dg-fotorij[hidden] {
		display: contents;
		visibility: hidden;
	}
}

/* Het raster van de fotohelft met een rij: onder 1024 onder elkaar. */
.wp-block-group.is-style-fotohelft:has(> .wp-block-dreamglow-fotorij) {
	grid-template-areas: "foto" "punt" "rij";
}

.wp-block-group.is-style-fotohelft:has(> .wp-block-dreamglow-fotorij) > .wp-block-woocommerce-product-gallery {
	grid-area: foto;
}

/* De rij: miniaturen naast elkaar, horizontaal scrollend, met de zijmarge
   links en rechts (de fotohelft gaat onder 1024 van rand tot rand). */
.dg-fotorij__rij {
	grid-area: rij;
	display: flex;
	gap: var(--wp--preset--spacing--8);
	min-inline-size: 0;
	padding-inline: var(--dg-zijmarge);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--dg-zijmarge);
	scrollbar-width: none;
}

/* Een miniatuur: 72 op 72 (custom.miniatuur), op wit, met een rand die pas bij
   de gekozen foto kleur krijgt; zo verschuift er niets bij het kiezen. */
.dg-fotorij__knop {
	flex: none;
	box-sizing: border-box;
	inline-size: var(--wp--custom--miniatuur);
	block-size: var(--wp--custom--miniatuur);
	margin: 0;
	padding: 0;
	border: var(--wp--custom--lijn--dun) solid transparent;
	border-radius: 0;
	background: var(--wp--preset--color--paper);
	cursor: pointer;
	scroll-snap-align: start;
}

.dg-fotorij__knop[aria-pressed="true"] {
	border-color: var(--wp--preset--color--kop);
}

/* De focusring binnen de miniatuur: de rij scrolt, en knipt wat erbuiten valt. */
.dg-fotorij__knop:focus-visible {
	outline: var(--wp--custom--focus-ring);
	outline-offset: calc(-1 * (var(--wp--custom--focus--afstand) + var(--wp--custom--lijn--dik)));
}

.dg-fotorij__beeld {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* De puntjes: een per miniatuur, alleen om te zien (aria-hidden). Het gekozen
   puntje is gevuld; de andere zijn een ring in ink-soft. Ze lopen door op een
   nieuwe regel als ze niet op één regel passen. */
.dg-fotorij__puntjes {
	grid-area: punt;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--16) var(--dg-zijmarge);
}

.dg-fotorij__punt {
	box-sizing: border-box;
	inline-size: var(--wp--preset--spacing--8);
	block-size: var(--wp--preset--spacing--8);
	border: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--ink-soft);
	border-radius: var(--wp--custom--radius--rond);
}

.dg-fotorij__punt.is-gekozen {
	border-color: var(--wp--preset--color--kop);
	background-color: var(--wp--preset--color--kop);
}

/*
 * Vanaf 1024: de rij als kolom rechts van de foto, 16 ertussen, zo hoog als de
 * foto (--dg-hoogte-galerij) en verticaal scrollend; de puntjes onder de foto.
 * De kolom staat er ook als de rij nog verborgen is, met JavaScript: dan
 * verandert de breedte van de foto niet als view.js de rij toont.
 */
@media (width > 1023px) {
	.wp-block-group.is-style-fotohelft:has(> .wp-block-dreamglow-fotorij:not([hidden])) {
		grid-template-columns: minmax(0, 1fr) var(--wp--custom--fotorij--miniatuur);
		grid-template-areas: "foto rij" "punt .";
		column-gap: var(--wp--preset--spacing--16);
	}

	.dg-fotorij__rij {
		flex-direction: column;
		align-self: start;
		max-block-size: var(--dg-hoogte-galerij);
		padding-inline: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior-block: contain;
		scroll-snap-type: y proximity;
		scroll-padding-inline: 0;
	}

	.dg-fotorij__knop {
		inline-size: var(--wp--custom--fotorij--miniatuur);
		block-size: var(--wp--custom--fotorij--miniatuur);
	}

	.dg-fotorij__puntjes {
		padding-inline: 0;
	}
}

@media (scripting: enabled) and (width > 1023px) {
	.wp-block-group.is-style-fotohelft:has(> .wp-block-dreamglow-fotorij) {
		grid-template-columns: minmax(0, 1fr) var(--wp--custom--fotorij--miniatuur);
		grid-template-areas: "foto rij" "punt .";
		column-gap: var(--wp--preset--spacing--16);
	}
}

/*
 * Woo's teller ("1 van 8", dreamglow/galerijbediening) en Woo's pijlen (taak
 * 10, eindreview): die lopen door de foto's van het product (hoofdfoto en
 * galerij), de rij en de puntjes door de kleuren en die foto's. Twee standen
 * naast elkaar die elkaar tegenspreken; met een rij in de fotohelft zeggen de
 * rij en de puntjes welke foto er staat, dus teller en pijlen gaan weg. Ook
 * vóór de hydratatie (geen :not([hidden])): anders staan de pijlen er even en
 * verdwijnen ze. De vergrootknop en de dialoog blijven, en vegen en de
 * pijltjestoetsen op de foto ook (Woo's viewer). Zonder rij laadt dit blad
 * niet en geldt :has() niet: dan blijft alles zoals het was. Langere selectors
 * dan die van galerijbediening/style.css, zodat deze wint, ongeacht de
 * volgorde van de bladen.
 */
.wp-block-group.is-style-fotohelft:has(> .wp-block-dreamglow-fotorij) > .wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-product-gallery-large-image .wc-block-next-previous-buttons,
.wp-block-group.is-style-fotohelft:has(> .wp-block-dreamglow-fotorij) > .wp-block-woocommerce-product-gallery[data-wp-interactive] .wc-block-product-gallery-large-image .dg-galerijbediening__teller {
	display: none;
}

@media (hover: hover) {
	.dg-fotorij__knop:not([aria-pressed="true"]):hover {
		border-color: var(--wp--preset--color--line);
	}
}