/* ==========================================================================
   Jnaneshwari Ayush Foundation's (R) — Sanatana Bharat Holistic Healing Solutions
   Responsive Stylesheet
   --------------------------------------------------------------------------
   Breakpoints (max-width, mobile-last cascade):
     1560px  Nav tightening (last width the nine-item bar fits comfortably)
     1500px  Navigation drawer activates
     1400px  Large desktop
     1200px  Small desktop / large laptop
      860px  Tablet portrait
      640px  Large mobile
      420px  Small mobile
   ========================================================================== */

/* ==========================================================================
   Container gutters — stepped, not fluid
   --------------------------------------------------------------------------
   A single clamp() could not hit every tier of the brief at once (it
   undershot tablet badly), so the gutter steps at explicit breakpoints:

     desktop 40px      <=768px 24px      <=480px 15px

   One container, one set of gutters, every page. Content never touches the
   viewport edge at any width.
   ========================================================================== */
@media (max-width: 768px) { :root { --gutter: 1.5rem; } }
@media (max-width: 480px) { :root { --gutter: 0.9375rem; } }

/* ==========================================================================
   1560px — final squeeze before the nav gives up and becomes a drawer
   ========================================================================== */
@media (max-width: 1560px) {
  .nav__link { padding: 0.6rem 0.42rem; letter-spacing: 0.01em; font-size: 0.87rem; }
}

/* ==========================================================================
   1400px — Large desktop
   ========================================================================== */
@media (max-width: 1400px) {
  .philosophy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery { grid-auto-rows: 172px; }
}

/* ==========================================================================
   1200px — Small desktop / large laptop
   ========================================================================== */
@media (max-width: 1200px) {
  :root { --header-h: 78px; }

  /* No .nav__link sizing here any more — below 1500px the drawer is active
     and .nav__menu .nav__link (higher specificity) owns the sizing.
     .logo__mark sizing for this tier lives in the header block further down. */

  .footer-grid { grid-template-columns: 1.4fr 1fr 1.4fr; }
  .footer-grid > *:nth-child(3) { grid-row: 2; }

  /* Attribute selector keeps specificity level with the per-view rules in
     style.css. A slider declared one-up — the banner rail — is excluded: its
     slides are full-bleed artwork and must never step down to two-up. */
  .slider[data-per-view]:not([data-per-view="1"]) .slider__slide,
  .slider:not([data-per-view]) .slider__slide { flex-basis: calc((100% - var(--slider-gap)) / 2); }

  .stat-badge { left: 0; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   1500px — navigation drawer
   --------------------------------------------------------------------------
   The nav carries nine top-level items plus the booking CTA. Measured against
   the logo lock-up and the actions cluster, that stops fitting on one line
   well before the old 1200px collapse point — so the drawer takes over here
   instead. These rules used to live in the 1200px block below.
   ========================================================================== */
@media (max-width: 1500px) {
  /* --- Mobile navigation drawer --- */
  .nav__toggle { display: grid; }

  .nav__menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1095;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.15rem;
    width: min(360px, 86vw);
    height: 100dvh;
    padding: 6rem 1.6rem 2.4rem;
    background: var(--warm-white);
    border-left: 1px solid var(--line);
    box-shadow: -24px 0 60px -30px rgba(28, 21, 46, 0.5);
    overflow-y: auto;
    transform: translateX(102%);
    transition: transform 0.5s var(--ease-out);
  }

  .nav__menu.is-open { transform: translateX(0); }

  .nav__menu .nav__link {
    padding: 0.95rem 0.4rem;
    font-size: 0.98rem;
    font-weight: 500;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }

  /* Same 32x3 pill as the desktop bar, just left-aligned under the label
     rather than centred, since drawer rows are full-width. */
  .nav__menu .nav__link::after { left: 0; bottom: 8px; transform: none; }
  .nav__menu .nav__link:hover::after { width: 20px; }
  .nav__menu .nav__link.is-active::after,
  .nav__menu .nav__link.is-active:hover::after { width: 32px; opacity: 1; }

  .nav__menu .btn { display: inline-flex; margin-top: 1.4rem; }

  /* Keep the toggle above the drawer */
  .nav__actions { z-index: 1096; }
  .nav__actions .btn--primary { display: none; }
}

@media (max-width: 1200px) {
  /* --section-y is no longer overridden here — the base clamp in style.css
     already steps the rhythm down across every tier of the brief. */

  /* --- Layout --- */
  .split,
  .split--wide-left,
  .split--wide-right { grid-template-columns: 1fr; }

  /* The service detail pages are laid out in style.css with :has() selectors
     — .split--wide-right:has(.service-block__media.media--poster) and
     friends. :has() takes the specificity of its argument, so those rules
     weigh (0,3,0) against the (0,1,0) of the plain .split--wide-right above.
     A media query adds no weight of its own, so the two-column rule kept
     winning all the way down to 400px and the picture stayed pinned beside
     the copy at phone widths. Restated here at equal weight, and later in
     the cascade, so the columns actually stack. */
  .split--wide-right:has(.service-block__media.media--poster),
  .split--wide-right:has(.service-block__media.media--fit),
  .split--wide-right:has(.service-block__media) { grid-template-columns: 1fr; }

  /* Stacked, the dividing rule has to move from the side to the top. */
  .statement-band__grid { grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 2.4rem); }
  .statement-band__aside {
    padding-left: 0;
    padding-top: clamp(1.6rem, 4vw, 2.4rem);
    border-left: 0;
    border-top: 1px solid var(--line-strong);
  }

  .sticky-col { position: static; }

  .service-block { grid-template-columns: 1fr; }
  .service-block:nth-child(even) .service-block__media { order: 0; }


  .event-feature { grid-template-columns: 1fr; }
  .event-feature__media { min-height: 260px; }

  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__step:nth-child(2)::after { display: none; }

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

  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 168px; }

  .hero { min-height: 620px; }
  .hero__inner { max-width: 100%; }

  /* Timeline switches to single-sided */
  .timeline::before { left: 24px; }
  .timeline__item { grid-template-columns: 62px 1fr; gap: 1rem; }
  .timeline__item .timeline__dot { grid-column: 1; width: 50px; height: 50px; }
  .timeline__item:nth-child(odd) .timeline__card,
  .timeline__item:nth-child(even) .timeline__card { grid-column: 2; text-align: left; }
}

