/* =====================================================================
   NEXUS — Responsive
   Breakpoints: 1080 (sidebar drop), 860 (tablet), 620 (mobile).
   Forum rows collapse gracefully; nav becomes offcanvas on tablet down.
   ===================================================================== */

/* Large tablet / small laptop — drop sidebar under content */
@media (max-width: 1080px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ position: static; grid-template-columns: repeat(3,1fr); }
  body:not(.no-sidebar) .sidebar{
    display:grid; grid-template-columns: repeat(3,1fr); gap:14px;
  }
  .palette-grid{ grid-template-columns: repeat(4,1fr); }
}

/* Tablet — collapse nav to hamburger, trim forum last-post column */
@media (max-width: 860px){
  .nav{ display:none; }
  .hamburger{ display:flex; }
  .header-actions .icon-btn[aria-label="Search"]{ display:grid; }

  .hero{ grid-template-columns: 1fr; text-align:center; padding:36px 26px; }
  .hero-copy{ margin:0 auto; }
  .hero-cta{ justify-content:center; }
  .hero-visual{ margin:8px auto 0; width:200px; height:200px; }

  .forum-row{ grid-template-columns: 46px 1fr auto; grid-auto-rows:auto; }
  .forum-stat{ display:none; }
  .forum-last{ grid-column: 1 / -1; padding-top:12px; margin-top:12px;
    border-top:1px solid var(--border); min-width:0; }

  .footer-inner{ grid-template-columns: 1fr 1fr; }
  .foot-brand{ grid-column: 1 / -1; }
}

/* Mobile — single column everything, sticky bottom actions feel */
@media (max-width: 620px){
  :root{ --layout-width: 92%; }

  .brand-name{ font-size:.95rem; }
  .header-actions .icon-btn[aria-label="Messages"],
  .header-actions .icon-btn[aria-label="Notifications"]{ display:none; }

  .hero-title{ font-size: 1.6rem; }
  .announce{ flex-direction:column; align-items:flex-start; gap:12px; }
  .announce .btn{ width:100%; }

  .sidebar, body:not(.no-sidebar) .sidebar{ grid-template-columns: 1fr; }
  .palette-grid{ grid-template-columns: repeat(2,1fr); }

  .forum-row{ grid-template-columns: 42px 1fr; padding:14px 16px; }
  .forum-ico{ width:40px; height:40px; }

  .footer-inner{ grid-template-columns: 1fr; gap:24px; }
  .foot-bottom{ flex-direction:column; gap:8px; text-align:center; }

  .customizer{ right:12px; left:12px; bottom:12px; width:auto; }
  .customizer-fab{ right:14px; bottom:14px; }

  /* Native-app feel: larger tap targets */
  .nav-link{ padding:14px 16px; }
  .btn{ padding:13px 20px; }
}

/* Very small — keep hero visual from crowding */
@media (max-width: 380px){
  .hero-visual{ width:170px; height:170px; }
  .hex{ width:150px; height:165px; }
  .hex-inner{ width:135px; height:150px; }
  .hex-inner span{ font-size:3.4rem; }
}