/* ==========================================================================
   RESPONSIVE.CSS — Breakpoint fine-tuning (mobile-first overrides)
   ========================================================================== */

/* ---------- Global mobile safety net ----------
   auto-fill + minmax() grids (grid--services/why/regions/blog) can force a
   column wider than the viewport on very narrow phones (<360px), causing
   horizontal scroll — one of the most common mobile-usability failures.
   Below that width we drop straight to a single explicit column. */
@media (max-width: 359px) {
  .grid--services,
  .grid--why,
  .grid--regions,
  .grid--blog {
    grid-template-columns: 1fr;
  }
}

/* overflow-wrap safety net: long unbroken strings (long mahalle names,
   emails, URLs typed into results) must never force horizontal scroll */
h1, h2, h3, h4, p, a, .card__title, .card__desc {
  overflow-wrap: break-word;
  word-break: break-word;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 640px) {
  :root { --header-h: 72px; }
  .section { padding-block: var(--sp-6); }
  .hero { min-height: 96vh; }
  .hero__content { padding-block: var(--sp-6) var(--sp-5); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  h1 { letter-spacing: -0.01em; }
}

/* ---------- Very narrow phones (iPhone SE / older Android, ~320-359px) ----------
   The brand wordmark is white-space:nowrap by design (see layout.css), but
   combined with the search icon + hamburger button it can overflow a 320px
   screen. Shrink the wordmark and tighten gaps instead of letting it wrap
   mid-word or push the header off-screen. */
@media (max-width: 380px) {
  .header-inner { gap: var(--sp-1); }
  .brand { font-size: var(--fs-300); gap: 0.35rem; }
  .brand__mark { width: 34px; height: 34px; font-size: 0.75rem; }
  .header-actions { gap: 0.4rem; }
  .hero__badges .badge { font-size: 0.68rem; padding: 0.4rem 0.7rem; }
  .hero__cta-row .btn { flex: 1 1 100%; }
}

@media (min-width: 641px) and (max-width: 959px) {
  .grid--2 { grid-template-columns: 1fr; }
}

@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}

/* ---------- Fixed-position mobile UI must respect the iOS home-indicator /
   Android gesture-bar safe area, or it either overlaps system UI or leaves
   an ugly white gap depending on device. ---------- */
.mobile-action-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.has-mobile-bar {
  padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
}

/* Map embed: a 16:6 desktop banner ratio is too short to pan/zoom on a
   phone — give it a taller, more usable ratio below 640px. */
.map-embed { aspect-ratio: 16 / 6; }
@media (max-width: 640px) {
  .map-embed { aspect-ratio: 4 / 5; }
}

/* Print */
@media print {
  .site-header, .mobile-action-bar, .site-footer, .theme-toggle { display: none !important; }
}