/* ============================================================
   262-php-02-card — Beitragskarte

   [7] Karten sind jetzt vom Hintergrund unterscheidbar:
   eigene Fläche (--surface-2) PLUS eine Konturlinie. Vorher war
   beides weiss und die Karte verschwand im Hintergrund.
   ============================================================ */

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

/* ---- Karte ----------------------------------------------- */
.x262-card {
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;
    min-width: 0;
    overflow: hidden;

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

    transition: border-color .14s ease, background-color .14s ease;
}
.x262-card:hover {
    background: #fff;
    border-color: var(--faint, #a4a8ac);
}

.x262-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--border-soft, #eceae5);
}
.x262-card__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* A card without a picture keeps the same frame: the logo, small and
   faint, on the section's tint (262-php-02-card.php). */
.x262-card__media--none {
    display: grid;
    place-items: center;
    background: var(--brand-tint);
}
.x262-card__media--none > img {
    width: 38%;
    height: auto;
    object-fit: contain;
    opacity: .55;
}

/* Etikett-Zeile: Versal-Kategorie im Kasten + Datum. Erscheint NUR in der
   kompakten Archivliste und auf Detailseiten — auf der Bildkarte bleibt es
   bei Titel, einem Satz und einem Link (NOTION-STRUKTUR, Regel 3). */
.x262-card__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem;
}

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

/* H3-Ebene laut Stilguide: Roboto 700, 22 → 28px. */
/* Ein Kartentitel ist KEINE Abschnitts-Überschrift. Er stand vorher auf
   --fs-h3 (22→28px) — derselben Stufe wie „Was unsere Mitglieder
   schreiben" darüber. Im Raster konkurrierte damit jede Karte mit der
   Überschrift des ganzen Abschnitts. --fs-h4 (18→20px) ist die Stufe,
   die schon die Kachel- und Personenkarte tragen. */
.x262-card__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);
}

/* KEIN Unterstrich. Im Stilguide sah die grüne Linie gut aus, weil dort
   nur Text stand. Über einem Bild und mit Etikett, Datum und Teaser
   darunter kommen auf jede Karte drei bis vier grüne Linien — das Auge
   liest dann das Muster statt die Schlagzeile. Die Karte ist ohnehin
   ganz klickbar; ein Hinweis beim Überfahren genügt. */
.x262-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease;
}
.x262-card__title a:hover { color: var(--accent-ink, #15703a); }

/* Ein Satz. Mehr passt hier absichtlich nicht hinein. */
.x262-card__text {
    margin: 0;
    font-size: var(--fs-small, 1rem);
    line-height: 1.55;
    color: var(--text-2, #3d4247);
    max-width: var(--measure-lead);
}

.x262-card__more {
    margin-top: .25rem;
    justify-self: start;
    font: var(--w-heading, 500) var(--fs-meta, 1rem)/1.4 var(--font-body, Roboto, sans-serif);
    color: var(--brand-strong, #15703A);
    text-decoration: none;
}
.x262-card__more::after { content: " \2192"; }
.x262-card:hover .x262-card__more { text-decoration: underline; }

/* ---- Notice card — information INSIDE a listing ------------------------
   Style guide, section "Listings": information that belongs to a list
   stands IN the list, never below it. It is not an entry, so it looks like
   a banner: the full width of the grid, solid green, white text, no
   picture. The page puts it after the first row. */
.x262-card--notice {
    grid-column: 1 / -1;
    grid-template-rows: auto;
    background: var(--brand);
    border-color: var(--brand);
    color: var(--paper);
}
.x262-card--notice:hover { background: var(--brand); border-color: var(--brand-strong); }
.x262-card--notice .x262-card__body { padding: 1.5rem 1.75rem; }
.x262-card--notice .x262-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--w-display);
    color: var(--paper);
}
.x262-card--notice .x262-card__text,
.x262-card--notice .x262-card__more { color: var(--paper); }
.x262-card--notice .x262-card__more { text-decoration: underline; text-underline-offset: .2em; }

/* ============================================================
   Variante: compact — chronologische Archivliste
   Keine Kachel, keine Fläche: eine Liste soll wie eine Liste
   aussehen. Nur eine Haarlinie je Zeile.
   ============================================================ */
.x262-cardlist {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.x262-cardrow {
    display: grid;
    gap: .1875rem;
    padding: .75rem;
    border-radius: var(--radius, 3px);
    border-top: 1px solid var(--border-soft, #eceae5);
}
.x262-cardrow:last-child { border-bottom: 1px solid var(--border-soft, #eceae5); }
.x262-cardrow:hover { background: var(--surface-2, #f4f2ee); }

.x262-cardrow__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem;
}

/* Kategorie-Etikett: jetzt die gemeinsame .label aus 02-elements.css
   (siehe dort). Diese Regel bestand vorher aus einer eigenen Kopie mit
   Rahmen und Kasten — einer von drei Orten, die dieselbe Sache anders
   aussehen liessen. Kein eigenes Aussehen mehr hier. */

.x262-cardrow__date {
    font-size: var(--fs-meta, 1rem);
    color: var(--text-muted, #6D7278);
    font-variant-numeric: tabular-nums;
}

.x262-cardrow__title {
    margin: .1875rem 0 0;
    font: var(--w-heading, 500) var(--fs-h4, 1.25rem)/var(--lh-h4, 1.38) var(--font-body, Roboto, sans-serif);
    letter-spacing: var(--tr-h3, -.006em);
    color: var(--ink, #14171a);
}
.x262-cardrow__title a {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease;
}
.x262-cardrow:hover .x262-cardrow__title a { color: var(--accent-ink, #15703a); }

/* ---- Leerzustand ----------------------------------------- */
.x262-card-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: 900px) {
    .x262-card-grid[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .x262-card-grid,
    .x262-card-grid[data-columns="2"],
    .x262-card-grid[data-columns="3"],
    .x262-card-grid[data-columns="4"] { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Zusatzzeile: Kategorie + Datum (opt-in) --------------
   Nutzt dieselben Klassen wie die kompakte Archivliste
   (x262-cardrow__cat / __date), damit es kein zweites Muster
   fuer denselben Zweck gibt. */
.x262-card__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .375rem;
}

/* ---- Fuss: Autor + Kommentarzahl (opt-in) ------------------
   Zeigt, wie eine Karte mit Autor und Diskussion aussaehe —
   fuer die eine Demo-Karte, die das zeigen soll. */
.x262-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .875rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border-soft, #eceae5);
}

.x262-card__byline {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.x262-card__avatar {
    flex: none;
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--border-soft, #eceae5);
}
.x262-card__avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.x262-card__byline-name {
    font-size: var(--fs-meta, 1rem);
    font-weight: var(--w-heading, 500);
    color: var(--text-2, #3d4247);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.x262-card__byline-name:hover { color: var(--brand-strong, #15703a); }

/* ---- Variant: goods — the catalogue --------------------------------------
   Product photos are portrait (a jacket, a bottle) and must be seen whole:
   shown uncropped on a light ground, like a shop tile. The price under the
   sentence, in the heading weight. */
.x262-card-grid--goods .x262-card__media {
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    background: var(--surface, #fff);
}
.x262-card-grid--goods .x262-card__media > img { object-fit: contain; padding: 1rem; }
.x262-card__price {
    margin: .25rem 0 0;
    font-weight: var(--w-heading, 500);
    color: var(--ink, #14171a);
}

/* ---- Compact row: optional sentence under the title (field_04) ---------- */
.x262-cardrow__text {
    margin: .125rem 0 0;
    font-size: var(--fs-small, 1rem);
    color: var(--text-2, #3d4247);
}