/* ===== Padronizacao da imagem de capa em 600x500 (6:5) ===== */
/* Vale para todos os temas. Enfileirado depois do CSS do tema. */

/* Imagens diretas — aplica aspect-ratio na propria <img> */
.sc-card-img,
.sc-hero-img,
.sc-sidebar-thumb {
    aspect-ratio: 5 / 5 !important;
    width: 100% !important;
    max-width: 600px;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Wrapper do card no archive — anula height fixa em px dos temas */
.sc-card-img-wrapper {
    aspect-ratio: 5 / 5 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden;
}

/* Checkout — thumb pequena mantendo 6:5 (96x80 mobile, 120x100 desktop) */
.ch-curso-img {
    width: 96px !important;
    height: 80px !important;
    object-fit: cover !important;
    object-position: center !important;
}

@media (min-width: 768px) {
    .ch-curso-img {
        width: 120px !important;
        height: 100px !important;
    }
}

/* ===== Grid de cards padronizado: 3 colunas no desktop (estilo hotcursos-2) ===== */
.sc-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-content: start;
}

@media (max-width: 1024px) {
    .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 540px) {
    .sc-grid { grid-template-columns: 1fr !important; }
}

/* ===== Single curso/review: sidebar 420px (estilo hotcursos-2) =====
   .sc-sidebar-thumb herda max-width:600px desta mesma folha — a imagem
   cresce ate ocupar a sidebar de 420px (quadrada 1:1). */
.sc-single-layout {
    grid-template-columns: 1fr 420px !important;
    gap: 28px !important;
}

@media (max-width: 980px) {
    .sc-single-layout {
        grid-template-columns: 1fr !important;
    }
}