/* ========================================
   Images Styles - SetPoint
   ======================================== */

/* Article Images */
article figure {
    margin: 2rem auto;
    max-width: 100%;
}

article figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.07));
}

article figcaption {
    text-align: center;
    font-size: var(--font-small, 0.875rem);
    color: var(--text-muted, #717171);
    margin-top: var(--space-sm, 0.5rem);
    padding: 0 var(--space-md, 1rem);
    line-height: 1.5;
}

/* Hero Image Specific */
[data-content="hero"] figure {
    margin: 0 auto var(--space-xl, 2rem) auto;
}

[data-content="hero"] figure img {
    width: 100%;
    max-height: 630px;
    object-fit: cover;
    border-radius: var(--radius-lg, 12px);
}

/* Responsive Images */
@media (max-width: 768px) {
    article figure {
        margin: 1.5rem -1rem;
    }

    article figure img {
        border-radius: 0;
    }

    article figcaption {
        padding: 0 1rem;
    }

    [data-content="hero"] figure {
        margin: 0 -1rem var(--space-lg, 1.5rem) -1rem;
    }

    [data-content="hero"] figure img {
        border-radius: 0;
        max-height: 400px;
    }
}

@media (max-width: 480px) {
    [data-content="hero"] figure img {
        max-height: 300px;
    }
}