/* ══════════════════════════════════════════════════
   RESPONSIVE  –  all media queries live here.
   Mobile-first: smallest overrides first, desktop last.
   Breakpoints: 320 · 360 · 390 · 430 · 768 · 900 · 1280+
══════════════════════════════════════════════════ */

/* ── SAFE-AREA / NOTCH (applies on every screen size) ── */
nav{
  padding-top: env(safe-area-inset-top);
  height: calc(100px + env(safe-area-inset-top));
}
.mobile-menu{
  top: calc(100px + env(safe-area-inset-top));
}
.wa-btn{
  bottom: calc(28px + env(safe-area-inset-bottom));
  right:  calc(28px + env(safe-area-inset-right));
}
footer{
  padding-bottom: calc(var(--sp-lg) + env(safe-area-inset-bottom));
}
footer, .f-bottom {
  padding-left:  max(5%, env(safe-area-inset-left));
  padding-right: max(5%, env(safe-area-inset-right));
}

/* ── DISABLE HORIZONTAL OVERFLOW EVERYWHERE ── */
html,body{overflow-x:hidden;max-width:100%}

/* ── TABLET ≤900px ── */
@media(max-width:900px){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}

  /* nav shrinks to 72px on mobile to match .mobile-menu{top:72px} */
  nav{height:calc(72px + env(safe-area-inset-top))}
  .mobile-menu{top:calc(72px + env(safe-area-inset-top))}
  .logo-img{width:72px;height:72px}

  .hero{flex-direction:column;padding:calc(72px + env(safe-area-inset-top) + 20px) 5% var(--sp-xl);align-items:stretch;min-height:unset!important;height:auto!important}
  .hero-card-wrap{width:100%;box-sizing:border-box;align-self:stretch;}
  .hero-card{
    display:block!important;
    min-width:unset!important;
    max-width:100%!important;
    width:100%!important;
    margin-top:20px;
    border-radius:12px!important;
    align-self:stretch;
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .card-head{padding:10px 14px!important;gap:4px!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;text-align:left!important}
  .card-head-icon{width:36px!important;height:36px!important;font-size:16px!important}
  .hero-card form{padding:10px 14px 14px!important}
  .fg{margin-bottom:8px!important}
  .fg label{font-size:10px!important;margin-bottom:3px!important}
  .fg input,.fg select{padding:8px 12px!important;font-size:13px!important}
  .hero-card .btn-sub{padding:11px!important;font-size:14px!important;margin-top:10px!important}
  .hero-card .form-note{margin-top:6px!important;font-size:10px!important}
  .card-head-icon{flex-shrink:0}
  .card-head h3{font-size:15px}
  .card-head p{font-size:11px}
  .hero-btns{flex-direction:column;gap:10px}
  .hero-btns a{width:100%;justify-content:center}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-grid > div:last-child{grid-column:1/-1}
  .nav-links,.nav-phones,.nav-cta{display:none}
  .hamburger{display:flex}
  .dest-card{flex:0 1 calc(33.333% - 12px)}
  .step{width:160px}
  .about-grid{grid-template-columns:1fr}
  .about-float-card,.about-img-badge{display:none!important}
  /* .ac-top's negative margin-top:-24px was meant to tuck the banner under
     the card above it on desktop; on mobile .about-visuals/.ac-top both
     clip overflow, so that same negative margin chopped ~24px off the top
     of the banner image instead. */
  .ac-top{margin-top:0!important}
  .reveal.left{transform:translateY(40px)}
  .reveal.right{transform:translateY(40px)}
}

