/* [bro_blog]: Blogartikel als Kartenraster (inc/blog.php).
   Farben und Schriften aus den globalen Breakdance-Einstellungen,
   Umbrüche an den Breakdance-Breakpoints (Tablet 1023px, Handy 767px). */
.bro-blog {
    --bro-blog-accent: var(--bde-brand-primary-color, #2563eb);
    --bro-blog-heading: var(--bde-headings-color, #1a1a1a);
    --bro-blog-text: var(--bde-body-text-color, #444);
    --bro-blog-bg: var(--bde-background-color, #fff);

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: stretch;
    width: 100%;
}

.bro-blog-card {
    position: relative;
    /* Gleich hoch in einer Reihe, auch wenn Theme oder Breakdance die Höhe anders setzen. */
    align-self: stretch;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bro-blog-bg);
    border: 1px solid color-mix(in srgb, var(--bro-blog-text) 14%, transparent);
    border-radius: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bro-blog-card:hover,
.bro-blog-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--bro-blog-heading) 14%, transparent);
}

/* Bild in voller Breite, Höhe aus dem Seitenverhältnis: nichts wird abgeschnitten. */
.bro-blog-image img {
    display: block;
    width: 100%;
    height: auto;
}

.bro-blog-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    /* Breakdance-Sections zentrieren oft per text-align, die Karte bleibt linksbündig. */
    text-align: left;
}

.bro-blog-date {
    font-family: var(--bde-body-font-family, inherit);
    font-size: 13px;
    color: var(--bro-blog-text);
    opacity: 0.75;
}

.bro-blog-title {
    margin: 0;
    font-family: var(--bde-heading-font-family, inherit);
    font-size: 20px;
    line-height: 1.3;
    color: var(--bro-blog-heading);
}

.bro-blog-title a {
    color: inherit;
    text-decoration: none;
}

/* Ganze Karte klickbar: der Titel-Link deckt die Karte ab. */
.bro-blog-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.bro-blog-title a:focus-visible {
    outline: none;
}

.bro-blog-card:focus-within {
    outline: 2px solid var(--bro-blog-accent);
    outline-offset: 2px;
}

.bro-blog-excerpt {
    margin: 0;
    font-family: var(--bde-body-font-family, inherit);
    font-size: 15px;
    line-height: 1.6;
    color: var(--bro-blog-text);
}

.bro-blog-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 8px;
    font-family: var(--bde-body-font-family, inherit);
    font-size: 15px;
    font-weight: 600;
    color: var(--bro-blog-accent);
}

.bro-blog-button svg {
    transition: transform 0.25s ease;
}

.bro-blog-card:hover .bro-blog-button svg {
    transform: translateX(4px);
}

@media (max-width: 1023px) {
    .bro-blog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .bro-blog {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bro-blog-card,
    .bro-blog-button svg {
        transition: none;
    }
    .bro-blog-card:hover,
    .bro-blog-card:focus-within {
        transform: none;
    }
}