/* ══ Anlass-Feed ══════════════════════════════════════════════════════════
   Farben und Radien laufen über Custom Properties: für einen anderen Kunden
   reicht ein Override von .sae-feed { --sae-… }.

   JEDE Regel ist mit .sae-feed präfixiert. Nicht aus Gewohnheit, sondern
   weil Themes wie Salient p, img, h3 und a über Container-Selektoren
   ansteuern (0,1,1) – ein blosses .sae-tagline (0,1,0) verliert dagegen.
   Aus dem gleichen Grund wird bei jedem <p> padding explizit auf 0 gesetzt:
   Salient hängt allen Absätzen ein padding-bottom von 27px an.
   Schriftfamilien erbt der Feed dagegen bewusst vom Theme.
   ═══════════════════════════════════════════════════════════════════════ */

.sae-feed {
    --sae-accent:    #d8da2e;  /* Datumsblock des nächsten Anlasses */
    /* Farb-Tokens hängen an den Salient-Theme-Variablen (Fallback = bisherige
       Werte): ändert der Kunde die Theme-Farben, zieht der Feed automatisch
       mit. extra-color-1 ist das Gold der Site (#c09158). */
    --sae-cta:       var(--nectar-extra-color-1, #e2a86b);  /* Haupt-Button */
    --sae-cta-ink:   #ffffff;
    --sae-ink:       var(--nectar-font-color, #1d1c19);
    --sae-muted:     #6f6d65;
    --sae-card:      #ffffff;
    --sae-card-alt:  #f2f0e9;
    --sae-date-bg:   #b1c2cd;  /* Datumsblock (ausser nächster Anlass = accent) */
    --sae-line:      #e3e0d6;
    --sae-link:      var(--nectar-extra-color-1, #a2703c);
    /* Karten-Look wie die News-Karten des Themes (Salient inner-wrap). */
    --sae-radius:    5px;
    --sae-shadow:    0 30px 90px rgba(0, 0, 0, 0.14);
    --sae-pill:      999px;
    --sae-datecol:   8.75rem;  /* Breite des Datumsblocks ab Desktop */
    --sae-gap:       0.75rem;
    --sae-pad:       1.25rem;
    --sae-speed:     0.32s;

    color: var(--sae-ink);
}

.sae-feed *,
.sae-feed *::before,
.sae-feed *::after {
    box-sizing: border-box;
}

.sae-feed .sae-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Filterleiste ────────────────────────────────────────────────────── */

.sae-feed .sae-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}

/* Eigene display:flex-Regel schlägt die UA-Regel [hidden]{display:none} —
   ohne diese Zeile wäre die Filterleiste OHNE JavaScript sichtbar, mit toten
   Buttons (das Markup liefert sie hidden aus, erst JS aktiviert sie). */
.sae-feed .sae-filters[hidden] {
    display: none;
}

.sae-feed .sae-chip {
    padding: 0.6em 1.3em;
    border: 1px solid var(--sae-line);
    border-radius: var(--sae-pill);
    background: transparent;
    color: var(--sae-ink);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.sae-feed .sae-chip:hover {
    border-color: var(--sae-ink);
}

.sae-feed .sae-chip.is-active {
    background: var(--sae-ink);
    border-color: var(--sae-ink);
    color: #fff;
}

/* ── Liste ───────────────────────────────────────────────────────────── */

.sae-feed .sae-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sae-feed .sae-item {
    margin: 0 0 var(--sae-gap);
    padding: 0;
    border: 0;
    border-radius: var(--sae-radius);
    background: var(--sae-card);
    box-shadow: var(--sae-shadow);
    list-style: none;
    overflow: hidden;
}

.sae-feed .sae-item[hidden] {
    display: none;
}

.sae-feed .sae-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "media media"
        "date  date"
        "head  toggle";
}

/* ── Datumsblock ─────────────────────────────────────────────────────── */

.sae-feed .sae-date {
    grid-area: date;
    background: var(--sae-date-bg);
}

.sae-feed .sae-item.is-next .sae-date {
    background: var(--sae-accent);
}

.sae-feed .sae-date-inner {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.7rem var(--sae-pad);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.1;
}

.sae-feed .sae-date-day {
    font-size: 1.15rem;
}

/* ── Bild ────────────────────────────────────────────────────────────── */

.sae-feed .sae-media {
    position: relative;
    grid-area: media;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--sae-card-alt);
    line-height: 0;
}

/* Absolut statt height:100%: eine Prozenthöhe gegen eine auto-hohe Box fällt
   auf auto zurück – das Bild bliebe in Originalgrösse stehen. */
.sae-feed .sae-media img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

/* ── Kopfzeile ───────────────────────────────────────────────────────── */

.sae-feed .sae-head {
    grid-area: head;
    padding: var(--sae-pad);
    padding-right: 0;
}

.sae-feed .sae-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.7rem;
    padding: 0;
    line-height: 1;
}