/* ── CAROUSEL STAGES ≤768px ── */
@media(max-width:768px){
  .vid-stage{height:460px}
  .testi-stage{height:480px}

  /* prevent zoom-on-focus for ALL form inputs on tablets & phones */
  input,select,textarea{font-size:16px!important}
  .fg input,.fg select{font-size:16px}
  .form-input,.popup-input{font-size:16px}

  /* faculty carousel — one card at a time, centered, snap-scroll */
  .fac-wrap{padding:0 44px;max-width:100%}
  .fac-arrow{width:34px;height:34px;font-size:12px}
  .fac-arrow--left{left:0}
  .fac-arrow--right{right:0}
  .scroll-row--faculty{scroll-snap-type:x mandatory;justify-content:flex-start;gap:0}
  .fac-card{width:100%;flex:0 0 100%;height:300px;scroll-snap-align:start;margin:0}
  .fac-img{height:180px}
}

/* ── MOBILE ≤430px (iPhone size) ── */
@media(max-width:430px){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  section{padding:56px 5%}
  .f-grid{grid-template-columns:1fr}
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px 5%;justify-items:start}
  .t-item{min-width:0;width:100%}
  .t-item:last-child{grid-column:1/-1;justify-self:center}
  .scroll-row,.scroll-row--faculty,.scroll-row--toppers{justify-content:flex-start;padding-left:var(--sp-sm);padding-right:var(--sp-sm)}
  .scroll-row > *{min-width:150px}
  .hero p{font-size:15px}
  .hero-stats{flex-wrap:wrap}
  .h-stat{min-width:calc(50% - 1px);border-right:none;border-bottom:1px solid rgba(255,255,255,.15)}
  .h-stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.15)}
  .h-stat:last-child{border-bottom:none;min-width:100%;border-right:none}

  /* about */
  .about-sec{padding-bottom:var(--sp-xl)}
  .about-grid{grid-template-columns:1fr;gap:var(--sp-md);margin-bottom:var(--sp-lg)}
  .about-mv{grid-template-columns:1fr}
  .about-visuals{width:100%;overflow:hidden}
  .about-float-card{display:none}
  .reveal.left{transform:translateY(40px)}
  .reveal.right{transform:translateY(40px)}

  /* destinations — 9 cards ÷ 3 = clean 3×3 grid */
  .dest-grid{gap:10px}
  .dest-card{padding:16px 6px;flex:0 1 calc(33.333% - 7px)}
  .dest-flag{width:48px;height:34px}
  .dest-card h4{font-size:12px}
  .dest-card .fee{font-size:11px}

  /* universities */
  .uni-grid{gap:16px;padding-left:var(--sp-sm);padding-right:var(--sp-sm);justify-content:flex-start}
  .uni-card{width:260px;min-width:260px}

  /* process */
  .proc-grid{gap:14px}
  .step{width:calc(50% - 7px)}

  /* why us */
  .why-grid{grid-template-columns:1fr}

  /* neet notice */
  .neet-notice-inner{flex-wrap:wrap;gap:8px}
  .neet-notice-link{margin-left:0}

  /* testimonials — single-card view on all phones */
  .testi-sec{padding:40px 5%!important;overflow:hidden}
  .testi-stage{position:relative!important;height:auto!important;overflow:visible!important;width:100%;margin:0;display:block!important;perspective:none}
  .testi-card{position:relative!important;width:100%!important;min-height:0;padding:24px 18px;transform:none!important;opacity:0!important;display:none!important;top:auto!important;left:auto!important;box-shadow:0 4px 24px rgba(46,107,230,.15)!important}
  .testi-card[data-pos="0"]{display:block!important;opacity:1!important;filter:none!important;pointer-events:auto!important;visibility:visible!important}
  #tPrev,#tNext{display:none}

  /* CTA */
  .cta-wrap{padding:var(--sp-xl) 5%}
  .cta-box{padding:44px 5%}
  .cta-btns{flex-direction:column;align-items:center}
  .cta-btns a{width:100%;max-width:300px;text-align:center;justify-content:center}

  /* footer */
  .f-bottom{flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
  .f-bottom div{flex-wrap:wrap;gap:12px}
  .f-bottom a{font-size:12px}
  footer iframe{width:100%!important;height:180px}

  /* WhatsApp — safe-area already applied globally above */
  .wa-btn{width:50px;height:50px;font-size:24px;bottom:calc(20px + env(safe-area-inset-bottom));right:calc(var(--sp-sm) + env(safe-area-inset-right))}

  /* video carousel stage */
  .vid-stage{height:360px}

  /* touch targets ≥ 44px */
  .btn-gold,.btn-ghost,.btn-w,.btn-ol,.btn-sub{min-height:44px}
  .mobile-menu a{min-height:44px;display:flex;align-items:center}

  /* features grid stack */
  .features-grid{flex-direction:column;align-items:stretch}
  .feature-card{min-width:unset;max-width:unset}
}

