/* =============================================
   IMAGES STYLES — Apuestas Fútbol
   ============================================= */

/* Hero image — full-width after H1 */
.hero-image {
    display: block;
    width: calc(100% + var(--sp-md) * 2);
    margin: 0 calc(-1 * var(--sp-md)) var(--sp-lg);
    max-height: 480px;
    object-fit: cover;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 4px 20px var(--clr-shadow-md);
}

/* Article images inside figures */
.article-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px var(--clr-shadow-md);
    transition: transform var(--dur-slow) var(--ease-out),
                box-shadow var(--dur-slow) var(--ease-out);
}

.article-image:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px var(--clr-shadow-md);
}



    main figure {
        margin-left: calc(-1 * var(--sp-lg));
        margin-right: calc(-1 * var(--sp-lg));
    }

    main figure .article-image {
        border-radius: var(--radius-lg);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .article-image {
        transition: none;
    }
}

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