/* exhibition-archive.css – Ausstellungsübersicht (archive-exhibition.php).

   Nachbau von Figma „Ausstellungen Übersichtsseite" (Knoten 48:542). Alle
   Zahlen hier sind an diesem Rahmen abgemessen, nicht geschaetzt; die
   Knotennummer steht jeweils daneben.

   DER RAHMEN IST 1920 BREIT, DIE INHALTSSPALTE 1198
   -------------------------------------------------
   Inhalt von x361 bis x1559, also 361px Rand auf beiden Seiten. Das ist
   --container (1200px) und ausdruecklich NICHT --container-wide (1470px), mit
   der die Startseite und der Fussbereich laufen. Die zwei Entwuerfe sind an
   dieser Stelle verschieden -- wer das hier auf 1470 zieht, macht die Seite
   breiter als der Entwurf sie zeigt.

   Die 20px Seitenabstand liegen ausserhalb der Spalte. Bis zum 2026-09-09
   rechnete diese Datei sie deshalb selbst dazu (`calc(var(--container) +
   40px)`) und war damit das einzige Post-Type-Template auf 1200px Inhalt;
   seit dann ist .site-main content-box und die 1200er Liste in base.css
   gilt fuer alle — hier bleibt nur der senkrechte Abstand.

   DAS RASTER IST 579 + 40
   -----------------------
   Zwei Kacheln von 579px mit 40px Abstand ergeben 1198 -- die Spalte geht
   genau auf. Waagerecht 40px, senkrecht 80px: der Entwurf setzt zwischen zwei
   Reihen mehr Luft als zwischen zwei Spalten (Textblock endet y2607, naechste
   Bildreihe y2688).

   TYPOGRAFIE, VOLLSTAENDIG
   ------------------------
   Ueberschriften         Raleway Medium 500, 34px, #1c1c1c   (48:626, 63:290)
   Kacheltitel            Raleway Medium 500, 28px, #1c1c1c   (49:655, 49:713)
   Laufzeit               Raleway Regular 400, 16px, #1c1c1c  (49:656, 49:714)
   Einleitung und Anriss  Raleway Regular 400, 18px/28px, #000 (51:788, 49:658)
   Blaetterung            Raleway Medium 500, 28px            (51:795)

   ZWEI DINGE, DIE MAN LEICHT FALSCH MACHT
   1. Die Laufzeit ist SCHWARZ (#1c1c1c), nicht grau. Sie sieht im Entwurf
      leiser aus, weil sie kleiner ist -- nicht, weil sie blasser waere.
      --text (#6d6d6d) ist hier falsch.
   2. Titel der hervorgehobenen Ausstellung und Titel einer Kachel sind
      GLEICH gross (28px). Der Unterschied zwischen beiden ist die Bildbreite,
      nicht die Schrift.

   Die Sperrung ist ueberall 0.04em (34->1.36px, 28->1.12px, 18->0.72px,
   16->0.64px). Deshalb steht sie als em-Wert und nicht viermal in Pixeln.

   TOKENS
   Aus functions.php: --container, --brand-red, --title-bg, --top-button.
   Die Schaltflaeche selbst steht in forms.css (.achilles-button) und wird hier
   nur platziert -- der Entwurf (49:661) zeigt exakt deren Werte: #996a15,
   58px hoch, 38px Innenabstand, 18px/700 weiss in Grossbuchstaben.

   Breakpoints im Projekt: 1000px, 780px, 566px. */

/* --- Inhaltsspalte -------------------------------------------------------- */

/* 77px oben = Ueberschrift y239 minus Ende des Titelbalkens y162. base.css
   setzt dort 30px; das gilt fuer die aelteren Templates, nicht fuer diesen
   Entwurf. */
.site-main--exhibition-archive {
	padding-top: 40px;
	padding-bottom: 100px;
}

.site-main--exhibition-archive .page-title {
	margin: 0 0 36px;
	color: #000;
	font-size: 1.75rem;
	font-weight: 400;
	letter-spacing: 0.4px;
	line-height: 1.25;
}

/* 834px, nicht die volle Spalte (Knoten 51:788). 1198px waeren rund 200
   Zeichen pro Zeile und damit unlesbar. */
