/* ============================================================
   Responsive — Mobile-First Media Queries
   ============================================================
   Breakpoints: 576, 768, 992, 1200, 1440
   Fixes for mobile/tablet overflow and layout issues.
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   BASE MOBILE FIXES (< 576px)
   ══════════════════════════════════════════════════════════════ */

/* Ensure nothing overflows */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Top bar mobile */
@media (max-width: 767px) {
  .top-bar__contacts {
    gap: var(--space-sm);
    font-size: var(--text-caption);
  }

  .top-bar__contact-item:last-child {
    display: none; /* Hide location on mobile */
  }

  .top-bar__badge {
    display: none;
  }
}

/* ── Mobile CTA Bar ───────────────────────────────────────── */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 991px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md) var(--container-padding);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    z-index: var(--z-sticky);
    gap: var(--space-sm);
  }

  .mobile-cta-bar .btn {
    flex: 1;
  }

  /* Add bottom padding to body to account for fixed CTA bar */
  body {
    padding-bottom: 80px;
  }
}

/* ══════════════════════════════════════════════════════════════
   SMALL PHONES (< 576px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  .hero {
    height: 70vh;
    min-height: 400px;
  }

  .hero__content {
    padding-block: var(--space-2xl);
  }

  .hero__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .hero__subtitle {
    font-size: var(--text-small);
  }

  .hero__indicators {
    bottom: var(--space-lg);
  }

  /* Stats bar — stack or 2x2 */
  .stats-bar {
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-md);
  }

  .stats-bar__divider {
    display: none;
  }

  .stats-bar__item {
    min-width: calc(50% - var(--space-md));
  }

  /* Floating badge repositioned */
  .floating-badge {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: var(--space-md);
    display: inline-flex;
    flex-direction: column;
  }

  /* Section padding reduced */
  .section {
    padding-block: var(--space-2xl);
  }

  /* Cards full-width */
  .card--pub {
    width: 280px;
  }
}

/* ══════════════════════════════════════════════════════════════
   LARGE PHONES (≥ 576px)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 576px) {
  .stats-bar {
    flex-wrap: nowrap;
  }
}

/* ══════════════════════════════════════════════════════════════
   TABLETS (≥ 768px)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .hero {
    height: 80vh;
    min-height: 500px;
  }

  .top-bar__contact-item:last-child {
    display: flex; /* Show location on tablet+ */
  }

  .card--pub {
    width: 320px;
  }
}

/* ══════════════════════════════════════════════════════════════
   SMALL DESKTOPS (≥ 992px)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .hero {
    height: 85vh;
  }

  .mobile-cta-bar {
    display: none;
  }

  body {
    padding-bottom: 0;
  }

  /* Grid-split with reverse in desktop */
  .grid-split--reverse > *:first-child {
    order: 2;
  }
  .grid-split--reverse > *:last-child {
    order: 1;
  }
}

/* ══════════════════════════════════════════════════════════════
   DESKTOPS (≥ 1200px)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .hero__content {
    max-width: 700px;
  }
}

/* ══════════════════════════════════════════════════════════════
   LARGE DESKTOPS (≥ 1440px)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .container {
    max-width: var(--container-max);
  }
}