/* =========================================================
   media.css
   Responsive overrides (load AFTER your other CSS files)
   Goal: keep changes minimal + safe, and only override where
   screens get smaller/larger.
   ========================================================= */

/* Helpful default to avoid accidental horizontal scrolling */
html, body {
  overflow-x: hidden;
}

/* Make images responsive by default */
img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------
   Breakpoints (mobile-first)
   - Base styles belong in your regular CSS
   - Overrides live here
   --------------------------------------------------------- */

/* 0–575px: phones */
@media (max-width: 575.98px) {
  /* If your hero uses a fixed background, disable it on mobile
     (fixed backgrounds are janky on many mobile browsers). */
  .section1 {
    background-attachment: scroll;
  }

  /* If you use the hero-banner component, reduce padding/height */
  .hero-banner {
    height: auto;
    min-height: 20vh !important;
    padding: 3rem 1.25rem;
  }

  /* Motion case-study hero content (mobile) */
  .hero-content {
    padding: 0.45rem !important;
    min-height: 9vh !important;
  }

  /* Slider: avoid hard-coded desktop widths on phones */
  .custom-scroll-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .slider {
    width: 100%;
  }

  /* These values are safe even if your slider is custom;
     if the selectors exist, it will prevent overflow. */
  .slide-track {
    width: 100%;
  }

  /* If your outer slide wrapper has a fixed small size, override it */
  .slide {
    width: 92vw !important;
    max-width: 92vw !important;
    height: auto !important;
    flex: 0 0 auto;
  }

  /* Ensure the track lays slides out horizontally and doesn't shrink them */
  .slide-track {
    display: flex !important;
    gap: 1rem;
    align-items: center;
  }

  /* Slider: make each showcase item LARGE on phones */
  .slide-inner {
    width: 92vw !important;
    max-width: 92vw !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    margin: 0 auto;
  }

  /* Ensure the media inside each slide fills the slide */
  .slide-inner img,
  .slide-inner picture,
  .slide-inner video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }

  /* Lightbox: keep controls reachable on small screens */
  .lightbox-content {
    width: 92vw;
    max-height: 82vh;
  }

  .lightbox-controls {
    gap: 0.5rem;
  }

  /* Timeline: keep text readable and spacing tight */
  .timeline-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* 576–767px: large phones / small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
  .section1 {
    background-attachment: scroll;
  }

  .hero-banner {
    height: auto;
    min-height: 75vh;
    padding: 4rem 2rem;
  }
  
  .slider {
    margin-left: -85px;
}

  .slide {
    width: 86vw !important;
    max-width: 86vw !important;
    height: auto !important;
    flex: 0 0 auto;
  }

  .slide-track {
    display: flex !important;
    gap: 1rem;
    align-items: center;
  }

  /* Slider: keep items big on large phones / small tablets */
  .slide-inner {
    width: 86vw !important;
    max-width: 86vw !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    margin: 0 auto;
  }

  .slide-inner img,
  .slide-inner picture,
  .slide-inner video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }
}

/* 768–991px: tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-banner {
    padding: 6rem 3rem;
  }
}


/* 1200–1399px: iPad Pro 11" landscape (1366px wide) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* Optional: constrain very wide layouts if needed */
  .container {
    max-width: 1140px;
  }
}

/* 1200px+: motion case-study hero refinement (desktop only) */
@media (min-width: 1200px) {
  .hero-banner,
  .hero-content {
    min-height: 45vh;
  }
}

/* >= 1400px: extra-large desktops */
@media (min-width: 1400px) {
  .container {
    max-width: 1240px;
  }
}

/* ===== Desktop tweaks (≥ 992px) ===== */
@media (min-width: 992px) {
  .navbar .theme-toggle {
    margin-left: 1rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .route-btn::before {
    transition: none;
  }
}