.sae-feed .sae-badge {
    display: inline-block;
    padding: 0.45em 0.7em;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1;
}

.sae-feed .sae-badge-kat {
    background: var(--sae-cta);
    color: #fff;
}

.sae-feed .sae-badge-status {
    border: 1px solid var(--sae-line);
    color: var(--sae-muted);
}

.sae-feed .sae-title {
    margin: 0 0 0.3rem;
    padding: 0;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.sae-feed .sae-tagline {
    margin: 0 0 0.6rem;
    padding: 0;
    font-size: var(--nectar-body-font-size, 1.02rem);
    line-height: 1.45;
    color: inherit;
}

.sae-feed .sae-meta {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    color: var(--sae-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.sae-feed .sae-meta-part + .sae-meta-part::before {
    content: "·";
    margin: 0 0.55em;
}

/* ── Auf-/Zuklappen ──────────────────────────────────────────────────── */

.sae-feed .sae-toggle {
    grid-area: toggle;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sae-ink);
    cursor: pointer;
}

.sae-feed .sae-caret {
    transition: transform 0.25s ease;
}

.sae-js .sae-item.is-open .sae-caret {
    transform: rotate(180deg);
}

.sae-js [data-sae-head] {
    cursor: pointer;
}

/* Die Höhe setzt das JS in Pixeln (siehe frontend.js). Reine CSS-Varianten
   scheiden aus: eine Transition auf grid-template-rows (1fr -> 0fr) bleibt in
   Chromium am Startwert hängen, und 0fr liesse das Panel-Padding als
   Reststreifen stehen. */
.sae-feed .sae-panel-wrap {
    overflow: hidden;
    transition: height var(--sae-speed) ease;
}

.sae-feed .sae-panel-wrap[hidden] {
    display: none;
}

.sae-feed .sae-panel {
    padding: 1.5rem var(--sae-pad) var(--sae-pad);
}

.sae-feed .sae-panel > :first-child {
    margin-top: 0;
}

.sae-feed .sae-desc {
    max-width: 62ch;
    font-size: var(--nectar-body-font-size, 1rem);
    line-height: 1.6;
}

.sae-feed .sae-desc p {
    margin: 0 0 0.9em;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.sae-feed .sae-desc p:last-child {
    margin-bottom: 0;
}

/* ── Buttons und Links im Panel ──────────────────────────────────────── */

.sae-feed .sae-ctas {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1.25rem 0 0;
    padding: 0;
    line-height: 1;
}

.sae-feed .sae-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1em 1.8em;
    border: 1px solid transparent;
    border-radius: var(--sae-pill);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.sae-feed .sae-btn-primary {
    background: var(--sae-cta);
    color: var(--sae-cta-ink);
}

.sae-feed .sae-btn-primary:hover,
.sae-feed .sae-btn-primary:focus {
    background: var(--sae-ink);
    color: #fff;
}

.sae-feed .sae-btn-ghost {
    border-color: var(--sae-ink);
    color: var(--sae-ink);
}

.sae-feed .sae-btn-ghost:hover,
.sae-feed .sae-btn-ghost:focus {
    background: var(--sae-ink);
    color: #fff;
}

.sae-feed .sae-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1.1rem 0 0;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.sae-feed .sae-link {
    color: var(--sae-link);
    text-decoration: none;
}

.sae-feed .sae-link::after {
    content: " →";
}

.sae-feed .sae-link:hover,
.sae-feed .sae-link:focus {
    text-decoration: underline;
}

/* ── Nächster Anlass (Startseite) ────────────────────────────────────── */

.sae-feed-next .sae-next-heading {
    margin: 0 0 0.9rem;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--sae-muted);
}

.sae-feed .sae-title-link {
    color: inherit;
    text-decoration: none;
}

.sae-feed .sae-title-link:hover,
.sae-feed .sae-title-link:focus {
    text-decoration: underline;
}

.sae-feed-next .sae-item {
    margin-bottom: 0;
}

.sae-feed .sae-next-more {
    margin: 0.9rem 0 0;
}

/* ── Leerzustand ─────────────────────────────────────────────────────── */

.sae-feed .sae-empty {
    margin: 0;
    padding: 2rem var(--sae-pad);
    border: 1px dashed var(--sae-line);
    border-radius: var(--sae-radius);
    color: var(--sae-muted);
    text-align: center;
}

/* ── Fokus ───────────────────────────────────────────────────────────── */

.sae-feed :focus-visible {
    outline: 2px solid var(--sae-link);
    outline-offset: 2px;
}

/* ── Desktop ─────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .sae-feed .sae-item {
        margin-bottom: 1.75rem;
    }

    .sae-feed .sae-row {
        grid-template-columns: var(--sae-datecol) minmax(0, 1fr) auto auto;
        grid-template-areas: "date head media toggle";
    }

    .sae-feed-next .sae-row {
        grid-template-columns: var(--sae-datecol) minmax(0, 1fr) auto;
        grid-template-areas: "date head media";
    }

    .sae-feed .sae-date-inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.1em;
        height: 100%;
        padding: 1.25rem 0.75rem;
        text-align: center;
    }

    .sae-feed .sae-date-day {
        font-size: 2.6rem;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1;
    }

    /* Mehrtägig («24–25») braucht mehr Platz, als der Block in Grossschrift
       hergibt – eine Stufe kleiner, sonst reisst die Zahl aus dem Block. */
    .sae-feed .sae-date-day.is-range {
        font-size: 2.1rem;
    }

    .sae-feed .sae-date-dow,
    .sae-feed .sae-date-my {
        font-size: 0.72rem;
    }

    /* Randlos über die volle Höhe der Kopfzeile – so bleibt links neben dem
       Bild kein toter Raum. min-height verhindert, dass ein kurzer Titel das
       Bild zum Briefschlitz zusammendrückt. */
    .sae-feed .sae-media {
        width: 17rem;
        min-height: 9.5rem;
        align-self: stretch;
        margin: 0;
        aspect-ratio: auto;
    }

    .sae-feed .sae-head {
        padding: var(--sae-pad);
    }

    .sae-feed .sae-title {
        font-size: 1.7rem;
    }

    /* Eingerückt um die Datumsspalte, damit der Text bündig unter dem Titel
       steht statt unter dem Datumsblock. */
    .sae-feed .sae-panel {
        padding: 1.5rem var(--sae-pad) var(--sae-pad) calc(var(--sae-datecol) + var(--sae-pad));
    }

    .sae-feed .sae-ctas {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sae-feed .sae-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 1.75rem;
    }
}

/* ── Bewegung reduzieren ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .sae-feed .sae-panel-wrap,
    .sae-feed .sae-caret,
    .sae-feed .sae-chip,
    .sae-feed .sae-btn {
        transition: none;
    }
}