/**
 * Leak Masti - Responsive Stylesheet (responsive.css)
 * Media Queries and Mobile-First Optimizations
 * Version: 1.0.0
 */

/* ==========================================================================
   1. LARGE SCREENS & DESKTOPS (Max-Width: 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
    /* 3-Column Video Card Grid */
    .video-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .header-search {
        max-width: 480px;
    }

    .mega-categories-dropdown {
        width: 420px;
    }

    .ad-header_banner, .ad-before_footer {
        max-width: 728px;
    }
}

/* ==========================================================================
   2. TABLETS & SMALL DESKTOPS (Max-Width: 992px)
   ========================================================================== */
@media (max-width: 992px) {
    /* Layout adjustments: Sidebar collapses or stacks below main content */
    .content-sidebar-layout {
        flex-direction: column;
    }

    .sidebar-wrapper {
        margin-top: 35px;
    }

    /* Video Grid stays 3 columns or shifts to 2 */
    .video-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    /* Topbar & Search Bar */
    .top-bar {
        padding: 10px 0;
    }

    .header-search {
        max-width: 100%;
        margin: 0 10px !important;
    }

    .search-input {
        height: 40px;
        font-size: 0.85rem;
        padding-right: 75px;
    }

    .search-submit-btn {
        height: 32px;
        padding: 0 12px;
        font-size: 0.78rem;
    }

    .search-submit-btn span {
        display: none;
    }

    .search-submit-btn::after {
        content: "\f002";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
    }

    .logo-text {
        font-size: 1.35rem;
    }

    .logo-icon {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    /* Category Scroll Bar */
    .category-scroll-wrapper {
        padding: 4px 28px;
    }

    .cat-pill {
        padding: 5px 12px;
        font-size: 0.78rem;
    }

    /* Player Container */
    .player-container {
        border-radius: var(--radius-sm);
    }

    /* Footer Columns */
    .footer-top {
        padding: 35px 0 20px;
    }

    .footer-col {
        margin-bottom: 24px;
    }
}

/* ==========================================================================
   3. SMALL TABLETS & LARGE SMARTPHONES (Max-Width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* 2-Column Video Grid */
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Card Details on Small Screens */
    .video-info {
        padding: 10px;
    }

    .video-title {
        font-size: 0.85rem;
        min-height: 2.5em;
        margin-bottom: 6px;
    }

    .video-meta-row {
        font-size: 0.72rem;
    }

    .video-cat-badge {
        padding: 2px 6px;
        font-size: 0.7rem;
    }

    .badge-video-num {
        font-size: 0.65rem;
        padding: 1px 5px;
    }

    .badge-video-new {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    .badge-video-duration {
        font-size: 0.68rem;
        padding: 1px 5px;
    }

    .badge-preview-circle {
        width: 28px !important;
        height: 28px !important;
        top: 6px !important;
        right: 6px !important;
    }

    .badge-preview-circle i {
        font-size: 0.52rem !important;
    }

    .badge-preview-circle span {
        font-size: 0.56rem !important;
    }

    .badge-preview-circle.has-new {
        top: 28px !important;
        right: 6px !important;
    }

    .badge-lock-corner {
        width: 28px !important;
        height: 28px !important;
        top: 6px !important;
        right: 6px !important;
        font-size: 0.72rem !important;
    }

    .badge-lock-corner.has-new {
        top: 28px !important;
        right: 6px !important;
    }

    /* Ticker & Marquee */
    .marquee-ticker-bar {
        height: 32px;
    }

    .marquee-badge {
        padding: 0 10px;
        font-size: 0.68rem;
    }

    .marquee-badge span {
        display: none;
    }

    .marquee-item {
        font-size: 0.74rem;
        padding: 0 12px;
    }

    /* Auth & VIP Buttons in Header */
    .btn-subscribe {
        padding: 6px 12px;
        font-size: 0.78rem;
    }

    .btn-outline-custom {
        padding: 6px 12px;
        font-size: 0.78rem;
    }

    /* Player Overlay on Mobile */
    .lock-modal-box {
        padding: 20px 16px;
    }

    .lock-modal-box h4 {
        font-size: 1.15rem;
    }

    /* Ad Banners on Tablets */
    .ad-header_banner, .ad-before_footer {
        min-height: 50px;
    }

    .ad-placeholder {
        padding: 10px;
        font-size: 0.75rem;
    }

    /* Back to Top */
    .back-to-top-btn {
        bottom: 18px;
        right: 18px;
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   4. EXTRA SMALL PHONES (Max-Width: 576px)
   ========================================================================== */
@media (max-width: 576px) {
    /* Touch Target Accessibility: Ensure interactive elements are at least 44px */
    .mobile-menu-toggle,
    .cat-scroll-arrow,
    .btn-subscribe,
    .btn-accent,
    .search-submit-btn,
    .back-to-top-btn {
        min-height: 40px;
    }

    /* Video Grid on Small Mobile: 2 Compact Columns */
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .video-card {
        border-radius: var(--radius-sm);
    }

    .video-info {
        padding: 8px;
    }

    .video-title {
        font-size: 0.8rem;
        line-height: 1.3;
        -webkit-line-clamp: 2;
    }

    .play-circle-icon {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }

    /* Top Bar Mobile Optimization */
    .navbar-brand {
        font-size: 1.25rem;
    }

    .header-search {
        margin: 0 6px !important;
    }

    .search-input {
        padding-left: 32px;
        padding-right: 48px;
        font-size: 0.8rem;
    }

    .search-icon {
        left: 10px;
        font-size: 0.8rem;
    }

    .search-submit-btn {
        right: 3px;
        width: 34px;
        padding: 0;
    }

    /* Categories Horizontal Bar */
    .category-scroll-bar {
        padding: 6px 0;
    }

    .cat-pill {
        padding: 4px 10px;
        font-size: 0.74rem;
    }

    .cat-scroll-arrow {
        display: none; /* Swipe gesture is preferred on mobile */
    }

    .category-scroll-wrapper {
        padding: 2px 12px;
    }

    /* Video Player Controls */
    .plyr--video .plyr__controls {
        padding: 5px 8px;
    }

    .video-detail-header {
        padding: 14px;
    }

    .video-actions-bar .btn {
        font-size: 0.78rem;
        padding: 6px 10px;
    }

    /* Footer Bottom Stack */
    .footer-bottom .d-flex {
        text-align: center;
    }

    .footer-bottom-links {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .footer-bottom-links a {
        margin: 0 !important;
    }
}

/* ==========================================================================
   5. ULTRA-WIDE & HIGH-DPI SCREENS (Min-Width: 1600px)
   ========================================================================== */
@media (min-width: 1600px) {
    .container-fluid {
        max-width: 1720px;
        margin: 0 auto;
    }

    .video-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 24px;
    }
}

/* ==========================================================================
   6. TOUCH DEVICE OPTIMIZATIONS
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover-based translations on touch devices to avoid sticky hover */
    .video-card:hover {
        transform: none;
    }

    .video-card:hover .video-thumbnail {
        transform: none;
    }

    .video-card:active {
        transform: scale(0.98);
    }
}

/* ==========================================================================
   7. MOBILE-FIRST APP LAYOUT (phones, <= 767px)
   Compact two-row header, 2-column cards, fixed bottom navigation bar.
   ========================================================================== */
@media (max-width: 767.98px) {
    body.dark-theme {
        padding-bottom: 62px; /* room for bottom nav */
        -webkit-tap-highlight-color: transparent;
    }

    /* Header: row 1 = logo + actions, row 2 = full-width search */
    .top-bar { padding: 8px 0; }
    .top-bar > .container-fluid > .d-flex { flex-wrap: wrap; }
    .header-logo { order: 1; }
    .header-actions { order: 2; margin-left: auto; }
    .header-search {
        order: 3;
        flex: 0 0 100%;
        max-width: 100%;
        margin: 8px 0 0 !important;
    }
    .search-input { height: 42px; font-size: 16px; } /* 16px stops iOS zoom on focus */

    /* Login becomes icon-only to save space */
    .auth-buttons .btn-outline-custom span { display: none; }
    .auth-buttons .btn-outline-custom { padding: 8px 11px; }
    .auth-buttons .btn-outline-custom i { margin: 0 !important; }
    .btn-subscribe { margin-left: 8px !important; padding: 7px 12px; }

    /* Desktop menu is replaced by bottom nav; keep category pills + ticker */
    .main-navbar, .mobile-menu-toggle { display: none !important; }

    /* Cards: tight 2-column grid, no wasted padding */
    .container-fluid { padding-left: 8px; padding-right: 8px; }
    .section-header small { display: none; }
    .section-title { font-size: 1.05rem !important; }
    .section-title-icon i { font-size: 1.1rem !important; }
    .video-views, .video-time { font-size: 0.68rem; }
    .video-cat-badge { max-width: 90px !important; }

    /* Sidebar sits under content */
    .sidebar-column { margin-top: 8px; }

    /* Floating back-to-top clears the bottom nav */
    .back-to-top-btn { bottom: 74px; }
}

/* Bottom navigation bar (phones only) */
.mobile-bottom-nav { display: none; }

@media (max-width: 767.98px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1030;
        height: 56px;
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(15, 15, 15, 0.97);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .mobile-bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-size: 0.66rem;
        font-weight: 600;
        color: #9aa0ad;
        text-decoration: none;
    }
    .mobile-bottom-nav a i { font-size: 1.15rem; }
    .mobile-bottom-nav a.active { color: var(--accent, #e91e63); }
    .mobile-bottom-nav a.nav-vip { color: #ffc107; }
}

/* ==========================================================================
   8. COMPACT FOOTER ON PHONES (<= 767px)
   Keeps: logo, 18+ notice, quick links (inline), social icons, copyright.
   Hides: long description, category list, contact blurb.
   ========================================================================== */
@media (max-width: 767.98px) {
    .before-footer-ad-section { padding-top: 0 !important; padding-bottom: 0 !important; }

    .site-footer .footer-top { padding: 18px 0 8px !important; }
    .site-footer .footer-top .row { --bs-gutter-y: 0.6rem; }
    .site-footer .footer-col { margin-bottom: 0; width: 100%; }

    /* Brand row */
    .site-footer .footer-brand { margin-bottom: 6px !important; }
    .site-footer .footer-brand .logo-text { font-size: 1.1rem; }
    .site-footer .footer-brand .logo-icon { width: 26px; height: 26px; font-size: 0.7rem; }
    .site-footer .footer-description { display: none; }
    .site-footer .adult-warning-box { margin-top: 6px !important; padding: 6px 8px !important; }
    .site-footer .adult-warning-box i { font-size: 0.9rem !important; }
    .site-footer .adult-warning-box small { font-size: 0.68rem; line-height: 1.3; }

    /* Quick links become one wrapped row of small links */
    .site-footer .footer-col .footer-title { display: none; }
    .site-footer .footer-col:nth-child(3) { display: none; } /* Top Categories */
    .site-footer .footer-col:nth-child(2) .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 14px;
        margin: 0;
        padding: 0;
    }
    .site-footer .footer-col:nth-child(2) .footer-links li { margin: 0; }
    .site-footer .footer-col:nth-child(2) .footer-links a { font-size: 0.78rem; padding: 0; }
    .site-footer .footer-col:nth-child(2) .footer-links i { display: none; }
    /* legal links already repeat in the bottom bar */
    .site-footer .footer-col:nth-child(2) .footer-links li:nth-child(n+6) { display: none; }

    /* Connect column: icons only */
    .site-footer .footer-col:nth-child(4) p,
    .site-footer .footer-col:nth-child(4) .footer-contact-info { display: none; }
    .site-footer .footer-social-links { margin-bottom: 0 !important; }
    .site-footer .social-btn { width: 32px; height: 32px; font-size: 0.9rem; }

    /* Bottom bar */
    .site-footer .footer-bottom { padding: 8px 0 !important; }
    .site-footer .footer-bottom .small { font-size: 0.7rem !important; }
    .site-footer .footer-bottom-links a { font-size: 0.72rem; }
}