/* =====================================================================
   GTA VI Community Forum — responsive.css
   Tablet + mobile behaviour
   ===================================================================== */

/* ---- Large laptop: tighten nav ---- */
@media (max-width:1300px){
  .search-box{width:180px}
  .main-nav{gap:0}
  .nav-link{padding:9px 10px;font-size:13px}
  :root{--sidebar-w:280px}
}

/* ---- Tablet: sidebar collapses below content ---- */
@media (max-width:1024px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;flex-direction:row;flex-wrap:wrap}
  .sidebar>.card{flex:1 1 300px}
  .main-nav .nav-link:nth-child(n+6){display:none}   /* trim overflow items */
  .hero h1{font-size:44px}
  .hero-logo .l1,.hero-logo .l2,.hero-logo .l3{font-size:28px}
  .hero-logo .l3 .vi{font-size:42px}
}

/* ---- Small tablet / large phone ---- */
@media (max-width:860px){
  .site-header{gap:14px;padding:0 18px}
  .main-nav{display:none}
  .search-box{display:none}
  .menu-toggle{display:grid}
  .user-chip span{display:none}
  .icon-btn.hide-sm{display:none}

  .forum-row{grid-template-columns:auto 1fr;gap:14px;row-gap:12px}
  .forum-row .f-stat{grid-column:auto;justify-self:start;text-align:left;display:flex;gap:6px;align-items:baseline}
  .forum-row .f-stat b{font-size:14px}
  .f-latest{grid-column:1 / -1;padding-top:10px;border-top:1px dashed var(--border)}
  .f-latest .meta a{max-width:none}

  .hero{height:auto;padding:34px 0}
  .hero-inner{max-width:100%;padding:0 26px}
  .hero-logo{position:static;transform:none;margin:24px 26px 0;text-align:left}
  .hero .hero-overlay{background:linear-gradient(180deg,rgba(5,5,11,.5),rgba(5,5,11,.9))}
}

/* ---- Phones ---- */
@media (max-width:560px){
  .layout{padding:16px 14px 90px}
  .hero h1{font-size:36px}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .announce{flex-wrap:wrap}
  .announce .rules{margin-left:0;width:100%;margin-top:6px}
  .sidebar{flex-direction:column}
  .sidebar>.card{flex:1 1 auto}

  .floaters{right:16px;bottom:16px}
  .float-btn{height:52px}
  .float-btn .fi{width:52px;height:52px}
  /* keep floaters visible & labels always hidden on mobile for space */
  .float-btn .fl{display:none}

  /* Customizer becomes a fullscreen modal on mobile */
  .customizer{
    right:0;left:0;bottom:0;top:0;width:100%;max-height:100vh;height:100%;
    border-radius:0;padding:22px 20px 40px;transform:translateY(100%);
    filter:none;
  }
  .customizer.open{transform:none}
  .cz-backdrop{display:block}
}

/* ---- Landscape phones: keep customizer scrollable ---- */
@media (max-width:560px) and (max-height:520px){
  .customizer{padding-bottom:60px}
}