/* ==========================================================================
   ARM-GARANT — база: сброс, типографика, контейнер, кнопки

   Здесь только то, что применяется на всех страницах. Всё остальное — в
   CSS своей секции.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Полоса прокрутки не должна дёргать ширину контента: иначе замеры
     сверки с макетом расходятся на 15 px между страницами. */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;

  /* Горизонтальный скролл на макетной вёрстке — почти всегда следствие
     блока шире контейнера. Прячем, но искать причину всё равно надо:
     на мобиле обрезанный блок виден. */
  overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); letter-spacing: var(--ls-h2); }

/* --- Контейнер ----------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--side-padding) * 2);
  margin-inline: auto;
  padding-inline: var(--side-padding);
}

/* --- Кнопки -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 0 var(--space-24);
  min-height: 48px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.btn--primary { background: var(--color-brand); color: #fff; }
.btn--primary:hover { background: var(--color-brand-hover); }

/* --- Доступность --------------------------------------------------------- */

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Кнопка-таблетка со стрелкой -----------------------------------------
   Макет: компонент `Submit button container`, 45 инстансов.
   Слева 32, справа 12, по вертикали 12, круг иконки 56, шеврон 34. */

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  /* Кнопка не должна распирать родителя: ниже 1920 контейнеры узкие, и без
     max-width круг 56 уезжает за экран. Сжимается подпись, круг остаётся 56. */
  max-width: 100%;
  padding: var(--space-12) var(--space-12) var(--space-12) var(--space-32);
  border-radius: var(--radius-pill);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.cta-btn__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cta-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.cta-btn__icon svg { width: 34px; height: 34px; }

/* Синяя кнопка с белым кругом */
.cta-btn--primary { background: var(--color-brand); color: var(--color-text-invert); }
.cta-btn--primary .cta-btn__icon { background: var(--color-bg); color: var(--color-brand); }

/* Ховер по прототипу (правка 2026-08-14): кнопка выворачивается — белая
   с синей обводкой и синим текстом, круг наоборот заливается синим.
   Обводка нарисована внутренней тенью, а не border: настоящая рамка
   добавила бы 2 px к высоте и дёргала соседей в момент наведения. */
.cta-btn--primary:hover {
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1.5px var(--color-brand);
  color: var(--color-brand);
}

.cta-btn--primary:hover .cta-btn__icon {
  background: var(--color-brand);
  color: var(--color-text-invert);
}

/* Белая кнопка с синим кругом */
.cta-btn--invert { background: var(--color-bg); color: var(--color-brand); }
.cta-btn--invert .cta-btn__icon { background: var(--color-brand); color: var(--color-text-invert); }
.cta-btn--invert:hover { background: var(--color-bg-soft); }

/* Стеклянная на тёмном фоне: заливка белым 22 % + размытие подложки.
   Теней в макете нет — только blur, см. tokens. */
.cta-btn--glass {
  background: var(--glass-fill);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  color: var(--color-text-invert);
}

.cta-btn--glass .cta-btn__icon { color: var(--color-text-invert); }
.cta-btn--glass:hover { background: rgba(255, 255, 255, .32); }

/* --- Заголовок секции -----------------------------------------------------
   В макете заголовок в две краски: часть синяя, часть чёрная. */

.section-title {
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-48);
}

.section-title__accent { color: var(--color-brand); }

.section-subtitle {
  font-size: var(--fs-24);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-24);
}

/* Мобильного макета нет; на телефоне 48 px — это три-четыре слова на
   строку. 32 — тот же шаг, который постраничные файлы уже используют
   для своих заголовков ниже 700 px (корзина, объекты, товар), просто
   сведён в одно правило для общих компонентов. */
@media (max-width: 700px) {
  .section-title { font-size: var(--fs-32); letter-spacing: var(--ls-32); }
  .section-subtitle { font-size: var(--fs-18); }
}

/* --- Разделитель «или» ---------------------------------------------------- */

.or-divider {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: 1 1 auto;
  min-width: 0;
}

/* Линии по бокам «или» в макете пунктирные: штрих 3, пропуск 4, прозрачность
   40 % (ноды 1:2641 и 1:2643 в блоке заявки, 1:1712 и 1:1714 в форме КП).
   Цвет берётся от контекста: на синей панели текст белый — и штрихи белые,
   на светлой панели оба серые. */
.or-divider::before,
.or-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    currentColor 0 3px,
    transparent 3px 7px
  );
  opacity: .4;
}

.or-divider__text {
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
}

/* --- Секции главной ------------------------------------------------------- */

