/* =========================================================================
   components.css — компоненты, отсутствующие в style-guide.css
   Дополняет UI Kit: dropdown меню услуг, drawer-список, шаги/степпер,
   мессенджер, hero-специфика, состояния is-open/is-active/is-visible уже
   частично объявлены в style-guide.css — здесь только недостающее.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Фильтры каталога проектов (мигрировано из site 3, адаптировано:
   кнопки-фильтры на базе штатного .chip + .chip--active из base.css)
   ------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  align-items: center;
}

.filters .chip {
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.filters .chip:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

/* Утилита: скрытие карточек, отфильтрованных из выдачи */
.is-hidden {
  display: none !important;
}

/* -------------------------------------------------------------------------
   Меню шапки: пункты с выпадающими списками (разворачиваются вниз)
   ------------------------------------------------------------------------- */
.menu {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.menu__item {
  position: relative;
}

.menu__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--fs-small);
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.menu__link:hover,
.menu__item:hover > .menu__link {
  color: var(--color-accent-hover);
  background: var(--color-light-2);
}

.menu__link[aria-current="page"],
.menu__link.is-active {
  color: var(--color-accent-dark);
}

.menu__caret {
  flex: none;
  width: 10px;
  height: 10px;
  transition: transform var(--transition-fast);
}

.menu__item:hover .menu__caret,
.menu__item.is-open .menu__caret {
  transform: rotate(180deg);
}

.menu__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 320px;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: var(--z-header);
}

.menu__item:hover > .menu__dropdown,
.menu__item:focus-within > .menu__dropdown,
.menu__item.is-open > .menu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu__dropdown a {
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.menu__dropdown a:hover {
  background: var(--color-light-2);
  color: var(--color-accent-hover);
}

/* Панорама «Объекты» — широкая двухколоночная панель */
.menu__dropdown--wide {
  left: 50%;
  min-width: 600px;
  transform: translateX(-50%) translateY(6px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}

.menu__item:hover > .menu__dropdown--wide,
.menu__item:focus-within > .menu__dropdown--wide,
.menu__item.is-open > .menu__dropdown--wide {
  transform: translateX(-50%) translateY(0);
}

/* -------------------------------------------------------------------------
   Мессенджер — плавающая кнопка связи (мигрировано из site 3, адаптировано)
   ------------------------------------------------------------------------- */
.messenger {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: calc(var(--z-header) + 1);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

.messenger__list {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.messenger__list.is-open { display: flex; }

.messenger__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-full);
  background: var(--color-light);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.messenger__item:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

.messenger__toggle {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.messenger__toggle:hover {
  background: var(--color-accent-hover);
  transform: scale(1.05);
}

/* -------------------------------------------------------------------------
    Hero (главная и внутренние страницы)
    ------------------------------------------------------------------------- */
.hero {
  background: var(--color-dark);
  color: var(--color-text-inverse);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--gap-lg);
  align-items: center;
}

@media (max-width: 991px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--gap-md);
  }
}

.hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: var(--gap-md);
}

@media (max-width: 575px) {
  .hero__actions .btn {
    width: 100%;
  }
  .hero__grid {
    gap: var(--gap-sm);
  }
}

/* -------------------------------------------------------------------------
    Цифры компании (statнет собственного класса в style-guide)
    ------------------------------------------------------------------------- */
.stat {
  text-align: center;
}

.stat__value {
  display: block;
  font-size: clamp(2.125rem, 1.6rem + 1.75vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-accent-dark);
}

.stat__label {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.section--dark .stat__label {
  color: var(--color-text-inverse-muted);
}

.section--dark .stat__value {
  color: var(--color-accent);
}

@media (max-width: 575px) {
  .stat__value {
    font-size: 2rem;
  }
}

/* -------------------------------------------------------------------------
   Степпер «Как мы реализуем проект»
   ------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap-lg);
  position: relative;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.step__number {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.step__title {
  font-weight: 600;
}

.step__text {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

@media (max-width: 767px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   Клиенты/партнёры — ряд логотипов
   ------------------------------------------------------------------------- */
.clients__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap-md);
  align-items: center;
}

@media (max-width: 991px) {
  .clients__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .clients__grid .client {
    min-height: 76px;
    padding: 0.75rem 0.5rem;
    font-size: var(--fs-small);
  }
}

@media (max-width: 575px) {
  .clients__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.clients__grid .client {
  min-width: 0;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.clients__grid .client:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}

/* -------------------------------------------------------------------------
   404
   ------------------------------------------------------------------------- */
.error-page {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.error-page__code {
  font-size: var(--fs-display);
  font-weight: 700;
  color: var(--color-accent-dark);
}

/* -------------------------------------------------------------------------
   Лента ссылок типов объектов (адаптивная версия блока «Строим из МК»,
   мигрировано из site 3, адаптировано под переменные design-системы)
   ------------------------------------------------------------------------- */
.linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.linkrow a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-light);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.linkrow a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
}

/* Блок «Строим из МК»: десктоп — карточки, адаптив (≤991px) — лента ссылок.
   Специфичность (две селектора) — чтобы перебить .grid из style-guide.css,
   который подключается после components.css. */
@media (max-width: 991px) {
  .grid.objects-grid {
    display: none;
  }
}

