/* ==========================================================================
   Kashi Yatri — Responsive layer (loaded after style.css)
   Breakpoints: 1200 / 1024 / 860 / 640 / 420
   ========================================================================== */

/* ---------- ≤1200px ---------- */
@media (max-width:1200px){
  .menu > li > a{padding:10px 9px;font-size:.86rem}
  .nav{gap:14px}
  .brand img{height:52px}
  .brand-text b{font-size:1.18rem}
  .hero-grid{gap:38px}
}

/* ---------- ≤1024px : tablets ---------- */
@media (max-width:1024px){
  :root{--header-h:72px}
  .section{padding:64px 0}

  /* Nav collapses to drawer */
  .menu,.nav-phone{display:none}
  .burger{display:grid}
  .nav-cta .btn{display:none}

  .mobile-panel{
    display:block;position:fixed;inset:0 0 0 auto;width:min(340px,86vw);z-index:1000;
    background:var(--ivory);box-shadow:-10px 0 40px rgba(12,26,49,.22);
    transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;
    padding:22px 20px 40px;
  }
  .mobile-panel.is-open{transform:translateX(0)}
  .mp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--sand-line)}
  .mp-head img{height:42px;width:auto}
  .mp-close{width:40px;height:40px;border-radius:10px;background:var(--sand);display:grid;place-items:center;color:var(--navy-800)}
  .mp-close svg{width:20px;height:20px}
  .mp-menu{display:grid;gap:2px;margin-bottom:26px}
  .mp-menu > li > a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-radius:10px;font-weight:500;color:var(--ink);font-size:.96rem}
  .mp-menu > li > a svg{width:15px;height:15px;flex:none;color:var(--muted);transition:transform .2s ease}
  .mp-menu > li.is-open > a svg{transform:rotate(180deg)}
  .mp-menu > li > a:hover,.mp-menu > li.is-active > a{background:var(--sand);color:var(--navy-800)}
  .mp-menu .sub{display:grid;gap:2px;padding:4px 0 8px 14px;margin-left:10px;border-left:2px solid var(--sand-line)}
  .mp-menu .sub a{display:block;padding:9px 12px;border-radius:8px;font-size:.88rem;color:var(--muted)}
  .mp-menu .sub a:hover{background:var(--saffron-50);color:var(--navy-800)}
  .mp-cta{display:grid;gap:10px}
  .mp-contact{margin-top:24px;padding-top:20px;border-top:1px solid var(--sand-line);display:grid;gap:12px;font-size:.88rem}
  .mp-contact li{display:flex;gap:10px;color:var(--muted)}
  .mp-contact svg{width:16px;height:16px;color:var(--saffron);flex:none;margin-top:3px}
  .nav-backdrop{position:fixed;inset:0;background:rgba(12,26,49,.55);z-index:999;opacity:0;visibility:hidden;transition:.3s}
  .nav-backdrop.is-on{opacity:1;visibility:visible}

  /* Hero stacks */
  .hero-grid{grid-template-columns:1fr;gap:54px;padding:52px 0 76px;min-height:0}
  .hero-copy{max-width:100%;text-align:center;margin-inline:auto}
  .hero-sub{margin-inline:auto}
  .hero-actions,.hero-stats{justify-content:center}
  .hero-media{height:clamp(360px,54vh,480px);max-width:520px;margin-inline:auto;width:100%}
  .hero-badge{left:8px;bottom:22px}

  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(2){border-right:0}
  .trust-item:nth-child(1),.trust-item:nth-child(2){border-bottom:1px solid var(--sand-line)}

  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .pkg-grid,.fleet-grid,.dest-grid,.temple-grid,.tst-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .enq,.contact-grid{grid-template-columns:1fr;gap:38px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .gal-grid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- ≤860px ---------- */
@media (max-width:860px){
  .section{padding:54px 0}
  .sec-head{margin-bottom:38px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .temple-grid,.tst-grid{grid-template-columns:1fr}
  .page-hero{padding:48px 0 44px}
  .topbar-left .topbar-item--addr{display:none}
}

/* ---------- ≤640px : phones ---------- */
@media (max-width:640px){
  :root{--gut:16px}
  body{font-size:15px}
  .section{padding:46px 0}

  .topbar{font-size:.76rem}
  .topbar .wrap-wide{justify-content:center}
  .topbar-left{gap:14px;justify-content:center}
  .topbar-social{display:none}

  .brand img{height:44px}
  .brand-text b{font-size:1.05rem}
  .brand-text small{font-size:.53rem;letter-spacing:.18em}

  .hero h1{font-size:clamp(1.95rem,7.6vw,2.5rem)}
  .hero-sub{font-size:.98rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-stats{gap:24px;justify-content:space-between}
  .hero-stats div b{font-size:1.5rem}
  .hero-media{height:340px}
  .hero-badge{display:none}
  .hero-dots{bottom:-28px}

  .trust-grid{grid-template-columns:1fr}
  .trust-item{border-right:0;border-bottom:1px solid var(--sand-line);padding:18px 16px}
  .trust-item:last-child{border-bottom:0}

  .pkg-grid,.fleet-grid,.dest-grid,.why-grid{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .svc{padding:22px 14px}
  .svc .ico{width:52px;height:52px}
  .svc h3{font-size:1rem}

  .dest-img{aspect-ratio:4/3;border-radius:46% 46% 12px 12px / 22% 22% 3% 3%}

  .field-row{grid-template-columns:1fr;gap:0}
  .form-card{padding:24px 20px}

  .gal-grid{grid-template-columns:repeat(2,1fr);gap:10px}

  .foot-grid{grid-template-columns:1fr;gap:30px;padding-bottom:36px}
  .foot-bottom{flex-direction:column;text-align:center;gap:10px}
  .foot-legal{justify-content:center;gap:14px}

  .cta{padding:52px 0}
  .cta-actions{flex-direction:column}
  .cta-actions .btn{width:100%}

  .float-actions{right:12px;bottom:12px;gap:8px}
  .fab{width:48px;height:48px}
  .fab svg{width:22px;height:22px}

  .lb-prev{left:8px}
  .lb-next{right:8px}
  .lb-close{top:12px;right:12px}
}

/* ---------- ≤420px ---------- */
@media (max-width:420px){
  .svc-grid{grid-template-columns:1fr}
  .hero-stats{gap:16px}
  .hero-stats div b{font-size:1.32rem}
  .hero-stats div span{font-size:.72rem}
  .btn{padding:13px 22px;font-size:.9rem}
}

/* ---------- Print ---------- */
@media print{
  .topbar,.site-header,.float-actions,.hero-dots,.site-footer .foot-social,.cta{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding:16px 0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ---------- Components added after the first build ---------- */
@media (max-width:1024px){
  .season-grid{grid-template-columns:repeat(2,1fr)}
  .reach-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .timeline{padding-left:0}
  .timeline::before{left:11px}
  .tl-item{padding-left:44px}
  .tl-time{position:static;width:auto;text-align:left;margin-bottom:6px;display:flex;gap:8px;align-items:baseline}
  .tl-time span{display:inline;font-size:.74rem}
  .tl-dot{left:0;top:2px;width:23px;height:23px}
  .season-grid{grid-template-columns:1fr}
}

/* ---------- ≤360px : smallest phones still in use (iPhone SE 1, Galaxy A0x) ---------- */
@media (max-width:360px){
  :root{--gut:14px}
  .nav{gap:10px}
  .brand{gap:9px;min-width:0}
  .brand img{height:40px}
  .brand-text{min-width:0}
  .brand-text b{font-size:.96rem;letter-spacing:.04em}
  .brand-text small{letter-spacing:.12em;font-size:.5rem}
  .burger{width:40px;height:40px;border-radius:9px}
  .burger svg{width:20px;height:20px}

  .topbar{font-size:.72rem}
  .topbar-left{gap:10px}

  h1{font-size:clamp(1.85rem,8.6vw,2.2rem)}
  h2{font-size:clamp(1.55rem,7.4vw,1.95rem)}
  .hero h1{font-size:clamp(1.95rem,9vw,2.3rem)}

  .btn{padding:12px 18px;font-size:.87rem}
  .svc{padding:20px 12px}
  .pkg-body,.veh-body{padding:20px 16px}
  .form-card{padding:20px 15px}
  .tl-item{padding-left:38px}
  .tl-item h3{font-size:1.08rem}
  .hero-stats{gap:12px}
  .hero-stats div b{font-size:1.22rem}
  .hero-stats div span{font-size:.66rem}
  .trust-item{padding:16px 12px}
  .gal-grid{gap:8px}
}

/* Belt and braces: nothing may ever push the page sideways */
html,body{max-width:100%}
.wrap,.wrap-wide{width:100%}