/**
 * WNA Vision — Projekt-Archiv und Einzelprojekt (Sprint 6).
 *
 * Nutzt ausschließlich Design-Tokens aus theme.json. Wird ausschließlich auf dem
 * Projekt-Archiv- und dem Einzelprojekt-Template geladen (siehe functions.php).
 * Globale Breakpoint-Konstanten (verbindlich, siehe main.css):
 * Mobil: 0–599px | Tablet: ab 600px | Desktop: ab 1024px
 */

/* Archiv: Kopfbereich */

.wna-projekt-archive__intro {
	margin-block: var(--wp--preset--spacing--7) var(--wp--preset--spacing--6);
}

.wna-projekt-archive__lead {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--text-secondary);
	max-width: 680px;
}

.wna-projekt-archive__leer {
	margin-block: var(--wp--preset--spacing--7);
}

/* Archiv: Referenzsystem-Abschnitte (Sprint 1 der Umsetzungsphase) */

.wna-projekt-archive__abschnitt {
	margin-block-end: var(--wp--preset--spacing--8);
}

.wna-projekt-archive__abschnitt .wna-eyebrow {
	margin-block-end: var(--wp--preset--spacing--2);
}

.wna-projekt-archive__abschnitt h2 {
	margin: 0 0 var(--wp--preset--spacing--3);
}

.wna-projekt-archive__abschnitt .wna-projekt-archive__lead {
	margin-block-end: var(--wp--preset--spacing--5);
}

/* Archiv: Karten-Raster */

.wna-projekt-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--6);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--7);
}

@media ( min-width: 600px ) {
	.wna-projekt-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1024px ) {
	.wna-projekt-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.wna-projekt-card {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--neutral-100);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}

.wna-projekt-card__bild img {
	width: 100%;
	aspect-ratio: 640 / 420;
	object-fit: cover;
}

.wna-projekt-card__inhalt {
	padding: var(--wp--preset--spacing--5);
}

.wna-projekt-card__saeule {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 var(--wp--preset--spacing--2);
}

.wna-projekt-card__titel {
	font-size: var(--wp--preset--font-size--h-4);
	margin: 0 0 var(--wp--preset--spacing--3);
}

.wna-projekt-card__titel a {
	color: var(--wp--custom--color--text-primary);
	text-decoration: none;
}

.wna-projekt-card__titel a:hover {
	text-decoration: underline;
}

.wna-projekt-card__auszug {
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 var(--wp--preset--spacing--3);
}

.wna-projekt-card__ort {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

/* Archiv: Premium-Referenz (Sprint 1 der Umsetzungsphase) */

.wna-projekt-card--premium {
	grid-column: 1 / -1;
}

@media ( min-width: 600px ) {
	.wna-projekt-card--premium {
		flex-direction: row;
	}

	.wna-projekt-card--premium .wna-projekt-card__bild {
		flex: 1 1 55%;
	}

	.wna-projekt-card--premium .wna-projekt-card__bild img {
		height: 100%;
	}

	.wna-projekt-card--premium .wna-projekt-card__inhalt {
		flex: 1 1 45%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

.wna-projekt-card--premium .wna-projekt-card__bild img {
	aspect-ratio: 1200 / 675;
}

.wna-projekt-card--premium .wna-projekt-card__titel {
	font-size: var(--wp--preset--font-size--h-3);
}

.wna-projekt-card__abzeichen {
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	color: var(--wp--custom--color--text-primary);
	margin: 0 0 var(--wp--preset--spacing--2);
}

/* Archiv: Betreuungsnachweis-Mosaik (Sprint 1 der Umsetzungsphase) */

.wna-betreuung-mosaik {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var(--wp--preset--spacing--3);
	list-style: none;
	padding: 0;
	margin: 0;
}

@media ( min-width: 600px ) {
	.wna-betreuung-mosaik {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( min-width: 1024px ) {
	.wna-betreuung-mosaik {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.wna-betreuung-kachel__bild {
	display: block;
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
}

.wna-betreuung-kachel__bild img {
	width: 100%;
	aspect-ratio: 640 / 420;
	object-fit: cover;
	display: block;
}

.wna-betreuung-kachel__label {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-secondary);
	margin: var(--wp--preset--spacing--2) 0 0;
}

.wna-betreuung-kachel__label a {
	color: inherit;
	text-decoration: none;
}

.wna-betreuung-kachel__label a:hover,
.wna-betreuung-kachel__label a:focus-visible {
	text-decoration: underline;
}

/* Einzelprojekt: Hero */

.wna-projekt-hero__bild img {
	width: 100%;
	aspect-ratio: 1200 / 675;
	object-fit: cover;
}

.wna-projekt-hero__inhalt {
	padding-block: var(--wp--preset--spacing--6);
}

.wna-projekt-hero__saeule {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

/* Einzelprojekt: Breadcrumb */

.wna-projekt-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--xs);
}

.wna-projekt-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-inline-start: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--neutral-400);
}

/* Einzelprojekt: Inhaltsabschnitte */

.wna-projekt-eckdaten,
.wna-projekt-beschreibung,
.wna-projekt-zusatzinfo,
.wna-projekt-galerie {
	margin-block: var(--wp--preset--spacing--7);
}

.wna-projekt-eckdaten__liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--4);
	margin: 0 0 var(--wp--preset--spacing--5);
	padding: 0;
}

@media ( min-width: 600px ) {
	.wna-projekt-eckdaten__liste {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.wna-projekt-eckdaten__liste dt {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 var(--wp--preset--spacing--1);
}

.wna-projekt-eckdaten__liste dd {
	margin: 0;
}

.wna-projekt-eckdaten__text {
	margin-top: var(--wp--preset--spacing--4);
}

/* Einzelprojekt: Bildstrecke (Vorher/Während/Nachher-Phasen, Sprint 2 der Umsetzungsphase) */

.wna-projekt-galerie__phase {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-secondary);
	margin: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--3);
}

.wna-projekt-galerie__phase:first-of-type {
	margin-top: 0;
}

.wna-projekt-galerie__liste {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--4);
	list-style: none;
	padding: 0;
	margin: 0;
}

@media ( min-width: 600px ) {
	.wna-projekt-galerie__liste {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1024px ) {
	.wna-projekt-galerie__liste {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.wna-projekt-galerie__liste img {
	border-radius: var(--wp--custom--radius--sm);
}

/* Einzelprojekt: Ähnliche Projekte, Zurück-Link (Sprint 2 der Umsetzungsphase) */

.wna-projekt-aehnliche {
	margin-block: var(--wp--preset--spacing--7);
}

.wna-projekt-zurueck {
	margin-block: var(--wp--preset--spacing--6);
}

.wna-projekt-zurueck a {
	color: var(--wp--custom--color--text-primary);
	font-weight: 600;
	text-decoration: none;
}

.wna-projekt-zurueck a:hover {
	text-decoration: underline;
}