/* =========================================================================
   Oeri Impressionen – Front-End-Styles
   -------------------------------------------------------------------------
   Theme-neutral. Alles unter dem Namespace .oeri-impressionen, damit das
   aktive Theme nicht gestört wird. Keine globalen Resets. Relative Einheiten
   (rem/clamp), damit die Typografie des Themes respektiert wird.

   Markup-Kontrakt (von den Templates gerendert):

   ARCHIVE
     main.oeri-impressionen.oeri-impressionen--archive
       header.oeri-imp-archive__head
         h1.oeri-imp-archive__title
       ul.oeri-imp-grid
         li.oeri-imp-card
           a.oeri-imp-card__link
             figure.oeri-imp-card__media
               img.oeri-imp-card__img  |  div.oeri-imp-card__img--empty
           h2.oeri-imp-card__title

   SINGLE
     main.oeri-impressionen.oeri-impressionen--single
       header.oeri-imp-single__head
         h1.oeri-imp-single__title
         div.oeri-imp-single__desc
       div.oeri-imp-mosaic
         figure.oeri-imp-mosaic__item
           a.oeri-imp-mosaic__link[data-fslightbox]
             img.oeri-imp-mosaic__img
           figcaption.oeri-imp-mosaic__caption

   .oeri-imp-empty = Text für leeren Zustand
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Container / Layout-Rahmen
   ------------------------------------------------------------------------- */
.oeri-impressionen {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
	/* Abstand oben: 256px (ab 1080px und kleiner: 176px). Gilt für
	   Detailseite UND Galerien-Archiv. */
	padding-top: 256px;
	padding-bottom: clamp(1.5rem, 4vw, 3rem);
	box-sizing: border-box;
}

@media (max-width: 1080px) {
	.oeri-impressionen {
		padding-top: 176px;
	}
}

/* Box-Sizing nur innerhalb des Namespaces erben – kein globaler Reset. */
.oeri-impressionen *,
.oeri-impressionen *::before,
.oeri-impressionen *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   2. Überschriften / Kopfbereiche
   ------------------------------------------------------------------------- */
.oeri-imp-archive__head,
.oeri-imp-single__head {
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.oeri-imp-archive__title,
.oeri-imp-single__title {
	margin: 0 0 0.5rem;
	line-height: 1.15;
}

.oeri-imp-single__desc {
	margin: 0 auto;
	padding: 0 32px;
	max-width: 824px;
	line-height: 1.6;
}

.oeri-imp-single__desc > :first-child {
	margin-top: 0;
}

.oeri-imp-single__desc > :last-child {
	margin-bottom: 0;
}

/* Leerer Zustand (keine Galerien / keine Bilder). */
.oeri-imp-empty {
	margin: 2rem 0;
	padding: 1.5rem;
	border: 1px dashed currentColor;
	border-radius: 0.5rem;
	opacity: 0.7;
	text-align: center;
}

/* =========================================================================
   3. ARCHIVE – Karten-Grid
   -------------------------------------------------------------------------
   Responsives Grid mit auto-fill. Das Übersichtsbild der Karte hat ein
   FIXES Seitenverhältnis (Crop ist hier gewollt – einheitliche Optik).
   ========================================================================= */
/* Höhere Spezifität via .oeri-impressionen-Präfix, damit Theme-Defaults wie
   ".entry-content ul li { list-style: disc }" die Bullets nicht zurückbringen. */
.oeri-impressionen .oeri-imp-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Feste Kachelbreite (bis ~340px), Spalten zentriert – so stehen wenige
	   Kacheln mittig statt links/gestreckt. min(…,100%) verhindert Overflow
	   auf sehr schmalen Screens. */
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 340px));
	justify-content: center;
	gap: clamp(1rem, 3vw, 1.75rem);
}

.oeri-impressionen .oeri-imp-card {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Letzte Absicherung gegen hartnäckige Theme-Marker. */
.oeri-impressionen .oeri-imp-card::marker {
	content: "";
}

/* Der gesamte Karteninhalt ist ein einziger Link. */
.oeri-imp-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 0.5rem;
	/* Sanfte Bewegung beim Hover (Heben). */
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Medienrahmen: festes Seitenverhältnis, Bild wird gecroppt. */
.oeri-imp-card__media {
	margin: 0;
	overflow: hidden;
	border-radius: 0.5rem;
	aspect-ratio: 4 / 3;
	background: rgba(0, 0, 0, 0.06);
}

.oeri-imp-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Dezenter Bildzoom beim Hover. */
	transition: transform 0.4s ease;
}

