/* ============================================================
   SUNSHINE WELLNESS — mobile.css  (v8)
   Responsive overrides. Loaded AFTER style.css, so rules here win.

   Desktop-first: the max-width blocks cascade DOWN the page and are
   ordered largest → smallest, so a given small screen matches several
   and the smallest (last) one takes precedence.
   ============================================================ */

/* ---------- ≥ 1200px — extra large ------------------------------ */
@media (min-width: 1200px) {

}

/* ---------- ≤ 1199.98px — lg ------------------------------------ */
@media (max-width: 1199.98px) {

}

/* ---------- ≤ 991.98px — md-lg / tablets ------------------------ */
@media (max-width: 991.98px) {
  /* Navbar: just the logo mark */
  .brand__name { display: none; }

  /* Why Us: 4 → 2 columns */
  .why__grid { grid-template-columns: repeat(2, 1fr); }

  /* Wave dividers: widen so the curve stays pronounced as the screen narrows */
  .quick-cards__wave svg,
  .why__divider svg,
  .cta__wave svg { width: 151%; }
}

/* ---------- ≤ 767.98px — md ------------------------------------- */
@media (max-width: 767.98px) {
  /* --- Navbar --- */
  .nav-links { display: none; }                  /* now lives in the slide-out menu */
  .nav-toggle { display: inline-flex; }
  .nav-actions { gap: 0.5rem; }
  .nav-actions .btn { padding: 0.6rem 1.15rem; font-size: 0.9rem; }

  /* --- Hero: stack copy over image --- */
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 4rem;
    padding-top: clamp(2.5rem, 7vw, 3.5rem);
    padding-bottom: clamp(7.5rem, 11vw, 7rem);   /* gap above the (less-overlapping) card */
  }
  .hero__title { font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .hero__subtext { font-size: 1.1rem; max-width: none; }
  .hero__img { height: 360px; }
  .hero__chip { left: 14px; right: auto; bottom: 14px; }   /* keep the badge inside the image */

  /* --- Welcome card: less overlap into the hero + stack image over text --- */
  .quick-cards__inner { margin-top: -40px; }     /* desktop is -150px, far too much when the hero is short */
  .welcome-card__img { position: static; width: 100%; height: 220px; }
  .welcome-card__body { margin-left: 0; }

  /* --- About: stack copy over the images --- */
  .about__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about__img-main { width: 100%; aspect-ratio: 4 / 3; }   /* shorter than the desktop square */
  .about__img-sub { left: 0; bottom: -1rem; width: 40%; }  /* keep the overlap inside the frame */

  /* --- Services: stack the two cards --- */
  .services__grid { grid-template-columns: 1fr; }

  /* --- Meet the Team: stack the two cards --- */
  .team__grid { grid-template-columns: 1fr; }

  /* --- Visit: info over map, shorter map, let long values wrap --- */
  .visit__grid { grid-template-columns: 1fr; }
  .visit__map,
  .visit__map iframe { min-height: 320px; }
  .info-v { overflow-wrap: anywhere; }

  /* --- CTA: stack the buttons full-width; tame the logo accent --- */
  .cta__actions { flex-direction: column; align-items: stretch; }
  .cta__actions .btn { width: 100%; }
  .cta__mark { width: 280px; }

  /* --- Footer: brand full-width, links in two columns --- */
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ---------- ≤ 575.98px — sm ------------------------------------- */
@media (max-width: 575.98px) {
  /* Utility bar: drop the phone, keep the address */
  .utility-bar__item:last-child { display: none; }

  /* Hero: full-width stacked CTAs, smaller media + headline */
  .hero__title { font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__img { height: 300px; }

  /* Why Us: 2 → 1 column */
  .why__grid { grid-template-columns: 1fr; }

  /* Footer: stack all columns */
  .foot-top { grid-template-columns: 1fr; }
}

/* ---------- ≤ 381.98px — xs ------------------------------------- */
@media (max-width: 381.98px) {
  /* Navbar: drop the inline Book CTA — it still lives in the slide-out menu */
  .nav-actions .btn { display: none; }

  /* Hero: tighten the headline + media a touch more */
  .hero__title { font-size: 1.95rem; }
  .hero__img { height: 250px; }

  /* Wave dividers: widen further on the smallest screens */
  .quick-cards__wave svg,
  .why__divider svg,
  .cta__wave svg { width: 217%; }
}