/* Phone-first layout for 5A1 (applies only at <=768px; desktop is unchanged) */
.m-only, .m-menu-btn, .m-quick, .m-drawer, .m-bottom-nav { display: none; }

@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
  html, body { overflow-x: hidden; max-width: 100%; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  img, iframe, video { max-width: 100%; }
  * { min-width: 0; }
  p, h1, h2, h3, a, span, div { overflow-wrap: anywhere; }
  .m-only { display: block; }

  /* Top telemetry: everything visible at once, compact grid (no swipe) */
  .telemetry-bar { padding: 0.45rem 0.6rem 0.5rem; font-size: 12px; line-height: 1.2; }
  .telemetry-inner { flex-direction: column; gap: 0.4rem; overflow: visible; }
  .telemetry-items { display: grid; width: 100%; gap: 0.3rem 0.4rem; align-items: start; }
  .telemetry-items + .telemetry-items { order: -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .telemetry-items + .telemetry-items .telemetry-item:nth-child(2) { grid-column: span 2; }
  .telemetry-items:first-child { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 0.4rem; border-top: 1px solid rgba(255,255,255,0.1); }
  .telemetry-items:first-child .telemetry-item:nth-child(3) { grid-column: span 2; order: 5; }
  .telemetry-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: normal; min-width: 0; }
  .telemetry-label { font-size: 12px; letter-spacing: 0.01em; color: #94a3b8; white-space: nowrap; }
  .telemetry-val { font-size: 12.5px; white-space: nowrap; }
  .telemetry-item, .telemetry-item * { overflow-wrap: normal; }

  /* ---- Compact sticky header + menu button ---- */
  .site-header { position: sticky; top: 0; z-index: 80; }
  .header-inner { padding: 0.45rem 0.75rem; gap: 0.5rem; }
  .brand { gap: 0.55rem; flex: 1 1 auto; }
  .brand-logo { height: 40px; }
  .brand-text h1 { font-size: 0.86rem; line-height: 1.15; }
  .brand-text span { display: none; }
  .nav-links, .header-actions { display: none !important; }
  .m-menu-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--slate-300); background: var(--slate-100); color: var(--navy-900); font-size: 1.45rem; cursor: pointer; }
  .m-menu-btn[aria-expanded="true"] { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

  /* Full-screen menu */
  .m-drawer { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--m-hh, 58px); z-index: 90; background: #fff; overflow-y: auto; padding: 0.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); transform: translateX(100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  .m-drawer.open { transform: none; visibility: visible; }
  .m-drawer a, .m-drawer button { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0.7rem 0.4rem; font-family: inherit; font-size: 1.06rem; font-weight: 600; line-height: 1.25; color: var(--navy-900); text-decoration: none; border: 0; border-bottom: 1px solid var(--slate-200); background: none; text-align: left; cursor: pointer; }
  .m-drawer a.active { color: var(--orange-600); }
  .m-drawer .m-drawer-actions { display: grid; gap: 0.6rem; margin-top: 1rem; }
  .m-drawer .m-drawer-actions button, .m-drawer .m-drawer-actions a { justify-content: center; border: 1px solid var(--slate-300); border-radius: 10px; background: var(--slate-100); }
  .m-drawer .m-drawer-actions .primary { background: var(--orange-500); border-color: var(--orange-500); color: #fff; }
  .m-drawer .m-contact { margin-top: 1rem; font-size: 0.9rem; color: var(--slate-600); line-height: 1.6; }
  body.m-lock { overflow: hidden; }

  /* ---- Quick actions: Call / Directions / Fuel ---- */
  .m-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.65rem 0.75rem; background: var(--navy-900); }
  .m-quick a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 56px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-weight: 700; font-size: 0.86rem; text-decoration: none; }
  .m-quick a .i { font-size: 1.2rem; line-height: 1; }
  .m-quick a.fuel { background: var(--orange-500); border-color: var(--orange-500); }

  /* ---- Bottom quick-nav ---- */
  .m-bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff; border-top: 1px solid var(--slate-200); box-shadow: 0 -4px 16px rgba(15,23,42,0.08); padding-bottom: env(safe-area-inset-bottom); }
  .m-bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60px; gap: 2px; font-size: 0.7rem; font-weight: 700; color: var(--slate-600); text-decoration: none; }
  .m-bottom-nav a .i { font-size: 1.25rem; line-height: 1; }
  .m-bottom-nav a.active { color: var(--orange-600); }

  /* ---- General layout & type ---- */
  .section { padding: 2.25rem 1rem; }
  .section-header { margin-bottom: 1.25rem; }
  .section-title { font-size: 1.4rem; line-height: 1.2; }
  .section-subtitle { font-size: 0.95rem; }
  .btn { min-height: 44px; justify-content: center; font-size: 0.95rem; }
  .btn-sm { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.88rem; padding: 0.5rem 0.9rem; }
  input, select, textarea { font-size: 16px !important; }
  .hero-inner, .weather-grid, .board-grid, .pilot-grid, .cards-3, .attraction-grid, .footer-grid { grid-template-columns: 1fr; }

  /* ---- Home hero: headline, then fuel prices, then intro ---- */
  .hero { padding: 1.4rem 0.9rem 1.75rem; }
  .hero-inner { gap: 1rem; }
  .hero-inner > div:first-child { display: contents; }
  .hero-tag { order: 1; justify-self: start; font-size: 0.7rem; padding: 0.3rem 0.65rem; }
  .hero h2 { order: 2; font-size: 1.7rem; margin: 0; }
  .hero-inner > .fuel-card { order: 3; }
  .hero p { order: 4; font-size: 0.98rem; margin: 0; }
  .fuel-card { padding: 1rem; }
  .fuel-card-header { gap: 0.5rem; margin-bottom: 0.8rem; padding-bottom: 0.7rem; }
  .fuel-card-title { font-size: 1.02rem; }
  .fuel-badge { white-space: nowrap; flex: 0 0 auto; }
  .fuel-grid { gap: 0.6rem; margin-bottom: 0.8rem; }
  .fuel-box { padding: 0.8rem 0.7rem; }
  .fuel-price { font-size: 1.85rem; }
  .fuel-note { font-size: 0.74rem; }
  .fuel-footer { flex-direction: column; align-items: flex-start; gap: 0.2rem; }

  /* ---- Live weather section ---- */
  .weather-section { padding: 1.5rem 0.9rem; }
  .weather-title { font-size: 1.2rem; }
  .weather-badge { font-size: 0.64rem; letter-spacing: 0.04em; }
  .weather-status-controls { align-items: stretch; width: 100%; }
  .weather-status-controls > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr; }
  .wx-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 0.82rem; }
  .weather-grid { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .wx-card { padding: 0.75rem; }
  .wx-card-label { font-size: 0.66rem; }
  .wx-card-icon { display: none; }
  .wx-main-row { gap: 0.4rem; margin-bottom: 0.5rem; }
  .wx-value { font-size: 1.35rem; }
  .wx-value small { font-size: 0.72rem; }
  .wx-subvalue { font-size: 0.74rem; }
  .wx-detail-bar { flex-direction: column; align-items: flex-start; gap: 0.15rem; font-size: 0.7rem; }
  .compass-dial { width: 46px; height: 46px; flex: 0 0 auto; }
  .compass-arrow { width: 22px; height: 22px; }
  .wx-card-compass { grid-column: 1 / -1; }
  .weather-grid > .wx-card:last-child { grid-column: 1 / -1; }
  .wx-compass-row { gap: 0.6rem; }
  .wind-rose-wrap { width: 140px; height: 140px; }
  .wx-wind-line { font-size: 0.95rem; margin-top: 0; }
  .wx-decl-note { font-size: 0.64rem; }

  /* ---- Board page ---- */
  .board-hero { padding: 1.6rem 1rem 1.6rem !important; }
  .board-hero h2 { font-size: 1.55rem !important; }
  .notice-grid { grid-template-columns: 1fr !important; gap: 0.6rem !important; }
  .board-hero-actions .btn { flex: 1 1 100%; }
  .doc-controls { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .doc-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .doc-tab { min-height: 44px; padding: 0.45rem 0.5rem; font-size: 0.82rem; line-height: 1.2; }
  .doc-filters { display: grid; grid-template-columns: 1fr; width: 100%; gap: 0.5rem; }
  .doc-filters > * { width: 100% !important; }
  .input-control { min-height: 44px; width: 100%; }
  .doc-item { flex-direction: column; align-items: stretch; gap: 0.65rem; padding: 0.9rem 0.9rem; }
  .doc-info { gap: 0.65rem; }
  .doc-meta { gap: 0.2rem 0.75rem; }
  .doc-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .badge-status { margin-left: 0; margin-top: 0.25rem; }
  .doc-group-header { padding: 0.6rem 0.9rem; }
  .pdf-modal { width: 100%; height: calc(100dvh - 1rem); }
  .pdf-modal-header { flex-wrap: wrap; padding: 0.75rem; }

  /* ---- Gallery page ---- */
  .gal-hero { padding: 1.6rem 1rem 1.5rem !important; }
  .gal-hero h2 { font-size: 1.5rem !important; }
  .gal-main { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }
  .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.55rem !important; }
  .gal-lightbox { padding: 3.5rem 0.25rem 5.5rem !important; touch-action: pan-y; }
  .gal-lb-figure img { max-width: calc(100vw - 0.5rem) !important; max-height: calc(100dvh - 11rem) !important; }
  .gal-lb-btn { width: 52px !important; height: 52px !important; }
  .gal-lb-prev, .gal-lb-next { top: auto !important; bottom: calc(1rem + env(safe-area-inset-bottom)) !important; transform: none !important; }
  .gal-lb-hint { display: block; position: absolute; left: 0; right: 0; bottom: calc(1.9rem + env(safe-area-inset-bottom)); text-align: center; color: #94a3b8; font-size: 0.78rem; pointer-events: none; }
  .gal-x { min-width: 44px; min-height: 44px; }
  .gal-admin-bar { flex-direction: column; align-items: stretch !important; gap: 0.5rem; }
  .gal-del { min-width: 40px; min-height: 40px; }

  /* ---- Modals fit the screen ---- */
  .modal-backdrop { padding: 0.5rem; align-items: flex-start; }
  .modal { padding: 1.15rem; max-height: calc(100dvh - 1rem); overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: max(0.5rem, env(safe-area-inset-top)); }
  .modal .btn { flex: 1 1 auto; }
  .form-group input { min-height: 46px; }

  /* ---- Footer ---- */
  .site-footer { padding: 2rem 1rem 1.5rem !important; }
  .footer-grid { gap: 1.6rem; }
  .site-footer ul li a { display: block; padding: 0.55rem 0; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form .full { grid-column: auto; }
  .contact-form input, .contact-form textarea { min-height: 46px; }
  .footer-bottom { flex-direction: column; gap: 0.4rem; }
  [id] { scroll-margin-top: 70px; }

  /* enlarge hit area of inline text links without changing layout */
  p a:not(.btn), span a:not(.btn), small a, td a { padding: 12px 2px; margin: -12px -2px; }

  /* CTAF notice on phones */
  .ctaf-notice { padding: 0.6rem 0.9rem; }
  .ctaf-notice-inner { justify-content: flex-start; align-items: flex-start; gap: 0.55rem; }
  .ctaf-notice-icon { font-size: 1.15rem; margin-top: 0.1rem; }
  .ctaf-notice-text { font-size: 0.9rem; text-align: left; overflow-wrap: normal; }
}