/* ====== mobile.css - yfsp.tv Clone - Responsive ====== */

@media (max-width:1024px) {
    .grid-4 { grid-template-columns:repeat(3,1fr); }
    .card-poster { width:130px; }
    .banner-slide-title { font-size:26px; }
    .banner-slide-overlay { padding:30px 35px; }
    .sub-categories { display:none; }
}

@media (max-width:768px) {
    :root {
        --nav-height:50px;
        --subnav-height:38px;
    }
    .nav-links { display:none; }
    .nav-actions { display:none; }
    .menu-toggle { display:flex; }
    .nav-search { max-width:none; }
    .sub-nav-right { display:none; }

    .mobile-bottom-nav { display:flex; }
    .main-content { padding-bottom:70px; }
    .floating-bar { right:12px; bottom:80px; }

    .banner-main { aspect-ratio:16/9; min-height:200px; max-height:300px; border-radius:var(--radius-md); }
    .banner-wrapper { padding:0 12px; }
    .banner-slide-overlay { padding:20px 24px; }
    .banner-slide-title { font-size:20px; }
    .banner-slide-desc { font-size:12px; -webkit-line-clamp:1; margin-bottom:12px; }
    .banner-play-btn { padding:8px 20px; font-size:13px; }
    .banner-thumbs { gap:6px; margin-top:8px; }
    .banner-thumb { width:70px; height:98px; }

    .content-section { padding:20px 12px 0; }
    .section-header h3 { font-size:16px; }
    .sub-categories { display:none; }

    .grid-4 { grid-template-columns:repeat(2,1fr); gap:10px; }

    .card-feed { gap:10px; }
    .card-feed-img { width:130px; height:75px; }
    .card-feed-title { font-size:14px; }
    .card-feed-desc { display:none; }

    .card-poster { width:120px; }
    .card-playlist { width:180px; }

    .footer-links { grid-template-columns:1fr 1fr; gap:20px; }
    .ranking-poster-mini { width:40px; height:54px; }
}

@media (max-width:480px) {
    .grid-4 { grid-template-columns:repeat(2,1fr); gap:8px; }
    .banner-main { min-height:170px; }
    .banner-slide-title { font-size:17px; }
    .banner-slide-tags { margin-bottom:8px; }
    .banner-slide-tag { font-size:10px; padding:2px 8px; }
    .banner-play-btn { padding:7px 16px; font-size:12px; }
    .card-poster { width:110px; }
    .card-feed-img { width:110px; height:65px; }
    .footer-links { grid-template-columns:1fr; }
}