/* ==========================================================================
   DESHAJ INDIA ENTERPRISES — responsive.css
   The base styles in style.css are the MOBILE layout (designed at 360px+).
   This file only ADDS layout for larger screens (mobile-first, min-width).

   Breakpoints:  600 (large phones)  ·  768 (tablet)  ·  900  ·  1024 (desktop nav)
                 1280 (wide)  ·  1600 (extra wide)
   ========================================================================== */

/* -------- ≥ 600px : large phones / small tablets -------- */
@media (min-width:600px){
  .btn-row .btn{flex:0 0 auto}
  .form__grid{grid-template-columns:1fr 1fr}
  .field--full{grid-column:1 / -1}
  .cta-band__actions{grid-auto-flow:column;justify-content:start;grid-auto-columns:max-content}
  .chapter__gallery{gap:16px}
  .pack__gallery{gap:16px}
  .footer__bottom{flex-direction:row;justify-content:space-between;align-items:center}
}

/* -------- ≥ 768px : tablet -------- */
@media (min-width:768px){
  :root{--header-h:72px}
  .brand__logo{height:56px}
  .audience{grid-template-columns:repeat(3,1fr)}
  .audience li{padding:28px 24px 28px 0}
  .audience li:nth-child(odd),.audience li:nth-child(even){padding:28px 24px;border-left:0}
  .audience li:nth-child(3n+1){padding-left:0}
  .audience li:not(:nth-child(3n+1)){border-left:1px solid var(--line)}
  .footer__cols{grid-template-columns:repeat(3,1fr)}
  .footer__col--wide{grid-column:auto}
  .hero__facts{grid-auto-flow:column;grid-auto-columns:max-content;gap:12px 36px}
}

/* -------- ≥ 900px : two-column editorial layouts -------- */
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px)}
  .hero__facts{grid-auto-flow:row;gap:8px}
  .hero__visual{padding-bottom:10%;width:auto;margin-inline:0}
  .page-hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,96px);align-items:end}
  .statement-wrap{grid-template-columns:minmax(0,.28fr) minmax(0,1fr);gap:48px}
  .chapter__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(48px,7vw,112px);align-items:center}
  .chapter--flip .chapter__visual{order:2}
  .chapter__visual{padding-bottom:9%;width:auto;margin-inline:0}
  .pack{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(48px,7vw,112px);align-items:center}
  .pack__gallery--showcase{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);grid-template-rows:1fr 1fr}
  .pack__gallery--showcase .media.pack__lead{grid-column:1;grid-row:1 / span 2}
  .pack__gallery--showcase .media:not(.pack__lead){grid-column:2;aspect-ratio:auto;min-height:0}
  .pack__gallery--showcase .media:not(.pack__lead) img{position:absolute;inset:0}
  .row{grid-template-columns:72px minmax(0,1fr) minmax(0,1.25fr);gap:36px;align-items:baseline;padding:34px 0}
  .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(48px,7vw,112px);align-items:start}
  .steps{grid-template-columns:repeat(3,1fr)}
  .step{padding:34px 32px 34px 0;border-bottom:0}
  .step + .step{padding-left:32px;border-left:1px solid var(--line)}
  .steps{border-bottom:1px solid var(--line)}
  .cta-band__inner{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:64px}
  .cta-band__actions{grid-auto-flow:row;grid-auto-columns:auto;justify-content:stretch;max-width:340px}
  .contact-layout{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(48px,7vw,112px);align-items:start}
  .footer__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:64px}
}

/* -------- ≥ 1024px : desktop navigation & explorer -------- */
@media (min-width:1024px){
  :root{--header-h:80px}
  .brand__logo{height:62px}
  .nav{display:block}
  .header-cta{display:inline-flex}
  .menu-toggle,.mobile-menu{display:none}
  .explorer{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,120px);align-items:center}
  .explorer__image{max-width:none}
  body{font-size:1.0625rem}
}

/* -------- ≥ 1280px : wide desktop -------- */
@media (min-width:1280px){
  .hero{padding-top:clamp(40px,4vw,72px)}
  .hero__main{width:80%}
  .chapter__sub{width:36%}
  .wa-float{right:28px;bottom:28px}
  .wa-float__btn{width:62px;height:62px}
}

/* -------- ≥ 1600px : extra wide -------- */
@media (min-width:1600px){
  :root{--maxw:1440px}
}

/* -------- Small phones (≤ 380px) : extra care for 360 / 375 -------- */
@media (max-width:380px){
  :root{--gutter:18px}
  .btn{padding-inline:20px}
  .grade-tab{padding-inline:16px}
  .footer__cols{gap:28px 14px}
  .channel{padding:20px}
  .media__ph{padding:16px 18px}
}