/* CHANGARA CONNECT - Responsive / mobile-first adjustments */
/* Base design is mobile-first. This file adds desktop enhancements. */

/* ---------- Extra small phones 320px-359px ---------- */
@media (max-width: 359px) {
  .topbar { flex-direction:column; gap:4px; padding:6px 10px; font-size:11px; }
  .topbar .tb-loc { font-size:11px; }
  .header-inner { padding:8px 10px; gap:6px; }
  .brand { font-size:15px; padding:4px 7px; }
  .brand .brand-line { font-size:8px; }
  .hero { padding:24px 10px 20px; }
  .hero h1 { font-size:1.2rem; }
  .hero p { font-size:12px; }
  .hero-search { flex-direction:column; gap:6px; padding:8px; }
  .hero-search input { width:100%; padding:10px 4px; }
  .hero-search button { width:100%; }
  .hero-chips { gap:4px; }
  .chip { padding:5px 9px; font-size:11px; }
  .hero-stats { gap:10px; font-size:11px; }
  .hero-stats b { font-size:14px; }
  .nav-toggle { font-size:18px; padding:4px 7px; }
  .footer-grid { gap:14px; }
  .f-brand { font-size:14px; }
  .action-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .action-card { padding:12px 8px; }
  .action-card i { font-size:22px; }
  .action-card b { font-size:13px; }
  .section-title h2 { font-size:1rem; }
  .page-title { font-size:1.2rem; }
  .card { border-radius:10px; }
  .form-input, .form-select, .form-textarea { padding:10px 10px; font-size:14px; }
  .btn { padding:10px 14px; font-size:13px; }
  .drawer-panel { width:260px; }
}

/* ---------- Small phones 360px-390px ---------- */
@media (max-width: 390px) {
  .hero h1 { font-size: 1.4rem; }
  .hero-search button { padding: 10px 13px; font-size: 13px; }
  .form-row { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .filters .f { min-width: 100%; }
  .bottom-nav a { font-size: 11px; }
  .lc-title { font-size: 14.5px; }
}

/* ---------- Large phones 391px-480px ---------- */
@media (max-width: 480px) {
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
  .grid-auto .listing-card .lc-title { font-size: 13.5px; }
  .bottom-nav a span { display:none; }
  .bottom-nav a { font-size: 9px; padding:4px 0; }
  .bottom-nav .bn-add { width:42px; height:42px; margin-top:-18px; font-size:17px; }
}

/* ---------- Phones 391px-600px ---------- */
@media (max-width: 600px) {
  .nav-links, .header .hbtn { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions { gap: 4px; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .grid-auto .listing-card .lc-title { font-size: 14px; }
  .modal-box { max-height: 90vh; }
  .hero { padding: 30px 14px 26px; }
  .hero-chips { gap: 6px; }
  .footer-grid { grid-template-columns: 1fr; }
  .ad-banner { min-width: 240px; }
  .toast-wrap { left: 16px; right: 16px; bottom: 64px; top: auto; }
}

/* ---------- Tablets & small desktops 601px-900px ---------- */
@media (min-width: 601px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .bottom-nav { display: none; }
  .spacer { height: 0; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ---------- Desktop 901px+ ---------- */
@media (min-width: 901px) {
  .hero { padding: 42px 16px 38px; }
  .hero h1 { font-size: 1.8rem; }
  .hero p { font-size: 15px; }
  .hero-search { max-width: 720px; }
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Large desktop 1280px+ ---------- */
@media (min-width: 1280px) {
  .grid-auto { grid-template-columns: repeat(4, minmax(250px, 1fr)); }
}

/* ---------- Print (optional) ---------- */
/* Horizontal scroll safety for wide tables (admin) */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Reduce motion for users who ask for it */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}