/*
 * Evenementpagina: kop met infovak ernaast, eigen foto groot, fotomozaiek eronder, vaste aanmeldknop op de telefoon.
 * Blokken: papendorp/evenement-info (blocks.php), papendorp/evenement-beeld en papendorp/evenement-fotos
 * (blocks-evenement-fotos.php). Rechte hoeken, rijen en vlakken; geen kaarten, geen hover-vergroting.
 */

/* ---------- Raster ---------- */
.pd-evenement__raster { display: grid; gap: var(--wp--preset--spacing--40); }
.pd-evenement__raster > * { margin-block: 0; min-width: 0; }
.pd-evenement__kop { margin-bottom: 0; }
.pd-evenement__kop h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.01em; }
.pd-evenement__intro { max-width: 38rem; }

@media (min-width: 60rem) {
	/* Zonder eigen foto: het infovak staat meteen naast de kop, dus geen leeg vlak rechts van de titel. */
	.pd-evenement__raster {
		grid-template-columns: minmax(0, 1fr) 21rem;
		grid-template-areas: "kop zij" "hoofd zij";
		column-gap: clamp(2.5rem, 5vw, 4.5rem);
		row-gap: var(--wp--preset--spacing--40);
		align-items: start;
	}
	.pd-evenement__kop { grid-area: kop; }
	.pd-evenement__zij { grid-area: zij; position: sticky; top: 1.5rem; }
	.pd-evenement__hoofd { grid-area: hoofd; }
	.pd-evenement__beeld { grid-area: beeld; }

	/* Eigen foto die groot kan: over de hele breedte onder de titel, infovak naast de tekst eronder. */
	.pd-evenement__raster:has(> .pd-evenement__beeld.is-groot) { grid-template-areas: "kop kop" "beeld beeld" "hoofd zij"; row-gap: var(--wp--preset--spacing--40); }
	/* Kleine eigen foto: in de tekstkolom, infovak ernaast vanaf de kop. */
	.pd-evenement__raster:has(> .pd-evenement__beeld.is-klein) { grid-template-areas: "kop zij" "beeld zij" "hoofd zij"; }
}

/* ---------- Eigen foto ---------- */
.pd-evenement__beeld { margin: 0; }
.pd-evenement__beeld img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; }
@media (min-width: 60rem) {
	.pd-evenement__beeld.is-groot img { aspect-ratio: 2 / 1; }
}
.pd-evenement__bijschrift { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.4; color: color-mix(in srgb, var(--wp--preset--color--antraciet) 82%, transparent); }

/* ---------- Infovak ---------- */
.pd-evenement .pd-info { padding: 0; background: var(--wp--preset--color--wit); border: 1px solid var(--pd-lijn); }
.pd-info__datum {
	display: flex; align-items: center; gap: 1.25rem; padding: 1.4rem 1.75rem;
	background: var(--wp--preset--color--blauw-licht); color: var(--wp--preset--color--antraciet); /* Licht sinds 19 okt: geen donkere blokken. */
}
.pd-info__dagmaand { display: flex; flex-direction: column; align-items: center; flex: none; min-width: 3.5rem; line-height: 1; }
.pd-info__dag { font-family: var(--wp--preset--font-family--display); font-size: 3.25rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--antraciet); }
.pd-info__maand { margin-top: 0.35rem; font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); }
.pd-info__wanneer { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; padding-left: 1.1rem; border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--antraciet) 25%, transparent); }
.pd-info__volledig { font-size: 1.0625rem; line-height: 1.35; }
.pd-info__volledig::first-letter { text-transform: uppercase; }
.pd-info__afstand { font-size: 0.8125rem; font-weight: 500; line-height: 1.3; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); color: color-mix(in srgb, var(--wp--preset--color--antraciet) 78%, transparent); }
.pd-info__binnen { display: flex; flex-direction: column; padding: 0.75rem 1.75rem 1.75rem; }
.pd-info__binnen > .pd-info__lijst > div:first-child { padding-top: 0.75rem; }
.pd-info__binnen > .pd-info__lijst > div:last-child { border-bottom: 0; }
.pd-info__volgt dd { color: color-mix(in srgb, var(--wp--preset--color--antraciet) 85%, transparent); }
.pd-info__actie { margin: 1.25rem 0 0; }
/* Telefoon en tablet: de knop direct onder de datum, in de duimzone van het eerste scherm. */
@media (max-width: 59.99rem) {
	.pd-info__binnen > .pd-info__actie { order: -1; margin: 1rem 0 0.25rem; }
	/* Met een foto stond Aanmelden op 390 net onder de vouw (foto tussen kop en infovak). Kun je je aanmelden, dan
	   eerst het infovak met de knop, dan de foto (design.md: praktische info op de telefoon bovenaan; 20 okt). */
	.pd-evenement__raster:has(.pd-info__actie) > .pd-evenement__zij { order: 1; }
	.pd-evenement__raster:has(.pd-info__actie) > .pd-evenement__beeld { order: 2; }
	.pd-evenement__raster:has(.pd-info__actie) > .pd-evenement__hoofd { order: 3; }
}

