/*
 * Vogelklas Karel Schot — de blokstijl "Beeldband" op core/image.
 *
 * Laadt via wp_enqueue_block_style() in functions.php, dus alleen op pagina's
 * waar een afbeeldingsblok staat, en altijd in de editor. De stijl heet
 * `beeldband`; WordPress zet daarvoor de klasse `is-style-beeldband` op de
 * <figure>.
 *
 * Een beeldband is de brede fotostrook die in het oude thema boven en onder een
 * bericht stond (single.php, klasse .post-image: 240px hoog, background-size
 * cover). Dit thema doet hetzelfde met een echte <img>, zodat de afbeelding in
 * de bron staat, een alt-tekst kan hebben en door de browser lui geladen wordt.
 *
 * Kleuren en maten uit theme.json; hier staan alleen vorm en uitsnede.
 *
 * LET OP — core/post-featured-image doet mee
 * De uitgelichte afbeelding is een ánder blok (core/post-featured-image) met
 * hetzelfde doel. Een blokstijl geldt maar voor één bloktype, dus de klasse
 * `is-style-beeldband` staat op dat blok als gewone className. De selectors
 * hieronder noemen daarom allebei de blokken.
 */

.wp-block-image.is-style-beeldband,
.wp-block-post-featured-image.is-style-beeldband {
	/*
	 * Geen marges: de band raakt links en rechts de rand en sluit boven en
	 * onder aan op wat eromheen staat. De blokopmaak zet er anders blockGap
	 * omheen, en dan zweeft de strook los in het zand.
	 */
	margin: 0;
}

/*
 * MOBIEL: een verhouding en geen vaste hoogte.
 *
 * 21 op 9 is de bioscoopband: breed en laag, precies wat een strook moet doen.
 * Een vaste hoogte van 240px zou op 375px breed bijna de halve foto zijn — een
 * verhouding schaalt mee.
 */
.wp-block-image.is-style-beeldband img,
.wp-block-post-featured-image.is-style-beeldband img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: center center;
}

/*
 * VANAF 800px: de vaste hoogte van 240px uit het oude ontwerp
 * (style.css regel 1068, .post-image). Op een breed scherm zou 21 op 9 een
 * strook van ruim 500px hoog worden en dan is de tekst eronder weg.
 *
 * aspect-ratio moet er expliciet af; anders rekent de browser met allebei.
 */
@media screen and (min-width: 800px) {
	.wp-block-image.is-style-beeldband img,
	.wp-block-post-featured-image.is-style-beeldband img {
		height: 240px;
		aspect-ratio: auto;
	}
}

/* ---------- Bodemband: de afsluitende foto onder aan een pagina ---------- */

/*
 * De stijl heet `bodemband` (core/image); WordPress zet daarvoor de klasse
 * `is-style-bodemband` op de <figure>.
 *
 * Tot 3.0 was dit een template-part met één vaste foto uit de themamap. Sinds
 * 3.1 is het een bouwsteen die de redacteur onder aan een pagina zet, met een
 * eigen foto per pagina — vandaar een blokstijl in plaats van een part, en
 * vandaar dat de opmaak hier staat en niet meer in vogelklas.css.
 *
 * WAAROM DIT GEEN `beeldband` IS
 * Ze lijken op elkaar en zijn het niet. De beeldband is een strook bovenaan:
 * 240px hoog, mobiel 21 op 9, uitsnede in het midden. De bodemband is het
 * slotbeeld van een pagina en was in het oude thema 3 op 1 met de uitsnede
 * onderaan (style.css regel 425, de voorpaginafoto). Een gewone foto van
 * bijvoorbeeld 1150 bij 775 zou over de volle breedte anders bijna 1000px hoog
 * worden; `object-fit: cover` snijdt hem bij in plaats van hem te vervormen.
 */

.wp-block-image.is-style-bodemband {
	/*
	 * Geen marges: de band sluit onderaan aan op de voettekst. Zelfde reden als
	 * bij de beeldband hierboven — de blokopmaak zet er anders blockGap omheen.
	 */
	margin: 0;
}

