/* ============================================================
   RUBY — повторяющиеся компоненты
   Геометрия из Figma: компонент «Верхняя панель» (34:32),
   состояния «Обычная» (34:31) и «Материалы открыты» (34:33).
   ============================================================ */

/* ---------- Верхняя панель --------------------------------- */

/* ТЗ: панель «ходит вниз по сайту». Липкий блок нулевой высоты стоит
   первым в холсте и не сдвигает раскладку; всё содержимое шапки
   позиционировано от него абсолютно, как раньше. */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  display: block;
  width: var(--canvas-w);
  height: 0;
  z-index: 20;
}

.site-header__bar {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--canvas-w);
  height: calc(var(--header-bar-h) + 1px); /* линия Figma лежит на 89..90 */
  background: var(--c-white);
  border-bottom: 1px solid var(--c-black);
}

/* Логотип: рамка 226×92 на (47, 5). Выше панели списка «Материалы»,
   которая начинается на y 79 и иначе перекрыла бы его линию (y 84–88). */
.logo {
  position: absolute;
  left: 47px;
  top: 5px;
  width: 226px;
  height: 92px;
  z-index: 2;
}

/* SVG сохраняет исходные координаты страницы (viewBox 24 0 100 100),
   поэтому смещение относительно рамки логотипа = 24-47 / 0-5. */
.logo__mark {
  position: absolute;
  left: -23px;
  top: -5px;
  width: 100px;
  height: 100px;
}

.logo__word {
  position: absolute;
  left: 56px;
  top: 21px;
  width: 170px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 60px;
  color: var(--c-pink);
}

/* ---------- Подчёркивания (общий механизм) --------------------
   «Анимации сайта»: в Default линия — отрезок 18 px у левого края
   с opacity 0, в Variant2 — полная длина. Линия всегда полной длины,
   видимая часть открывается clip-path от 18 px: рост без пересчёта
   раскладки, проявление — быстрее роста. */
.u-line {
  clip-path: inset(0 calc(100% - var(--nav-underline-w)) 0 0);
  opacity: 0;
  transition: clip-path var(--hover-dur) var(--hover-ease),
              opacity var(--fade-dur) linear;
}

