/* ==========================================================================
   VASTU CAFÉ — Responsive layer
   Breakpoints:
     ≥1800px  ultra-wide
     ≤1440px  large laptop
     ≤1200px  small laptop
     ≤1024px  tablet landscape  (mobile nav switches on here)
     ≤820px   tablet portrait
     ≤640px   large phone
     ≤420px   small phone
   Nothing may ever scroll horizontally.
   ========================================================================== */

/* ==========================================================================
   DESKTOP ONLY — the astro chakra rides along with the hero copy
   It pins under the header and releases the moment the right-hand column
   finishes, because a sticky item can only travel inside its grid area.
   ========================================================================== */
@media (min-width: 1025px) {
  .hero__grid { align-items: start; }
  .hero__chakra {
    position: sticky;
    top: calc(var(--header-h) + 28px);
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__chakra { position: static; }
}

/* ==========================================================================
   ULTRA-WIDE  ≥ 1800px
   ========================================================================== */
@media (min-width: 1800px) {
  :root {
    --shell: 1400px;
    --shell-wide: 1720px;
    --section-y: 8.5rem;
  }
  body { font-size: 1.12rem; }
  .hero { padding-block: 5rem 7rem; }
  .chakra-stage { width: min(100%, 620px); }
}

@media (min-width: 2200px) {
  :root { --shell: 1560px; --shell-wide: 1900px; }
}

/* ==========================================================================
   LARGE LAPTOP  ≤ 1440px
   ========================================================================== */
@media (max-width: 1440px) {
  .menu > li > a { padding: .58rem .5rem; font-size: .76rem; letter-spacing: .04em; }
  .logo__mark { width: 48px; height: 48px; }
  .logo__name { font-size: 1.32rem; }
  .nav__actions .btn { padding: .82rem 1.3rem; font-size: .78rem; }
}

/* ==========================================================================
   SMALL LAPTOP  ≤ 1200px
   ========================================================================== */
@media (max-width: 1330px) {
  :root { --header-h: 78px; }

  /* Nine top-level items stop fitting comfortably here — hand over to the
     drawer so the header keeps its generous, uncluttered spacing. */
  .menu,
  .nav__actions .btn--desktop { display: none; }
  .burger { display: grid; }

  .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer__grid > *:nth-child(4) { grid-column: 1 / -1; }
  .float-badge--br { right: 0; }
  .float-badge--tl { left: 0; }
}

/* ==========================================================================
   TABLET LANDSCAPE  ≤ 1024px  — mobile navigation takes over
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --header-h: 72px; }

  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .hero__chakra { order: 2; min-height: auto; }
  .hero__content { order: 1; }
  .chakra-stage { width: min(88%, 460px); }
  .hero__trust { justify-content: space-between; }

  .split { grid-template-columns: 1fr; gap: var(--sp-4); }
  .split--reverse > *:first-child { order: 0; }

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

  .media-frame--tilt { transform: none; }

  /* Process timeline stacks: copy first, then its image */
  .vstep { grid-template-columns: 1fr; gap: var(--sp-3); }
  .vstep__media { max-width: 520px; }

  /* Offer block stacks: poster first, then the service rows */
  .offer { grid-template-columns: 1fr; gap: var(--sp-4); }
  .offer__poster { width: min(100%, 340px); transform: none; }
  .offer__body { text-align: left; }

  .sec-head--left { text-align: center; margin-inline: auto; }
  .ornament--left { justify-content: center; }
  .ornament--left::before { display: block; }

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

/* ==========================================================================
   TABLET PORTRAIT  ≤ 820px
   ========================================================================== */
@media (max-width: 820px) {
  .shell,
  .shell-wide,
  .shell-narrow { width: min(100% - 2rem, var(--shell)); }

  .topbar__inner { justify-content: center; text-align: center; }
  .topbar__left,
  .topbar__right { justify-content: center; gap: .8rem; }

  .form__row { grid-template-columns: 1fr; }
  .bform .form__row--3 { grid-template-columns: 1fr; }

  .coin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .coin { max-width: 260px; }

  .tcard { padding: var(--sp-4); }

  .timeline::before { left: 21px; }
  .tl-item { padding-left: 66px; }
  .tl-item__dot { width: 44px; height: 44px; font-size: 1.05rem; }

  .float-badge { position: static; margin-top: 1rem; animation: none; display: inline-flex; }

  .flip-strip { grid-template-columns: repeat(3, 1fr); gap: .55rem; }

  .footer__bar { justify-content: center; text-align: center; }
  .footer__bar nav { justify-content: center; }
}

/* ==========================================================================
   LARGE PHONE  ≤ 640px
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --header-h: 66px;
    --section-y: 3.2rem;
  }

  body { line-height: 1.7; }

  h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); }
  h2 { font-size: clamp(1.65rem, 6.6vw, 2.1rem); }
  h3 { font-size: 1.28rem; }

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

  .logo__mark { width: 42px; height: 42px; }
  .logo__mark svg { width: 27px; height: 27px; }
  .logo__name { font-size: 1.18rem; }
  .logo__tag { font-size: .55rem; letter-spacing: .14em; }

  .icon-btn { width: 40px; height: 40px; }
  .burger { width: 42px; height: 42px; }

  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__trust { gap: 1rem 1.4rem; }
  .hero__hk { font-size: .95rem; letter-spacing: .12em; padding: .3rem .95rem; }
  .chakra-chip { font-size: .68rem; padding: .38rem .75rem; }
  .chakra-chip--1 { left: -2%; }
  .chakra-chip--2 { right: -2%; }

  .card { padding: var(--sp-3); }
  .card__num { font-size: 2.6rem; }

  .coin-grid { grid-template-columns: 1fr; }
  .coin { max-width: 280px; }

  .tabs__list { border-radius: var(--r-md); }
  .tabs__btn { padding: .55rem .95rem; font-size: .76rem; }

  .tcard { padding: var(--sp-3); }
  .tcard__text { font-size: 1.05rem; }

  .price-card { padding: var(--sp-3); }

  .modal__box { max-height: 92vh; }
  .modal__arrow { width: 40px; height: 40px; }

  .flip-strip { grid-template-columns: repeat(2, 1fr); }
  .flip-strip .flip-card:nth-child(3) { display: none; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .footer__emblems { gap: var(--sp-3); }

  .to-top, .quick-fab a { width: 46px; height: 46px; }
  .quick-fab a::after { display: none; }

  table.tbl { min-width: 540px; }

  .acc__btn { padding: 1rem 1.05rem; font-size: 1.02rem; }
  .acc__panel-inner { margin-inline: 1.05rem; }

  .vtimeline { padding-left: 40px; gap: var(--sp-5); }
  .vtimeline::before,
  .vtimeline::after { left: 9px; }
  .vstep__dot { left: -40px; width: 16px; height: 16px; }
  .vtimeline--compact { padding-left: 40px; }
  .vtimeline--compact .vstep__dot { left: -40px; }

  .offer__poster { width: min(100%, 300px); padding: 7px; }
  .offer__list li { padding: .85rem .95rem; gap: .75rem; }
  .offer__ico { width: 38px; height: 38px; border-radius: 11px; }
  .offer__ico svg { width: 19px; height: 19px; }
  .offer__contacts { grid-template-columns: 1fr; }
  .offer__chip { padding: .62rem .8rem; }
}

/* ==========================================================================
   SMALL PHONE  ≤ 420px
   ========================================================================== */
@media (max-width: 420px) {
  .shell,
  .shell-wide,
  .shell-narrow { width: min(100% - 1.6rem, var(--shell)); }

  .btn { padding: .85rem 1.4rem; font-size: .8rem; }
  .btn--lg { padding: 1rem 1.7rem; font-size: .86rem; }

  .logo__tag,
  .logo__tagline { display: none; }
  .topbar { font-size: .72rem; }
  .flip-num { min-width: 132px; }

  .hero__sanskrit { font-size: 1.25rem; }
  .hero__trust div strong { font-size: 1.5rem; }
  .hero__trust div span { font-size: .68rem; }

  .stat__num { font-size: 2rem; }
  .sec-head { margin-bottom: var(--sp-4); }

  .drawer { width: 100vw; }
}

/* ==========================================================================
   LANDSCAPE PHONES — keep the drawer usable
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .drawer { overflow-y: auto; }
  .drawer__nav > li > a,
  .drawer__toggle { padding: .65rem .2rem; font-size: 1.05rem; }
  .hero { padding-block: 2rem 3rem; }
}

/* ==========================================================================
   TOUCH DEVICES — no custom cursor, no hover-only reveals
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot, .cursor-ripple { display: none !important; }
  html.has-cursor, html.has-cursor * { cursor: auto !important; }

  /* Coin flips on tap (JS toggles .is-flipped) rather than hover */
  .coin:hover .coin__inner { transform: none; }
  .coin.is-flipped .coin__inner { transform: rotateY(180deg); }

  .gal-item__cap { transform: none; opacity: 1; }
  .gal-item__zoom { opacity: 1; transform: scale(1); }

  /* Dropdowns open by click on touch — handled in navigation.js */
  .menu > li:hover .dropdown { opacity: 0; visibility: hidden; }
  .menu > li.is-open .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
}

/* ==========================================================================
   HIGH CONTRAST / FORCED COLORS
   ========================================================================== */
@media (forced-colors: active) {
  .btn, .card, .acc, .price-card { border: 1px solid CanvasText; }
  .cursor, .cursor-dot { display: none !important; }
}