/* =============================================================================
   Wijkkrant Core — beeld- en layoutregels

   Kern van de beeldaanpak: het kader bepaalt de verhouding, de afbeelding vult
   het kader, en het bijsnijden gebeurt rond het focuspunt dat per afbeelding in
   de meta staat (--wk-focus, gezet door de plugin). Zo past élke foto uit de
   krant-PDF, staand of liggend, zonder handwerk.
   ========================================================================== */

:root {
	--wk-ratio-kaart:   3 / 2;
	--wk-ratio-hero:    16 / 9;
	--wk-ratio-portret: 3 / 4;
	--wk-ratio-breed:   21 / 9;

	--wk-beeld-achtergrond: #ece9e4;
	--wk-radius: 4px;
}

/* -----------------------------------------------------------------------------
   1. Beeldhouder
   -------------------------------------------------------------------------- */

.wk-beeld {
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: var(--wk-radius);
	aspect-ratio: var(--wk-ratio, var(--wk-ratio-kaart));
	/* Zichtbaar terwijl de afbeelding laadt; voorkomt een witte flits. */
	background-color: var(--wk-beeld-achtergrond);
}

/* height: 100% is nodig om de `img { height: auto }` uit de meeste thema's te
   overschrijven. De selector is daarom bewust iets specifieker. */
.wk-beeld > img,
.wk-beeld > a > img,
.wk-beeld > picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--wk-focus, 50% 40%);
}

/* Varianten */
.wk-beeld--hero     { --wk-ratio: var(--wk-ratio-hero); }
.wk-beeld--portret  { --wk-ratio: var(--wk-ratio-portret); }
.wk-beeld--breed    { --wk-ratio: var(--wk-ratio-breed); }
.wk-beeld--vierkant { --wk-ratio: 1 / 1; }

/* Laat het kader de oriëntatie van de foto volgen. Gebruik dit op losse
   afbeeldingen en in artikelen — NIET in een grid, zie punt 2. */
.wk-beeld--auto:has( img[data-wk-orientatie="staand"] )   { --wk-ratio: var(--wk-ratio-portret); }
.wk-beeld--auto:has( img[data-wk-orientatie="vierkant"] ) { --wk-ratio: 1 / 1; }
.wk-beeld--auto:has( img[data-wk-orientatie="liggend"] )  { --wk-ratio: var(--wk-ratio-kaart); }

/* -----------------------------------------------------------------------------
   2. Overzichten
   In een grid wint rust van getrouwheid: één vaste verhouding voor alle kaarten
   ziet er beter uit dan elke foto in zijn eigen formaat. De oriëntatie laten we
   pas meetellen op de artikelpagina zelf.
   -------------------------------------------------------------------------- */

.wk-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 17rem ), 1fr ) );
	gap: clamp( 1rem, 3vw, 2rem );
}

.wk-grid .wk-beeld {
	--wk-ratio: var(--wk-ratio-kaart);
}

.wk-kaart {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.wk-kaart__rubriek {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
}

.wk-kaart__titel {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.3;
	text-wrap: balance;
}

.wk-kaart__meta {
	font-size: 0.85rem;
	opacity: 0.7;
}

/* Eerste kaart groter uitlichten, zonder extra markup. */
.wk-grid--uitgelicht > :first-child {
	grid-column: 1 / -1;
}

.wk-grid--uitgelicht > :first-child .wk-beeld {
	--wk-ratio: var(--wk-ratio-hero);
}

/* -----------------------------------------------------------------------------
   3. Blokthema: dezelfde regels op de kernblokken, zodat Query Loop en de
   uitgelichte afbeelding vanzelf meedoen.
   -------------------------------------------------------------------------- */

.wp-block-post-featured-image img,
.wp-block-image img {
	object-position: var(--wk-focus, 50% 40%);
}

/* Staande foto's die in de lopende tekst staan, niet over de volle breedte. */
.entry-content .wp-block-image img[data-wk-orientatie="staand"] {
	max-width: min( 100%, 26rem );
	height: auto;
	margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   4. Bronvermelding en herkomst
   -------------------------------------------------------------------------- */

.wk-bron {
	margin-top: 2rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba( 0, 0, 0, 0.12 );
	opacity: 0.75;
}

.wk-bron a {
	color: inherit;
}

/* -----------------------------------------------------------------------------
   5. Toegankelijkheid
   Een deel van de lezers is op leeftijd. Deze twee regels kosten niets en
   schelen veel.
   -------------------------------------------------------------------------- */

.entry-content {
	font-size: clamp( 1.05rem, 0.98rem + 0.35vw, 1.25rem );
	line-height: 1.65;
	max-width: 68ch;
}

@media ( prefers-reduced-motion: reduce ) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}