.exhibition-archive__intro {
	max-width: 834px;
	margin: 0 0 51px;
	color: #000;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.4px;
	line-height: 1.5;
}

/* 90px = Blaetterung der Buehne y1511 bis Ueberschrift y1601,
   51px = deren Ende y1641 bis erste Bildreihe y1692. */
.exhibition-section__title {
	margin: 90px 0 51px;
	color: #000;
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: 0.4px;
	line-height: 1.17;
}

/* --- Karte, beide Varianten ----------------------------------------------- */

.exhibition-card {
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* 34px = Bildunterkante y1149 bis Laufzeit y1183 (und y2271 -> y2306 in der
   Kachel; derselbe Abstand). */
.exhibition-card__media {
	display: block;
	overflow: hidden;
	margin-bottom: 34px;
	background: var(--title-bg);
}

.exhibition-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 0.3s ease-in-out;
}

/* Die Vergroesserung haengt am Aufhaenger der ganzen Karte und nicht am
   Bildlink: der traegt aria-hidden und tabindex="-1" (siehe den Kopf des
   Template-Parts), bekommt also nie den Tastaturfokus. Wer sich mit der
   Tastatur durch den Titel bewegt, soll die Karte trotzdem reagieren sehen. */
.exhibition-card:hover .exhibition-card__media img,
.exhibition-card:focus-within .exhibition-card__media img {
	transform: scale(1.04);
}

.exhibition-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* 15px = Ende der Laufzeit y1202 bis Titel y1217. */
.exhibition-card__dates {
	margin: 0 0 15px;
	color: #1c1c1c;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.17;
}

/* 26px = Ende des Titels y1250 bis Anriss y1276. */
.exhibition-card__title {
	margin: 0 0 26px;
	color: #000;
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0.4px;
	line-height: 1.25;
}

/* Der Titel ist ein Link, sieht aber nicht wie einer aus: der Entwurf setzt ihn
   schwarz und ohne Unterstreichung. Die Farbe kommt beim Ueberfahren, damit das
   Ziel trotzdem erkennbar bleibt. */
.exhibition-card__title-link {
	color: inherit;
	text-decoration: none;
}

.exhibition-card__title-link:hover,
.exhibition-card__title-link:focus-visible {
	color: var(--cta-gold);
	text-decoration: underline;
}

.exhibition-card__teaser {
	margin: 0 0 20px;
	color: #000;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.4px;
	line-height: 1.5;
}

/* Schiebt die Schaltflaeche an die Unterkante, damit die Kacheln einer Reihe
   sie auf einer Linie tragen -- auch wenn die Anrisse verschieden lang sind.
   Dieselbe Regel wie bei den Startseitenkarten (front.css). */
.exhibition-card__cta {
	margin-top: auto;
	align-self: flex-start;
}

/* --- Die hervorgehobene Ausstellung (Knoten 49:652, 49:654) --------------- */

/* 1198x574 im Entwurf, also ein fester, sehr breiter Zuschnitt. Die
   Bilddatei liefert 'achilles-exhibition-wide' (1200x575, functions.php); das
   Seitenverhaeltnis steht trotzdem hier, damit die Kachel schon vor dem Laden
   ihren Platz hat und die Seite nicht springt. */
.exhibition-card--feature .exhibition-card__media {
	aspect-ratio: 1198 / 574;
}

/* Der leere Kasten haelt im Raster die Reihe zusammen; ueber die volle Breite
   waere er nur eine graue Wand. Siehe den Kopf des Template-Parts. */
.exhibition-card--feature .exhibition-card__media--leer {
	display: none;
}

/* Der Anriss der Buehne ist so breit wie die Einleitung (Knoten 49:658), nicht
   so breit wie ihr Bild. */
.exhibition-card--feature .exhibition-card__teaser {
	max-width: 834px;
}

/* --- Kacheln (Knoten 49:701, 49:711) -------------------------------------- */

.exhibition-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
	row-gap: 80px;
	margin: 51px 0 0;
}

/* Direkt unter der Buehne steht kein Zwischentitel, dort traegt das Raster den
   Abstand der Buehne selbst. */
.exhibition-section__title + .exhibition-grid {
	margin-top: 0;
}

