/* ============================================================
   Медиазапросы (mobile-first)

   Базовые стили в остальных файлах описывают мобильную версию.
   Здесь — только расширения для более широких экранов,
   от меньшей контрольной точки к большей.

   421px  — счётчики в две колонки
   461px  — футер в две колонки
   521px  — полная подпись в бейдже
   601px  — тарифы и отзывы сеткой вместо ленты, крупнее кнопка «наверх»
   701px  — полные подписи вкладок в переключателе тарифов
   761px  — футер в три колонки
   881px  — блок доверия и «Для кого» в две колонки
   901px  — контакты и форма рядом; приподнятый тариф «Оптимальный»
   961px  — hero в две колонки
   1041px — полное меню в шапке вместо бургера
   ============================================================ */

/* --- 421px: счётчики блока доверия 2×2 ---------------------- */
@media (min-width:421px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- 461px: футер в две колонки ----------------------------- */
@media (min-width:461px){
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- 521px: в бейдже помещается полная подпись ---------------- */
@media (min-width:521px){
  .badge__full{display:inline}
  .badge__short{display:none}
}

/* --- 601px: крупнее кнопка «наверх» ------------------------- */
@media (min-width:601px){
  .totop{right:22px; bottom:22px; width:50px; height:50px}
}

/* --- 601px: ленты превращаются в сетки --------------------- */
@media (min-width:601px){
  .slider{
    display:grid; overflow:visible; scroll-snap-type:none;
    padding:0; margin-inline:0;
  }
  .slider > *{flex:none}
  .slider__count{display:none}

  .plans{gap:20px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}

  /* Четыре отзыва: по три в ряд четвёртый висел бы один, поэтому 2×2 */
  .reviews{gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))}

  /* Выравнивание названия, цены, списка и кнопки по всем карточкам ряда.
     Работает только на гриде, поэтому живёт здесь, а не в базовых стилях. */
  @supports (grid-template-rows: subgrid){
    .plan{display:grid; grid-template-rows:subgrid; grid-row:span 5; row-gap:0; align-content:start}
  }
}

/* --- 701px: полные подписи вкладок в переключателе ---------- */
@media (min-width:701px){
  .switch [role="tab"]{padding:12px 22px; font-size:14.5px}
  .switch__full{display:inline}
  .switch__short{display:none}
}

/* --- 761px: футер в три колонки ----------------------------- */
@media (min-width:761px){
  .footer__top{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr))}
}

/* --- 881px: две колонки в блоке доверия и «Для кого» -------- */
@media (min-width:881px){
  .trust__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .who{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}

/* --- 901px: форма и контакты рядом, акцент на тарифе -------- */
@media (min-width:901px){
  .contact{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
  .plan--top{transform:translateY(-14px)}
  .plan--top:hover{transform:translateY(-19px)}
}

/* --- 961px: hero в две колонки ------------------------------ */
@media (min-width:961px){
  .hero__in{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}

  /* У иллюстрации широкие прозрачные поля, поэтому в колонке она
     выглядит мелкой. Даём ей выйти за края — секция всё равно
     обрезает лишнее по overflow:hidden. */
  .hero__shot img{width:118%; max-width:none; margin-inline:-9%}
}

/* --- 1041px: полное меню вместо бургера --------------------- */
@media (min-width:1041px){
  .nav{display:flex}
  .header__cta{display:inline-flex}
  .burger{display:none}
  .mobile-nav,.mobile-nav.is-open{display:none}
}