/* ============================================================
   262-php-03-event-card — Anlasskarte

   [7] Eigene Fläche + Kontur, damit die Karte sichtbar bleibt.
   Zusätzlich eine grüne Kante links: so unterscheidet sich ein
   Anlass auf einen Blick von einem Beitrag, ohne Etikett.
   ============================================================ */

.x262-event-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.x262-event-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.x262-event-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.x262-event {
    display: grid;
    align-content: start;
    min-width: 0;

    background: var(--surface-2, #f4f2ee);
    border: 1px solid var(--border, #dfdbd4);
    border-left: 3px solid var(--brand, #1E8A3B);
    border-radius: var(--radius-lg, 6px);

    transition: border-color .14s ease, background-color .14s ease;
}
.x262-event:hover {
    background: #fff;
    border-color: var(--faint, #a4a8ac);
    border-left-color: var(--brand, #1E8A3B);
}

.x262-event__body {
    display: grid;
    gap: .5rem;
    align-content: start;
    padding: 1.125rem 1.25rem 1.25rem;
    min-width: 0;
}

.x262-event__date {
    font: var(--w-heading, 500) var(--fs-label, 1rem)/var(--lh-ui, 1.2) var(--font-body, Roboto, sans-serif);
    letter-spacing: var(--tr-label, .14em);
    text-transform: uppercase;
    color: var(--accent-ink, #15703a);
    font-variant-numeric: tabular-nums;
}

.x262-event__title {
    margin: 0;
    font-family: var(--font-body, Roboto, sans-serif);
    font-size: var(--fs-h4, 1.25rem);
    font-weight: var(--w-heading, 500);
    line-height: var(--lh-h4, 1.38);
    letter-spacing: var(--tr-h3, -.006em);
    color: var(--ink, #14171a);
}
.x262-event__title a { color: inherit; text-decoration: none; }
.x262-event__title a:hover { color: var(--brand-strong, #15703A); }

.x262-event__text {
    margin: 0;
    font-size: var(--fs-small, 1rem);
    line-height: 1.55;
    color: var(--text-2, #3d4247);
    max-width: var(--measure-lead);
}

.x262-event-empty {
    margin: 0;
    padding: 2.5rem 1.25rem;
    text-align: center;
    background: var(--surface-2, #f4f2ee);
    border: 1px dashed var(--border, #dfdbd4);
    border-radius: var(--radius-lg, 6px);
    color: var(--text-muted, #6d7278);
    font-size: var(--fs-small, 1rem);
}

@media (max-width: 640px) {
    .x262-event-grid,
    .x262-event-grid[data-columns="2"],
    .x262-event-grid[data-columns="3"] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Anmeldestatus ───────────────────────────────────────────
   Erscheint nur für angemeldete Mitglieder (data-auth-when).
   Die einzige vierte Angabe auf dieser Karte — sie beantwortet
   "kann ich noch mit?", und nur das. */

.x262-event__status {
    display: inline-block;
    /* Schrumpft auf den Text, auch als Kind eines Rasters oder einer
       Flexbox: dort wird 'inline-block' zu 'block' und der Streifen zoege
       sich sonst ueber die ganze Spalte (so geschehen in der Terminliste). */
    width: fit-content;
    justify-self: start;
    align-self: start;
    margin: 12px 0 0;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: var(--fs-label, 1rem);
    letter-spacing: var(--tr-label, .14em);
    text-transform: uppercase;
    background: var(--surface-2, #f4f2ee);
    color: var(--text-muted, #6d7278);
}

.x262-event__status--open {
    background: var(--brand-tint-2, #e6f2dc);
    color: var(--brand-strong, #15703a);
}

.x262-event__status--waitlist {
    background: #fdf3d8;
    color: #7a5a06;
}

.x262-event__status--full {
    background: var(--red-050, #fcf0f1);
    color: var(--alert-ink, #8f0b20);
}