/* ==========================================================================
   Responsive Styles — Tablet, Mobile, Small Mobile
   ========================================================================== */

/* ==========================================================================
   TABLET (768px – 1024px)
   ========================================================================== */

@media (max-width: 1024px) and (min-width: 768px) {

  /* Header */
  .header__title {
    font-size: 0.95rem;
  }

  .header__logo-img {
    height: 36px;
  }

  /* Hero */
  .hero__heading {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
  }

  .hero__subtext {
    font-size: 1rem;
  }

  /* Journey */
  .journey__container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  /* CTA */
  .cta-section__heading {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  }

  /* Progress bar */
  .progress-bar__phase {
    font-size: 11px;
  }
}


/* ==========================================================================
   MOBILE (below 768px)
   ========================================================================== */

@media (max-width: 767px) {

  /* ---------- Header ---------- */
  .header {
    height: 60px;
  }

  .header__cta {
    display: none;
  }

  .header__logo-img {
    height: 32px;
  }

  /* ---------- Hero ---------- */
  .hero {
    min-height: auto;
    padding: calc(var(--header-height) + var(--space-sm)) 0 var(--space-lg);
  }

  /* Reorder: map first, then text below */
  .hero__inner {
    display: flex;
    flex-direction: column;
  }

  .hero__map {
    order: -1;
    margin-bottom: var(--space-lg);
  }

  .hero__map-img {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero__map-expand {
    display: flex;
  }

  .hero__heading {
    font-size: 1.75rem;
    margin-bottom: var(--space-sm);
    padding: 0 var(--space-md);
  }

  .hero__subtext {
    font-size: 0.95rem;
    margin-bottom: var(--space-md);
    padding: 0 var(--space-md);
  }

  .hero__scroll-hint {
    padding: 0 var(--space-md);
  }

  .hero::before {
    width: 300px;
    height: 300px;
    top: -15%;
    right: -15%;
  }

  /* ---------- Journey: reduce top padding ---------- */
  .journey {
    padding: var(--space-lg) 0 var(--space-2xl);
  }

  .journey__container {
    padding: var(--space-md) var(--space-md) var(--space-xl);
  }

  /* ---------- Progress bar ---------- */
  .progress-bar__phases {
    height: 30px;
    padding: 0 var(--space-xs);
  }

  .progress-bar__phase {
    font-size: 10px;
    letter-spacing: 0;
  }

  /* ---------- Video modal ---------- */
  .video-modal {
    padding: var(--space-sm);
  }

  .video-modal__content {
    max-width: 100%;
    border-radius: var(--radius-md);
  }

  .video-modal__close {
    top: -48px;
    width: 44px;
    height: 44px;
  }

  /* ---------- CTA section ---------- */
  .cta-section {
    padding: var(--space-2xl) var(--space-md);
  }

  .cta-section__heading {
    font-size: 1.5rem;
  }

  .cta-section__text {
    font-size: 0.95rem;
  }

  /* ---------- Footer ---------- */
  .footer {
    padding: var(--space-xl) var(--space-md);
  }

  .footer__disclaimer {
    font-size: 0.72rem;
    line-height: 1.6;
  }

  .footer__copyright {
    font-size: 0.72rem;
  }

  /* ---------- Buttons: touch targets ---------- */
  .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.8em 1.4em;
  }

  .step__video-btn {
    min-height: 44px;
    padding: 0.6em 1.2em;
    font-size: 0.8rem;
  }

  /* ---------- Container override ---------- */
  .container {
    padding: 0 var(--space-md);
  }
}


/* ==========================================================================
   SMALL MOBILE (below 480px)
   ========================================================================== */

@media (max-width: 479px) {

  /* Hero */
  .hero {
    padding: calc(var(--header-height) + var(--space-md)) 0 var(--space-md);
    min-height: auto;
  }

  .hero__heading {
    font-size: 1.5rem;
    padding: 0 var(--space-sm);
  }

  .hero__subtext {
    font-size: 0.88rem;
    margin-bottom: var(--space-sm);
    padding: 0 var(--space-sm);
  }

  .hero__scroll-hint {
    font-size: 0.75rem;
    padding: 0 var(--space-sm);
  }

  /* Journey container: tighten left gutter — handled by road.css */

  /* Progress bar */
  .progress-bar__phase {
    font-size: 9px;
  }

  .progress-bar__phases {
    height: 26px;
  }

  /* CTA */
  .cta-section {
    padding: var(--space-xl) var(--space-sm);
  }

  .cta-section__heading {
    font-size: 1.35rem;
  }

  .cta-section__text {
    font-size: 0.88rem;
  }

  /* Footer */
  .footer__disclaimer {
    font-size: 0.68rem;
  }

  .footer__copyright {
    font-size: 0.68rem;
  }

  /* Header */
  .header {
    height: 54px;
  }

  .header__logo-img {
    height: 26px;
  }

  /* Container */
  .container {
    padding: 0 var(--space-sm);
  }
}


/* ==========================================================================
   GENERAL RESPONSIVE SAFETY
   ========================================================================== */

/* Prevent horizontal overflow at all sizes */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Ensure all images and SVGs respect container bounds */
img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Touch target minimum — apply to interactive elements */
@media (pointer: coarse) {
  .btn,
  .step__video-btn,
  .video-modal__close,
  .header__cta {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Reduced motion: disable bounce and timeline animations */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-arrow {
    animation: none !important;
  }

  .step__card {
    transition: opacity var(--duration-fast) var(--ease-smooth) !important;
  }

  .journey__container::before,
  .journey__container::after {
    transition: none !important;
  }
}