/* ==========================================================================
   Витрина UI-Kit: служебная обвязка страницы-превью + стили компонентов.
   Служебные классы имеют префикс .kit__ и на боевой сайт не переносятся.
   ========================================================================== */

/* --- Обвязка страницы-превью ---------------------------------------------*/
.kit { padding-block: 40px 80px; }

.kit__header { margin-bottom: 40px; }
.kit__page-title { margin-bottom: 8px; }
.kit__lead { color: var(--text-muted); }

.kit__section { padding-block: 40px; border-top: 1px solid var(--color-grey); }
.kit__section-title { margin-bottom: 8px; }
.kit__section-note { margin-bottom: 24px; color: var(--text-muted); }
.kit__subtitle {
  margin: 28px 0 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
}

.kit__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.kit__dark {
  padding: 24px;
  background-color: var(--color-black);
  border-radius: var(--radius-md);
}

/* --- Цвета ----------------------------------------------------------------*/
.kit__swatches {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.kit__swatch {
  overflow: hidden;
  border: 1px solid var(--color-grey);
  border-radius: var(--radius-md);
}

.kit__swatch-color {
  height: 88px;
  border-bottom: 1px solid var(--color-grey);
}

.kit__swatch-meta { padding: 10px 12px; }
.kit__swatch-name { font-weight: 700; font-size: var(--fs-xxs); }
.kit__swatch-hex {
  font-size: var(--fs-xxs);
  color: var(--text-muted);
  text-transform: uppercase;
}

/* --- Типографика ----------------------------------------------------------*/
.kit__type-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-block: 10px;
  border-bottom: 1px solid var(--color-light-grey);
}

.kit__type-label {
  flex: 0 0 88px;
  font-size: var(--fs-xxs);
  color: var(--text-muted);
}

/* --- Иконки ---------------------------------------------------------------*/
.kit__icons {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.kit__icon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  text-align: center;
  border: 1px solid var(--color-grey);
  border-radius: var(--radius-md);
}

.kit__icon-cell svg { width: 28px; height: 28px; color: var(--color-black); }
.kit__icon-name { font-size: var(--fs-3xs); color: var(--text-muted); word-break: break-word; }

.kit__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.kit__logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 120px;
  padding: 24px;
  border: 1px solid var(--color-grey);
  border-radius: var(--radius-md);
}

.kit__logo-box--dark { background-color: var(--color-black); border-color: var(--color-black); }
.kit__logo-box img { height: 48px; width: auto; }
.kit__logo-box--symbol img { height: 72px; }

/* ==========================================================================
   КОМПОНЕНТЫ (переносятся на боевой сайт)
   ========================================================================== */

/* --- Кнопки ---------------------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 24px;
  font-size: var(--fs-s);
  line-height: 1.1;
  color: var(--color-black);
  white-space: nowrap;
  border-radius: var(--radius-control);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn__icon { flex: 0 0 auto; width: 24px; height: 24px; }

@media (min-width: 1920px) {
  .btn { min-height: 56px; }
  .btn__icon { width: 30px; height: 30px; }
}

/* Primary: чёрная → оранжевая (hover) → тёмно-оранжевая (clicked) */
.btn--primary { background-color: var(--color-black); color: var(--color-white); }
.btn--primary:hover,
.btn--primary.is-hover { background-color: var(--color-orange); }
.btn--primary:active,
.btn--primary.is-clicked { background-color: var(--accent-hover); }

/* Secondary: оранжевая, жирный текст */
.btn--secondary {
  background-color: var(--color-orange);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--fs-xs);
}
.btn--secondary:hover,
.btn--secondary.is-hover,
.btn--secondary:active,
.btn--secondary.is-clicked { background-color: var(--accent-hover); }

/* Stroke: текст-ссылка с подчёркиванием */
.btn--stroke {
  min-height: 0;
  padding: 0 0 6px;
  color: var(--color-orange);
  background: none;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
}
.btn--stroke:active,
.btn--stroke.is-clicked { color: var(--accent-hover); }

/* Navigate: пагинация со стрелками */
.btn--navigate {
  min-height: 0;
  padding: 0 0 6px;
  color: var(--color-black);
  background: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-black);
}
.btn--navigate:disabled,
.btn--navigate.is-disabled {
  color: rgba(87, 95, 112, 0.5);
  border-color: rgba(87, 95, 112, 0.5);
  cursor: not-allowed;
}
.btn__icon--back { transform: rotate(180deg); }