/* ══════════════════════════════════════════════════
   CONSULTATION / EXIT-INTENT MODAL  –  ≤480px
   Kept in its own block at the 480px breakpoint the spec calls for
   (rather than the 430px block above). Handles: single-column layout,
   scroll-on-outer-overlay instead of a capped inner box, non-sticky
   header, and an aggressive compact pass on spacing so header-through-
   button fits with noticeably less scrolling.
══════════════════════════════════════════════════ */
@media(max-width:480px){
  .form-grid-2{grid-template-columns:1fr}
  .popup-box{padding:28px 20px}

  /* scrolling happens on the outer fixed overlay (like a normal page
     scroll) instead of inside a capped inner box. Padding on all four
     sides keeps the dimmed backdrop visible framing the card instead of
     the card stretching edge-to-edge. */
  .consult-modal,.popup-overlay{
    align-items:flex-start!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    padding:24px 16px!important;
  }
  .popup-box,.consult-box{
    width:100%;
    max-width:340px;
    margin:0 auto;
    border-radius:20px;
    max-height:none!important;
    overflow-y:visible!important;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
  }
  .consult-header{
    border-radius:20px 20px 0 0;
    /* not sticky — it scrolls away normally with the rest of the content,
       so it can never sit on top of / clip the fields below it. */
  }
  .consult-overlay{background:rgba(0,0,0,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .consult-close{
    width:40px;height:40px;
    min-width:40px;min-height:40px;
    top:14px;right:14px;
  }
  /* .popup-box has no separate header bar to stick, so its close button is
     pinned to the viewport instead, staying reachable while the form scrolls */
  .popup-close{
    position:fixed;
    width:40px;height:40px;
    min-width:40px;min-height:40px;
    top:14px;right:14px;
    z-index:2;
  }

  /* compact pass — exact values. .form-grid-2 (paired fields) and
     .form-group (standalone Message field) are the actual field-wrapper
     classes — there is no .fg class in this form (that name belongs to a
     different, unrelated hero-card form elsewhere on the page). */
  .consult-header{padding:14px 16px 12px}
  .consult-header h2{font-size:17px;margin-bottom:2px;line-height:1.25;padding-right:8px}
  .consult-header p{font-size:11px}
  .consult-badge{padding:4px 10px;font-size:10px;margin-bottom:6px}
  .consult-body{padding:14px 16px}
  .form-grid-2{gap:10px;margin-bottom:10px}
  .form-group{margin-bottom:10px}
  .form-label{font-size:12px;margin-bottom:4px}
  .form-input{padding:9px 12px;font-size:14px;min-height:0}
  .consult-body textarea.form-input{height:60px;max-height:none}
  .consult-submit{padding:12px;margin-top:4px}
  .consult-note{font-size:11px;margin-top:6px}
}

/* ── iPHONE SE / standard ≤390px ── */
@media(max-width:390px){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  body{font-size:15px;line-height:1.55}
  section{padding:44px 4%}

  /* nav */
  .logo-img{width:65px;height:65px}

  /* hero */
  .hero{padding:calc(72px + env(safe-area-inset-top) + 28px) 4% 40px}
  .hero h1{font-size:clamp(26px,7.5vw,34px);line-height:1.15}
  .hero p{font-size:14px;margin-bottom:24px}
  .hero-badge{font-size:12px;padding:6px 14px}
  .hero-btns{gap:10px}
  .hero-btns a{width:100%;font-size:14px;padding:14px 20px;justify-content:center}
  .h-stat .n{font-size:22px}
  .h-stat .l{font-size:10px}
  .h-stat{padding:16px 8px}

  /* buttons — min 44px touch */
  .btn-gold,.btn-ghost,.btn-w,.btn-ol,.btn-sub{min-height:44px;font-size:14px;padding:12px 20px}
  .btn-gold-inline{width:100%;justify-content:center}

  /* section headings */
  .s-title{font-size:clamp(22px,6vw,28px)}
  .s-sub{font-size:14px}

  /* destinations */
  .dest-grid{gap:8px}
  .dest-card{padding:14px 4px;flex:0 1 calc(33.333% - 6px)}
  .dest-flag{width:42px;height:30px}
  .dest-card h4{font-size:11px}

  /* universities */
  .uni-card{border-radius:14px}
  .uni-body{padding:16px}

  /* process steps */
  .step{width:calc(50% - 7px)}
  .step-icon{width:52px;height:52px;font-size:20px}

  /* trust bar */
  .t-num{font-size:22px}
  .t-label{font-size:11px}

  /* forms */
  .fg label{font-size:13px}

  /* footer */
  .f-col h4{font-size:14px}
  footer{font-size:13px}

  /* WhatsApp */
  .wa-btn{width:46px;height:46px;font-size:22px;bottom:calc(16px + env(safe-area-inset-bottom));right:calc(12px + env(safe-area-inset-right))}

  /* testimonials */
  .testi-card{padding:20px 16px}
}

/* ── 360px (budget Android) ── */
@media(max-width:360px){
  body{font-size:14px}
  section{padding:40px 4%}

  /* hero */
  .hero h1{font-size:clamp(22px,6.5vw,28px)}
  .hero p{font-size:13px}
  .hero-badge{font-size:11px;padding:5px 12px}
  .h-stat .n{font-size:20px}
  .h-stat .l{font-size:9px}
  .h-stat{padding:14px 6px}

  /* section headings */
  .s-title{font-size:clamp(20px,6vw,26px)}
  .s-sub{font-size:13px}

  /* destinations — stay 3-col but tighter */
  .dest-card{padding:12px 3px}
  .dest-flag{width:36px;height:26px}
  .dest-card h4{font-size:10px}
  .dest-card .fee{font-size:9px}

  /* process — 2-col */
  .step{width:calc(50% - 6px)}
  .step-icon{width:46px;height:46px;font-size:18px}

  /* trust */
  .t-num{font-size:20px}
  .t-label{font-size:10px}

  /* footer */
  .f-col h4{font-size:13px}
  footer{font-size:12px}

  /* WhatsApp */
  .wa-btn{width:44px;height:44px;font-size:20px}
}

/* ── 320px (iPhone SE 1st-gen / smallest Android) ── */
@media(max-width:320px){
  body{font-size:13px}
  section{padding:36px 3%}

  /* hero */
  .hero{padding:calc(72px + env(safe-area-inset-top)) 3% 32px}
  .hero h1{font-size:clamp(20px,6.5vw,26px);line-height:1.18}
  .hero p{font-size:13px}
  .hero-btns a{font-size:13px;padding:12px 16px}
  .hero-badge{font-size:10px;padding:4px 10px}

  /* section headings */
  .s-title{font-size:clamp(18px,5.5vw,22px)}
  .s-sub{font-size:12px}
  .stag{font-size:10px}

  /* destinations — 2-col at 320px; 3-col is ~96px each which clips text */
  .dest-grid{gap:8px}
  .dest-card{padding:12px 6px;flex:0 1 calc(50% - 4px)}
  .dest-flag{width:38px;height:26px}
  .dest-card h4{font-size:11px}
  .dest-card .fee{font-size:9px}

  /* process — 2-col */
  .step{width:calc(50% - 6px)}
  .step-icon{width:42px;height:42px;font-size:16px}
  .step p{font-size:12px}

  /* trust */
  .trust{gap:12px}
  .t-num{font-size:18px}
  .t-label{font-size:9px}

  /* testimonial card */
  .testi-card{padding:18px 14px}
  .testi-card blockquote{font-size:13px}
  .t-av{width:60px;height:60px}
  .t-info .t-name{font-size:16px}

  /* footer */
  footer{font-size:12px}
  .f-col h4{font-size:12px}
  .f-links a{font-size:12px}
  .f-bottom a{font-size:11px}

  /* buttons */
  .btn-gold,.btn-ghost,.btn-w,.btn-ol,.btn-sub{font-size:13px;padding:11px 16px;min-height:44px}

  /* WhatsApp */
  .wa-btn{width:44px;height:44px;font-size:20px;bottom:calc(14px + env(safe-area-inset-bottom));right:calc(10px + env(safe-area-inset-right))}

  /* modal */
  .popup-box{padding:22px 14px}
}

/* ══════════════════════════════════════════════════
   ABOUT SECTION 6-PHOTO STRIP  –  ≤600px
   Stays 3 columns × 2 rows to match desktop. .ac-sm had a fixed height:280px
   which, on a narrow mobile column, forced object-fit:cover to zoom-crop each
   photo into a tall sliver. Switching to a square aspect-ratio (instead of
   dropping to 2 columns) keeps the 3×2 layout while giving each cell a crop
   ratio that looks natural at any column width.
══════════════════════════════════════════════════ */
@media(max-width:600px){
  .ac-bottom-row{grid-template-columns:repeat(3,1fr)}
  .ac-sm{aspect-ratio:1/1;height:auto}
}

/* ══════════════════════════════════════════════════
   SINGLE-CARD SWIPE CAROUSELS  –  universities / faculty / FMGE toppers
   Below 480px: exactly one full card visible per view, edge-to-edge
   within the section's normal side padding, swipe or arrow-click to move.
   These rules are intentionally last so they win over the older
   partial-card rules above (.uni-card width:260px etc.) at this range.
══════════════════════════════════════════════════ */
@media(max-width:480px){
  /* container carries NO real padding — a container padding-right only ever
     applies once, after the LAST card, not between every snapped card. With
     100%-wide cards that left a 5% sliver of the next card visible on the
     right edge. scroll-padding keeps the snap gutter without adding real
     padding; the visual breathing room now comes from padding on the cards
     themselves (below), which repeats identically for every card. */
  .uni-grid,.scroll-row--faculty,.scroll-row--toppers{
    display:flex!important;flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-left:5%!important;
    scroll-padding-right:5%!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:0!important;
    margin:0!important;
    padding-left:0!important;padding-right:0!important;
    justify-content:flex-start!important;
  }
  .uni-grid::-webkit-scrollbar,
  .scroll-row--faculty::-webkit-scrollbar,
  .scroll-row--toppers::-webkit-scrollbar{display:none}

  /* each card is exactly 100% of the scroll container (no sliver possible);
     the 5% gutter is now internal padding on the card itself, so it repeats
     for every card instead of only appearing before the first/after the last. */
  .uni-card,.fac-card,.fmge-card{
    box-sizing:border-box!important;
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    padding-left:5%!important;
    padding-right:5%!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always;
    margin:0!important;
  }
  .fac-card:last-child{margin-right:0!important}
  .fac-card{min-height:300px}

  /* card photos were forced into a fixed-height crop (165px/210px/160px)
     that was tuned for a narrow desktop card; now that these cards render
     100vw wide on mobile, the same fixed height over-zooms and crops too
     tight into faces. Taller box + backing off the object-position keeps
     more of the subject in frame. */
  .fmge-img{height:250px;object-position:center 20%}
  .fmge-img-top{object-position:center 10%}
  .fac-img{height:240px;object-position:center 20%}
  .uni-img-wrap{height:200px}
}