/**
 * FIX: Aspect Ratio Natural das Imagens
 * - Ícones: sempre 1:1 (quadrados)
 * - Screenshots: respeitar orientação original (horizontal ou vertical)
 */

/* ========================================
   ÍCONES DE APPS - SEMPRE 1:1 (QUADRADOS)
   ======================================== */

/* Ícones mantêm 1:1 com object-fit: cover */
.card-image-wrapper {
    aspect-ratio: 1/1 !important;
}

.app-card-icon {
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;
}

.hw-app-icon {
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
}

/* Ícones pequenos em widgets e autocomplete - 1:1 */
.dw-widget-icon,
.hw-rank-icon,
.hw-ac-icon,
.sh-ac-icon,
.detail-related-icon {
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;
}

/* ========================================
   SCREENSHOTS - ORIENTAÇÃO ORIGINAL
   ======================================== */

/* Remove altura fixa e permite orientação natural */
.screenshots-section .screenshot-item {
    width: auto !important;
    height: auto !important;
    max-height: 400px !important;
    flex: 0 0 auto !important;
}

/* Screenshots respeitam proporção original */
.screenshots-section .screenshot-item img,
.screenshot-item img {
    width: auto !important;
    height: 100% !important;
    max-height: 400px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    background: #f8f9fa !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Container de screenshots com scroll horizontal */
.screenshots-container {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 1rem !important;
    align-items: center !important;
}

/* Lightbox - imagem em tamanho real */
#screenshotLightbox img,
#lbImg {
    max-width: 90vw !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Responsivo - ajusta altura máxima em mobile */
@media (max-width: 768px) {
    .screenshots-section .screenshot-item {
        max-height: 300px !important;
    }
    
    .screenshots-section .screenshot-item img {
        max-height: 300px !important;
    }
}

@media (min-width: 1024px) {
    .screenshots-section .screenshot-item {
        max-height: 450px !important;
    }
    
    .screenshots-section .screenshot-item img {
        max-height: 450px !important;
    }
}

@media (min-width: 1280px) {
    .screenshots-section .screenshot-item {
        max-height: 500px !important;
    }
    
    .screenshots-section .screenshot-item img {
        max-height: 500px !important;
    }
}

/* ========================================
   IMAGENS DE ARTIGOS - 16:9 SEM CORTAR
   ======================================== */

/* Imagens de artigos - manter proporção 16:9 mas sem cortar */
.home-article-card img,
.art-similar__card img,
.dw-article-img img,
.hw-article-img img {
    object-fit: contain !important;
    background: #f8f9fa;
}

/* Placeholders de artigos mantêm 16:9 */
.home-article-placeholder,
.art-similar__img-placeholder {
    aspect-ratio: 16/9 !important;
}

/* Cards de blog - manter proporção sem cortar */
.bl-card__img-wrap img {
    object-fit: contain !important;
    background: #f8f9fa;
}

/* ========================================
   BACKGROUNDS DECORATIVOS
   ======================================== */

/* Background do hero pode continuar com cover (é decorativo) */
.slide-background-img {
    object-fit: cover !important;
}