/**
 * Template: Archiv (archive.php, home.php).
 *
 * 1. Archive-Hero (Eyebrow + Headline + Polyline)
 * 2. Archive-Listing (Filter-Dropdown + Grid + Pagination)
 * 3. Post-Card (reusable, auch außerhalb des Archivs)
 *
 * Regel: niemals Hex-Werte direkt — immer var(--color-*).
 */

/* ──────────────────────────────────────────────────────────────
 * 1. Archive-Hero
 *
 * Zweispaltiges Layout (wie Page Hero):
 *   Links  — Content: Eyebrow, Headline, Fließtext
 *   Rechts — Overlay: dekoratives SVG/PNG
 *
 * Custom Properties (vom Render-Template gesetzt):
 *   --ah-overlay-width       Breite des Overlays (z. B. 50%)
 *   --ah-overlay-offset-y    Vertikaler Versatz (negativ = nach oben)
 * ────────────────────────────────────────────────────────────── */

.archive-hero {
    position: relative;
    /* Stacking-Context anheben, damit das Filter-Dropdown über dem
     * Listing (Schwester-Element) liegen kann. */
    z-index: 2;
}

.archive-hero.block--pad-none {
    padding-top:    var(--ah-pt-extra, 0px);
    padding-bottom: 0;
}
.archive-hero.block--pad-normal {
    padding-top:    calc(var(--space-16) + var(--ah-pt-extra, 0px));
    padding-bottom: var(--space-12);
}
.archive-hero.block--pad-lg {
    padding-top:    calc(var(--space-24) + var(--ah-pt-extra, 0px));
    padding-bottom: var(--space-16);
}

.archive-hero.block--bg-beige       { background-color: var(--color-beige); }
.archive-hero.block--bg-dunkelbeige { background-color: var(--color-dunkelbeige); }
.archive-hero.block--bg-white       { background-color: var(--color-white); }

.archive-hero.block--bg-navy {
    background-color: var(--color-navy);
    color: var(--color-text-on-navy);
}

/* Die animierte Linie soll vor dem Overlay liegen. */
.archive-hero > .block__line-svg {
    z-index: calc(var(--z-raised) + 1);
}

/* ── Inner (Grid: Content links, Overlay rechts) ── */

.archive-hero__inner {
    position: relative;
    z-index: var(--z-raised);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.archive-hero__inner--has-overlay {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ah-overlay-width, 50%);
    align-items: center;
    gap: var(--space-12);
}

/* ── Content (links) ───────────────────────────── */

.archive-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 720px;
}

.archive-hero__heading {
    font-family: var(--font-display);
    font-size: clamp(var(--text-4xl), 4.5vw, 3.25rem);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: inherit;
    margin: 0;
}

.archive-hero__text {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: var(--lh-relaxed);
    color: inherit;
    max-width: 620px;
    margin-top: var(--space-4);
}

.archive-hero__text p:last-child {
    margin-bottom: 0;
}

/* ── Overlay (rechts) ──────────────────────────── */

.archive-hero__overlay {
    position: relative;
    z-index: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 320px;
    pointer-events: none;
    transform: translateY(var(--ah-overlay-offset-y, 0));
}

.archive-hero__overlay-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: right center;
}

/* ── Responsive ────────────────────────────────── */

@media (max-width: 1024px) {
    .archive-hero__inner--has-overlay {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-8);
    }

    .archive-hero__overlay {
        min-height: 240px;
    }
}