/* Platzhalter, falls kein Übersichtsbild vorhanden ist. */
.oeri-imp-card__img--empty {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(0, 0, 0, 0.04),
		rgba(0, 0, 0, 0.04) 10px,
		rgba(0, 0, 0, 0.08) 10px,
		rgba(0, 0, 0, 0.08) 20px
	);
}

.oeri-imp-card__title {
	margin: 0.75rem 0 0;
	font-size: 1.125rem;
	line-height: 1.3;
}

/* Hover: Karte hebt leicht, Bild zoomt leicht. */
.oeri-imp-card__link:hover {
	transform: translateY(-4px);
	box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
}

.oeri-imp-card__link:hover .oeri-imp-card__img {
	transform: scale(1.05);
}

/* Tastatur-Fokus deutlich sichtbar (Accessibility). */
.oeri-imp-card__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
	border-radius: 0.5rem;
}

/* =========================================================================
   4. SINGLE – Mosaik (echte Masonry, Originalproportionen)
   -------------------------------------------------------------------------
   CSS-Multi-Column: Bilder behalten ihr natürliches Seitenverhältnis,
   die Items werden masonry-artig in Spalten verteilt.
   ========================================================================= */
.oeri-imp-mosaic {
	/* Basis: eine Spalte (mobil). Breakpoints siehe unten. */
	columns: 1;
	column-gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* Ein Mosaik-Item darf nicht über einen Spaltenumbruch zerrissen werden. */
.oeri-imp-mosaic__item {
	margin: 0 0 clamp(0.75rem, 2vw, 1.25rem);
	break-inside: avoid;
	/* Webkit-Fallback gegen Item-Splitting in alten Engines. */
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

/* Bild-Link: füllt das Item, Cursor-Pointer signalisiert Lightbox.
   Bewusst KEINE Hover-Animation – nur der Pointer signalisiert Klickbarkeit. */
.oeri-imp-mosaic__link {
	display: block;
	cursor: pointer;
	border-radius: 0.375rem;
	overflow: hidden;
}

/* Bild behält Originalproportionen (height:auto). */
.oeri-imp-mosaic__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.375rem;
}

/* Tastatur-Fokus bleibt sichtbar (Accessibility) – das ist kein Hover-Effekt. */
.oeri-imp-mosaic__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* Bildbeschriftung unter dem Bild. */
.oeri-imp-mosaic__caption {
	font-family: 'GT-Alpina-Standard-Thin';
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	padding-top: 12px;
}

/* =========================================================================
   Zurück zur Übersicht (Button am Ende der Galerie)
   ========================================================================= */
.oeri-imp-back-wrap {
	margin-top: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
}

.oeri-imp-back {
	display: inline-block;
	font-family: 'GT-Alpina-Standard-Regular';
	font-size: 20px;
	line-height: 24px;
	color: #000;
	text-decoration: none;
	background: #FFD200;
	padding: 2px 27px;
	border-radius: 14px;
	transition: all 0.3s ease;
}

.oeri-imp-back:hover,
.oeri-imp-back:focus {
	background: #fff;
	color: #000;
	transition: all 0.3s ease;
}

/* -------------------------------------------------------------------------
   4a. Responsive Spaltenzahl im Mosaik
   ------------------------------------------------------------------------- */
@media (min-width: 600px) {
	.oeri-imp-mosaic {
		columns: 2;
	}
}

@media (min-width: 900px) {
	.oeri-imp-mosaic {
		columns: 3;
	}
}

@media (min-width: 1280px) {
	.oeri-imp-mosaic {
		columns: 4;
	}
}

/* =========================================================================
   5. Reduzierte Bewegung respektieren
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.oeri-impressionen *,
	.oeri-impressionen *::before,
	.oeri-impressionen *::after {
		transition: none !important;
		animation: none !important;
	}

	/* Auch die Transform-Effekte der Archiv-Karten abschalten. */
	.oeri-imp-card__link:hover,
	.oeri-imp-card__link:hover .oeri-imp-card__img {
		transform: none;
	}
}

/* =========================================================================
   fsLightbox-Caption-Overlay
   -------------------------------------------------------------------------
   Wird vom JS (impressionen.js) dynamisch in den .fslightbox-container
   gehängt und mit der data-caption des aktiven Bildes befüllt. Sichtbarkeit
   steuert das JS via display.
   ========================================================================= */
.fslightbox-container .oeri-imp-fscaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483647; /* über der fsLightbox-UI */
	margin: 0 auto;
	padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
	max-width: 60ch;
	text-align: center;
	font-size: 0.95rem;
	line-height: 1.4;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
	pointer-events: none; /* Klicks/Swipes an fsLightbox durchreichen */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}