﻿/**
 * ClubPress — dsb-archive.css
 * Post card styles for archive / home / search / taxonomy pages.
 * Loaded conditionally: is_archive() || is_home() || is_search()
 */
/* ================================================================
   19. X-82: BEITRAGSKARTE REDESIGN
   Cover-Badge (sk_content_type) + Vollkarte klickbar + Hover-Lift
   ================================================================ */

/* Card-Wrapper: Positions-Anker, Rahmen, Übergang */
.sksb-post-card {
    position: relative;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--wp--preset--color--surface);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* Hover-Lift */
.sksb-post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
}

/* Focus-within: sichtbare Outline für A11y */
.sksb-post-card:focus-within {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* Vollkarte klickbar via Title-Link-Pseudoelement */
.sksb-post-card .wp-block-post-title a {
    text-decoration: none;
    color: inherit;
}
.sksb-post-card .wp-block-post-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Bild-Wrapper: Positions-Anker für Badge */
.sksb-card-img-wrap {
    position: relative !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
    background-color: transparent; /* SKT-7: Letterbox-Rand zeigt den Kartenhintergrund (.sksb-post-card) durch — automatisch korrekt in Light + Dark */
}
.sksb-card-img-wrap .wp-block-post-featured-image {
    margin: 0 !important;
}
/* SKT-8 12.09.2026 geprueft, UNVERAENDERT: gerenderte Breite 274 px (Startseite)
   bis 306 px (Archiv/Taxonomie), am 375-px-Handy 210 px — durchgaengig ueber der
   120-px-Schwelle, also scale-down. Das ist die PO-Beanstandung vom 02.09.
   ("Beitragsbild wird auf der Startseite abgeschnitten"); hier darf nie wieder
   cover stehen. Hausregel: dsb-theme.css, Abschnitt 6. */
.sksb-card-img-wrap .wp-block-post-featured-image img {
    width: 100% !important;
    height: 160px !important;
    object-fit: scale-down !important;  /* SKT-7: nie ueber Eigengroesse vergroessern + nie Beschnitt — nur verkleinern bis es ins Band passt */
    object-position: center !important;
    display: block;
}

/* Beitragsart-Pille: Overlay oben links auf dem Cover */
.sksb-card-badge {
    position: absolute !important;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
}
.sksb-card-badge a,
.sksb-card-badge span {
    display: inline-block;
    background: rgba(255,255,255,.95);
    color: var(--wp--preset--color--primary) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none !important;
    pointer-events: none; /* Karten-Link übernimmt Navigation */
}

/* Card-Body wächst auf verfügbare Höhe */
.sksb-card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column;
    margin: 0 !important;
}
.sksb-card-body .wp-block-post-title {
    margin-bottom: 0.2rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}
.sksb-card-body .wp-block-post-date {
    font-size: 0.75rem !important;
    color: var(--wp--preset--color--text-light) !important;
    margin-bottom: 0.4rem !important;
}

/* Teaser: max. 2 Zeilen */
.sksb-post-card .wp-block-post-excerpt {
    flex: 1;
}
.sksb-post-card .wp-block-post-excerpt p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 0.82rem;
}

/* Weiterlesen-Link auf Card ausblenden (redundant) */
.sksb-post-card .wp-block-read-more {
    display: none !important;
}

/* Sub-Tags (category-Terms) auf Card ausblenden; Badge bleibt */
.sksb-post-card .wp-block-post-terms:not(.sksb-card-badge) {
    display: none !important;
}


/* Dark Mode */
body.sk-dark .sksb-post-card {
    background: var(--sk-dm-surface-alt) !important;
    border-color: var(--sk-dm-border-alt) !important;
}
body.sk-dark .sksb-card-badge a,
body.sk-dark .sksb-card-badge span {
    background: rgba(30,30,30,.92);
    color: var(--wp--preset--color--primary-vivid) !important;
}
/* Card-Texte: WP-Core setzt has-primary-color (#1a4012 = Dunkelgrün) auf Titel-Link —
   auf dunklem Card-Hintergrund kaum lesbar. Explizite Dark-Mode-Overrides nötig. */
