/* 262-php-03-event-row.css
   ============================================================
   Anlässe als ZEILE statt als Karte.

   Nicht neu erfunden: Markup und Werte stammen aus
   typography-style-guide-roboto-green.html (Abschnitt "Event /
   list row"). Übernommen sind .row, .row__date, .row__body,
   .row__cta, .date, .date--stacked, .meta — mit den Massen aus
   deren <style>-Block.

   Die Abstands-Variablen (--sp-*) waren nur im Style Guide
   definiert, nicht in 01-type-color.css. Sie stehen deshalb hier
   mit denselben Werten; sonst fielen alle Abstände auf 0.
   ============================================================ */

.x262-eventrows {
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-5: 1.5rem;
}

/* Eine Zeile: Datum · Inhalt · Handlung.
   Style Guide: grid-template-columns: 88px 1fr auto; */
.x262-eventrows .row {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: var(--sp-5);
    align-items: center;
    padding-block: var(--sp-5);
    border-top: 1px solid var(--line, #dfdbd4);
}

.x262-eventrows .row:last-child {
    border-bottom: 1px solid var(--line, #dfdbd4);
}

.x262-eventrows .row__date { display: grid; gap: 2px; }
.x262-eventrows .row__body { display: grid; gap: var(--sp-2); }
.x262-eventrows .row__cta  { justify-self: end; }

/* Tag und Monat gross, Wochentag und Zeit klein darunter. */
.x262-eventrows .date--stacked {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--w-display, 400);
    letter-spacing: -0.01em;
    color: var(--ink, #14171a);
    line-height: 1;
}

.x262-eventrows .date {
    font-size: var(--fs-date, 1rem);
    font-weight: var(--w-heading, 500);
    line-height: var(--lh-ui, 1.2);
    letter-spacing: 0.04em;
    color: var(--muted, #6d7278);
    font-variant-numeric: tabular-nums;
}

.x262-eventrows .row__body h3 {
    margin: 0;
    font-size: var(--fs-h3, 1.375rem);
    font-weight: var(--w-heading, 500);
    line-height: var(--lh-h3, 1.26);
    letter-spacing: var(--tr-h3, -0.006em);
}

.x262-eventrows .row__body h3 a {
    color: var(--ink, #14171a);
    text-decoration: none;
}

.x262-eventrows .row__body h3 a:hover { color: var(--brand-strong, #15703a); }

.x262-eventrows .meta {
    margin: 0;
    font-size: var(--fs-meta, 1rem);
    font-weight: var(--w-body, 400);
    line-height: 1.5;
    color: var(--muted, #6d7278);
}

/* Knopf am Zeilenende. Werte aus dem Style Guide (.btn--ghost,
   .btn--sm) — kein zweites Knopf-Muster. */
.x262-eventrows .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: var(--fs-meta, 1rem);
    font-weight: var(--w-heading, 500);
    line-height: 1;
    letter-spacing: 0.015em;
    text-decoration: none;
    padding: 11px 18px 10px;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.x262-eventrows .btn--ghost {
    background: transparent;
    color: var(--ink, #14171a);
    border-color: var(--line, #dfdbd4);
}

.x262-eventrows .btn--ghost:hover { border-color: var(--ink, #14171a); }

.x262-eventrows .btn--secondary {
    background: transparent;
    color: var(--ink, #14171a);
    border-color: var(--ink, #14171a);
}

.x262-eventrows .btn--secondary:hover {
    background: var(--ink, #14171a);
    color: var(--paper, #fff);
}

/* Anmeldestatus, nur für Angemeldete — wie auf der Karte. */
.x262-eventrows .x262-event__status { margin-top: 0; }

/* Schmal: Datum über den Text, Knopf nach links.
   Style Guide macht es genauso (grid-template-columns: 1fr). */
@media (max-width: 720px) {
    .x262-eventrows .row {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
        align-items: start;
    }
    .x262-eventrows .row__date {
        grid-auto-flow: column;
        justify-content: start;
        align-items: baseline;
        gap: 10px;
    }
    .x262-eventrows .row__cta { justify-self: start; }
}

/* ── Archiv: Art und "Vergangen"-Marke ───────────────────────
   Aus der ersten Fassung (ds-svp-community/anlaesse.html):
   dort trug jede vergangene Zeile eine Art (Ausflug, Vereins-
   anlass) und eine graue Marke. */

.x262-eventrows .row__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* In der Reihe sitzt der Anmeldestand in derselben Zeile wie die Rubrik,
   nicht darunter — der Abstand aus der Kartenansicht faellt hier weg. */
.x262-eventrows .row__tags .x262-event__status { margin: 0; }

/* Kategorie-Etikett: jetzt die gemeinsame .label aus 02-elements.css.
   Diese Datei hatte vorher ihre eigene Kopie derselben Regel — einer von
   drei Orten mit demselben Zweck und unterschiedlichem Aussehen. */

.x262-eventrows .row__past {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--surface-2, #f4f2ee);
    border: 1px solid var(--border-soft, #eceae5);
    font-size: var(--fs-meta, 1rem);
    color: var(--text-muted, #6d7278);
}

/* ── Archiv: dauerhaft verblasst ──────────────────────────────
   Exakt uebernommen aus ds-svp-community/assets/css/03-elements.css:
       .c-event-row--past { opacity: .65; }
   FEST, ohne Rueckfall beim Zeigen — Vergangenes bleibt vergangen,
   auch mit der Maus darueber. Die Vorlage faerbt dabei auch die
   Art-Beschriftung nicht um; opacity allein macht die Zeile leiser,
   ohne dass Gruen als "aktiv" missverstanden werden koennte. */
.x262-eventrows--archiv .row {
    opacity: .65;
}

/* "Darunter darf sich Farbe aendern, aber die Deckkraft bleibt":
   das ist der Hover aus der Vorlage — .c-event-row:hover setzt NUR
   den Hintergrund, nie die Deckkraft. Gilt fuer beide Listen gleich. */
.x262-eventrows .row:hover {
    background: var(--surface-2, #f4f2ee);
}