.wp-block-image.is-style-bodemband img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;
	object-fit: cover;
	object-position: center bottom;
}

/* ---------- Polaroid: de gekantelde foto met schaduw ---------- */

/*
 * Twee stijlen, `polaroid-links` en `polaroid-rechts`, want de twee foto's van
 * een duo kantelen de andere kant op en liggen om en om boven elkaar. Uit
 * style.css regel 736 e.v. (.vrijwilliger-links/-rechts en
 * .watwedoen-links/-rechts): −2 en +2,5 graden, en een schaduw die daar
 * `1px 2px 10px rgba(0,0,0,0.35)` was. Die schaduw is nu de preset `polaroid`
 * uit theme.json en staat als style_data bij register_block_style() in
 * functions.php, zodat het stijlenmenu er een voorbeeldje van kan tekenen.
 *
 * De z-index legt links bovenop rechts, precies zoals op "Wat we doen"
 * (style.css regel 786: links z-index 2). Op "Word vrijwilliger" lag het
 * andersom; dat verschil verdwijnt hier bewust — één regel is genoeg en het
 * verschil was op de site niet te zien.
 *
 * De draai staat op de <figure> en niet op de <img>: dan draait een eventueel
 * onderschrift mee en blijft de schaduw om het geheel staan.
 *
 * WAAROM position: relative
 * z-index doet alleen iets bij een gepositioneerd element. `relative` verandert
 * verder niets aan de plek.
 */
.wp-block-image.is-style-polaroid-links,
.wp-block-image.is-style-polaroid-rechts {
	position: relative;
	margin: 0;
}

.wp-block-image.is-style-polaroid-links {
	transform: rotate(-2deg);
	z-index: 2;
}

.wp-block-image.is-style-polaroid-rechts {
	transform: rotate(2.5deg);
	z-index: 1;
}

.wp-block-image.is-style-polaroid-links img,
.wp-block-image.is-style-polaroid-rechts img {
	width: 100%;
	height: auto;
}

/*
 * Wie geen beweging wil, mag de draai houden: het is geen beweging maar een
 * stilstaande stand. Er is hier dus met opzet geen reduced-motion-uitzondering.
 */

/* ---------- Fotolijst: de foto in de houten lijst ---------- */

/*
 * De blokstijl `fotolijst` legt assets/images/geschiedenis-frame-2.png als
 * achtergrond onder de foto en duwt de foto met binnenruimte precies in het
 * gat. Uit style-large.css regel 121 e.v. (Geschiedenis).
 *
 * DE VERHOUDINGEN, EN WAAR ZE VANDAAN KOMEN
 * De PNG is 568 bij 440 pixels. Het gat begon in het oude thema op 86 van
 * links en 86 van boven en was 406 bij 292 groot. Omgerekend naar procenten
 * van de lijst:
 *   links  86 / 568 = 15,14%      boven  86 / 440 = 19,55%
 *   breed 406 / 568 = 71,48%      hoog  292 / 440 = 66,36%
 * De <figure> krijgt de verhouding van de PNG (568 op 440) en de foto ligt er
 * absoluut in. De draai van −2 graden komt uit dezelfde regel als hierboven.
 *
 * WAAROM DE FOTO ABSOLUUT LIGT EN NIET MET BINNENRUIMTE IN DE LIJST STAAT
 * Dat was de eerste opzet en die klopte niet. Procentuele padding rekent in
 * CSS met de breedte van het ómhullende blok, niet met die van het element
 * zelf. In het patroon staat de lijst in een flexrij op 65% breedte, dus werd
 * 15,14% padding gerekend over de volle rij en stond de foto veel te ver naar
 * binnen — nagemeten: 142px in plaats van 92px. Bij een absoluut geplaatste
 * foto rekenen `left` en `width` wél met de <figure> zelf, en `top` en
 * `height` met de hoogte daarvan. Daarmee klopt de lijst op elke breedte.
 */