/* ==========================================================================
   860px — Tablet portrait
   ========================================================================== */
@media (max-width: 860px) {
  :root { --fs-eyebrow: 0.7rem; }

  .topbar__inner { justify-content: center; }
  .topbar__list { justify-content: center; gap: 1rem; font-size: 0.74rem; }
  .topbar__socials { display: none; }

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

  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 0.6rem; }
  .counter:nth-child(odd)::before { display: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > *:nth-child(1) { grid-column: 1 / -1; }
  .footer-grid > *:nth-child(3) { grid-row: auto; }
  .footer-grid > *:nth-child(4) { grid-column: 1 / -1; }

  .slider[data-per-view] .slider__slide,
  .slider__slide { flex-basis: 100%; }

  .media-stack { padding-bottom: 3rem; }
  .media-stack__sub { width: 52%; }

  .stat-badge { left: 0; bottom: 0; padding: 0.8rem 1.1rem; }
  .stat-badge__num { font-size: 1.85rem; }

  .form-grid { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }

  .lightbox__prev { left: 0.6rem; }
  .lightbox__next { right: 0.6rem; }
  .lightbox__btn { width: 44px; height: 44px; }

  .float-call span { display: none; }
  .float-call { padding: 0.75rem; }
}

/* ==========================================================================
   640px — Large mobile
   ========================================================================== */
