/* ================================================================
   Beyond Azores — Responsive System
   Standard breakpoints: 480 | 768 | 1024 | 1280
   ================================================================ */

:root {
  --pad-mobile: 16px;
  --pad-tablet: 24px;
  --pad-desktop: 32px;
  --font-h1-m: 1.6rem;
  --font-h1-d: 2.8rem;
  --font-body: 0.95rem;
  --touch-min: 44px;
}

/* ---- Global safeguards ---- */
html { overflow-x: clip; }
body { overflow-x: clip; -webkit-text-size-adjust: 100%; }
img, video, svg { max-width: 100%; height: auto; }
input, select, textarea, button { font-size: 16px; } /* prevent iOS zoom */

/* ---- Touch targets — WCAG 2.5.5 requires 44x44 CSS pixels minimum ---- */
a, button, [role="button"], input, select, textarea, .chip, .nav-link, .nav-toggle {
  min-height: var(--touch-min);
}
button, [role="button"], .nav-toggle, .chip {
  min-width: var(--touch-min);
}

/* ---- Container ---- */
@media (max-width: 480px)  { .container { padding-left: var(--pad-mobile); padding-right: var(--pad-mobile); } }
@media (max-width: 768px)  { .container { padding-left: var(--pad-tablet); padding-right: var(--pad-tablet); } }

/* ---- Tables scroll on mobile ---- */
@media (max-width: 768px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  thead, tbody, tr { min-width: 600px; }
}

/* ---- Cards never overflow ---- */
.tour-card, .guide-card, .review-card, .car-card, .article-card,
.aus-card, .rest-card, .attr-card, .act-card, .island-featured-card {
  max-width: 100%;
  overflow: hidden;
}

/* ---- Grids collapse ---- */
@media (max-width: 768px) {
  .tour-grid, .guide-grid, .article-grid, .rest-grid, .attr-grid, .act-grid,
  .island-grid, .aus-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tour-grid, .guide-grid, .article-grid, .rest-grid, .attr-grid, .act-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---- Footer mobile ---- */
@media (max-width: 640px) {
  .footer-top { grid-template-columns: 1fr !important; }
  .footer-links-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .footer-trust { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; }
  .footer-payments { justify-content: center !important; }
}

/* ---- Modals full-screen on mobile ---- */
@media (max-width: 640px) {
  .tbm-box, .rc-modal, .pw-modal, .del-modal, .benefits-card {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh !important;
  }
}

/* ---- Hub admin responsive ---- */
@media (max-width: 768px) {
  .hub-layout { flex-direction: column !important; }
  .hub-sidebar { width: 100% !important; position: relative !important; flex-direction: row !important; overflow-x: auto !important; padding: 0 !important; height: auto !important; }
  .hub-sidebar .sidebar-nav { display: flex !important; flex-direction: row !important; padding: 0 !important; overflow-x: auto !important; }
  .hub-sidebar .sidebar-item { padding: 12px 16px !important; white-space: nowrap !important; border-left: none !important; border-bottom: 3px solid transparent !important; }
  .hub-sidebar .sidebar-item.active { border-bottom-color: white !important; border-left-color: transparent !important; }
  .hub-sidebar .sidebar-logo, .hub-sidebar .sidebar-footer { display: none !important; }
  .hub-main { margin-left: 0 !important; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}