/* ==========================================================
   Latest Posts als Karten
   ========================================================== */

.wp-block-latest-posts__list {
    display: grid;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Karte ───────────────────────────────── */
.wp-block-latest-posts__list > li {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto auto 1fr;   /* Datum · Titel · Auszug */

    margin: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    overflow: hidden;

    transition: transform 200ms ease;
}

.wp-block-latest-posts__list > li:hover {
    transform: translateY(-4px);
}

/* ── Bild: linke Spalte über alle Zeilen ─── */
.wp-block-latest-posts__featured-image {
    grid-column: 1;
    grid-row: 1 / -1;
    margin: 0;
    overflow: hidden;
}

.wp-block-latest-posts__featured-image a,
.wp-block-latest-posts__featured-image img {
    display: block;
    width: 100%;
    height: 100%;
}

.wp-block-latest-posts__featured-image img {
    object-fit: cover;
}

/* ── Ohne Bild: Text füllt die ganze Karte ─ */
.wp-block-latest-posts__list > li:not(:has(.wp-block-latest-posts__featured-image)) {
    grid-template-columns: 1fr;
}

.wp-block-latest-posts__list > li:not(:has(.wp-block-latest-posts__featured-image)) > * {
    grid-column: 1;
}

.wp-block-latest-posts__list > li:not(:has(.wp-block-latest-posts__featured-image)) {
    grid-template-columns: 1fr;
    border-left: 3px solid var(--brand);
}

/* ── Alles andere: rechte Spalte ─────────── */
.wp-block-latest-posts__post-date,
.wp-block-latest-posts__post-title,
.wp-block-latest-posts__post-excerpt {
    grid-column: 2;
    padding-inline: 1.5rem;
    margin: 0;
}

/* ── Reihenfolge: Datum, Titel, Auszug ───── */
.wp-block-latest-posts__post-date {
    order: 1;
    padding-block-start: 1.25rem;

    color: var(--text-muted);
    font-family: var(--font-monospace);
    font-size: 0.8rem;
}

.wp-block-latest-posts__post-title {
    order: 2;
    display: block;
    padding-block-start: 0.4rem;

    color: var(--text-muted) !important; 
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;

    transition: color 200ms ease;
}

.wp-block-latest-posts__list > li:hover .wp-block-latest-posts__post-title {
    color: var(--brand) !important;
}

.wp-block-latest-posts__post-title::after {
    content: "\F138";
    font-family: "bootstrap-icons";
    display: inline-block;
    margin-inline-start: 0.35em;
    vertical-align: -0.08em;

    color: var(--brand);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 350ms ease;
}

.wp-block-latest-posts__list > li:hover .wp-block-latest-posts__post-title::after {
    clip-path: inset(0 0 0 0);
}

.wp-block-latest-posts__post-excerpt {
    order: 3;
    padding-block: 0.6rem 1.25rem;

    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Mobil ───────────────────────────────── */
@media (width <= 600px) {
    .wp-block-latest-posts__list > li {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr;
    }

    .wp-block-latest-posts__featured-image {
        grid-column: 1;
        grid-row: auto;
        order: 0;
        height: 190px;
    }

    .wp-block-latest-posts__post-date,
    .wp-block-latest-posts__post-title,
    .wp-block-latest-posts__post-excerpt {
        grid-column: 1;
    }
}