/* =====================================================================
   m-cards.css — ARAKELOV, мобильная адаптация
   Агент 2: сетки / карточки / бейджи-пилюли / каталог (детальная карточка товара)
   -----------------------------------------------------------------
   Грузится ПОСЛЕ style.css — переопределяет только мобильные брейкпоинты.
   Десктоп НЕ трогаем. Только @media (max-width: ...).
   Брейкпоинты: 1024 (сетки), 768, 560, 400.
   Зона: .grid-2/.grid-3/.grid-4, .card/.feature-card/.advantage-card/
         .product-card (+.product-image/.product-body/.product-price),
         .badge/.pill/.pill-row, .spec-list, .old-price,
         .product-media/.product-hero-img/.thumb-row, .img-frame
   ===================================================================== */

/* =========================== 1024px — переходная зона =========================== */
@media (max-width: 1024px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    gap: 24px;
  }
}

/* =========================== 768px — основная мобильная адаптация =========================== */
@media (max-width: 768px) {

  /* ---------- Единый зазор в сетках ---------- */
  .grid-2,
  .grid-3,
  .grid-4 {
    gap: 16px;
  }

  /* ---------- Равномерность карточек: flex-колонка + выравнивание по высоте ---------- */
  .card,
  .feature-card,
  .advantage-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px 20px;
  }

  /* Иконка не должна сжиматься при переносах текста рядом */
  .card .card-icon,
  .feature-card .card-icon,
  .advantage-card .card-icon {
    flex-shrink: 0;
  }

  /* Если внутри карточки есть кнопка/ссылка-кнопка последним элементом —
     прижимаем её книзу, чтобы ряд карточек выглядел ровно */
  .card > .cta-button,
  .feature-card > .cta-button,
  .advantage-card > .cta-button {
    margin-top: auto;
  }

  /* ---------- Карточка товара ---------- */
  .product-card {
    height: 100%;
  }

  .product-card .product-body {
    padding: 22px 20px 24px;
    gap: 10px;
  }

  /* Картинка-обложка товара — только прямой ребёнок .product-card
     (не трогаем большое фото внутри .product-media в каталоге) */
  .product-card > .product-image {
    height: 200px;
  }

  /* Кнопка заказа всегда внизу карточки товара */
  .product-card .cta-button {
    margin-top: auto;
  }

  /* ---------- Бейджи / пилюли ---------- */
  .badge,
  .pill {
    font-size: .74rem;
    padding: 5px 12px;
  }

  .pill-row {
    gap: 8px;
    margin-top: 12px;
  }

  /* ---------- Список характеристик товара ---------- */
  .spec-list {
    font-size: .86rem;
    gap: 7px;
  }

  /* ---------- Старая цена / текущая цена — не должны распирать строку ---------- */
  .old-price {
    font-size: .88rem;
  }

  /* ---------- Каталог: детальная карточка товара с галереей ---------- */
  .product-media {
    gap: 10px;
  }

  /* Крупное фото сверху — читаемая высота вместо фиксированной как у обложки */
  .product-media .product-image,
  .product-hero-img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .thumb-row {
    gap: 8px;
  }

  .thumb-row img {
    width: 64px;
    height: 64px;
  }
}

/* =========================== 560px — 1 колонка в сетках 2/3, плотнее =========================== */
@media (max-width: 560px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .card,
  .feature-card,
  .advantage-card {
    padding: 22px 18px;
  }

  .product-card .product-body {
    padding: 20px 18px 22px;
  }

  .badge,
  .pill {
    font-size: .72rem;
    padding: 5px 11px;
  }

  .thumb-row img {
    width: 56px;
    height: 56px;
  }
}

/* =========================== 400px — плитки схлопываются в 1 колонку =========================== */
@media (max-width: 400px) {
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    gap: 14px;
  }

  .product-card > .product-image {
    height: 180px;
  }

  /* На самых узких экранах бейджи/пилюли — тоже в столбик, если их несколько подряд */
  .pill-row {
    gap: 8px;
  }
}