.u-line.is-on,
.u-trigger:hover .u-line,
.u-trigger:focus-visible .u-line {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

/* ЛОГО, Состояние=Подчеркнуто: Line 10, 4 px #F3ADFF, 0…226 px.
   Линия Figma на 90.22% высоты рамки (y 83), обводка 4 px откладывается
   внутрь — вверх: видимая полоса y 79…83 рамки = 84…88 страницы,
   над линией шапки (89). По SVG «Анимации сайта руби/Верхняя панель». */
.logo__underline {
  position: absolute;
  left: 0;
  top: 79px;
  width: 100%;
  height: var(--nav-underline-h);
  background: var(--c-pink);
}

/* Навигация. Выше панели списка: подчёркивание «Материалы» (y 75–79)
   упирается в верхний край открытой панели (y 79). */
.site-nav {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.site-nav__item {
  position: absolute;
  display: block;
}

.site-nav__label {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-family: var(--f-accent);
  font-weight: 700;
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  color: var(--c-purple);
}

/* Line 9: 4 px #D18CFF на нижней границе рамки пункта, Variant2 — 100%.
   Обводка внутрь: полоса занимает 4 px над границей (рамка − 4). */
.site-nav__underline {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--nav-underline-h);
  background: var(--c-purple);
}

/* «Материалы» остаётся подчёркнутым, пока открыт список */
.site-nav__item.is-active .u-line,
.site-header.is-materials-open .site-nav__item--materials .u-line {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

.site-nav__item--about { left: 382px; top: 35px; width: 98px; height: 44px; }
.site-nav__item--cases { left: 531px; top: 34px; width: 121px; height: 42px; }
.site-nav__item--solutions { left: 703px; top: 34px; width: 172px; height: 45px; }
.site-nav__item--materials { left: 926px; top: 34px; width: 221px; height: 45px; }

.site-nav__item--about .site-nav__underline { top: 40px; }     /* y 75…79 */
.site-nav__item--cases .site-nav__underline { top: 38px; }     /* y 72…76 */
.site-nav__item--solutions .site-nav__underline,
.site-nav__item--materials .site-nav__underline { top: 41px; } /* y 75…79 */

/* Действия справа: поиск, письмо, кнопка */
.header-search {
  position: absolute;
  left: 1184px;
  top: 18px;
  width: 329px;
  height: 56px;
}

/* Кнопка-лупа стоит на (1470, 19): 1470 − 1184, 19 − 18 */
.header-search__toggle {
  position: absolute;
  left: 286px;
  top: 1px;
  width: 50px;
  height: 54px;
}

.header-search__icon {
  width: 50px;
  height: 54px;
}

.header-search__toggle,
.header-mail {
  transition: transform var(--press-dur) ease-out;
}

.header-search__toggle:active,
.header-mail:active {
  transform: scale(0.92);
}

/* Поле поиска — «Rectangle 61» во фрейме «Лупа»: в состоянии «Обычная»
   30×56 у правого края (x 246…276) с opacity 0; в варианте поиска
   разворачивается влево до начала фрейма. Правый край неподвижен. */
.header-search__field {
  position: absolute;
  right: 53px; /* 329 − 276 */
  top: 0;
  width: 30px;
  height: 56px;
  margin: 0;
  padding: 0 16px;
  border: 3px solid var(--c-purple);
  border-radius: 0;
  background: var(--c-white);
  font-family: var(--f-text);
  font-size: 24px;
  color: var(--c-ink);
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  transition: width var(--hover-dur) var(--hover-ease),
              opacity var(--hover-dur) var(--hover-ease);
}

.header-search__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.header-search.is-open .header-search__field {
  width: 276px;
  opacity: 1;
  pointer-events: auto;
}

/* Письмо: Default — фиолетовый контур, Variant2 — заливка #D18CFF
   с белым контуром (54:929). ТЗ: «при нажатии заполняется». */
.header-mail {
  position: absolute;
  left: 1538px;
  top: 32px;
  width: 62px;
  height: 36px;
}

.header-mail__icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 62px;
  height: 36px;
}

.header-mail__icon--filled {
  opacity: 0;
  transition: opacity var(--hover-dur) var(--hover-ease);
}

.header-mail:hover .header-mail__icon--filled,
.header-mail:focus-visible .header-mail__icon--filled,
.header-mail.is-pressed .header-mail__icon--filled {
  opacity: 1;
}

/* Начертание Syncopate Bold для кириллицы в Figma подменяется
   синтетическим полужирным: межбуквенное расстояние там шире
   настоящего Roboto Bold на ~0.068em. Замер: «Материалы»,
   «Решения» — шаг букв 23.3 px против 20.9 px при 36 px. */
.site-nav__label,
.case__step-title,
.industry-card__title,
.results__card-title {
  letter-spacing: 0.068em;
}

/* Figma: у пробела в «О нас» собственный трекинг −3.68 px
   (get_design_context, узел 6:52310). */
.site-nav__tight-space {
  letter-spacing: -3.68px;
}

/* Syncopate Regular с кириллической подменой. При тех же top и
   line-height, что в Figma, браузер ставит строку на 3 px ниже и чуть
   уже эталона. Замеры: главная (пункты «Вы наверняка узнаете себя»)
   и страница новостей (все подписи и заголовки Syncopate 400) —
   Δy = +3 px, шаг букв меньше на ~0.8 px при 36 px. */
.problems__item,
.news-heading,
.photo-stub__label,
.item-author,
.form-label__text {
  margin-top: -0.0834em; /* −3 px при 36 px; при 32 px (автор) замер +2 px */
  letter-spacing: 0.022em;
}

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

.btn {
  position: absolute;
  display: block;
  transition: background-color var(--hover-dur) var(--hover-ease),
              box-shadow var(--hover-dur) var(--hover-ease),
              transform var(--press-dur) ease-out;
}

/* ТЗ: «небольшая отдача при нажатии» — в макете нет, лёгкое сжатие */
.btn:active {
  transform: scale(0.98);
}

.btn--solid {
  background: var(--c-green);
  border-radius: 0;
}

/* Variant2 зелёных кнопок: #49B080 */
.btn--solid:hover,
.btn--solid:focus-visible {
  background: var(--c-green-hover);
}

/* В экспорте Figma зелёная кнопка — одна фигура с «вырезанными»
   буквами (fill #5CE2A3, even-odd), то есть подпись читается
   белой. PNG-эталон подтверждает: внутри кнопки (255,255,255). */
.btn--solid .btn__label {
  color: var(--c-white);
}

.btn--outline {
  /* Figma: Rectangle 45, box-sizing border-box, border 3px внутрь.
     inset-тень рисует ту же рамку, но не сдвигает содержащий блок
     абсолютных потомков, в отличие от border. */
  box-shadow: inset 0 0 0 3px var(--c-black);
  border-radius: 0;
}

/* Variant2 контурных кнопок: рамка и текст #BABABA */
.btn--outline:hover,
.btn--outline:focus-visible {
  box-shadow: inset 0 0 0 3px var(--c-muted);
}

.btn--outline:hover .btn__label,
.btn--outline:focus-visible .btn__label {
  color: var(--c-muted);
}

.btn__label {
  position: absolute;
  transition: color var(--hover-dur) var(--hover-ease);
  text-align: left; /* <button> по умолчанию центрирует текст */
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-btn-size);
  line-height: var(--t-btn-lh);
  color: var(--c-black);
  white-space: nowrap;
}

