/* Компоненты: всё, что повторилось дважды. Класс с модификаторами (`.btn`, `.btn--accent`), описание – docs/design-system.md → Компоненты.
   Появляются по ходу сборки; ничего не заводится «на будущее». */

/* Шапка: фиксированная строка, над тёмными секциями (.is-dark из main.js) текст светлеет. Contact виден всегда.
   Выравнивание по базовой линии: у Poppins (логотип) и Archivo разные поля над буквами, а у ссылок – отступ под линию hover;
   по центру блоков логотип садился на 5–7 px ниже меню. Сверху 16 – кнопка Contact (40) стоит по центру строки 72 */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-16) var(--page-margin) 0;
  color: var(--color-fg);
  background: var(--color-bg-page);
  transition: color var(--dur-300) var(--ease-out), background-color var(--dur-300) var(--ease-out);
}
.header.is-dark { color: var(--color-fg-on-dark); background: var(--color-bg-dark); }
.header__nav { display: flex; align-items: baseline; gap: var(--space-32); }

/* Кнопка: прямоугольник с полным скруглением – единственная «мягкая» форма на странице, чтобы действие не спутать с фото */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-strong);
  transition: transform var(--dur-300) var(--ease-out), background-color var(--dur-300) var(--ease-out);
}
.btn:hover { transform: translateY(calc(var(--space-4) * -1)); }
.btn--s { padding: var(--space-8) var(--space-16); }
.btn--accent { background: var(--color-accent); color: var(--color-fg-on-dark); }
.btn--light { background: var(--color-fg-on-dark); color: var(--color-fg); }
.header.is-dark .btn--accent { background: var(--color-fg-on-dark); color: var(--color-fg); }

/* Ссылка: hover `underline` – линия рисуется слева направо (docs/motion.md → Hover) */
.link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  padding-bottom: var(--space-4);
  transition: background-size var(--dur-600) var(--ease-out);
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }

/* Факты: двухколоночная таблица «подпись – значение» с волосяными линиями. scale и панель проекта */
.facts { display: grid; grid-template-columns: var(--facts-label) 1fr; border-top: 1px solid currentColor; }
.facts__row { display: contents; }
.facts dt, .facts dd { padding-block: var(--space-12); border-bottom: 1px solid var(--color-line); }
.facts dd { padding-left: var(--space-16); }
.section--dark .facts dt, .section--dark .facts dd, .drawer .facts dt, .drawer .facts dd { border-color: var(--color-line-on-dark); }
/* Модификатор сеткой: техкарточка в панели проекта – 4 колонки «подпись над значением», видна вместе с фото */
.facts--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16) var(--space-24); border-top: 0; }
.facts--grid .facts__row { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-12); border-top: 1px solid var(--color-line-on-dark); }
.facts--grid dt, .facts--grid dd { padding: 0; border: 0; }

/* Чипы: отдельные сущности – сертификаты, результаты, состав направлений. Контур и текст – светлый тон акцента на тёмном, акцент на светлом */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.chip {
  padding: var(--space-4) var(--space-12);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  color: var(--color-accent);
}
.section--dark .chip, .drawer .chip { color: var(--color-accent-on-dark); }

/* «Было – стало»: два кадра друг на друге, «после» обрезано по --split. Ручка – бегунок range на всю площадь кадра.
   position: absolute – холст сравнения (кадры, линия, подписи-метки), записано в базе */
.compare { --split: 50%; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-bg-dark); }
.compare--tall { aspect-ratio: 4 / 5; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__after { clip-path: inset(0 0 0 var(--split)); }
.compare::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: var(--split);
  width: 1px;
  background: var(--color-fg-on-dark);
  pointer-events: none;
}
.compare__label {
  position: absolute;
  top: var(--space-16);
  z-index: var(--z-content);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--color-scrim);
  color: var(--color-fg-on-dark);
  pointer-events: none;
}
.compare__label--before { left: var(--space-16); }
.compare__label--after { right: var(--space-16); }
.compare__range {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.compare__range::-webkit-slider-thumb { appearance: none; width: var(--handle); height: var(--handle); opacity: 0; }
.compare__range::-moz-range-thumb { width: var(--handle); height: var(--handle); opacity: 0; border: 0; }
/* Ручка шторки – круг на линии; бегунок невидим, тянется весь кадр */
.compare::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--split);
  z-index: var(--z-content);
  width: var(--handle);
  height: var(--handle);
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-fg-on-dark);
  background: var(--color-scrim);
  pointer-events: none;
  transition: background-color var(--dur-300) var(--ease-out);
}
.compare:has(.compare__range:focus-visible)::before, .compare:hover::before { background: var(--color-accent); }

