/* ============================================
   HERO IMAGE
   ============================================ */
.hero-image {
    width: 100%;
    margin: 0 0 2rem;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    box-shadow:
        0 4px 16px rgba(12, 26, 46, .06),
        0 1px 3px rgba(12, 26, 46, .12);
}

/* ============================================
   ARTICLE IMAGES
   ============================================ */
.article-image {
    margin: 2rem 0;
    text-align: center;
    border-radius: 8px;
    overflow: hidden;
}

.article-image img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    box-shadow:
        0 4px 16px rgba(12, 26, 46, .06),
        0 1px 3px rgba(12, 26, 46, .12);
    transition: box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.article-image img:hover {
    box-shadow:
        0 8px 30px rgba(12, 26, 46, .12),
        0 2px 6px rgba(12, 26, 46, .06);
}

/* ============================================
   RESPONSIVE
   ============================================ */




/* ============================================
   DARK THEME ADJUSTMENTS
   ============================================ */
@media (prefers-color-scheme: dark) {
    .hero-image img,
    .article-image img {
        box-shadow:
            0 4px 16px rgba(0, 0, 0, .20),
            0 1px 3px rgba(0, 0, 0, .40);
    }

    .article-image img:hover {
        box-shadow:
            0 8px 30px rgba(0, 0, 0, .40),
            0 2px 6px rgba(0, 0, 0, .20);
    }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    .hero-image,
    .article-image {
        break-inside: avoid;
        box-shadow: none;
    }

    .hero-image img,
    .article-image img {
        box-shadow: none;
    }
}