/* ============================================================
   வேட்டுவ கவுண்டர் சமூகம் — Responsive Stylesheet
   Breakpoints & mobile navigation. Load AFTER style.css.
   ============================================================ */

/* ---- Large desktops down to laptops ---- */
@media (max-width: 1080px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.3fr); }
  .masonry { columns: 3 220px; }
}

/* ---- The full horizontal nav is wide (13 links + lang + CTA); below ~1300px
        use the hamburger so it never crams or overflows. ---- */
@media (max-width: 1360px) {
  :root { --header-h: 64px; }

  .hamburger { display: flex; }

  /* Off-canvas mobile menu */
  .nav-menu {
    position: fixed;
    top: 0; right: 0;
    width: min(320px, 86vw);
    height: 100dvh;
    background: var(--offwhite);
    box-shadow: var(--shadow-lg);
    padding: 84px 18px 24px;
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y: auto;
    z-index: 1200;
    display: block;
  }
  .nav-menu.open { transform: translateX(0); }

  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-list > li > a { padding: 12px 14px; border-radius: 8px; }

  /* Mobile dropdown: click to expand */
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--gold);
    border-radius: 0; margin: 2px 0 6px 14px; padding: 0 0 0 8px;
    max-height: 0; overflow: hidden; transition: max-height var(--transition);
  }
  .has-dropdown.open .dropdown { max-height: 520px; }
  .has-dropdown > a::after { float: right; }

  .nav-actions { margin-top: 18px; flex-direction: column; align-items: stretch; }
  .nav-actions .btn { justify-content: center; }

  /* Backdrop */
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.4);
    z-index: 1100; display: none;
  }
  .nav-backdrop.show { display: block; }
}

/* ---- Grid collapses (kept at 960, independent of the nav breakpoint) ---- */
@media (max-width: 960px) {
  .footer-top { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Small tablets / large phones ---- */
@media (max-width: 720px) {
  .section { padding: 52px 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 2 160px; }
  .form-grid { grid-template-columns: 1fr; }
  .two-col-list { columns: 1; }
  .cta-band { padding: 30px 22px; }
  .hero__inner { padding: 66px 0 74px; }
  .footer-top { grid-template-columns: 1fr; gap: 26px; }
  .footer-bottom { flex-direction: column; }
  .topbar .container { justify-content: center; }
  .topbar .topbar__left { display: none; }
}

/* ---- Phones ---- */
@media (max-width: 480px) {
  body { font-size: 15.5px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; }
  .masonry { columns: 1; }
  .brand__text span { display: none; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .cta-band .btn-row .btn { width: 100%; }
  .lightbox__nav { width: 40px; height: 40px; }
}

/* ---- Print ---- */
@media print {
  .site-header, .site-footer, .back-top, .cookie-banner,
  .nav-backdrop, .hero__cta, .toolbar { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 12px 0; }
}