/* Image Placeholders (ahora son imágenes reales)
--------------------------------------------- */

.image-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 8px;
    transition: all 0.3s ease;
    opacity: 0.9;
}

/* Efecto sutil para distinguir imagen por defecto */
.image-placeholder:hover {
    opacity: 1;
    transform: scale(1.02);
}

/* Optimización de imágenes reales (incluyendo picture elements) */
.playa-card-image img,
.playa-card-image picture img,
.post-card-image img,
.post-card-image picture img,
.featured-playa-img,
.recent-post-img,
.widget-thumbnail,
picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

/* Picture elements styling */
picture {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Asegurar que las imágenes dentro de picture mantengan aspect ratio */
picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Optimización para navegadores que soportan formatos modernos */
.webp-support picture source[type="image/webp"],
.avif-support picture source[type="image/avif"] {
    display: block;
}

/* Fallback para navegadores sin soporte */
.no-webp picture source[type="image/webp"],
.no-avif picture source[type="image/avif"] {
    display: none;
}

/* Efectos hover para imágenes (incluyendo picture) */
.playa-grid-item:hover .playa-card-image img,
.playa-grid-item:hover .playa-card-image picture img,
.post-card:hover .post-card-image img,
.post-card:hover .post-card-image picture img {
    transform: scale(1.05);
}

/* Container fixes para evitar overflow */
.playa-grid-item-image,
.post-card__image {
    overflow: hidden;
    border-radius: 8px;
    position: relative;
}

.playa-grid-item-image {
    height: 300px;
    width: 100%;
}

.post-card__image {
    height: 200px;
    width: 100%;
}

/* Widget thumbnails específicos */
.featured-playa-thumb,
.recent-post-thumb {
    width: 80px;
    height: 60px;
    overflow: hidden;
    border-radius: 6px;
    flex-shrink: 0;
}

.featured-playa-thumb img,
.recent-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Responsive */
@media (max-width: 768px) {
    .playa-grid-item-image {
        height: 250px;
    }
    
    .post-card__image {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .playa-grid-item-image {
        height: 200px;
    }
    
    .post-card__image {
        height: 160px;
    }
    
    .featured-playa-thumb,
    .recent-post-thumb {
        width: 60px;
        height: 45px;
    }
}