@media (max-width: 768px) {
    .archive-hero__inner--has-overlay {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .archive-hero__content {
        max-width: none;
    }

    .archive-hero__overlay {
        min-height: 180px;
        margin-inline: calc(var(--container-padding) * -1);
        transform: none;
    }

    .archive-hero__overlay-img {
        object-position: right center;
    }
}

/* ──────────────────────────────────────────────────────────────
 * 2. Archive-Filter (im Hero)
 *
 * „Filtern nach"-Label + Pill-Dropdown auf <details>/<summary>-Basis.
 * Offenes Panel = benutzerdefinierte Liste, kein Browser-Default.
 * ────────────────────────────────────────────────────────────── */

.archive-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

.archive-filter__label {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.archive-hero.block--bg-navy .archive-filter__label {
    color: var(--color-text-on-navy);
}

/* ── Dropdown-Container ────────────────────── */

.archive-filter__dropdown {
    position: relative;
    min-width: 220px;
}

/* ── Trigger (Pill) ────────────────────────── */

.archive-filter__trigger {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-white);
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    user-select: none;
}

.archive-filter__trigger::-webkit-details-marker,
.archive-filter__trigger::marker {
    display: none;
    content: "";
}

.archive-filter__trigger:focus-visible {
    outline: 2px solid var(--color-electric-blue);
    outline-offset: 2px;
}

.archive-filter__trigger-label {
    flex: 1 1 auto;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archive-filter__icon {
    flex-shrink: 0;
    width: 12px;
    height: 7px;
    color: var(--color-text);
    transition: transform var(--duration-fast) var(--ease-default);
}

.archive-filter__dropdown[open] .archive-filter__icon {
    transform: rotate(180deg);
}

/* ── Offenes Panel ─────────────────────────── */

.archive-filter__list {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    z-index: var(--z-raised);
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    background-color: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    max-height: 320px;
    overflow-y: auto;
}

.archive-filter__item {
    margin: 0;
    padding: 0;
}

.archive-filter__option {
    display: block;
    padding: var(--space-2) var(--space-4);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    color: var(--color-text);
    text-decoration: none;
    transition:
        background-color var(--duration-fast) var(--ease-default),
        color var(--duration-fast) var(--ease-default);
}

.archive-filter__option:hover,
.archive-filter__option:focus-visible {
    background-color: var(--color-beige);
    color: var(--color-text);
    outline: none;
}

.archive-filter__option.is-active {
    font-weight: var(--fw-semibold);
    background-color: var(--color-beige);
}

/* ──────────────────────────────────────────────────────────────
 * 3. Archive-Listing
 * ────────────────────────────────────────────────────────────── */

.archive-listing {
    background-color: var(--color-white);
}

.archive-listing__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

/* ── Grid ────────────────────────────────── */

.archive-listing__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

@media (max-width: 1024px) {
    .archive-listing__grid {
        gap: var(--space-6);
    }
}

@media (max-width: 768px) {
    .archive-listing__grid {
        grid-template-columns: 1fr;
        /* Cards bis an die Viewport-Ränder ziehen, das Container-
         * Padding bricht für die Grid-Spalte. */
        margin-inline: calc(var(--container-padding) * -1);
    }
}

/* ── Pagination ──────────────────────────── */

.archive-listing__pagination {
    display: flex;
    justify-content: center;
}

.archive-listing__pagination-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.archive-listing__pagination-item .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--fw-medium);
    color: var(--color-navy);
    background-color: transparent;
    border: 1px solid var(--color-dunkelbeige);
    text-decoration: none;
    transition:
        background-color var(--duration-fast) var(--ease-default),
        color var(--duration-fast) var(--ease-default),
        border-color var(--duration-fast) var(--ease-default);
}

.archive-listing__pagination-item .page-numbers:hover,
.archive-listing__pagination-item .page-numbers:focus-visible {
    background-color: var(--color-navy);
    color: var(--color-white);
    border-color: var(--color-navy);
}

.archive-listing__pagination-item .page-numbers.current {
    background-color: var(--color-navy);
    color: var(--color-white);
    border-color: var(--color-navy);
}

.archive-listing__pagination-item .page-numbers.dots {
    border-color: transparent;
    color: var(--color-text-muted);
    pointer-events: none;
}

.archive-listing__pagination-item .page-numbers.prev,
.archive-listing__pagination-item .page-numbers.next {
    padding-inline: var(--space-4);
}

.archive-listing__empty {
    padding-block: var(--space-12);
    text-align: center;
    color: var(--color-text-muted);
}

/* Post-Card-Komponente liegt in global.css (§9), damit sie auch
 * außerhalb der Archivseite verfügbar ist (z. B. im Archicards-Block). */