/*
 * miniaturen.css — the public miniatures gallery (#596, ADR-0056), the third
 * visual family next to Admin and Gallery: "Musealer Spotlight" — a dark
 * room, warm light text, a mustard spotlight on the covers. Mustard stays the
 * brand accent (same values as --brand-mustard / --brand-mustard-dark), so the
 * site still reads as Loran.
 *
 * This file is the family's token source. It never redeclares a gallery or admin
 * token (one token, one value across every stylesheet). The album page also
 * loads gallery.css (token values), gallery-browse.css (the justified-rows
 * geometry and the pager) and gallery-lightbox.css (the shared, already
 * warm-dark viewer); the rules below restate everything from those files that
 * would put light-family colours on this dark page.
 */

:root {
    --mini-bg: #15120f;
    --mini-bg-deep: #0d0b09;
    --mini-surface: #1f1b16;
    --mini-fg: #f3ede1;
    --mini-fg-muted: #b8ac98;
    --mini-line: #3a3329;
    --mini-accent: #d9b14a;
    --mini-accent-dark: #b58a28;
    /* Focus ring of this family, measured against --mini-bg and --mini-surface (DesignTokenContrastTest). */
    --mini-focus-ring: var(--mini-accent);
}

body.miniaturen {
    display: flex;
    flex-direction: column;
    background: var(--mini-bg);
    color: var(--mini-fg);
}

body.miniaturen a { color: inherit; }
body.miniaturen .skip-link { background: var(--mini-bg-deep); color: var(--mini-fg); }

/* ── Header and footer ────────────────────────────────────────────────── */
.mini-header {
    display: flex;
    align-items: center;
    padding: 1rem clamp(1rem, 4vw, 3rem);
    border-bottom: 1px solid var(--mini-line);
    background: var(--mini-bg-deep);
}
.mini-header .brand {
    font: 400 1.5rem Georgia, "Playfair Display", serif;
    letter-spacing: 0.02em;
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--mini-fg);
}
.mini-header .brand i { color: var(--mini-accent); }
.mini-header .brand small {
    font: 0.8rem system-ui, sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mini-fg-muted);
    margin-left: 0.6rem;
}
.mini-footer {
    margin-top: auto;
    padding: 1.5rem clamp(1rem, 4vw, 3rem);
    color: var(--mini-fg-muted);
    font-size: 0.85rem;
    border-top: 1px solid var(--mini-line);
}
.mini-header .brand:focus-visible,
.mini-back:focus-visible,
.mini-card:focus-visible,
.chip:focus-visible,
.mini-button:focus-visible {
    outline: 3px solid var(--mini-focus-ring);
    outline-offset: 3px;
}

/* ── Page frame ───────────────────────────────────────────────────────── */
body.miniaturen main {
    padding: clamp(1.2rem, 4vw, 2.5rem) clamp(1rem, 4vw, 3rem);
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
}
.mini-hero { padding-top: clamp(0.5rem, 3vw, 1.5rem); }
.mini-hero h1,
.mini-album-head h1 {
    font: 400 clamp(1.8rem, 5vw, 3rem) Georgia, "Playfair Display", serif;
    margin: 0 0 0.4rem;
    color: var(--mini-fg);
}
.mini-lede { color: var(--mini-fg-muted); margin: 0; max-width: 40rem; }
.mini-rule { width: 60px; height: 1px; background: var(--mini-accent); margin: 1rem 0 1.5rem; }
.mini-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--mini-fg-muted);
    text-decoration: none;
    font-size: 0.9rem;
}
.mini-back:hover { color: var(--mini-accent); }

/* ── Album cards: a spotlight on the cover, hover lights the frame only ── */
.mini-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 1.2rem;
}
.mini-card {
    display: block;
    text-decoration: none;
    background: var(--mini-surface);
    border: 1px solid var(--mini-line);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.mini-card:hover {
    border-color: var(--mini-accent);
    box-shadow: 0 0 0 1px var(--mini-accent), 0 14px 36px rgba(0, 0, 0, 0.55);
}
.mini-card-cover {
    display: block;
    aspect-ratio: 4 / 3;
    position: relative;
    background: linear-gradient(135deg, var(--mini-surface), var(--mini-bg-deep));
}
.mini-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-card-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(217, 177, 74, 0.22), transparent 65%);
}
.mini-card-meta { display: block; padding: 0.9rem 1rem 1.1rem; }
.mini-card-meta h2 { font: 400 1.25rem Georgia, "Playfair Display", serif; margin: 0 0 0.15rem; }
.mini-card-count { color: var(--mini-fg-muted); font-size: 0.88rem; }

