/* =====================================================================
   Curta VOD - Skeleton loading (anti-CLS) for home carousels / cards
   ===================================================================== */

.curta-skeleton {
    margin: 0;
}

.curta-skeleton[hidden] {
    display: none;
}

.curta-skeleton__title {
    width: 30%;
    max-width: 320px;
    min-width: 140px;
    height: 24px;
    border-radius: 4px;
}

.curta-skeleton__row {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;                
    padding: 25px 0;           
    overflow: hidden;          
}


.curta-skeleton__card {
    flex: 0 0 100%;          
    height: 200px;
    border-radius: 4px;
}

@media (min-width: 600px) {
    .curta-skeleton__card { flex-basis: calc((100% - 15px) / 2); } 
}
@media (min-width: 800px) {
    .curta-skeleton__card { flex-basis: calc((100% - 30px) / 3); } 
}
@media (min-width: 1200px) {
    .curta-skeleton__card { flex-basis: calc((100% - 60px) / 5); }   
}
@media (min-width: 1900px) {
    .curta-skeleton__card { flex-basis: calc((100% - 75px) / 6); }   
}
@media (min-width: 2100px) {
    .curta-skeleton__card { flex-basis: calc((100% - 90px) / 7); }  
}

.curta-skeleton__title,
.curta-skeleton__card,
.curta-skeleton__line,
.curta-skeleton__rank {
    position: relative;
    overflow: hidden;
    background-color: var(--skeleton-base, rgba(255, 255, 255, 0.07));
}

.curta-skeleton__title::after,
.curta-skeleton__card::after,
.curta-skeleton__line::after,
.curta-skeleton__rank::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        transparent 0,
        var(--skeleton-shine, rgba(255, 255, 255, 0.16)) 50%,
        transparent 100%
    );
    animation: curta-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes curta-skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.curta-skeleton--top10 .curta-skeleton__row {
    gap: 25px;                
}

.curta-skeleton--top10 .curta-skeleton__item {
    flex: 0 0 100%;         
    position: relative;
    padding-left: 30px;      
    box-sizing: border-box;
}

@media (min-width: 600px) {
    .curta-skeleton--top10 .curta-skeleton__item { flex-basis: calc((100% - 25px) / 2); }  /* 2 */
}
@media (min-width: 900px) {
    .curta-skeleton--top10 .curta-skeleton__item { flex-basis: calc((100% - 50px) / 3); }  /* 3 */
}
@media (min-width: 1200px) {
    .curta-skeleton--top10 .curta-skeleton__item { flex-basis: calc((100% - 75px) / 4); }  /* 4 */
}
@media (min-width: 1900px) {
    .curta-skeleton--top10 .curta-skeleton__item { flex-basis: calc((100% - 100px) / 5); } /* 5 */
}

.curta-skeleton--top10 .curta-skeleton__rank {
    position: absolute;
    left: -10px;
    top: 30px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.curta-skeleton--top10 .curta-skeleton__card {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;       /* proporcao de cartaz -> altura acompanha a largura */
    border-radius: 10px;
}

.curta-skeleton--top10 .curta-skeleton__line {
    height: 14px;
    margin-top: 10px;
    border-radius: 4px;
}

.curta-skeleton--top10 .curta-skeleton__line.is-short {
    width: 60%;
    margin-top: 6px;
    height: 12px;
}

@supports not (aspect-ratio: 1) {
    .curta-skeleton--top10 .curta-skeleton__card {
        height: 270px;
    }
}

@media (max-width: 767px) {
    .curta-skeleton--top10 .curta-skeleton__item {
        padding-left: 22px;
    }

    .curta-skeleton--top10 .curta-skeleton__rank {
        width: 56px;
        height: 56px;
        top: 20px;
        left: -8px;
    }
}

.curta-skeleton--hero {
    width: 100%;
    height: 90vh;
    border-radius: 0;
}

@media (min-width: 600px) {
    .curta-skeleton--hero {
        height: 65vh;
    }
}


.curta-skeleton--hero-brasiliana {
    width: 100%;
    min-height: 350px;
    border-radius: 0;
    background-color: #FDDD46;
}

@media (min-width: 768px)  { .curta-skeleton--hero-brasiliana { min-height: 400px; } }
@media (min-width: 1024px) { .curta-skeleton--hero-brasiliana { min-height: 450px; } }
@media (min-width: 1280px) { .curta-skeleton--hero-brasiliana { min-height: 480px; } }
@media (min-width: 1536px) { .curta-skeleton--hero-brasiliana { min-height: 500px; } }
@media (min-width: 1760px) { .curta-skeleton--hero-brasiliana { min-height: 520px; } }

section.VOD-box-film:has(> #react-details-channell-carousel) {
    min-height: calc(100vh - 80px);
}

@media (prefers-reduced-motion: reduce) {
    .curta-skeleton__title::after,
    .curta-skeleton__card::after,
    .curta-skeleton__line::after,
    .curta-skeleton__rank::after {
        animation: none;
    }
}