/* Responsive */
:root{--bottomnav-h:0px}

@media(max-width:1400px){.grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1200px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
  :root{--bottomnav-h:72px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .popover{top:calc(var(--topbar-h) + 86px)}
  .modal-hero-content{grid-template-columns:1fr}
  .content{padding-bottom:calc(56px + var(--bottomnav-h) + env(safe-area-inset-bottom, 0px))}
  .footer{padding-bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px))}
}

/* NAV */
.nav-sep{width:10px}

/* Grid footer stability (fix “Просмотрено” layout jump) */
.movie-footer{grid-template-columns:auto auto 1fr;min-height:34px}
.movie-overview{min-height:54px}
.card-controls{min-width:0}
.mini-select{max-width:118px}

/* Responsive: keep it tight on small screens */
@media(max-width:900px){
  .modal{ width: calc(100vw - 24px); max-width: 720px; }
  .modal-hero{ padding: 18px 16px; }
  .modal-hero-content{ grid-template-columns: 1fr; }
  .modal-actions{ grid-template-columns: 1fr; }
  .grid{gap:16px}
  .movie-body{padding:12px}
  .movie-card:hover{transform:none;box-shadow:none}
  .section-head{flex-direction:column;align-items:flex-start;gap:10px}
  .chips{justify-content:flex-start}
}

/* Mobile header */
@media(max-width:900px){
  .header .container{padding:0 12px;gap:10px}
  .header-left{gap:10px}
  .header-nav{overflow:auto;max-width:46vw}
  .header-nav::-webkit-scrollbar{display:none}
  .header-search{min-width:0;max-width:none;flex:1}
  #filtersToggle{display:none}
  .search{height:38px;border-radius:12px;padding:0 12px}
  #clearSearch{height:38px;min-width:38px}
  #authBtn{height:38px}
}

@media(max-width:680px){
  :root{--topbar-h:60px}
  .header-nav{display:none}
  .header-left{min-width:0}
  .logo{font-size:18px}
  .header-search{gap:8px}
  #authBtn{padding:0 12px;height:38px;border-radius:12px}

  .filters-inline{padding:10px 10px;gap:10px}
  .filters-row{flex-direction:column;align-items:stretch;gap:10px}
  .fi{min-width:0;width:100%}
  .fi-small{min-width:0}
  .fi-years{gap:8px}
  .fi-years .input{width:100%}
  .fi-actions{width:100%;justify-content:space-between;margin-left:0}

  .popular-row{padding:0 36px 6px}
  .popular-row .movie-card{width:150px}

  .bottom-pager{
    position:sticky;
    bottom:calc(12px + var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
    z-index:1200;
    margin-top:16px;
    padding:10px;
    border-radius:16px;
    border:1px solid rgba(31,41,55,.65);
    background:rgba(11,16,32,.78);
    backdrop-filter:blur(12px);
  }
}

@media(max-width:520px){
  .grid{gap:12px}
  .movie-body{padding:10px}
  .movie-title{font-size:14px}
  .movie-overview{-webkit-line-clamp:2;min-height:36px}

  .modal-overlay{align-items:stretch;justify-content:stretch}
  .modal{
    width:100vw;
    max-width:100vw;
    height:100vh;
    border-radius:0;
    border-left:none;
    border-right:none;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .modal-hero{
    padding:16px 14px;
    flex:1 1 auto;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
  .modal-close{top:12px;right:12px;width:40px;height:40px}

  .mobile-nav a{font-size:11px}
}

/* Mobile bottom navigation */
.mobile-nav{display:none}

@media(max-width:900px){
  .mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding:10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    overflow:auto;
    scrollbar-width:none;
    border-top:1px solid rgba(31,41,55,.75);
    background:rgba(8,12,20,.92);
    backdrop-filter:blur(14px);
    z-index:3500;
  }

  .mobile-nav::-webkit-scrollbar{display:none}

  .mobile-nav a{
    height:38px;
    padding:0 12px;
    border-radius:12px;
    font-size:12px;
  }
}