/*
 * Anvil Galerie -- oeffentliche Ansicht.
 *
 * Keine eigenen Farbwerte: alles aus den Theme-Variablen, damit die acht
 * data-scheme-Slugs greifen.
 */

.aga-galerie {
	margin: 1.5rem 0;
}

/* --- Brotkrumen ------------------------------------------------------ */

.aga-krumen {
	margin-bottom: 1.25rem;
	font-size: .85rem;
	color: var(--text-muted);
}

.aga-krumen a {
	color: var(--text-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
}

.aga-krumen a:hover,
.aga-krumen a:focus {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

.aga-trenner {
	margin: 0 .45rem;
	color: var(--text-dim);
}

.aga-krume-hier {
	color: var(--text-head);
}

/* --- Ordner ---------------------------------------------------------- */

.aga-ordner,
.aga-raster {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
}

.aga-ordner-kachel a {
	display: block;
	text-decoration: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 6px);
	background: var(--bg-card);
	overflow: hidden;
}

.aga-ordner-kachel a:hover,
.aga-ordner-kachel a:focus {
	border-color: var(--border-hi);
}

/*
 * Der Ordner-Deckel: ein leerer Rahmen, wenn der Ordner kein eigenes Bild
 * hat. Die Flaeche bleibt trotzdem stehen, damit die Kacheln in einer Reihe
 * gleich hoch sind.
 */
.aga-ordner-bild {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--bg-surface);
}

.aga-ordner-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aga-ordner-name {
	display: block;
	padding: .55rem .7rem .1rem;
	color: var(--gold);
	font-size: .9rem;
	overflow-wrap: anywhere;
}

.aga-ordner-zahl {
	display: block;
	padding: 0 .7rem .6rem;
	color: var(--text-muted);
	font-size: .75rem;
}

/* --- Bilder ---------------------------------------------------------- */

.aga-kachel {
	display: block;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 6px);
	background: var(--bg-surface);
	overflow: hidden;
}

.aga-kachel:hover,
.aga-kachel:focus {
	border-color: var(--border-hi);
}

.aga-kachel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Die Lupe -------------------------------------------------------- */

/*
 * DIESE ZWEI REGELN GEHOEREN ZUSAMMEN.
 *
 * `.aga-lupe` setzt display:flex -- eine Klassenregel, und die ist
 * spezifischer als das `[hidden]{display:none}` des User-Agent-Stylesheets.
 * Ohne die ausdrueckliche Regel darunter laege das Overlay dauerhaft ueber
 * der Seite, obwohl das Attribut gesetzt ist. Genau dieser Fall ist im
 * Projekt schon aufgetreten (.ast-download-modal) und steht deshalb als
 * Muster in den Lernpunkten.
 */
.aga-lupe {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 1rem;
	background: rgba( 0, 0, 0, .9 );
}

.aga-lupe[hidden] {
	display: none;
}

.aga-lupe-buehne {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
}

.aga-lupe-buehne img {
	max-width: 100%;
	/* Platz fuer die Beschriftung, sonst schiebt sie das Bild aus dem Bild. */
	max-height: calc( 100vh - 6rem );
	object-fit: contain;
}

.aga-lupe-buehne figcaption {
	color: #e8e8e4;
	font-size: .8rem;
	text-align: center;
	overflow-wrap: anywhere;
}

.aga-lupe button {
	flex: 0 0 auto;
	background: rgba( 255, 255, 255, .08 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, .25 );
	border-radius: var(--radius-sm, 4px);
	font-size: 1.6rem;
	line-height: 1;
	padding: .4rem .8rem;
	cursor: pointer;
}

.aga-lupe button:hover,
.aga-lupe button:focus {
	background: rgba( 255, 255, 255, .2 );
}

.aga-lupe-zu {
	position: absolute;
	top: 1rem;
	right: 1rem;
}

/* --- Hinweise -------------------------------------------------------- */

.aga-hinweis {
	color: var(--text-muted);
	font-size: .9rem;
}

@media ( max-width: 640px ) {
	.aga-ordner,
	.aga-raster {
		grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) );
	}
}

/* ==========================================================================
   Such- und Filterleiste (nur interner Bestand, seit 0.6.0)
   ==========================================================================
   Ein gewoehnliches GET-Formular ohne JavaScript -- jeder Suchstand hat
   dadurch eine Adresse. Die Beschriftungen sind zweisprachige <span>, die
   Auswahlwerte selbst sind Daten und werden nicht uebersetzt.

   select und button erben font-family NICHT automatisch (CONVENTIONS.md),
   deshalb steht sie hier ausdruecklich.
   ========================================================================== */

.aga-suche {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1rem;
	align-items: flex-end;
	margin: 0 0 1.5rem;
	padding: 1rem;
	background: rgba( 0, 0, 0, .04 );
	border-radius: 4px;
}

.aga-suche label {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.aga-suche input,
.aga-suche select,
.aga-suche button {
	font-family: inherit;
	font-size: 1rem;
	padding: .4rem .6rem;
	border: 1px solid rgba( 0, 0, 0, .25 );
	border-radius: 3px;
	background: #fff;
}

.aga-suche-text input {
	min-width: 14rem;
}

.aga-suche button {
	cursor: pointer;
	font-weight: 600;
}

.aga-suche-zuruecksetzen {
	align-self: center;
	font-size: .85rem;
}

.aga-treffer-zahl {
	margin: 0 0 1rem;
	font-size: .9rem;
	opacity: .8;
}

/* Ein Datensatz ohne Datei ist kein Fehler, sondern ein Hinweis darauf, dass
   die Verschlagwortung neuer ist als der Bestand -- entsprechend leise. */
.aga-treffer-fehlt {
	margin: 1rem 0 0;
	font-size: .85rem;
	opacity: .7;
	font-style: italic;
}

.aga-seiten {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	margin: 1.5rem 0 0;
}

.aga-seiten-stand {
	font-size: .9rem;
	opacity: .8;
}

@media ( max-width: 640px ) {
	.aga-suche {
		flex-direction: column;
		align-items: stretch;
	}
	.aga-suche-text input {
		min-width: 0;
		width: 100%;
	}
}