@media (max-width: 640px) {
  /* --section-y stays on the base clamp (40px here); the old 3.2rem forced
     51px, above the 40–50px the brief asks for on phones. */
  :root {
    --header-h: 70px;
    --r-lg: 20px;
    --r-xl: 26px;
  }

  body { line-height: 1.72; }


  .topbar { display: none; }

  .hero { min-height: 560px; padding-block: 3.2rem 5rem; }
  .hero__badge { font-size: 0.62rem; letter-spacing: 0.14em; }
  .hero__meta { gap: 1.2rem; }
  .hero__meta b { font-size: 1.5rem; }
  .hero__meta span { font-size: 0.62rem; letter-spacing: 0.12em; }
  .scroll-cue { display: none; }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--auto,
  .grid--auto-sm { grid-template-columns: 1fr; }

  .philosophy-grid { grid-template-columns: 1fr; }

  .flow { grid-template-columns: 1fr; }
  .flow__step::after { display: none; }

  .btn { padding: 0.86rem 1.6rem; font-size: 0.76rem; letter-spacing: 0.1em; }
  .btn--lg { padding: 1rem 1.9rem; font-size: 0.8rem; }
  .actions { gap: 0.6rem; }
  .actions .btn { flex: 1 1 100%; }

  .quote-block { padding: 1.2rem 1.2rem 1.2rem 1.4rem; font-size: 1.1rem; }

  .event-card { grid-template-columns: 1fr; }
  .event-card__date { justify-self: start; padding: 0.7rem 1.3rem; }
  .event-card__day { font-size: 1.8rem; }

  .course-card__foot { flex-direction: column; align-items: flex-start; }

  .gallery { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .gallery__item--wide,
  .gallery__item--tall { grid-column: auto; grid-row: auto; }

  .vtimeline { padding-left: 2.6rem; }
  .vtimeline__item::before { left: -2.6rem; width: 26px; height: 26px; }
  .vtimeline__item::after { left: calc(-2.6rem + 9px); top: 13px; width: 8px; height: 8px; }
  .vtimeline::before { left: 12px; }

  .timeline__item { grid-template-columns: 46px 1fr; }
  .timeline__dot { width: 42px; height: 42px; border-width: 4px; }
  .timeline__dot svg { width: 19px; height: 19px; }
  .timeline::before { left: 21px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-bottom__links { justify-content: center; }

  .acc__head { padding: 1rem 1.05rem; font-size: 0.92rem; }
  .acc__panel p { padding: 0 1.05rem 1.1rem; }

  .info-card { padding: 1.1rem; }
  .form-panel { padding: 1.3rem; }

  .to-top { width: 44px; height: 44px; }

  .blob { display: none; }
}

/* ==========================================================================
   420px — Small mobile
   ========================================================================== */
@media (max-width: 420px) {
  /* Gutter is owned by the stepped rules at the top of this file (15px here);
     the 1.05rem that used to sit on this line overrode them. */

  .hero__title { font-size: clamp(2.15rem, 10vw, 2.7rem); }
  .hero__tagline { font-size: 1.08rem; }

  .media-stack__sub { position: relative; width: 100%; margin-top: 0.9rem; border-width: 0; }
  .media-stack { padding: 0; }
  .stat-badge { position: relative; left: auto; bottom: auto; margin-top: 1rem; animation: none; }

  .utility__links { flex-direction: column; gap: 0.6rem; }
}

/* ==========================================================================
   Landscape phones — trim vertical space
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 520px; }
  .scroll-cue { display: none; }
  .nav__menu { padding-top: 4.5rem; }
}

/* ==========================================================================
   About preview (section 11 of style.css)
   ========================================================================== */
/* The portrait and the copy stay side by side well into laptop widths — the
   pillar tiles drop to one column first to buy the copy column room. */
@media (max-width: 1240px) {
  .about-grid { grid-template-columns: 0.86fr 1.14fr; gap: clamp(2.2rem, 4vw, 3.4rem); }
}

@media (max-width: 1080px) {
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: clamp(2.6rem, 6vw, 3.6rem); }

  .about-visual {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
  }
}

@media (max-width: 860px) {
  .about-visual__shloka { padding: 1.1rem 1.2rem; }
  .about-visual__shloka blockquote { font-size: 1.08rem; }
}

@media (max-width: 640px) {
  .about-visual { display: flex; flex-direction: column; padding: 0; }
  .about-visual__sub { display: none; }

  .about-visual__shloka { margin-top: 0.85rem; padding: 1.15rem 1.2rem; }

  .about-author { flex-direction: column; align-items: flex-start; }
  .about-author__actions { width: 100%; }
}

/* ==========================================================================
   Reference-aligned components (section 28 of style.css)
   ========================================================================== */
@media (max-width: 1200px) {
  /* .trust-strip is no longer pinned per breakpoint — it uses auto-fit with a
     212px track minimum (section 44 of style.css) and reflows on its own. */
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
  .trust-strip--overlap { margin-top: 0; }
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doc-band { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

  .float-band__inner { grid-template-columns: 1fr; text-align: center; }
  .float-band .actions { justify-content: center; }
  .float-band { margin-bottom: calc(var(--section-y) * -0.4); }

  .feature-row { grid-template-columns: 1fr; }
  .feature-row:nth-child(even) .feature-row__media { order: 0; }
  .feature-row__badge { width: 96px; height: 96px; right: 8px; bottom: -10px; }
}

@media (max-width: 860px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-band { grid-template-columns: 1fr; gap: 1.6rem; }
  .doc-card__media { aspect-ratio: 16 / 11; }
  .frame-outline::after { inset: -8px; }
}

@media (max-width: 640px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .cat-tile { padding: 1.3rem 0.7rem 1.1rem; }
  .cat-tile__icon { width: 60px; height: 60px; }
  .cat-tile__icon svg { width: 27px; height: 27px; }
  .cat-tile p { display: none; }
  .cat-tile--note { grid-column: 1 / -1; }
  .cat-tile--note p { display: block; }

  .float-band { margin-bottom: calc(var(--section-y) * -0.35); }
  .section--has-band { padding-top: calc(var(--section-y) + 2.5rem); }

  .leader-list li { flex-wrap: wrap; gap: 0.3rem 0.6rem; }
  .leader-list__dots { min-width: 40px; }

  .journal-card__date { width: 54px; left: 1rem; }
  .feature-row__badge { width: 84px; height: 84px; border-width: 4px; }
  .feature-row__badge b { font-size: 1.45rem; }
}

/* ==========================================================================
   Header & footer (section 29 of style.css)
   ========================================================================== */
@media (max-width: 1560px) {
  .topbar__tagline { display: none; }
}

/* Drawer-mode nav rules must track the drawer breakpoint (1500px), not 1200px */
@media (max-width: 1500px) {
  /* Drawer mode — back to a simple flex row */
  .nav { display: flex; justify-content: space-between; }

  /* Submenu items sit inside the drawer, indented under their parent */
  .nav__menu .nav__item--drop .nav__link { border-bottom: 0; }
  .nav__item--drop { border-bottom: 1px solid var(--line); }
  .nav__drop { padding-left: 0.4rem; }
  .nav__drop a { border-bottom: 1px dashed var(--line); }
  .nav__drop li:last-child a { border-bottom: 0; }
}

@media (max-width: 1200px) {
  .footer-top__inner { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .topbar__list { gap: 0.9rem; }
  .footer-top__copy { flex-direction: column; align-items: flex-start; gap: 0.8rem; text-align: left; }
}

@media (max-width: 640px) {
  .nav__icon-btn { width: 38px; height: 38px; }
  .nav__icon-btn svg { width: 16px; height: 16px; }
  .search-overlay__form { padding-left: 1rem; }
  .search-overlay__form button { width: 44px; height: 44px; }
  .search-overlay__results { max-height: 38vh; }
  .footer-top__icon { width: 48px; height: 48px; }
}

/* ==========================================================================
   Header & footer brand redesign (section 33 of style.css)
   ========================================================================== */
/* Filling the drawer-mode header ------------------------------------------
   The drawer takes over at 1500px, and until now the booking CTA and the
   call block were both dropped with it — so every width from 700px to
   1500px rendered a header holding a logo, a search circle and a hamburger
   with a few hundred pixels of nothing between them, and no CTA at all on
   the widths most laptops actually use.

   The menu is off-canvas in drawer mode, so that middle space is free. The
   two blocks come back at the widths they measure into: the CTA needs about
   190px and clears from 700px up, the call block another 220px and clears
   from 1000px. Above 1500px the centred menu owns the middle again and the
   rules in section 29 of style.css keep the call block out. */
@media (min-width: 700px) and (max-width: 1500px) {
  .nav__actions .btn--primary { display: inline-flex; }
}

@media (min-width: 1000px) and (max-width: 1500px) {
  .nav__call { display: inline-flex; }
}

@media (max-width: 1200px) {
  .logo__lockup { height: 50px; }
}

/* Declared after the 1200px block on purpose: this sheet is mobile-last, so
   a 640px rule placed earlier in the file loses to a 1200px rule that also
   matches at 390px. Order, not specificity, decides it. */
@media (max-width: 640px) {
  .logo__lockup { height: 42px; }
}

@media (max-width: 860px) {
  .topbar__list svg { width: 12px; height: 12px; }
  /* The phone pill keeps its shape, just tighter — it is the only thing left
     in the bar once the socials and the tagline drop out. */
  .topbar__list li:nth-child(1) a { padding: 0.3rem 0.8rem 0.3rem 0.62rem; font-size: 0.9rem; }
  .topbar__list li:nth-child(1) svg { width: 13px; height: 13px; }
  .footer-brand p { max-width: none; }
}

@media (max-width: 640px) {
  /* Descriptor line drops to 0.52rem here — a 14px tick beside it reads as a
     dash rather than an accent, so it comes down proportionally. */

  .site-footer h4 { margin-bottom: 1.15rem; }
  .footer-contact svg { width: 30px; height: 30px; padding: 6px; }
  .footer-hours { padding: 0.85rem 1rem; }

  /* Centred bottom bar: the inline hairlines would land against the wrap
     edges once the links reflow, so they are dropped instead. */
  .footer-bottom__links a + a::before { display: none; }
}

/* ==========================================================================
   About page patterns (section 39 of style.css)
   ========================================================================== */
@media (max-width: 640px) {
  .fact-stack { gap: var(--sp-2); margin-top: var(--sp-4); }
  .fact-stack li { padding: var(--sp-2) var(--sp-3); }
  .fact-stack__v { font-size: 0.88rem; }
}

/* ==========================================================================
   Service detail pages (section 41 of style.css)
   ========================================================================== */
@media (max-width: 1200px) {
  /* The split collapses to one column here, so a sticky media panel would
     pin the image over the copy instead of beside it. Scoped to the detail
     pages' layout — see the note in section 41 of style.css. */
  .split--wide-right .service-block__media {
    position: static;
    aspect-ratio: 16 / 10;
    max-height: 420px;
  }
}

@media (max-width: 767px) {
  /* Two columns of inclusions give about three words per line on a phone */
  .section .split--wide-right .leaf-list { columns: auto; padding: var(--sp-3) var(--sp-4); }
  .split--wide-right .service-block__media { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Hover-capable devices only — avoid sticky hover states on touch
   ========================================================================== */
@media (hover: none) {
  .service-card:hover,
  .course-card:hover,
  .feature-card:hover,
  .phil-card:hover,
  .condition-card:hover,
  .program-card:hover,
  .t-card:hover,
  .event-card:hover,
  .info-card:hover { transform: none; }

  .branch-card:hover { transform: none; }
}

/* ==========================================================================
   Very wide screens — keep line-lengths comfortable
   ========================================================================== */
/* The brief caps the content container at 1200–1280px, so very wide screens
   no longer widen it past 1280 — they just get more margin. The header keeps
   a slightly wider track for the nav row; measured at 1294px of content, so
   1440 clears it comfortably. */
@media (min-width: 1700px) {
  :root { --container: 1280px; --container-wide: 1440px; }
}

/* ==========================================================================
   Marquee · Lifestyle rows · Video band
   ========================================================================== */
@media (max-width: 1200px) {
  /* .feature-row collapses to one column above; the flip modifier has to be
     released too, or row 2's image would still be pushed below its copy. */
  .lifestyle-row--flip .feature-row__media { order: 0; }
  .lifestyle-stack { gap: clamp(1.6rem, 3.4vw, 2.4rem); }
}

@media (max-width: 860px) {
  .badge-band { padding-block: 1.5rem; }
  .badge-marquee__track { animation-duration: 30s; }
  .badge-chip { padding: 0.55rem 1.05rem 0.55rem 0.6rem; }
  .badge-chip__icon { width: 32px; height: 32px; }
  .badge-chip__icon svg { width: 16px; height: 16px; }
  .badge-chip b { font-size: 0.76rem; }
  .badge-chip span { font-size: 0.63rem; }

  .lifestyle-row__index { width: 46px; height: 46px; font-size: 1.28rem; }

  .video-modal__close { top: -46px; }
}

@media (max-width: 640px) {
  .badge-band__label { margin-bottom: 0.9rem; }
  .badge-marquee__track { animation-duration: 24s; }

  .lifestyle-row .feature-row__media { aspect-ratio: 4 / 3.2; }
  .lifestyle-row__list li { padding-left: 1.75rem; font-size: 0.9rem; }
  .lifestyle-row__tag { left: 12px; bottom: 12px; font-size: 0.66rem; padding: 0.42rem 0.9rem; }

  .play-btn { margin-bottom: 1.2rem; }
  /* The close button has no room to sit above the frame on a phone */
  .video-modal__close { top: 8px; right: 8px; background: rgba(22, 17, 42, 0.72); }
}