.btn__label--center {
  text-align: center;
}

.btn__label--lg {
  font-size: var(--t-btn-lg-size);
  line-height: var(--t-btn-lg-lh);
  white-space: normal;
}

/* Кнопка «Попробовать» в панели */
.btn--try {
  left: 1624px;
  top: 18px;
  width: 236px;
  height: 56px;
}

.btn--try .btn__label {
  left: 0.4px;
  top: 12.67px;
  width: 235px;
}

/* Бургер и меню узких экранов: в макете 1920 их нет — включаются
   в styles/fluid.css ниже 1000 px */
.header-burger,
.header-menu {
  display: none;
}

/* ---------- Раскрытая панель «Материалы» -------------------- */

.header-drop {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 79px;
  width: var(--canvas-w);
  height: 136px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.site-header.is-materials-open .header-drop {
  opacity: 1;
  pointer-events: auto;
}

.header-drop__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--canvas-w);
  height: 136px;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-black);
}

.header-drop__sheet {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--canvas-w);
  height: 125px;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-black);
}

.header-drop__item {
  position: absolute;
  left: 55px;
  width: 710px;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: var(--t-lead-size);
  line-height: var(--t-lead-lh);
  color: var(--c-ink);
}

.header-drop__item--news { top: 27px; }
.header-drop__item--articles { top: 78px; }

/* Line 11 / Line 12: 3 px #000 на 42 px ниже верха строки (линия
   повёрнута на 180°, поэтому обводка уходит наружу — вниз от границы);
   Variant2 — 146 px («Новости») и 118 px («Статьи») */
.header-drop__text {
  position: relative;
  display: inline-block;
}

.header-drop__item .site-nav__underline {
  top: 42px;
  height: 3px;
  background: var(--c-black);
}

.header-drop__item--news .site-nav__underline { width: 146px; }
.header-drop__item--articles .site-nav__underline { width: 118px; }

/* ---------- Ссылка-переход «Переход на статью» -------------- */

.link-card {
  position: absolute;
  display: block;
}

.link-card__rule {
  position: absolute;
  left: 0;
  height: 3px;
  background: var(--c-black);
  transition: background-color var(--hover-dur) var(--hover-ease);
}

/* Обводка Figma центрируется на границе рамки: верхняя линейка
   выходит на 3 px выше её верха, нижняя ложится внутрь. */
.link-card__rule--top { top: -3px; }
.link-card__rule--bottom { bottom: 0; }

.link-card__text {
  position: absolute;
  transition: color var(--hover-dur) var(--hover-ease);
  font-family: var(--f-text);
  font-weight: 400;
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--c-ink);
  white-space: nowrap;
}

/* Стрелка — маска из исходного SVG, закрашенная цветом: так её цвет
   меняется вместе с текстом и линиями. Контур встроен data-URI (копия
   assets/img/arrow-right*.svg): маску из файла браузер не загрузит,
   если сайт открыт двойным щелчком (file://). */
.link-card__arrow {
  position: absolute;
  width: 50.93px;
  height: 17.32px;
  background-color: var(--c-ink);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='798.4 8671.34 50.93 17.32'%3E%3Cpath d='M849.327 8680L834.327 8671.34V8688.66L849.327 8680ZM798.4 8680V8681.5H835.827V8680V8678.5H798.4V8680Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--arrow) no-repeat 0 0 / 100% 100%;
  mask: var(--arrow) no-repeat 0 0 / 100% 100%;
  transition: background-color var(--hover-dur) var(--hover-ease);
}

.link-card__arrow--short {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='567.48 10837.3 29.61 17.4'%3E%3Cpath d='M597.092 10846L582.092 10837.3V10854.7L597.092 10846ZM567.479 10846V10847.5H583.592V10846V10844.5H567.479V10846Z'/%3E%3C/svg%3E");
}

/* Variant2: текст, стрелка и обе линии #BABABA */
.link-card:hover .link-card__rule,
.link-card:focus-visible .link-card__rule,
.link-card:hover .link-card__arrow,
.link-card:focus-visible .link-card__arrow {
  background-color: var(--c-muted);
}

.link-card:hover .link-card__text,
.link-card:focus-visible .link-card__text {
  color: var(--c-muted);
}

/* ---------- Подвал ----------------------------------------- */