/* ── All-photos strip above the album cards (#596) ──────────────────────── */
.mini-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 72px;
    padding: 0.6rem 1rem;
    margin-bottom: 1.2rem;
    border: 1px solid var(--mini-line);
    border-radius: 6px;
    background: var(--mini-surface);
    text-decoration: none;
    transition: border-color 0.25s;
}
.mini-strip:hover { border-color: var(--mini-accent); }
.mini-strip:focus-visible { outline: 3px solid var(--mini-focus-ring); outline-offset: 3px; }
.mini-strip-mosaic { display: flex; gap: 3px; flex: none; }
.mini-strip-mosaic img { width: 44px; height: 44px; object-fit: cover; border-radius: 3px; display: block; background: var(--mini-bg-deep); }
.mini-strip-text { display: block; }
.mini-strip-text h2 { font: 400 1.2rem Georgia, "Playfair Display", serif; margin: 0; }
.mini-strip-text span { color: var(--mini-fg-muted); font-size: 0.88rem; }
.mini-strip-go { margin-left: auto; color: var(--mini-accent); font-size: 1.4rem; }

/* ── Tag chips ────────────────────────────────────────────────────────── */
.mini-filters { display: flex; gap: 0.6rem; overflow-x: auto; padding: 1.2rem 0 0.4rem; scroll-snap-type: x proximity; }
@media (min-width: 900px) { .mini-filters { flex-wrap: wrap; overflow: visible; } }
.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--mini-line);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    background: var(--mini-surface);
    white-space: nowrap;
    scroll-snap-align: start;
}
.chip b { color: var(--mini-fg-muted); font-weight: 400; margin-left: 0.45rem; }
.chip:hover { border-color: var(--mini-accent); }
.chip.on { border-color: var(--mini-accent); color: var(--mini-accent); background: var(--mini-bg-deep); }

/* ── Photo grid: calm hover, no lift; the geometry is gallery-browse.css ── */
body.miniaturen .masonry { margin-top: 1rem; }
body.miniaturen .tile {
    background: var(--mini-surface);
    box-shadow: 0 0 0 1px var(--mini-line);
    transition: box-shadow 0.25s;
}
body.miniaturen .tile:hover { transform: none; box-shadow: 0 0 0 1px var(--mini-accent), 0 10px 30px rgba(0, 0, 0, 0.5); }
body.miniaturen .tile:active { transform: none; }
body.miniaturen .tile:focus-visible { outline: 3px solid var(--mini-focus-ring); outline-offset: 3px; }
body.miniaturen .tile-meta { color: var(--mini-fg-muted); border-top: 1px solid var(--mini-line); }

/* ── Pager: the family's light fills restated for the dark page ────────── */
body.miniaturen .page-link { color: var(--mini-fg); }
body.miniaturen .page-link:hover { background: var(--mini-surface); }
body.miniaturen .page-link:focus-visible { outline: 3px solid var(--mini-focus-ring); outline-offset: 2px; }
body.miniaturen .page-link:not(.disabled):not(.current):active { background: var(--mini-line); }
body.miniaturen .page-link.current { background: var(--mini-accent); color: var(--mini-bg-deep); }
body.miniaturen .page-link.disabled { color: var(--mini-fg-muted); }

/* ── Empty and no-match states ────────────────────────────────────────── */
.mini-empty {
    text-align: center;
    max-width: 30rem;
    margin: clamp(1.5rem, 6vw, 4rem) auto;
    padding: 2rem 1.2rem;
    border: 1px dashed var(--mini-line);
    border-radius: 8px;
    background: var(--mini-surface);
}
.mini-empty-glyph {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    border: 1px solid var(--mini-line);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: var(--mini-accent);
    background: radial-gradient(circle at 50% 40%, rgba(217, 177, 74, 0.3), transparent 70%);
}
.mini-empty h2 { font: 400 1.4rem Georgia, "Playfair Display", serif; margin: 0 0 0.4rem; }
.mini-empty p { margin: 0.2rem 0; color: var(--mini-fg-muted); }
.mini-button {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-top: 1.2rem;
    padding: 0 1.5rem;
    border: 1px solid var(--mini-accent);
    border-radius: 999px;
    color: var(--mini-accent);
    text-decoration: none;
}
.mini-button:hover { background: var(--mini-bg-deep); }