/* ============================================================
   Bilder im Pillar Quotenpott
   Hero figure + Inhalts-Figures mit figcaption
   ============================================================ */

/* Generic figure */
figure.content-figure,
figure.hero-figure {
    margin: 2.5em 0;
    padding: 0;
    background: #141a22;
    border: 1px solid #1f2630;
    border-radius: 8px;
    overflow: hidden;
}

/* Image inside figure */
figure.content-figure img,
figure.hero-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Figcaption */
figure.content-figure figcaption {
    padding: 0.9em 1.1em;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #9aa3ad;
    border-top: 1px solid #1f2630;
    background: #0f1419;
}

/* Hero figure: stronger visual presence, different aspect ratio (1200x630) */
figure.hero-figure {
    margin: 1.6em 0 0 0;
    border: 1px solid #1f2630;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

figure.hero-figure img {
    aspect-ratio: 1200 / 630;
    width: 100%;
    height: auto;
}

/* Within hero section the figure spans the full grid (below the 2-col content/stats) */
.hero .hero-figure {
    grid-column: 1 / -1;
}

/* Adjust hero grid to accept the figure as a third row spanning both columns */
.hero {
    /* keep existing layout; figure flows below hero-grid naturally because it
       sits AFTER the .hero-grid container, not inside it. */
}

/* Mobile: tighter margins, no extra padding overflow */
@media (max-width: 720px) {
    figure.content-figure,
    figure.hero-figure {
        margin: 1.8em 0;
        border-radius: 6px;
    }
    figure.content-figure figcaption {
        padding: 0.75em 0.95em;
        font-size: 0.825rem;
    }
}