body.sk-dark .sksb-card-body .wp-block-post-title a {
    color: var(--sk-dm-text) !important;
}
body.sk-dark .sksb-card-body .wp-block-post-title a:hover {
    color: var(--wp--preset--color--gold, #c8a951) !important;
}
body.sk-dark .sksb-card-body .wp-block-post-date {
    color: var(--sk-dm-text-dim) !important;
}
body.sk-dark .sksb-post-card .wp-block-post-excerpt p {
    color: var(--sk-dm-text-muted) !important;
}

/* Mobile: 1-spaltig, Cover etwas höher */
@media (max-width: 599px) {
    .sksb-card-img-wrap .wp-block-post-featured-image img {
        height: 180px !important;
    }
}

/* --- Search-Ergebnis-Thumbnail ----------------------------------------------- */
/* SKT-8 (12.09.2026): 120x60-Box, object-fit:COVER, feste Hoehe, !important.
 * Hausregel und ihre Herleitung stehen zentral in dsb-theme.css, Abschnitt 6
 * ("HAUSREGEL BEITRAGSBILDER"). Hier nur der Sonderfall.
 *
 * WARUM DIESE KACHEL FUELLT UND DIE DANEBEN NICHT:
 * Nicht die Rubrik entscheidet, sondern die gerenderte Breite. Diese Kachel ist
 * 120 px breit — Desktop wie 375 px, die Breite ist fest — und liegt damit genau
 * auf der Schwelle, also im cover-Ast. Die Loop-Karten weiter oben (274-306 px)
 * und der Hero (780 px) liegen darueber und bleiben bei scale-down.
 *
 * WAS COVER HIER BESSER MACHT (live gemessen 12.09. vorher/nachher):
 *   /?s=Schuetzen    3:1-Banner  gemalt 120x40 in der 60er-Box (67 % Fuellung,
 *                    20 px Leerraum)               -> jetzt 120x60, randlos
 *                    3:2-Foto    gemalt  90x60 (75 %)  -> jetzt 120x60
 *   /?s=Bildreportage  Hochformat 225x300 gemalt 45x60 — ein 45 px schmaler
 *                    Streifen in einer 120 px breiten Kachel, 38 % Fuellung
 *                                                  -> jetzt 120x60, randlos
 * Genau dieser Leerraum war die PO-Beanstandung vom 12.09. ("die Bilder in der
 * Suche sind zu klein"). Die Suche sieht damit aus wie die Liste auf
 * /aktuelles/ (.sk-disziplin-thumb, 80x58, cover) — der Vergleich, den der PO
 * selbst gezogen hat.
 *
 * object-position: center top, nicht center — uebernommen von /aktuelles/.
 * Wirkt ausschliesslich bei Bildern hoeher als 2:1: dort wird oben beschnitten
 * statt mittig, bei Personen- und Gruppenfotos bleiben so die Koepfe im Bild.
 * Bei 3:1-Bannern fuellt die Hoehe die Box exakt aus, da aendert der Wert nichts.
 *
 * KEIN RUECKBAU DER BOX. Die 120x60 stammen aus SKT-7 N2 (PO-Entscheid 12.09.
 * "umstellen auf 120x60") und bleiben. Nur der Fit wechselt.
 *
 * ACHTUNG — Hoehe MUSS fest bleiben, nicht auf height:auto + max-height umbauen:
 * WP 6.7+ haengt lazy geladenen Bildern sizes="auto, ..." an (12.09. gemessen:
 * 5 von 8 Suchtreffern). Bei sizes=auto haengt die intrinsische Groesse von der
 * Layoutbreite ab; mit height:auto entsteht eine Zirkularitaet, die Chrome nicht
 * korrekt aufloest. Am 01.09. mit height:auto+max-height:80px live gemessen:
 * die 3 Bilder ohne sizes=auto wurden korrekt 120x40, die 4 mit sizes=auto
 * blieben bei 120x80 haengen (uneinheitliche Kachelhoehen bei identischem
 * Bildinhalt); mit max-height:none wuchs so ein Bild auf 120x1500 an. Feste
 * Hoehe ist deterministisch — unter cover erst recht, weil die gemalte Flaeche
 * dann gar nicht mehr vom Seitenverhaeltnis der Quelle abhaengt.
 *
 * !important ist hier Pflicht, nicht Kosmetik: WP setzt width/height/object-fit
 * INLINE am <img> (roh gemessen 12.09.:
 * style="border-radius:6px;height:auto;width:120px;object-fit:cover;").
 * Ein Inline-Style schlaegt jede Autoren-Regel ohne !important. Die frueher hier
 * vermerkte Zweitursache "dsb-theme.css setzt generisch cover" ist geprueft und
 * trifft nicht zu — jene Regel gewinnt nirgends; Details in dsb-theme.css.
 *
 * Der Fond bleibt transparent. Unter cover ist er normalerweise verdeckt; er
 * greift nur noch, solange ein Bild nicht geladen ist oder fehlt. */
.sk-search-thumb,
.sk-search-thumb .wp-block-post-featured-image {
    flex-shrink: 0 !important;
    margin-left: 1rem;
    align-self: flex-start;
    width: 120px !important;
    height: 60px !important;        /* SKT-7 N2: war 80px. Box bleibt, siehe oben */
    overflow: hidden !important;
    border-radius: 6px !important;
    background-color: transparent;  /* SKT-7 N1: Zeilenhintergrund scheint durch (Light+Dark) */
}
.sk-search-thumb img,
.sk-search-thumb .wp-block-post-featured-image img {
    width: 120px !important;
    height: 60px !important;             /* muss mit der Box oben uebereinstimmen */
    object-fit: cover !important;        /* SKT-8: war scale-down. 120px = Schwelle -> fuellen (Hausregel, dsb-theme.css Abschnitt 6) */
    object-position: center top !important; /* SKT-8: war center. Wie /aktuelles/ — Koepfe bleiben bei Hochformaten sichtbar */
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    display: block;
}


/* PDF-Chips ueber Overlay-Link heben (Title-Link ::after hat z-index:1) */
.sksb-post-card .sk-pdf-chips,
.sksb-post-card .sk-pdf-chips a {
    position: relative;
    z-index: 2;
}
