﻿/**
 * 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;
}
.sksb-card-img-wrap .wp-block-post-featured-image {
    margin: 0 !important;
}
.sksb-card-img-wrap .wp-block-post-featured-image img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !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 ----------------------------------------------- */
/* Festes 120×80 px Thumbnail mit Cover-Crop.
 * Gehört in dsb-archive.css (is_search() lädt archive, nicht single).
 * X-59 Fallback-Banner sind 1200×400 (3:1): bei cover/120×80 zeigt WP den
 * zentrierten Horizontal-Ausschnitt — sieht besser aus als ein 120×40-Streifen. */
.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: 80px !important;
    overflow: hidden !important;
    border-radius: 6px !important;
}
.sk-search-thumb img,
.sk-search-thumb .wp-block-post-featured-image img {
    width: 120px !important;
    height: 80px !important;
    object-fit: cover !important;   /* zentrierter Ausschnitt — konsistentes Format */
    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;
}