/* Подвал собран потоком, но на холсте 1920 встаёт по координатам
   макета: контакты с 107 px, шаг строк 57 px (30 строка + 27 зазор),
   правовые ссылки на 452 px. Строки контактов берутся из контакты.yml,
   поэтому их число может меняться — дырок и наложений не будет. */
.site-footer {
  position: relative;
  width: var(--canvas-w);
  min-height: 460px;
  padding: 107px 106px 48px;
  border-top: 1px solid var(--c-black);
}

/* Ссылки на правовые документы — ряд в подвале. В макете их нет:
   добавлены по просьбе (политика, обработка данных, настройки cookie). */
.site-footer__legal {
  position: relative;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 56px;
}

.site-footer__legal-link {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  color: var(--c-ink);
  transition: color var(--hover-dur) var(--hover-ease);
}

.site-footer__legal-link:hover,
.site-footer__legal-link:focus-visible {
  color: var(--c-grey);
}

.site-footer__legal-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.site-footer__contacts {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  min-height: 315px;
}

.site-footer__line {
  position: relative;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  color: var(--c-ink);
  white-space: nowrap;
}

.site-footer__line--muted {
  color: var(--c-grey);
}

.site-footer__link {
  transition: color var(--hover-dur) var(--hover-ease);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--c-grey);
}

/* ---------- Плашка cookie -----------------------------------
   В макете её нет: собрана из элементов сайта (белый фон, чёрная
   линия сверху, зелёная и контурная кнопки). Появляется при первом
   заходе, см. scripts/cookies.js. */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 32px);
  padding: clamp(14px, 1.6vw, 24px) clamp(16px, 3vw, 48px);
  background: var(--c-white);
  border-top: 2px solid var(--c-black);
  transform: translateY(110%);
  transition: transform 380ms var(--hover-ease);
}

.cookie-bar.is-on {
  transform: none;
}

.cookie-bar__text {
  flex: 1 1 320px;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 20px);
  line-height: 1.45;
  color: var(--c-ink);
}

.cookie-bar__link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 16px);
}

/* кнопки сайта на холсте позиционированы абсолютно — здесь они в потоке */
.cookie-bar .btn {
  position: relative;
  left: auto;
  top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px clamp(14px, 1.4vw, 24px);
}

.cookie-bar .btn__label {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  white-space: nowrap;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.3;
}

.legal-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--hover-dur) var(--hover-ease);
}

.legal-link:hover,
.legal-link:focus-visible {
  color: var(--c-grey);
}

@media (max-width: 759.98px) {
  .cookie-bar__actions { width: 100%; }
  .cookie-bar .btn { flex: 1 1 140px; }
}

/* ---------- Наведение и нажатие на материалы -----------------
   ТЗ (часть 3): «при наведении блок затемняется». Затемняется фото,
   у ссылки вырастает линия слева направо — тем же приёмом, что и
   подчёркивания в шапке. Нажатие даёт лёгкую отдачу всей карточке.
   Класс-метка news-card--hover помечает блок как интерактивный. */
.photo-stub {
  transition: filter var(--hover-dur) var(--hover-ease),
              transform var(--press-dur) ease-out;
}

.news-lead,
.news-side > article,
.news-cards > article {
  transition: transform var(--press-dur) ease-out; /* news-card--hover */
}

.news-lead:hover .photo-stub,
.news-side > article:hover .photo-stub,
.news-cards > article:hover .photo-stub,
.photo-stub:focus-visible {
  filter: brightness(0.88);
}

/* отдача при нажатии на любую ссылку внутри карточки */
.news-lead:has(a:active),
.news-side > article:has(a:active),
.news-cards > article:has(a:active) {
  transform: scale(0.985);
}

.news-lead:has(a:active) .photo-stub,
.news-side > article:has(a:active) .photo-stub,
.news-cards > article:has(a:active) .photo-stub {
  filter: brightness(0.8);
}

/* линия под ссылкой карточки: 18 px → полная ширина */
.news-card__more::after,
.news-heading a::after,
.news-lead__heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  background: currentColor;
  clip-path: inset(0 calc(100% - var(--nav-underline-w)) 0 0);
  opacity: 0;
  transition: clip-path var(--hover-dur) var(--hover-ease),
              opacity var(--fade-dur) linear;
}

.news-heading a {
  position: relative;
  display: inline-block;
}

.news-lead__heading {
  /* линия рисуется внутри самого заголовка-блока */
  position: absolute;
}

.news-lead:hover .news-lead__heading::after,
.news-side > article:hover .news-heading a::after,
.news-cards > article:hover .news-card__more::after,
.news-card__more:focus-visible::after {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}