/* ═══════════════════════════════════════════════════════════════
   responsive.css — мобильді бейімделу
   ЕҢ СОҢЫНАН жалғанады, әйтпесе жұмыс істемейді.

   Үш нүкте:
     1024px — hero мен байланыс бір бағанға түседі
      860px — гамбургер мәзір, қалқымалы WhatsApp батырмасы
      620px — бағыттар торы бір бағанға түседі
   ═══════════════════════════════════════════════════════════════ */

/* ══════════ ≤ 1024px — планшет ══════════ */
@media(max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .hero__panel{margin-right:0;min-height:300px}
  .contact__grid{grid-template-columns:1fr}
  .card--wide,.card--half,.card--third{grid-column:span 3}
  .gear__row{grid-template-columns:1fr;gap:.55rem;padding:1.5rem 0}
  .gear__price{color:var(--sage)}
}

/* ══════════ ≤ 860px — мобильді мәзір ══════════ */
@media(max-width:860px){
  .nav{
    display:none;position:absolute;top:74px;left:0;right:0;background:var(--bg);
    border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:.6rem 0;
  }
  .nav.open{display:flex}
  .nav a{padding:.85rem clamp(1.15rem,5vw,2.5rem);border-bottom:0}
  .nav a:hover{background:var(--paper)}
  .burger{display:block;order:3}
  .hdr__act{margin-left:auto}
  .hdr .btn{display:none}

  /* қалқымалы батырма header-дегінің орнын басады */
  .fab{display:inline-flex}
  body{padding-bottom:4.8rem}

  .trust__in{grid-template-columns:repeat(2,1fr)}
  .step{grid-template-columns:1fr;gap:.5rem}
  .step__n{font-size:2rem}
}

/* ══════════ ≤ 620px — телефон ══════════ */
@media(max-width:620px){
  /* НАЗАР: тор бір бағанға түскенде карточкадағы span-ды да алып тастау керек.
     Әйтпесе grid 6 бағанға созылып, бет көлденең асып кетеді. */
  .dir{grid-template-columns:1fr}
  .card--wide,.card--half,.card--third{grid-column:auto}

  .ptab{font-size:.87rem}
  .ptab td:first-child{padding-right:.9rem}
  .hero__facts{gap:.85rem}
  .trust__i{padding:1.3rem 1rem}
}