@media (min-width: 992px) {
  .linkrow.objects-links {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Плитки преимуществ (мигрировано из site 3, адаптировано под переменные
   design-системы). Адаптив — через штатную сетку .grid--3 (991→2, 575→1).
   ------------------------------------------------------------------------- */
.tile {
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-light);
  height: 100%;
}

.tile--accent {
  border-left: 3px solid var(--color-accent);
}

.tile__title {
  font-size: var(--fs-h4);
  font-weight: 700;
}

.tile__text {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Карточка с иконкой (перенесена из site 2, переменные заменены на
   design-систему СЭМ). Адаптив — через штатную сетку .grid--3 (991→2, 575→1).
   ------------------------------------------------------------------------- */
.icon-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: 1.5rem;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
    transform var(--transition-base);
}

.icon-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.icon-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  color: var(--color-accent-dark);
}

.icon-card__icon svg {
  width: 32px;
  height: 32px;
}

.icon-card__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0;
}

.icon-card__text {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.icon-card__text a {
  color: var(--color-accent-dark);
}

.icon-card__text a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Шаги «Как мы реализуем проект» (мигрировано из site 2, адаптировано).
   Стили ограничены модификатором .steps--process — базовые .steps/.step
   на страницах услуг и производства не затрагиваются. Адаптив — через
   auto-fit, как в site 2 (колонки стягиваются сами, без @media).
   ------------------------------------------------------------------------- */
.section-title--center {
  margin-inline: auto;
  text-align: center;
}

.section-title__subtitle {
  margin-top: 0.75rem;
  color: var(--color-text-muted);
  font-size: var(--fs-body-lg);
}

.steps--process {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  counter-reset: step;
}

.steps--process .step {
  padding: 1.5rem;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  counter-increment: step;
}

.steps--process .step::before {
  content: counter(step, decimal-leading-zero);
  display: inline-block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.steps--process .step__title {
  font-size: var(--fs-h4);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Шаги «Этапы изготовления» (мигрировано из site 3: обводка карточек).
   Модификатор .steps--cards — карточки с обводкой и акцентным номером,
   как в блоке производства site 3. Базовые .steps/.step не затрагиваются.
   ------------------------------------------------------------------------- */
.steps--cards {
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--gap-md);
  row-gap: var(--gap-sm);
}

.steps--cards .step {
  padding: 1.25rem;
  gap: 0.35rem;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.steps--cards .step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: var(--fs-body);
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  color: var(--color-accent-dark);
}

.steps--cards .step__title {
  line-height: 1.2;
}

.steps--cards .step__text {
  line-height: 1.4;
}

@media (max-width: 991px) {
  .steps--cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .steps--cards {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   Чек-лист с галочками (мигрировано из site 3, адаптировано под переменные
   design-системы). Используется в тёмной секции «Собственный завод».
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   FAQ на главной: вопросы белыми карточками с обводкой и скруглением.
   Стили ограничены модификатором .accordion--cards — аккордеоны на
   страницах услуг сохраняют стандартный вид.
   ------------------------------------------------------------------------- */
.accordion--cards {
  display: grid;
  gap: var(--gap-sm);
}

.accordion--cards .accordion__item {
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0 1.25rem;
  transition: box-shadow var(--transition-base), border-color var(--transition-fast);
}

.accordion--cards .accordion__item:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-accent);
}

.accordion--cards .accordion__trigger {
  padding: 1.25rem 0;
}

.accordion--cards .accordion__panel-inner {
  padding-bottom: 1.25rem;
}

/* -------------------------------------------------------------------------
   Cookie-баннер — согласие на обработку файлов cookie (152-ФЗ).
   Скрыт по умолчанию, cookies.js добавляет .is-open при отсутствии решения.
   ------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-toast);
  background: var(--color-dark);
  color: var(--color-text-inverse);
  border-top: 3px solid var(--color-accent);
  padding: var(--gap-md) 0;
  padding-bottom: calc(var(--gap-md) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 32px rgba(20, 23, 26, 0.18);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
}

.cookie-banner.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-lg);
  flex-wrap: wrap;
}

.cookie-banner__content {
  flex: 1 1 420px;
}

.cookie-banner__title {
  font-weight: 700;
  font-size: var(--fs-h4);
  margin-bottom: 0.35rem;
  color: var(--color-text-inverse);
}

.cookie-banner__text {
  margin: 0;
  color: var(--color-text-inverse-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.cookie-banner__text a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__text a:hover {
  color: var(--color-accent-hover);
}

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .cookie-banner {
    padding: var(--gap-sm) 0;
    padding-bottom: calc(var(--gap-sm) + env(safe-area-inset-bottom, 0px));
  }
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .cookie-banner__content {
    flex: none;
  }
  .cookie-banner__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
  }
  .cookie-banner__actions .btn {
    width: 100%;
    padding: 0.625rem 0.75rem;
  }
}

/* Кнопка «Настройка файлов cookie» в подвале — в виде обычной ссылки */
.site-footer__cookie-btn {
  color: var(--color-text-inverse-muted);
  font-size: inherit;
  padding: 0;
  text-decoration: none;
}

.site-footer__cookie-btn:hover {
  color: var(--color-text-inverse);
}