/* ============================================
   IMAGE STYLES — Hockey Bet Tips
   ============================================ */

.hero-image {
    width: 100%;
    margin: var(--space-lg, 2.5rem) 0 var(--space-xl, 4rem);
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-md, 0 4px 16px rgba(11,34,60,.08));
    transition: transform 0.3s cubic-bezier(.22,.61,.36,1),
                box-shadow 0.3s cubic-bezier(.22,.61,.36,1);
}

.hero-image:hover img {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(11,34,60,.10));
}

.article-image {
    margin: var(--space-lg, 2.5rem) 0;
}

.article-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: var(--shadow-md, 0 4px 16px rgba(11,34,60,.08));
    transition: transform 0.3s cubic-bezier(.22,.61,.36,1),
                box-shadow 0.3s cubic-bezier(.22,.61,.36,1);
}

.article-image:hover img {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(11,34,60,.10));
}

/* Responsive: full-bleed hero on small screens */
@media (max-width: 32rem) {
    .hero-image {
        margin-left: calc(-1 * var(--space-sm, 1rem));
        margin-right: calc(-1 * var(--space-sm, 1rem));
    }

    .hero-image img {
        border-radius: 0;
    }
}

/* Wider breakout on medium+ screens */
@media (min-width: 52rem) {
    .hero-image {
        margin-left: -3rem;
        margin-right: -3rem;
    }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .hero-image img,
    .article-image img {
        opacity: 0.92;
        transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hero-image:hover img,
    .article-image:hover img {
        opacity: 1;
    }
}

/* Print: no shadows, no hover effects */
@media print {
    .hero-image img,
    .article-image img {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}