/* ============================================
   Networkschef Private Limited — Responsive Styles
   networkschef.com

   All breakpoint/media-query rules, split out of style.css so layout and
   responsive behaviour can be reasoned about independently. Always loaded
   directly after style.css so cascade order (and therefore specificity for
   any competing rules) is unchanged from the single-file version.
   ============================================ */

/* Header/nav shrink gracefully as available width drops — whether from a
   narrower screen or the user zooming the page in. */
@media(max-width:1100px){
  .header-contact{display:none}
}
@media(max-width:1000px){
  .plans-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .price-cards{grid-template-columns:1fr}
  .price-cards{max-width:420px}
  .feat-layout{grid-template-columns:1fr}
  .feat-image-area{max-width:500px;margin:0 auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats-inner{grid-template-columns:1fr 1fr}
  .value-grid{grid-template-columns:1fr 1fr}
  .checkout-layout{grid-template-columns:1fr}
  .checkout-sidebar{position:static}
}
@media(max-width:700px){
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{display:none}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{align-items:flex-start}
  .ts-logos{gap:1.5rem}
  .stats-inner{grid-template-columns:1fr 1fr}
  .cta-form-row{flex-direction:column}
  .value-grid{grid-template-columns:1fr}
  .page-banner{padding:2.4rem 0 2.8rem}

  /* Products becomes a swipeable horizontal carousel that slides in from
     the left, sized to the viewport instead of a stacked grid. */
  .plans-grid{
    display:flex;flex-wrap:nowrap;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:1rem;margin:0 -2rem;padding:.3rem 2rem 1.2rem;scroll-padding-left:2rem;
  }
  .plans-grid .plan-card{
    flex:0 0 82%;scroll-snap-align:start;
  }
  .plans-grid .plan-card:hover{transform:none}

  /* Main nav collapses behind a hamburger toggle; .nav-inner (id="mobile-nav")
     opens as a stacked dropdown, toggled by JS adding/removing .open. */
  .nav-toggle{display:block}
  .nav-inner{
    display:none;flex-direction:column;align-items:stretch;
    max-width:none;padding:0 0 .5rem;overflow-x:visible;
  }
  .nav-inner.open{display:flex}
  .nav-inner a{padding:.85rem 2rem;white-space:normal}
  .nav-portal{margin-left:0}

  .checkout-panel{padding:1.4rem}
  .pay-method-grid{grid-template-columns:1fr 1fr}
  .checkout-progress{gap:.35rem}
  .cp-label{display:none}

  /* .plans-tabs is width:fit-content with no wrap/shrink, so on narrow
     phones (esp. ~320-375px) its 4 buttons' min-content width overflows
     the viewport and forces horizontal page scroll. Let it wrap and give
     buttons tighter padding so it fits without that floor. */
  .plans-tabs{flex-wrap:wrap;width:100%;max-width:320px;row-gap:.4rem}
  .plan-tab{padding:.55rem .9rem;font-size:.78rem}
}
@media(max-width:420px){
  .plans-grid .plan-card{flex-basis:88%}

  /* .pdp-grid's minmax(300px,1fr) floor doesn't fit narrow phones (~<364px
     viewport) once section padding is subtracted — drop the floor here. */
  .pdp-grid{grid-template-columns:1fr}
}