/* ===================================================== */
/* 💀 SKELETON BASE                                      */
/* ===================================================== */

.skeleton {
    opacity: 0.7;
    pointer-events: none;
}

/* shimmer effect */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* base */
.skeleton-avatar,
.skeleton-line,
.skeleton-image,
.skeleton-btn {
    background: linear-gradient(
        90deg,
        #2a2a2a 25%,
        #3a3a3a 37%,
        #2a2a2a 63%
    );
    background-size: 400% 100%;
    animation: skeleton-loading 1.2s ease-in-out infinite;
    border-radius: 8px;
}

/* avatar */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* text lines */
.skeleton-line {
    height: 12px;
    margin-bottom: 8px;
}

.skeleton-line--short {
    width: 60%;
}

.skeleton-line--tiny {
    width: 40%;
}

/* image */
.skeleton-image {
    width: 100%;
    height: 220px;
    margin: 12px 0;
    border-radius: 12px;
}

/* buttons */
.skeleton-btn {
    width: 40px;
    height: 20px;
    border-radius: 6px;
}






/* =====================================================
   🎬 GRID DE FILMES
===================================================== */

.feed-trending-movies__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* =====================================================
   🎞️ CARD DO FILME
===================================================== */

.feed-trending-movie-card {
    position: relative;
    display: block;

    width: 100%;
    aspect-ratio: 2 / 3;

    border-radius: 12px;
    overflow: hidden;

    background: #151515;
    text-decoration: none;

    -webkit-tap-highlight-color: transparent;
}

/* Poster */
.feed-trending-movie-card__poster {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}

/* Feedback mobile ao tocar */
.feed-trending-movie-card:active {
    transform: scale(0.98);
}

/* =====================================================
   🎭 OVERLAY
===================================================== */

.feed-trending-movie-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 42%;

    background: linear-gradient(
        180deg,
        rgba(15, 15, 15, 0) 0%,
        rgba(15, 15, 15, 0.78) 100%
    );

    pointer-events: none;
}

/* =====================================================
   ⭐ AVALIAÇÃO GERAL
===================================================== */

.feed-trending-movie-card__rating {
    position: absolute;
    bottom: 8px;
    right: 10px;

    display: flex;
    align-items: center;
    gap: 4px;

    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

.feed-trending-movie-card__rating-icon {
    width: 14px;
    height: 14px;
    display: block;

    filter: invert(72%) sepia(93%) saturate(1740%) hue-rotate(360deg) brightness(104%) contrast(104%);
}

/* =====================================================
   📭 EMPTY STATE
===================================================== */

.feed-trending-movies .empty-state {
    margin-top: 32px;
}

/* =====================================================
   💻 DESKTOP / TELAS MAIORES
===================================================== */

@media (min-width: 768px) {
    .feed-trending-movies {
        padding: 18px 16px 100px;
    }

    .feed-trending-movies__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}