/* ============================================================
   Глобальная защита от обрезки/вылезания текста на мобильных.
   ЕДИНЫЙ источник правил. Подключается в <head> роутов страниц,
   которые НЕ используют PageShell (чекапы, цены, услуги, акции,
   программы, капельницы, врачи, документы и т.д.) — они не
   получают глобальный CSS из PageShell.vue.
   Длинные слова (Helicobacter, электроэнцефалография и т.п.)
   должны ПЕРЕНОСИТЬСЯ, а не обрезаться/вылезать за рамки.
   ============================================================ */

/* -------- Базовые BEM-элементы текста: перенос длинных слов -------- */
[class*="__title"],
[class*="__subtitle"],
[class*="__text"],
[class*="__desc"],
[class*="__description"],
[class*="__name"],
[class*="__question"],
[class*="__answer"],
[class*="__value"],
[class*="__note"],
[class*="__meta"],
[class*="__short"],
[class*="__price-new"],
[class*="__price-old"],
[class*="__price-link"] {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* -------- Карточки/элементы BEM-классов могут сжиматься -------- */
[class*="__card"],
[class*="__item"],
[class*="__info"] {
  min-width: 0;
}

/* -------- Текст внутри flex-пунктов (иконка + текст) -------- */
[class*="__item"] span,
[class*="__item"] p,
[class*="__list"] li span,
[class*="__list"] li p,
[class*="__info"] span,
[class*="__info"] p {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* -------- Гриды карточек не раздуваются длинным словом -------- */
.why-section__grid > *,
.when-to-visit__grid > *,
.reviews-section__grid > *,
.services-section__accordion > *,
.fd-why__grid > *,
.fd-services__accordion > *,
.fd-steps__grid > *,
.programs-section__grid > *,
.chk-other__grid > *,
.checkup-programs__specialized-grid > *,
.spc-programs__list > * {
  min-width: 0;
}

/* ============================================================
   ЧЕКАПЫ — карточки «Другие программы» (страница конкретного чекапа)
   ============================================================ */
.chk-other__card {
  min-width: 0;
}

.chk-other__card-title,
.chk-other__card-desc,
.chk-other__card-label {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* На узких экранах: цена переносится на свою строку, название
   получает всю ширину строки и не сжимается в узкую колонку */
@media (max-width: 480px) {
  .chk-other__card {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
  }

  .chk-other__card-icon {
    order: 1;
  }

  .chk-other__card-info {
    order: 2;
    flex: 1 1 calc(100% - 68px);
    min-width: 0;
  }

  .chk-other__card-price {
    order: 3;
    flex: 1 1 auto;
    text-align: left;
    white-space: normal;
  }

  .chk-other__card-arrow {
    order: 4;
  }
}

/* ============================================================
   ЧЕКАПЫ — специализированные карточки (spec-card)
   ============================================================ */
.spec-card {
  min-width: 0;
}

.spec-card__title,
.spec-card__desc,
.spec-card__label {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================================
   ЧЕКАПЫ — список «Что входит в программу»
   ============================================================ */
.spc-program__services li,
.spc-program__services li span {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.spc-program__short,
.spc-program__desc,
.spc-program__head-info,
.spc-hero__meta-item span {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================================
   ШИРОКИЕ ДЕСКТОПНЫЕ ЭКРАНЫ (большие мониторы).
   Раньше контейнеры страниц упирались в 1280px, и на мониторе
   1920px по краям оставалось ~320px пустого места с каждой
   стороны. Теперь ширина «резиновая»: clamp() сохраняет прежние
   1280px на ноутбуках (до ~1455px ширина не меняется) и плавно
   расширяет контейнер до 1680px на больших экранах — картинки
   и контент занимают большую часть экрана.
   !important нужен, потому что .container объявлен в scoped-стилях
   каждой страницы (.container[data-v-…]) и перебивает глобальное
   правило по специфичности.
   ВАЖНО: тот же блок продублирован в components/PageShell.vue —
   его глобальный <style> получают страницы НА PageShell (главная,
   направления, о клинике и т.д.). При правке значений менять
   в ОБОИХ файлах.
   Страницы с намеренно узким контейнером (Цены, «пустое»
   направление) помечены !important у себя и не расширяются.
   ============================================================ */
.container,
.dh-container,
.vsv-container,
.zor-container,
.gbz-container,
.gbz-curator__container,
.gbz-tech__container,
.gbz-why__container,
.checkup-doctors__container,
.checkup-contacts__container {
  max-width: clamp(1280px, 88vw, 1680px) !important;
}

.header__container,
.programs-section__container,
.programs-hero__container,
.programs-list__container,
.programs-features__container,
.promotions-section__container,
.promotions-list__container,
.promo-cta__container,
.kp-intro__container,
.kp-programs__container,
.kp-why__container {
  max-width: clamp(1400px, 92vw, 1760px) !important;
}

.contacts__container,
.featured-programs__container {
  max-width: clamp(1080px, 88vw, 1500px) !important;
}