/* AntiBooking V2.5.4 - Mobile responsive improvements */
/* Safe overlay CSS: keeps approved desktop header/footer design */

@media (max-width: 980px) {
  body { overflow-x: hidden; }

  .topbar {
    min-height: auto !important;
    padding: 12px 4% !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
  }

  .topbar .brand,
  .topbar .brand-logo {
    width: 145px !important;
    max-width: 145px !important;
    min-width: 145px !important;
    height: 86px !important;
  }

  .topbar .nav {
    order: 3 !important;
    width: 100% !important;
    display: flex !important;
    overflow-x: auto !important;
    gap: 18px !important;
    padding: 8px 0 2px !important;
    margin: 0 !important;
    font-size: 14px !important;
    scrollbar-width: none;
  }

  .topbar .nav::-webkit-scrollbar { display: none; }

  .topbar .nav a {
    flex: 0 0 auto !important;
    padding: 10px 0 13px !important;
  }

  .topbar .report-cta {
    margin-left: auto !important;
    min-width: auto !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  .hero,
  .friendly-hero {
    padding: 42px 5% 32px !important;
    min-height: auto !important;
  }

  .hero-grid,
  .friendly-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .hero h1,
  .friendly-hero h1 {
    font-size: 44px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.045em !important;
  }

  .hero p,
  .friendly-hero p {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  .hero .btn,
  .friendly-actions .btn {
    display: inline-flex !important;
    margin: 6px 8px 6px 0 !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
  }

  .hero-map {
    height: 260px !important;
    border-radius: 12px !important;
  }

  .map-pin {
    width: 22px !important;
    height: 22px !important;
    border-width: 2px !important;
  }

  .map-legend {
    right: 10px !important;
    bottom: 10px !important;
    padding: 10px 12px !important;
    min-width: 110px !important;
    font-size: 12px !important;
  }

  .main {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  .section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .section-head h2 { font-size: 28px !important; }

  .category-strip,
  .friendly-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .category-tile {
    min-height: 118px !important;
    padding: 14px 10px !important;
  }

  .category-tile img {
    width: 58px !important;
    height: 58px !important;
  }

  .search-grid,
  .friendly-search-grid,
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  .search-panel,
  .friendly-search-panel,
  .methodology-band,
  .confidence-card {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .incident-card.result-card {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .card-image {
    height: 130px !important;
    min-height: 130px !important;
  }

  .card-image img {
    width: 74px !important;
    height: 74px !important;
  }

  .card-body { padding: 16px !important; }

  .card-side {
    border-left: 0 !important;
    border-top: 1px solid #d9e2ee !important;
    padding: 14px !important;
    text-align: left !important;
  }

  .card-side .btn { width: 100% !important; }

  .modal,
  .friendly-modal {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    padding: 20px !important;
    border-radius: 16px !important;
  }

  .footer { padding: 22px 5% !important; }

  .footer-grid {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .footer .brand,
  .footer .brand-logo {
    width: 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
    height: 90px !important;
  }

  .footer-grid > p:last-child { text-align: left !important; }
}

@media (max-width: 560px) {
  .topbar { padding: 10px 4% !important; }

  .topbar .brand,
  .topbar .brand-logo {
    width: 128px !important;
    max-width: 128px !important;
    min-width: 128px !important;
    height: 76px !important;
  }

  .topbar .report-cta {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  .report-icon { display: none !important; }

  .topbar .nav {
    gap: 15px !important;
    font-size: 13px !important;
  }

  .hero h1,
  .friendly-hero h1 { font-size: 36px !important; }

  .hero p,
  .friendly-hero p { font-size: 16px !important; }

  .category-strip,
  .friendly-cards { grid-template-columns: 1fr !important; }

  .hero-map { height: 220px !important; }

  .map-legend {
    transform: scale(.88);
    transform-origin: right bottom;
  }

  .friendly-card h3,
  .incident-card h3 { font-size: 22px !important; }

  .tag-row,
  .friendly-tags { gap: 6px !important; }

  .tag,
  .friendly-badge {
    font-size: 11px !important;
    padding: 6px 9px !important;
  }
}