/* Download: прозрачная, иконки по бокам */
.btn--download {
  min-height: 0;
  padding: 4px 0;
  gap: 10px;
  color: var(--color-black);
  background: none;
  font-size: var(--fs-xs);
}
.btn--download .btn__icon { width: 22px; height: 22px; }

/* Link: простая текстовая ссылка */
.btn--link {
  min-height: 0;
  padding: 2px;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.btn--link:hover,
.btn--link.is-hover,
.btn--link:active,
.btn--link.is-clicked { color: var(--color-black); }

/* --- Icon-кнопки ----------------------------------------------------------*/
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-black);
  border-radius: var(--radius-control);
  transition: background-color var(--transition), color var(--transition);
}

.icon-btn__icon { width: 22px; height: 22px; }

@media (min-width: 1920px) {
  .icon-btn { width: 56px; height: 56px; }
}

.icon-btn--arrow { background-color: var(--color-white); }
.icon-btn--arrow:hover,
.icon-btn--arrow.is-hover { background-color: var(--color-light-grey); }
.icon-btn--arrow:active,
.icon-btn--arrow.is-clicked { background-color: var(--color-grey); }

.icon-btn--scale { background-color: rgba(15, 15, 15, 0.3); color: var(--color-white); }
.icon-btn--scale:hover,
.icon-btn--scale.is-hover,
.icon-btn--scale:active,
.icon-btn--scale.is-clicked { background-color: var(--color-black); }

.icon-btn--xs {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background-color: var(--color-grey);
}
.icon-btn--xs .icon-btn__icon { width: 14px; height: 14px; }
.icon-btn--xs:hover,
.icon-btn--xs.is-hover,
.icon-btn--xs:active,
.icon-btn--xs.is-clicked { background-color: rgba(87, 95, 112, 0.3); }

/* Демо-панель (чтобы видеть белые контролы на светлом фоне) */
.kit__panel {
  max-width: 620px;
  padding: 24px;
  background-color: var(--color-light-grey);
  border-radius: var(--radius-md);
}

/* --- Поля формы (инпуты) --------------------------------------------------*/
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field + .field { margin-top: 20px; }

.field__label {
  font-size: var(--fs-xs);
  color: var(--color-black);
}

.field__req { color: var(--color-red); }

.field__control {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  background-color: var(--color-white);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  transition: border-color var(--transition);
}

.field__control:focus-within,
.field--focus .field__control { border-color: var(--color-black); }

.field__input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-s);
  color: var(--color-black);
  background: none;
  border: none;
}

.field__input:focus { outline: none; }
.field__input::placeholder { color: rgba(87, 95, 112, 0.5); }

.field__clear { flex: 0 0 auto; }

.field--error .field__control { border-color: var(--color-red); }
.field__error { font-size: var(--fs-xxs); color: var(--color-red); }

/* --- Загрузка файлов ------------------------------------------------------*/
.upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upload__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  background-color: var(--color-white);
  border-radius: var(--radius-control);
}

.file-row--loading { opacity: 0.5; }

.file-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.file-row__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--color-text);
}

.file-row__name {
  overflow: hidden;
  font-size: var(--fs-s);
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload__status {
  font-size: var(--fs-xxs);
  color: var(--text-muted);
}

/* --- Табы -----------------------------------------------------------------*/
.tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  font-size: var(--fs-xs);
  color: var(--color-black);
  background-color: var(--color-light-grey);
  border-radius: var(--radius-control);
  transition: background-color var(--transition), color var(--transition);
}

@media (min-width: 1920px) { .tab { min-height: 56px; } }

.tab:hover { background-color: var(--color-grey); }
.tab.is-active { color: var(--color-white); background-color: var(--color-orange); }

.tabs__panels { margin-top: 24px; }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }

/* --- Аккордеон (Вопрос-ответ) ---------------------------------------------*/
.accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
}

.accordion__item {
  overflow: hidden;
  background-color: var(--color-light-grey);
  border-radius: var(--radius-md);
}

.accordion__header {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 20px;
  font-size: var(--fs-m);
  font-weight: 700;
  color: var(--color-dark-blue);
  text-align: left;
  background: none;
}