.exhibition-card--tile .exhibition-card__media {
	aspect-ratio: 1 / 1;
}

.exhibition-card__media--leer {
	background: var(--title-bg);
}

/* --- Blaetterung (Knoten 51:819) ------------------------------------------

   browse.css gestaltet `.navigation.pagination` themeweit als 44px-Ziele,
   mittig, in Rot. Der Entwurf zeigt hier etwas anderes: 60x60 mit 20px
   Abstand, linksbuendig an der Inhaltsspalte, die aktuelle Seite als volle
   rote Flaeche, die uebrigen mit 2px Rahmen in #434343. Deshalb ueberschrieben
   und ausdruecklich auf dieses Template begrenzt -- das Objektarchiv behaelt
   seine Leiste. */

.site-main--exhibition-archive .navigation.pagination {
	margin: 80px 0 0;
}

.site-main--exhibition-archive .navigation.pagination .nav-links {
	justify-content: flex-start;
	gap: 20px;
}

.site-main--exhibition-archive .navigation.pagination .page-numbers {
	min-width: 60px;
	min-height: 60px;
	padding: 0;
	border: 2px solid var(--top-button);
	color: #1c1c1c;
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.site-main--exhibition-archive .navigation.pagination a.page-numbers:hover,
.site-main--exhibition-archive .navigation.pagination a.page-numbers:focus-visible {
	border-color: var(--brand-red);
	background: none;
	color: var(--brand-red);
}

.site-main--exhibition-archive .navigation.pagination .page-numbers.current {
	border-color: var(--brand-red);
	background: var(--brand-red);
	color: #fff;
	font-weight: 500;
}

.site-main--exhibition-archive .navigation.pagination .page-numbers.dots {
	min-width: 60px;
	border-color: transparent;
}

/* Der Winkel zeigt im Export nach unten; -90deg dreht ihn nach rechts, +90deg
   nach links (Knoten 51:816). */
.pagination__arrow {
	display: block;
}

.pagination__arrow--next {
	transform: rotate(-90deg);
}

.pagination__arrow--prev {
	transform: rotate(90deg);
}

/* --- Kleinere Schirme ----------------------------------------------------- */

@media only screen and (max-width: 1000px) {

	.site-main--exhibition-archive {
		padding-top: 40px;
	}

	.exhibition-grid {
		column-gap: 30px;
		row-gap: 56px;
	}
}

@media only screen and (max-width: 780px) {

	/* Eine Spalte: zwei Kacheln nebeneinander lassen hier weder dem Anriss noch
	   der Schaltflaeche genug Breite. */
	.exhibition-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	.site-main--exhibition-archive .page-title,
	.exhibition-section__title {
		font-size: 28px;
	}

	.exhibition-section__title {
		margin: 64px 0 32px;
	}

	.exhibition-card__title {
		font-size: 24px;
	}

	/* Ueber die volle Breite eines Telefons waere 1198:574 ein Streifen von
	   knapp 160px Hoehe. Das Buehnenbild bekommt darum denselben Zuschnitt wie
	   die Kacheln. */
	.exhibition-card--feature .exhibition-card__media {
		aspect-ratio: 3 / 2;
	}
}

@media only screen and (max-width: 566px) {

	.site-main--exhibition-archive {
		padding-top: 30px;
		padding-bottom: 60px;
	}

	.exhibition-card__media {
		margin-bottom: 24px;
	}

	/* forms.css laesst die Schaltflaeche auf dem Telefon die Spaltenbreite
	   einnehmen — „ein volles Ziel ist leichter zu treffen". `align-self:
	   flex-start` weiter oben wuerde genau das aushebeln, weil es sie wieder auf
	   ihre Textbreite schrumpfen laesst. Hier also zuruecknehmen. */
	.exhibition-card__cta {
		align-self: stretch;
	}

	.site-main--exhibition-archive .navigation.pagination .page-numbers {
		min-width: 48px;
		min-height: 48px;
		font-size: 22px;
	}

	.site-main--exhibition-archive .navigation.pagination .nav-links {
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.exhibition-card__media img {
		transition: none;
	}

	.exhibition-card:hover .exhibition-card__media img,
	.exhibition-card:focus-within .exhibition-card__media img {
		transform: none;
	}
}