/* ===========================================
   Estilos de Imágenes para Artículos MMA/UFC
   =========================================== */

/* Hero Image - Imagen principal después del H1 */
.hero-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: var(--radius-lg);
   
    margin: var(--space-lg) 0 var(--space-xl) 0;
    display: block;
}

/* Article Images - Imágenes dentro del contenido */
.article-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
   
    margin: var(--space-lg) 0;
    display: block;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.article-image:hover {
    transform: scale(1.01);

}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-image {
        max-height: 350px;
        border-radius: var(--radius-md);
        margin: var(--space-md) 0 var(--space-lg) 0;
    }
    
    .article-image {
        border-radius: var(--radius-sm);
        margin: var(--space-md) 0;
    }
}

@media (max-width: 480px) {
    .hero-image {
        max-height: 280px;
        border-radius: var(--radius-sm);
    }
}

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