.accordion__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--color-dark-blue);
  transition: transform var(--transition);
}

.accordion__item.is-open .accordion__icon { transform: rotate(45deg); }

.accordion__body {
  display: none;
  padding: 0 24px 24px 58px;
  font-size: var(--fs-s);
  color: var(--text-muted);
}

.accordion__item.is-open .accordion__body { display: block; }

@media (min-width: 1920px) {
  .accordion__header { gap: 24px; padding: 20px 32px; }
  .accordion__icon { width: 24px; height: 24px; }
  .accordion__body { padding: 0 32px 32px 80px; }
}

/* ==========================================================================
   Карточки
   ========================================================================== */

.cards-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Переиспользуемые: чип и иконка-карточка */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: var(--fs-xxs);
  color: var(--color-dark-blue);
  background-color: rgba(254, 254, 254, 0.8);
  border-radius: var(--radius-control);
}

.icon-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-white);
  background-color: var(--color-black);
  border-radius: 10px;
}

.icon-card__icon { width: 22px; height: 22px; }

/* Карточка «цифры» */
.card-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  aspect-ratio: 1;
  padding: 24px;
  background-color: var(--color-light-grey);
  border-radius: 14px;
}

.card-stat__content { display: flex; flex-direction: column; gap: 20px; }
.card-stat__num { font-size: var(--fs-h1); font-weight: 700; line-height: 1; color: var(--color-dark-blue); }
.card-stat__label { font-size: var(--fs-l); font-weight: 700; color: var(--color-dark-blue); }
.card-stat__desc { font-size: var(--fs-s); color: var(--text-muted); }

/* Карточка категории */
.card-category {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-grey);
  border-radius: 10px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.card-category:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(15, 15, 15, 0.12); }
.card-category__img { aspect-ratio: 1; }
.card-category__img img { width: 100%; height: 100%; object-fit: contain; }
.card-category__body { padding: 10px 24px 24px; }
.card-category__title { font-size: var(--fs-s); font-weight: 700; color: var(--color-dark-blue); }

/* Карточка объекта */
.card-object {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-light-grey);
  border-radius: 10px;
}
.card-object__media { padding: 10px; }
.card-object__img {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: #d9d9d9;
  border-radius: 10px;
}
.card-object__img img { width: 100%; height: 100%; object-fit: cover; }
.card-object__body { display: flex; flex-direction: column; gap: 16px; padding: 10px 24px 24px; }
.card-object__title { font-size: var(--fs-l); font-weight: 700; color: var(--color-dark-blue); }
.card-object__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Текстовая карточка на тёмном (задача/решение) */
.card-text-dark {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 24px;
  color: var(--color-white);
  background-color: rgba(0, 0, 0, 0.55);
  border-radius: 10px;
}
.card-text-dark__title { font-size: var(--fs-l); font-weight: 700; }
.card-text-dark__text { font-size: var(--fs-s); }

/* Текстовая карточка на светлом */
.card-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background-color: var(--color-light-grey);
  border-radius: 10px;
}
.card-text__title { font-size: var(--fs-l); font-weight: 700; color: var(--color-dark-blue); }
.card-text__text { font-size: var(--fs-s); color: var(--text-muted); }

/* Благодарственное письмо (скан + кнопка «развернуть») */
.card-letter {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  aspect-ratio: 440 / 557;
  padding: 20px 24px 24px;
  overflow: hidden;
  border-radius: 10px;
}
.card-letter__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-letter .icon-btn { position: relative; }

/* Логотип компании (моно-плейсхолдер) */
.company-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 108px;
  padding: 20px 10px;
  background-color: var(--color-light-grey);
  border-radius: 10px;
}
.company-logo__ph {
  width: 160px;
  height: 54px;
  background-color: #c4c4c4;
  border-radius: 4px;
}

/* ==========================================================================
   Прочее
   ========================================================================== */

/* Всплывашка (стеклянный тултип поверх изображения/карты) */
.tooltip {
  position: relative;
  display: inline-block;
  margin-top: 8px;
  padding: 14px 24px 16px;
  font-size: var(--fs-xs);
  color: var(--color-white);
  background-color: rgba(254, 254, 254, 0.3);
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
.tooltip::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 8px solid rgba(254, 254, 254, 0.3);
}

/* Листинг (пагинация Назад / Вперёд) */
.listing {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}