/* Панель проекта: dialog справа, hover-приём `drawer` (docs/motion.md) */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-drawer);
  width: var(--drawer-w);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-bg-dark);
  color: var(--color-fg-on-dark);
  transform: translateX(100%);
  transition: transform var(--dur-600) var(--ease-out), overlay var(--dur-600) allow-discrete, display var(--dur-600) allow-discrete;
}
.drawer[open] { transform: translateX(0); }
@starting-style { .drawer[open] { transform: translateX(100%); } }
.drawer::backdrop { background: var(--color-scrim); opacity: 0; transition: opacity var(--dur-600) var(--ease-out), overlay var(--dur-600) allow-discrete, display var(--dur-600) allow-discrete; }
.drawer[open]::backdrop { opacity: 1; }
@starting-style { .drawer[open]::backdrop { opacity: 0; } }
/* Полоса Close нулевой высоты: липнет к верху панели, кнопка видна, но место у контента не отнимает (float сужал весь контент на ширину кнопки).
   align-items: flex-start – иначе flex растягивает кнопку по высоте полосы, то есть сжимает до 0 + текст */
.drawer__bar { position: sticky; top: 0; z-index: var(--z-content); height: 0; display: flex; justify-content: flex-end; align-items: flex-start; }
.drawer__close { flex: none; margin: var(--space-16); background: var(--color-fg-on-dark); color: var(--color-fg); }
.drawer__body { display: flex; flex-direction: column; gap: var(--space-32); padding: 0 var(--space-48) var(--space-96); outline: none; }
.drawer__head { display: flex; flex-direction: column; gap: var(--space-12); }
.drawer__gallery { display: flex; gap: var(--space-12); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
/* Полоса прокрутки скрыта и там, где не понимают scrollbar-width (Safari < 18.2, Chrome < 121); листание пальцем и тачпадом остаётся */
.drawer__gallery::-webkit-scrollbar { display: none; }
.drawer__gallery img { flex: none; height: var(--track-h); width: auto; max-width: 90%; object-fit: cover; scroll-snap-align: start; }
.drawer__stage { display: flex; flex-direction: column; gap: var(--reel-gap); padding-top: var(--space-64); }
/* Приём `reel`: первый экран панели (название, фото, описание) липнет целиком, вбок фото двигает прокрутка панели (main.js) – у галереи свой скролл и snap выключены */
.drawer__reel.is-reel .drawer__stage { position: sticky; top: 0; }
.drawer__reel.is-reel .drawer__gallery { overflow: hidden; scroll-snap-type: none; }
.drawer__reel.is-reel .drawer__gallery img { height: var(--reel-h); }
.drawer__text { display: flex; flex-direction: column; gap: var(--space-16); max-width: var(--measure); }
.drawer__body > .btn { align-self: flex-start; }

/* Поле формы: одна линия снизу, подпись над полем */
.field { display: flex; flex-direction: column; gap: var(--space-8); }
.field__input {
  width: 100%;
  padding: var(--space-8) 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  outline: none;
  resize: vertical;
}
.field__input:focus { border-bottom-color: var(--color-accent-on-dark); }

@media (max-width: 768px) {
  .header { padding-inline: var(--page-margin-mobile); }
  .header__nav { gap: var(--space-16); }
  .header__link--wide { display: none; }
  .drawer { width: 100%; }
  .drawer__body { padding: 0 var(--page-margin-mobile) var(--space-64); }
  .drawer__gallery img { height: var(--track-h-mobile); }
  .facts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}