/* ============================================================
   RISHIKESH YOGPEETH — responsive.css
   Breakpoint order: large desktop → laptop → tablet → mobile.
   iPhone 15 / 15 Pro (393px), 15 Plus / Pro Max (430px) receive
   dedicated tuning at the bottom.
   ============================================================ */

/* ---------- LARGE DESKTOP ≥1400px ---------- */
@media (min-width: 1400px) {
  .container-xl { max-width: 1240px; }
}

/* ---------- LAPTOP ≤1199px ---------- */
@media (max-width: 1199.98px) {
  :root { --section-pad: 5rem; }
}

/* ---------- TABLET LANDSCAPE ≤991px ---------- */
@media (max-width: 991.98px) {
  :root { --section-pad: 4.25rem; }
  .hero { padding-top: 2.6rem; }
  .hero-media { min-height: 380px; }
  .media-tall { min-height: 340px; }

  /* Timeline: 4 columns, no connecting line */
  .timeline { grid-template-columns: repeat(4, 1fr); row-gap: 2.2rem; }
  .timeline::before { display: none; }

  /* Reviews: horizontal scroll-snap track */
  .review-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;   /* iOS momentum scrolling */
    padding-bottom: .75rem;
    margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem));
    padding-right: var(--bs-gutter-x, 1.5rem);
    scrollbar-width: none;
  }
  .review-track::-webkit-scrollbar { display: none; }
  .review-card {
    flex: 0 0 78%;
    max-width: 380px;
    scroll-snap-align: start;
  }
}

/* ---------- TABLET PORTRAIT ≤767px ---------- */
@media (max-width: 767.98px) {
  :root { --section-pad: 3.5rem; }
  .section-head { margin-bottom: 2.2rem; }
  .final-cta { padding: 3.2rem 1.6rem; }
  .retreat-strip { padding: 1.2rem; }

  /* Intakes table: keep native table but tighten */
  .intake-table thead th, .intake-table tbody th, .intake-table tbody td { padding: .7rem .8rem; font-size: .88rem; }

  /* Climb ribbon: allow gentle horizontal pan rather than shrinking text below legibility */
  .climb { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .climb svg { min-width: 700px; }
}

/* ---------- LARGE MOBILE ≤575px (covers iPhone 15 Plus / Pro Max at 430px) ---------- */
@media (max-width: 575.98px) {
  :root { --section-pad: 3rem; --header-h: 64px; }
  body { font-size: 1rem; }

  .display-title { font-size: clamp(2.05rem, 8.4vw, 2.5rem); }
  .lede { font-size: 1.02rem; }

  .hero { padding-top: 1.8rem; }
  .hero-media { min-height: 330px; }

  /* Review card inside hero flows below image on small screens */
  .hero-review {
    position: static;
    max-width: none;
    margin: .8rem;
  }
  .hero .ph { flex-direction: column; align-items: stretch; justify-content: flex-end; }

  /* Full-width CTAs: comfortable one-thumb targets */
  .hero .btn-lg-cta, .final-cta .btn-lg-cta { width: 100%; }

  .timeline { grid-template-columns: 1fr 1fr; }
  .review-card { flex-basis: 86%; }
  .gal-tile { min-height: 160px; }

  /* Trust bar counters: two per row is set by col-6; tighten size */
  .stat-num { font-size: 1.7rem; }

  /* Announcement bar: single line with ellipsis to protect nav height */
  /*.announce { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }*/

  /* Leave room above sticky mobile CTA at page bottom */
  .site-footer { padding-bottom: calc(6.5rem + var(--safe-bottom)); }

  /* WhatsApp float rides above the sticky CTA bar */
  .wa-float { bottom: calc(5.4rem + var(--safe-bottom)); width: 52px; height: 52px; }
}

/* ---------- iPHONE 15 / 15 PRO (393px) & 15 PLUS / PRO MAX (430px) ---------- */
/* Devices report 390–430 CSS px; this band fine-tunes for them. */
@media (min-width: 380px) and (max-width: 440px) {
  .container-xl {
    padding-left: max(1.15rem, var(--safe-left));
    padding-right: max(1.15rem, var(--safe-right));
  }
  .display-title { letter-spacing: -0.015em; }
  .course-card .card-title { font-size: 1.3rem; }
  .btn { font-size: .95rem; }
  /* Router cards stack with tighter padding */
  .router-card { padding: 1.5rem 1.3rem; }
}

/* ---------- SMALL MOBILE ≤374px (SE-class safety net) ---------- */
@media (max-width: 374.98px) {
  .display-title { font-size: 1.85rem; }
  .trust-chips li { font-size: .8rem; }
  .mobile-cta .btn { font-size: .85rem; padding-inline: .5rem; }
}

/* ---------- iPHONE LANDSCAPE (notch on the side) ---------- */
@media (max-height: 440px) and (orientation: landscape) {
  :root { --section-pad: 2.4rem; }
  .mobile-cta { display: none !important; }   /* keep viewport clear in landscape */
  .hero-media { min-height: 240px; }
}

/* ---------- COURSE PAGE COMPONENTS ---------- */
@media (max-width: 991.98px) {
  .price-panel { border-left: none; padding-left: 0; border-top: 1px solid var(--ryp-line); padding-top: 1.4rem; margin-top: 1.4rem; }
  .hour-legend { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  .sched-row { grid-template-columns: 120px 1fr; }
  .journey-seg { padding: 0 .8rem; }
  .journey-seg strong { font-size: .85rem; }
}
@media (max-width: 575.98px) {
  .hour-legend { grid-template-columns: 1fr; }
  .hour-seg { font-size: .72rem; }
  .path-track { grid-template-columns: 1fr; gap: 1.8rem; }
  .path-track::before { display: none; }
  .shat-grid { grid-template-columns: 1fr 1fr; }
  .save-row { grid-template-columns: 1fr auto; }
  .date-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 374.98px) {
  .date-grid { grid-template-columns: 1fr; }
}