/* ---------- Vaste aanmeldknop (telefoon) ---------- */
.pd-vastknop { display: none; }
@media (max-width: 59.99rem) {
	.pd-vastknop:not([hidden]) {
		position: fixed; z-index: 30; inset: auto 0 0 0;
		display: flex; align-items: center; justify-content: space-between; gap: 1rem;
		padding: 0.75rem max(1rem, env(safe-area-inset-right)) calc(0.75rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
		background: var(--wp--preset--color--wit); border-top: 1px solid var(--pd-lijn);
		box-shadow: 0 -0.5rem 1.5rem color-mix(in srgb, var(--wp--preset--color--nacht) 12%, transparent);
		transform: translateY(110%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s;
	}
	.pd-vastknop.is-zichtbaar { transform: none; visibility: visible; transition: transform 0.2s ease; }
	.pd-vastknop__wanneer { margin: 0; font-size: 0.875rem; line-height: 1.3; }
	.pd-vastknop__wanneer strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.0625rem; font-weight: 700; }
	.pd-vastknop__knop { flex: none; min-width: 9.5rem; }
}
@media (prefers-reduced-motion: reduce) { .pd-vastknop:not([hidden]) { transition: none; } }

/* ---------- Na aanmelden: volgende stap ---------- */
.pd-form__daarna { margin-top: 1.25rem; padding: 1.25rem 1.5rem; background: var(--wp--preset--color--blauw-licht); }
.pd-form__daarna p { margin: 0; max-width: 34rem; }
.pd-form__daarna p + p { margin-top: 0.85rem; }

/* ---------- Fotomozaiek ---------- */
.pd-evenement__fotos { margin-top: var(--pd-ritme); }
.pd-fotos + .pd-fotos { margin-top: var(--pd-ritme); }
.pd-fotos__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 3px solid var(--pd-lijn-sterk); }
.pd-fotos__kop h2 { margin: 0; font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.pd-fotos__lead { margin: 0; max-width: 34rem; color: color-mix(in srgb, var(--wp--preset--color--antraciet) 85%, transparent); }
.pd-fotos__lijst { list-style: none; margin: 0; padding: 0; }
.pd-fotos__item { margin: 0; }
.pd-fotos__figuur { position: relative; margin: 0; height: 100%; }
.pd-fotos__beeld { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--wp--preset--color--warmwit); }
.pd-fotos__bijschrift { font-size: 0.8125rem; line-height: 1.4; }
.pd-fotos__bijschrift a { display: inline-block; margin-block: -0.85rem; padding-block: 0.85rem; color: inherit; } /* Tikvlak 44px, regel blijft laag. */

/* Telefoon: mozaiek in twee kolommen, de eerste foto over de volle breedte. Geen veegstrook: daar bleven foto's
   rechts buiten beeld zonder dat je zag dat er meer was (criticus slotronde). Een oneven laatste foto ook breed. */
@media (max-width: 47.99rem) {
	.pd-fotos__lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.75rem; }
	.pd-fotos__beeld { height: auto; aspect-ratio: 4 / 3; } /* Staand (4:5) sneed de randen van groepsfoto's weg. */
	.pd-fotos__lijst > :first-child,
	.pd-fotos__lijst > :last-child:nth-child(even) { grid-column: 1 / -1; }
	.pd-fotos__lijst > :first-child .pd-fotos__beeld,
	.pd-fotos__lijst > :last-child:nth-child(even) .pd-fotos__beeld { aspect-ratio: 3 / 2; }
	.pd-fotos__bijschrift { margin-top: 0.5rem; color: color-mix(in srgb, var(--wp--preset--color--antraciet) 82%, transparent); }
}

