/* =====================================================================
   Board.lk — Public responsive overrides
   Loaded after style.css, before dashboard.css / admin.css
   Scope: public pages only (home, category, location, business, search,
          content pages, auth pages). Dashboard and admin are handled by
          their own stylesheets.
   ===================================================================== */

/* ========== 320px — Small phones ========== */
@media (max-width: 320px) {
  body { font-size: 14.5px; }
  .container { padding: 0 12px; }
  .hero { padding: 40px 0; }
  .header-inner { padding: 10px 12px; gap: 8px; }
  .logo-text { display: none; }
  .btn { padding: 8px 12px; font-size: .9rem; }
  .modal { width: 98vw; }
  .header-search input { font-size: 14px; padding: 9px 10px; }
  .header-search button { padding: 0 12px; }
}

/* ========== 375px — iPhone SE / 8 ========== */
@media (max-width: 375px) {
  .biz-grid { grid-template-columns: 1fr; }
  .cat-grid,
  .city-grid { grid-template-columns: 1fr; }
  .auth-box { margin: 12px; padding: 18px; }
  .hero h1 { font-size: 1.6rem; }
  .section-head h2 { font-size: 1.15rem; }
}

/* ========== 414px — Larger phones ========== */
@media (max-width: 414px) {
  .biz-hero { height: 160px; }
  .biz-head { gap: 12px; }
  .biz-logo { width: 64px; height: 64px; }
  .contact-list li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .share-row { font-size: .85rem; }
}

/* ========== 640px — Small tablets (portrait) ========== */
@media (max-width: 640px) {
  .header-inner { gap: 10px; }
  .header-search { order: 3; flex-basis: 100%; min-width: 0; }
  .header-nav { font-size: .9rem; gap: 10px; }
  .hero-search { flex-direction: column; }
  .hero-search input,
  .hero-search .btn { width: 100%; }
  .biz-grid { grid-template-columns: 1fr; gap: 14px; }
  .section { padding: 32px 14px; }
  .page-head h1 { font-size: 1.5rem; }
  .error-page h1 { font-size: 3.5rem; }
  .plan-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ========== 768px — Tablets portrait ========== */
@media (max-width: 768px) {
  .site-header { position: sticky; }
  .header-search { order: 3; flex-basis: 100%; min-width: 0; }
  .biz-grid-2 { grid-template-columns: 1fr; gap: 20px; }
  .biz-hero { height: 200px; }
  .biz-head h1 { font-size: 1.6rem; }
  .prose-page { max-width: 100%; }
  .faq-list { max-width: 100%; }
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ========== 1024px — Tablets landscape / small laptops ========== */
@media (max-width: 1024px) {
  .container { max-width: 960px; }
  .biz-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ========== 1440px — Wide desktop ========== */
@media (min-width: 1440px) {
  .container { max-width: 1320px; }
  .biz-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ========== Landscape phones ========== */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 32px 0; }
  .hero h1 { font-size: 1.5rem; }
  .hero p { font-size: .95rem; margin-bottom: 16px; }
  .modal { max-height: 92vh; overflow-y: auto; }
  .modal-body { padding: 14px 18px; }
}

/* ========== Dark mode (respects system preference) ========== */
@media (prefers-color-scheme: dark) {
  /* Reserved for future dark theme — currently a no-op to avoid
     accidental styling. Enable selectively by uncommenting rules
     you actually want. */
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== Print ========== */
@media print {
  .site-header,
  .site-footer,
  .header-search,
  .header-nav,
  .biz-actions,
  .share-row,
  .back-to-top,
  .modal,
  .pagination { display: none !important; }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }
  a { color: #000; text-decoration: underline; }
  .container { max-width: 100%; padding: 0; }
  .biz-hero { height: auto; background-image: none !important; }
  .biz-hero__overlay { display: none; }
}