.wp-block-image.is-style-fotolijst {
	position: relative;
	margin: 0;
	width: 100%;
	aspect-ratio: 568 / 440;
	background-image: url("../images/geschiedenis-frame-2.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	transform: rotate(-2deg);
}

.wp-block-image.is-style-fotolijst img {
	position: absolute;
	left: 15.14%;
	top: 19.55%;
	width: 71.48%;
	height: 66.36%;
	max-width: none;
	object-fit: cover;
}

/* ---------- Beeldknop: de fototegel met een wit label ---------- */

/*
 * Uit style.css regel 494 e.v. (.front1-button op de voorpagina): een foto met
 * hoekradius 4px en een zachte schaduw, met onderin een witte balk met de
 * tekst in olijf. De schaduw wordt zwaarder bij hover, net als bij een kaart.
 *
 * Het onderschrift van het afbeeldingsblok ís die balk. Dat scheelt een extra
 * blok en de redacteur typt hem op de plek waar hij hem ziet staan.
 *
 * HELE TEGEL KLIKBAAR
 * In de markering van core staat de <a> alleen om de <img>; het onderschrift
 * valt erbuiten. De ::after hieronder rekt het klikvlak op tot de hele tegel,
 * dus ook over de witte balk. Daarvoor moet de <figure> `position: relative`
 * hebben en de link zelf niet gepositioneerd zijn.
 *
 * Radius en schaduw staan als style_data in functions.php; hier staat de vorm.
 */
.wp-block-image.is-style-beeldknop {
	position: relative;
	margin: 0;
	overflow: hidden;
	transition: box-shadow 0.4s ease-in-out;
}

.wp-block-image.is-style-beeldknop:hover,
.wp-block-image.is-style-beeldknop:focus-within {
	box-shadow: var(--wp--preset--shadow--kaart-hover);
}

.wp-block-image.is-style-beeldknop img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 7 / 6;
	object-fit: cover;
}

.wp-block-image.is-style-beeldknop > a {
	display: block;
}

.wp-block-image.is-style-beeldknop > a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/*
 * De witte balk. `position: absolute` legt hem over de onderkant van de foto,
 * zoals in het oude ontwerp (style.css regel 532). Kleuren uit theme.json.
 */
.wp-block-image.is-style-beeldknop figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 12px 10px;
	background-color: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--olijf);
	font-size: var(--wp--preset--font-size--normaal);
	text-align: center;
}

/*
 * De focusrand van de reset wordt búiten de link getekend en zou door
 * `overflow: hidden` worden weggeknipt. Zelfde oplossing als bij de kaart in
 * blok-group.css: de ring naar binnen halen, kleuren en dikte blijven gelijk.
 */
.wp-block-image.is-style-beeldknop > a:focus-visible {
	outline-offset: -4px;
	box-shadow: inset 0 0 0 6px var(--wp--preset--color--zand);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-image.is-style-beeldknop {
		transition: none;
	}
}

/* ---------- Partnerlogo ---------- */

/*
 * Uit style.css regel 634 e.v.: een cel van 200px hoog met het logo in het
 * midden, gedimd tot 80% en bij hover weer vol. `object-fit: contain` houdt
 * elk logo heel, hoe vierkant of hoe langgerekt het ook is.
 *
 * De cellen zelf worden neergezet door de rasteropmaak van het groepsblok in
 * het patroon; zie .vk-partners in assets/css/blok-group.css.
 */
.wp-block-image.is-style-partnerlogo {
	margin: 0;
}

.wp-block-image.is-style-partnerlogo img {
	width: 100%;
	max-height: 200px;
	height: auto;
	object-fit: contain;
	opacity: 0.8;
	transition: opacity 0.4s ease-in-out;
}

.wp-block-image.is-style-partnerlogo a:hover img,
.wp-block-image.is-style-partnerlogo a:focus img,
.wp-block-image.is-style-partnerlogo img:hover {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-image.is-style-partnerlogo img {
		transition: none;
	}
}