.section { padding-block: calc(var(--section-gap) / 2); }
.section--tight { padding-block: var(--space-48); }

/* --- Чекбокс ---------------------------------------------------------------
   Макет: UI kit, нода 1:3863. Квадрат 28 с радиусом 4, отмеченный —
   синяя заливка с белой галочкой. Живёт в base.css, а не в CSS каталога:
   тот же чекбокс стоит в форме регистрации и в фильтрах. */

.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  cursor: pointer;
  font-size: var(--fs-20);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }

.checkbox__box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: transparent;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.checkbox__box svg { width: 20px; height: 20px; }

.checkbox input:checked + .checkbox__box {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-invert);
}

.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--color-brand); outline-offset: 2px; }


/* Иконки соцсетей 56 px (в шапке и подвале — 60). Модификатор жил
   во front-hero.css, который на внутренних страницах не подключается,
   и там иконки оставались 60. */
.social-icons--56 .social-icons__link { width: 56px; height: 56px; }

/* --- Ссылка «Подробнее» ----------------------------------------------------
   Макет: `Link` 24 Medium синим, шеврон 24, отбивка снизу 8. Встречается на
   главной, в объектах, сертификатах и каталоге — поэтому лежит в базе, а не
   в секционном файле: из front-products.css её не видно на внутренних. */

.link-more {
  display: inline-flex;
  /* Внутри карточек-колонок ссылка иначе растягивается на всю ширину и
     кликается мимо текста. В макете её контейнер по ширине текста. */
  align-self: flex-start;
  align-items: center;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  color: var(--color-brand);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.link-more__icon { display: flex; width: 24px; height: 24px; }
.link-more__icon svg { width: 24px; height: 24px; }
a.link-more:hover { opacity: .7; }

/* Файла нет — ссылка неактивна. В макете такого состояния нет. */
.link-more--muted { color: var(--color-text-muted); cursor: default; }

/* --- Карта офиса ------------------------------------------------------------
   Занимает место серой плашки «карта» из макета — в подвале (395×202) и на
   странице контактов (910×634). Размеры задают те же правила, что и раньше
   плашке, здесь только общее поведение. */

.ag-map {
  position: relative;
  overflow: hidden;
  background: var(--color-border);
  /* Leaflet рисует свои панели с z-index до 700 и без изоляции перекрывал бы
     шапку при прокрутке. */
  isolation: isolate;
  z-index: 0;
}

/* Пока скрипт не отработал — обычная ссылка по центру, как надпись «карта»
   в макете. После инициализации Leaflet её убирает. */
.ag-map__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--space-24);
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  text-align: center;
  color: var(--color-text);
}

/* Подпись OpenStreetMap обязательна по лицензии — оставляем читаемой,
   но мельче стандартной. */
.ag-map .leaflet-control-attribution {
  font-size: 11px;
  background: rgba(255, 255, 255, .8);
}

.ag-map .leaflet-container { font-family: inherit; }

/* Загруженная через админку иконка блока (настройки `*_icon`). Контейнеры
   иконок задают размер на вложенном svg — картинке даём просто вписаться
   в контейнер, у него везде фиксированные габариты с внутренним полем. */
.ag-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Тост о добавлении в корзину -------------------------------------------
   Появляется в правом нижнем углу после AJAX-добавления, живёт три секунды.
   Цвета фирменные, теней в макете нет — тост тоже без тени, границей. */

.ag-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  max-width: 420px;
  padding: var(--space-16) var(--space-24);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-16);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.ag-toast.is-visible { opacity: 1; transform: none; }
.ag-toast.is-error { border-color: var(--color-error); }

/* --- Общие компоненты на телефоне -------------------------------------------
   Мобильного макета нет; правило то же, что и у заголовков выше: шкала
   ужимается на шаг-два. Здесь только компоненты, которые встречаются на
   многих страницах, — постраничные размеры живут в своих файлах. */
@media (max-width: 700px) {
  .cta-btn {
    gap: var(--space-12);
    font-size: var(--fs-18);
  }

  .cta-btn__icon { width: 44px; height: 44px; }
  .cta-btn__icon svg { width: 26px; height: 26px; }

  .link-more { font-size: var(--fs-18); }
  .link-more__icon,
  .link-more__icon svg { width: 20px; height: 20px; }

  .checkbox { font-size: var(--fs-16); }
  .checkbox__box { width: 24px; height: 24px; }
  .checkbox__box svg { width: 16px; height: 16px; }

  .or-divider__text { font-size: var(--fs-16); }

  /* Тост шириной 420 не помещается в экран 375 и уходил за правый край. */
  .ag-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }
}