/*
 * ریسپانسیو مشترک صفحات فیلم، سریال، ایرانی، انیمیشن
 * تم هماهنگ با صفحه اصلی (index.html)
 */

/* ===========================
   تم رنگی — همخوانی با صفحه اصلی
   =========================== */
body {
    background-color: #222222;
    color: #f5f5f5;
}

/* ===========================
   Hero Section — همان ارتفاع صفحه اصلی
   =========================== */
.hero-section-container {
    position: relative;
    z-index: 10;
    height: 65vh !important;
}
@media (min-width: 480px)  { .hero-section-container { height: 70vh !important; } }
@media (min-width: 640px)  { .hero-section-container { height: 75vh !important; } }
@media (min-width: 768px)  { .hero-section-container { height: 82vh !important; } }
@media (min-width: 1024px) { .hero-section-container { height: 88vh !important; } }
@media (min-width: 1280px) { .hero-section-container { height: 92vh !important; } }

/* اطمینان از پوشش کامل تصویر اسلایدر — مستقل از Tailwind CDN */
.hero-slide {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ===========================
   most-viewed — همان صفحه اصلی
   =========================== */
.most-viewed-container {
    position: relative;
    margin-top: -60px;
    z-index: 25;
    padding: 0;
}
@media (max-width: 1024px) { .most-viewed-container { margin-top: -50px; } }
@media (max-width: 768px)  { .most-viewed-container { margin-top: -40px; } }
@media (max-width: 600px)  { .most-viewed-container { margin-top: 1rem; } }

/* ارتفاع تصویر — ثابت 200px در همه سایزها، مثل صفحه اصلی */
.most-viewed-image {
    width: 100%;
    height: 200px !important;
    object-fit: cover;
    display: block;
}

.most-viewed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1024px) { .most-viewed-grid { grid-template-columns: repeat(4,1fr); gap: 12px; } }
@media (max-width: 768px)  {
    .most-viewed-grid { grid-template-columns: repeat(4,1fr); gap: 10px; }
    .glass-card-title  { font-size: 0.65rem; }
}
@media (max-width: 600px)  {
    .most-viewed-grid-wrapper { padding: 0 1.5rem; }
    .most-viewed-grid-scroller { overflow: visible; }
    .most-viewed-grid {
        display: flex !important;
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 10px;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .most-viewed-grid::-webkit-scrollbar { display: none; }
    .most-viewed-grid .most-viewed-item {
        flex-shrink: 0;
        width: calc(100% - 55px);
        scroll-snap-align: start;
    }
}
@media (max-width: 380px) {
    .most-viewed-grid .most-viewed-item { width: calc(100% - 45px); }
}

/* ===========================
   filter-section موبایل
   =========================== */
@media (max-width: 767px) {
    .filter-section {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    .filter-section .container > .flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    .filter-section .flex.items-center.gap-2 {
        flex-wrap: wrap;
        gap: 0.4rem !important;
    }
    #filter-menu .filter-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        overflow-x: unset;
        flex-wrap: unset;
    }
    #filter-menu .filter-row .filter-group:last-child {
        grid-column: 1 / -1;
    }
    #filter-menu .filter-button { width: 100%; }
}
@media (max-width: 360px) {
    #filter-menu .filter-row { grid-template-columns: 1fr; }
}

/* ===========================
   movies-grid کارت‌ها — عرض responsive
   =========================== */
.movies-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr);
    gap: 1.25rem;
}

@media (max-width: 1536px) { .movies-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1280px) { .movies-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1024px) { .movies-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
@media (max-width: 768px)  { .movies-grid { grid-template-columns: repeat(3, 1fr); gap: 0.875rem; } }
@media (max-width: 600px)  { .movies-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } }
@media (max-width: 380px)  { .movies-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } }

/* کارت‌ها داخل grid — عرض کامل */
.movies-grid .movie-card,
.movies-grid > div {
    width: 100% !important;
    min-width: 0 !important;
}

/* ===========================
   ارتفاع تصویر کارت‌ها در grid — مثل search-modal.css
   =========================== */
.movies-grid .movie-card .relative img,
.movies-grid .movie-card img {
    height: 17rem;
    width: 100%;
    object-fit: cover;
}
@media (max-width: 1280px) { .movies-grid .movie-card .relative img, .movies-grid .movie-card img { height: 16rem; } }
@media (max-width: 1024px) { .movies-grid .movie-card .relative img, .movies-grid .movie-card img { height: 15rem; } }
@media (max-width: 768px)  { .movies-grid .movie-card .relative img, .movies-grid .movie-card img { height: 14rem; } }

/* موبایل — ۲ ستون، مثل صفحه اصلی */
@media (max-width: 600px) {
    .movies-grid .movie-card .relative img,
    .movies-grid .movie-card img { height: 14rem; }
}
@media (max-width: 380px) {
    .movies-grid .movie-card .relative img,
    .movies-grid .movie-card img { height: 12.5rem; }
}

/* عنوان کارت موبایل */
@media (max-width: 600px) {
    .movies-grid .movie-card h3,
    .movies-grid .movie-title-card { font-size: 0.75rem !important; }
}

/* ===========================
   hero-gradient و hero-mobile-bottom
   =========================== */
.hero-gradient {
    background: linear-gradient(
        to top,
        #222222 15%,
        rgba(34,34,34,0.7) 55%,
        rgba(34,34,34,0.1) 100%
    );
}

/* دکمه تماشا موبایل */
.hero-mobile-bottom { display: none; }
@media (max-width: 640px) {
    .hero-text-desktop  { display: none !important; }
    .hero-mobile-bottom {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        bottom: 14px;
        left: 0; right: 0;
        padding: 0 1rem;
        gap: 6px;
        z-index: 25;
    }
    .hero-mobile-title {
        font-size: 1rem;
        font-weight: 800;
        color: white;
        text-shadow: 0 2px 8px rgba(0,0,0,0.8);
        text-align: right;
        margin: 0;
    }
    .play-btn-mobile {
        width: 100%;
        justify-content: center;
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
    }
}

/* ===========================
   dots اسلایدر
   =========================== */
.hero-dots-inside {
    bottom: 72px;
}
@media (max-width: 1024px) { .hero-dots-inside { bottom: 62px; } }
@media (max-width: 768px)  { .hero-dots-inside { bottom: 52px; } }

.hero-dots-outside {
    display: none !important;
    padding: 10px 0 6px;
    justify-content: center;
    gap: 6px;
}
@media (max-width: 600px) {
    .hero-dots-inside   { display: none !important; }
    .hero-dots-outside  { display: flex !important; }
}

/* ===========================
   Container اصلی صفحه
   =========================== */
@media (max-width: 768px) {
    .container.mx-auto { padding-left: 0.75rem; padding-right: 0.75rem; }
    main.pt-16 { padding-top: 3.5rem; }
}
@media (max-width: 480px) {
    .container.mx-auto { padding-left: 0.6rem; padding-right: 0.6rem; }
    main.pt-16 { padding-top: 3.25rem; }
}

/* ===========================
   صفحه‌بندی (pagination)
   =========================== */
@media (max-width: 480px) {
    .pagination-container { gap: 0.3rem; }
    .pagination-btn { min-width: 34px; height: 34px; font-size: 0.8rem; }
}

/* ===========================
   Filter section sort + filter bar موبایل
   =========================== */
@media (max-width: 600px) {
    #sort-toggle-btn { padding: 0.5rem 0.75rem; font-size: 0.8rem; }
    #filter-toggle-btn { padding: 0.5rem 0.75rem; font-size: 0.8rem; }
}