/* Tablet en groter: mozaiek met ongelijke maten, nooit drie gelijke tegels naast elkaar. */
@media (min-width: 48rem) {
	.pd-fotos__lijst { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(9.5rem, 17vw, 15rem); gap: 0.75rem; }
	/* Bijschrift onder de foto, binnen de tegel: de foto krimpt, de tekst ligt nooit over een gezicht. */
	.pd-fotos__figuur { display: flex; flex-direction: column; }
	.pd-fotos__beeld { flex: 1 1 auto; min-height: 0; height: auto; }
	.pd-fotos__bijschrift { flex: none; box-sizing: border-box; min-height: calc(2.8em + 0.4rem); padding-top: 0.4rem; color: color-mix(in srgb, var(--wp--preset--color--antraciet) 82%, transparent); }
	/* Een weggelaten dubbel bijschrift houdt zijn plek, anders wordt die foto hoger dan zijn buren. */
	.pd-fotos__lijst:has(.pd-fotos__bijschrift:not([hidden])) .pd-fotos__bijschrift[hidden] { display: block; visibility: hidden; }

	.pd-fotos__lijst[data-aantal="1"] > :nth-child(1) { grid-column: 1 / 9; grid-row: 1 / 3; }

	.pd-fotos__lijst[data-aantal="2"] > :nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
	.pd-fotos__lijst[data-aantal="2"] > :nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 3; }

	.pd-fotos__lijst[data-aantal="3"] > :nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
	.pd-fotos__lijst[data-aantal="3"] > :nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
	.pd-fotos__lijst[data-aantal="3"] > :nth-child(3) { grid-column: 8 / 13; grid-row: 2; }

	/* 4, 6 en 8: een groot beeld met een brede en twee kleine ernaast; bij 8 gespiegeld eronder. */
	.pd-fotos__lijst:is([data-aantal="4"], [data-aantal="6"], [data-aantal="8"]) > :nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 3; }
	.pd-fotos__lijst:is([data-aantal="4"], [data-aantal="6"], [data-aantal="8"]) > :nth-child(2) { grid-column: 7 / 13; grid-row: 1; }
	.pd-fotos__lijst:is([data-aantal="4"], [data-aantal="6"], [data-aantal="8"]) > :nth-child(3) { grid-column: 7 / 10; grid-row: 2; }
	.pd-fotos__lijst:is([data-aantal="4"], [data-aantal="6"], [data-aantal="8"]) > :nth-child(4) { grid-column: 10 / 13; grid-row: 2; }

	.pd-fotos__lijst[data-aantal="6"] > :nth-child(5) { grid-column: 1 / 6; grid-row: 3; }
	.pd-fotos__lijst[data-aantal="6"] > :nth-child(6) { grid-column: 6 / 13; grid-row: 3; }

	.pd-fotos__lijst[data-aantal="8"] > :nth-child(5) { grid-column: 7 / 13; grid-row: 3 / 5; }
	.pd-fotos__lijst[data-aantal="8"] > :nth-child(6) { grid-column: 1 / 7; grid-row: 3; }
	.pd-fotos__lijst[data-aantal="8"] > :nth-child(7) { grid-column: 1 / 4; grid-row: 4; }
	.pd-fotos__lijst[data-aantal="8"] > :nth-child(8) { grid-column: 4 / 7; grid-row: 4; }
}

/* Tablet: het infovak is breed, dus de gegevens in twee kolommen in plaats van een lange rij. */
@media (min-width: 48rem) and (max-width: 59.99rem) {
	.pd-evenement .pd-info__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
	.pd-evenement .pd-info__binnen > .pd-info__lijst > div:first-child,
	.pd-evenement .pd-info__binnen > .pd-info__lijst > div:nth-child(2) { padding-top: 0.75rem; }
	.pd-evenement .pd-info__binnen > .pd-info__lijst > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}