/* ============================================================
   IMAGES STYLES — Hockey Betting Guide
   ============================================================ */

.hero-image {
    width: 100%;
    max-width: var(--wide-width, 90ch);
    height: auto;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.30));
    margin: 0 0 2.5rem;
    display: block;
    transition: box-shadow var(--duration-normal, 300ms) var(--ease-out, ease);
}

.hero-image:hover {
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.35));
}

div.article-image {
    margin: 2rem 0;
    text-align: center;
}

div.article-image img.article-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.30));
    display: block;
    transition: box-shadow var(--duration-normal, 300ms) var(--ease-out, ease);
}

div.article-image img.article-image:hover {
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.35));
}

@media (min-width: 48rem) {
    .hero-image {
        margin-left: calc(-1 * var(--side-padding, 3rem));
        margin-right: calc(-1 * var(--side-padding, 3rem));
        width: calc(100% + var(--side-padding, 3rem) * 2);
        max-width: none;
    }
}

@media (max-width: 30rem) {
    .hero-image {
        border-radius: var(--radius-md, 10px);
        margin-bottom: 1.5rem;
    }

    div.article-image {
        margin: 1.5rem 0;
    }

    div.article-image img.article-image {
        border-radius: var(--radius-sm, 6px);
    }
}

@media print {
    .hero-image,
    div.article-image img.article-image {
        box-shadow: none;
        break-inside: avoid;
    }
}