/*
 * dreamglow/categorietegel (deelproject 3, taak 4): één productcategorie als
 * tegel, met haar foto, haar naam en "Bekijk".
 *
 * Bronnen: spec 2-3, de hoogtetabel onder "Beeld: een vaste hoogte per
 * breakpoint, of een vaste verhouding." (rij Categorietegel: 200, 240 vanaf
 * 768, 344 vanaf 1024 en 480 vanaf 1440) en "Tekst op beeld"; ruling dp3-4;
 * ontwerpsysteem §1 (de rollen productnaam en knoplabel), §7 ("Nooit hoger
 * dan het scherm.") en §8 ("Kern-blokken": nooit een eigen getal of een eigen
 * breekpunt). Elke maat komt uit een token; de stand per breedte kiest
 * style.css van het thema (--dg-hoogte-tegel, --dg-rol-productnaam).
 *
 * Opbouw: de link is het vlak (ink), het beeld vult het (cover), daarboven
 * het verloop, daarboven naam en "Bekijk", onderaan. Zonder beeld blijft het
 * vlak in ink staan, met dezelfde hoogte: de tekst blijft leesbaar, ook als
 * een foto niet laadt (plan, Review Focus 2 en 5).
 *
 * Twee klassen in de selectors op de link: de globale stijlen geven een link
 * bij aanwijzen de kleur ink, met a:where(:not(.wp-element-button)):hover
 * (specificiteit 0,1,1), en staan later in de pagina. Met één klasse werd de
 * tekst bij aanwijzen donker op een donker vlak.
 */
.wp-block-dreamglow-categorietegel.dg-categorietegel {
	/* Hoe ver de pijl bij aanwijzen opschuift; 0 zonder beweging (onderaan). */
	--dg-tegel-verschuiving: var(--wp--preset--spacing--4);
	position: relative;
	/* Een eigen stapel: beeld en verloop (z-index onder 0) liggen boven het
	   vlak van de link en onder de tekst. */
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--8);
	box-sizing: border-box;
	/* Nooit hoger dan het scherm onder de header (ontwerpsysteem §7). 100svh
	   is de benoemde uitzondering van HomepageCssTest. */
	block-size: min(var(--dg-hoogte-tegel), 100svh - var(--dg-header-hoogte, 0px));
	padding: var(--wp--preset--spacing--24);
	overflow: hidden;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

/* Het beeld vult de tegel; de uitsnede schuift mee met de breedte (cover). */
.dg-categorietegel__beeld {
	position: absolute;
	inset: 0;
	z-index: -2;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/*
 * Tekst op beeld (spec 2-3, "Tekst op beeld"; ruling dp3-4): het verloop in
 * ink, dicht vanaf 55 %, uit het token van taak 3. Op een eigen laag, en niet
 * als achtergrond van de link: zo leest browser.CONTRAST op het vlak zonder
 * beeld de grond (ink) nog af. Daar valt het verloop weg in de grond.
 */
.wp-block-dreamglow-categorietegel.dg-categorietegel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--wp--custom--op-beeld--verloop);
}

/*
 * De naam: de rol productnaam (20/28, vanaf 1024 24/32), serif 500, −0,2 px,
 * wit. Een lange naam breekt binnen de tegel af, zo nodig midden in een woord.
 */
.dg-categorietegel__naam {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--dg-rol-productnaam);
	font-weight: 500;
	line-height: calc(1em + var(--wp--preset--spacing--8));
	letter-spacing: var(--wp--custom--spatie--krap);
	overflow-wrap: anywhere;
}

/* "Bekijk": de rol knoplabel (Jost 14/16, kapitalen, 2 px), wit. */
.dg-categorietegel__knop {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 400;
	line-height: var(--wp--custom--leading--xs);
	letter-spacing: var(--wp--custom--spatie--groot);
	text-transform: uppercase;
}

/* De pijl achter "Bekijk" schuift bij aanwijzen een stap op. */
.dg-categorietegel__knop > [aria-hidden="true"] {
	display: inline-block;
	transition: transform var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

@media (hover: hover) {
	.wp-block-dreamglow-categorietegel.dg-categorietegel:hover .dg-categorietegel__naam {
		text-decoration: underline;
	}

	.wp-block-dreamglow-categorietegel.dg-categorietegel:hover .dg-categorietegel__knop > [aria-hidden="true"] {
		transform: translateX(var(--dg-tegel-verschuiving));
	}
}

/*
 * De focusring van het thema (style.css:254-257), buiten de tegel (plan,
 * Review Focus 3): daar ligt de witte grond van module-tegels, en moss haalt
 * op wit 5,4:1. Op de foto zelf haalt moss dat niet. Hier nog eens gezet,
 * zodat de ring buiten blijft als een ander blad die van het thema wijzigt.
 */
.wp-block-dreamglow-categorietegel.dg-categorietegel:focus-visible {
	outline: var(--wp--custom--focus-ring);
	outline-offset: var(--wp--custom--focus--afstand);
}

/* Minder beweging: de pijl blijft staan, zonder overgang. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-dreamglow-categorietegel.dg-categorietegel {
		--dg-tegel-verschuiving: 0px;
	}

	.dg-categorietegel__knop > [aria-hidden="true"] {
		transition: none;
	}
}