/* ==========================================================================
   Responsive — Media queries for all components
   ========================================================================== */

/* ------------------------------------------------------------------
   Large tablet / Small desktop (max-width: 1280px)
   ------------------------------------------------------------------ */
@media only screen and (max-width: 1280px) {
  .container {
    width: 85%;
  }
}

/* ------------------------------------------------------------------
   Tablet (max-width: 980px)
   ------------------------------------------------------------------ */
@media only screen and (max-width: 980px) {
  /* Hero */
  .hero {
    height: var(--hero-height-tablet);
  }

  /* Section padding */
  .section--welcome {
    padding-top: 100px;
  }

  .section--healthy {
    padding-top: 50px;
  }

  .section--discovery {
    padding-top: 50px;
  }

  .section--discovery .section__row {
    margin-bottom: 50px;
  }

  /* Images auto width */
  .section__col--image img,
  .section__sticky-image img {
    width: auto;
    max-width: 100%;
  }

  /* Sticky images become non-sticky */
  .section__sticky-image {
    position: static;
  }

  /* Inline image spacing reset */
  .section__inline-image {
    margin-left: 0;
  }

  /* Brands — 2-column */
  .brands {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer — 2-column wrap */
  .footer__columns {
    flex-wrap: wrap;
  }

  .footer__col {
    flex: none;
    width: 46.25%;
    margin-bottom: 7.5%;
  }

  .footer__col:last-child {
    margin-bottom: 0;
  }
}

/* ------------------------------------------------------------------
   Mobile (max-width: 768px)
   ------------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
  /* Hero */
  .hero {
    height: var(--hero-height-mobile);
  }

  /* Hide bouncing arrow on mobile */
  .hero__arrow {
    display: none;
  }

  /* Typography — h1 shrinks */
  .section h1,
  .section--brands h1 {
    font-size: 40px;
  }

  /* Sections stack to single column */
  .section__row,
  .section__row--reversed {
    flex-direction: column;
  }

  /* Columns become full width */
  .section__col--text,
  .section__col--image,
  .section__row--reversed .section__col--text,
  .section__row--reversed .section__col--image {
    width: 100%;
    margin-right: 0;
  }

  .section__col--image {
    margin-top: 30px;
  }

  .section__row--reversed .section__col--image {
    margin-top: 0;
    margin-bottom: 30px;
  }

  /* Portrait images full width */
  .section__col--image img,
  .section__sticky-image img {
    width: 100%;
  }

  /* Section padding adjustments */
  .section--welcome {
    padding-top: 50px;
  }

  .section--healthy,
  .section--discovery {
    padding-top: 20px;
  }

  .section {
    padding: 20px 0;
  }

  .section--discovery .section__row {
    margin-bottom: 30px;
  }

  /* Brands section */
  .section--brands {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .brands {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Nav overlay — smaller text */
  .nav-overlay__link {
    font-size: 40px;
  }

  .nav-overlay__list li {
    margin-bottom: 10px;
  }

  /* Footer — single column */
  .footer__columns {
    flex-direction: column;
  }

  .footer__col {
    width: 100%;
    margin-bottom: 9.5%;
  }

  .footer__col:last-child {
    margin-bottom: 0;
  }

  /* Map right after contact details on mobile */
  .footer__col:nth-child(1) { order: 0; }
  .footer__map { order: 1; margin-bottom: 9.5%; }
  .footer__col:nth-child(2) { order: 2; }
  .footer__col:nth-child(3) { order: 3; }

  /* Hamburger padding adjustment */
  .header__inner {
    padding: 15px 20px;
  }

  .header__hamburger {
    left: 20px;
  }

  .header__right {
    right: 20px;
  }

  /* Inline image spacing */
  .section__inline-image {
    margin-top: 40px;
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------
   Small mobile (max-width: 600px)
   ------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
  .container {
    width: 90%;
  }

  /* Brands — single column on very small screens */
  .brands {
    grid-template-columns: 1fr;
  }

  /* Tighter section spacing */
  .section--brands {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  /* Booking CTA — slightly smaller */
  .booking-cta {
    font-size: 14px;
    padding: 8px 20px;
    right: 15px;
    bottom: 15px;
  }
}