/* Start:/upload/constructor-blocks/spec-projects/spec-projects.css?179128575720156*/
/* ══════════════════════════════════════════════════════════════════
   Блок «Спецпроекты» — стили.
   Файл не правится при добавлении карточек: карточки живут
   в spec-projects-data.js.

   Кнопка (.button) и плашка категории (.tag-list__item) здесь
   сознательно НЕ переопределяются по размерам и цветам — они берутся
   из common.css сайта, чтобы оставаться синхронными с дизайн-системой.
   ══════════════════════════════════════════════════════════════════ */

/* Всё вложено в .spec-projects-block, чтобы стили блока не влияли на страницу. */

.spec-projects-block,
.spec-projects-block * { box-sizing: border-box !important; }

/* Контейнер: повторяет .container сайта (1280 / 28px / 16px на телефоне).
   Если блок вставлен туда, где контейнер уже есть («Блок с текстом»),
   выставьте --spec-wrap-max: none и --spec-wrap-pad: 0. */
.spec-projects-block__wrap {
  max-width: var(--spec-wrap-max, 1280px) !important;
  margin: 0 auto !important;
  padding: 0 var(--spec-wrap-pad, 28px) !important;
}

/* ---------- Заголовок страницы и вступительный текст ----------
   Размеры перенесены из согласованного макета tz-personalization. */
.spec-projects-block__page-title {
  font-family: inherit !important; font-size: 34px !important; line-height: 1.15 !important;
  font-weight: 800 !important; letter-spacing: .01em !important; text-transform: uppercase !important;
  margin: 0 0 12px !important; padding: 0 !important; color: #0A0A0A !important;
  background: none !important; background-clip: unset !important; -webkit-background-clip: unset !important;
  -webkit-text-fill-color: currentColor !important; text-fill-color: currentColor !important;
  text-shadow: none !important; text-decoration: none !important;
}
.spec-projects-block__page-intro {
  font-family: inherit !important; font-size: 17px !important; line-height: 1.5 !important;
  font-weight: 400 !important; color: #707075 !important;
  max-width: none !important; margin: 0 0 28px !important; padding: 0 !important;
  background: none !important; -webkit-text-fill-color: currentColor !important;
  text-fill-color: currentColor !important; text-transform: none !important;
  letter-spacing: normal !important;
}

/* ---------- Строка фильтров ---------- */
/* flex-wrap: nowrap обязателен: с wrap кнопка «Сбросить фильтры» при большом
   числе чипсов уезжала на отдельную строку под ними. Переносятся ТОЛЬКО чипсы
   внутри своего блока, а кнопка остаётся справа от них на первой строке. */
.spec-projects-block__filters {
  display: flex !important; align-items: flex-start !important;
  gap: 10px !important; flex-wrap: nowrap !important; margin: 0 0 32px !important;
}
.spec-projects-block__chips {
  display: flex !important; gap: 10px !important; flex-wrap: wrap !important;
  flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
}
/* Цвета — токены сайта: @dark-blue #263F7A, @button-background #FBFBFB,
   @hover-buttons-light #E9F0FF, @pressed-buttons #014CA1, @brand-blue #0158BB */
.spec-projects-block__chip {
  font-family: inherit !important; font-size: 14px !important; line-height: 1.2 !important;
  font-weight: 400 !important; padding: 10px 18px !important; border-radius: 999px !important;
  border: 2px solid #263F7A !important; color: #263F7A !important; background: #FBFBFB !important;
  cursor: pointer !important; white-space: nowrap !important; flex-shrink: 0 !important;
  -webkit-text-fill-color: currentColor !important; text-transform: none !important;
  letter-spacing: normal !important; text-shadow: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}
.spec-projects-block__chip:hover { background: #E9F0FF !important; }
.spec-projects-block__chip[aria-pressed="true"] {
  background: #014CA1 !important; border-color: #014CA1 !important;
  color: #fff !important; font-weight: 700 !important;
}
.spec-projects-block__chip--mine[aria-pressed="true"] {
  background: #0158BB !important; border-color: #0158BB !important;
}
/* Кнопка сброса: видна всегда, серая (@grey-disabled), в две строки */
.spec-projects-block__reset {
  font-family: inherit !important; font-size: 13.5px !important; font-weight: 700 !important;
  line-height: 1.25 !important; padding: 8px 14px !important; border-radius: 999px !important;
  border: 1px solid transparent !important; background: none !important; color: #B2B2B2 !important;
  display: inline-flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  text-align: center !important; cursor: default !important; flex-shrink: 0 !important;
  -webkit-text-fill-color: currentColor !important;
}
.spec-projects-block__reset.is-active { color: #0158BB !important; cursor: pointer !important; }
.spec-projects-block__reset.is-active:hover { text-decoration: underline !important; }

/* ---------- Секции ---------- */
.spec-projects-block__section { margin: 0 0 48px !important; }
.spec-projects-block__head {
  display: flex !important; align-items: baseline !important;
  gap: 12px !important; margin: 0 0 18px !important;
}
.spec-projects-block__title {              /* = .typo-h5() сайта: 20px/28px/bold */
  font-family: inherit !important; font-size: 20px !important; line-height: 28px !important;
  font-weight: 800 !important; margin: 0 !important; padding: 0 !important; color: #0A0A0A !important;
  background: none !important; background-clip: unset !important; -webkit-background-clip: unset !important;
  -webkit-text-fill-color: currentColor !important; text-fill-color: currentColor !important;
  text-transform: none !important; letter-spacing: normal !important;
  text-shadow: none !important; text-decoration: none !important;
}
.spec-projects-block__section--mine .spec-projects-block__title { color: #0158BB !important; }
.spec-projects-block__note {
  font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important;
  color: #707075 !important; margin: 0 !important;
  -webkit-text-fill-color: currentColor !important; text-transform: none !important;
}
.spec-projects-block__divider {
  border: none !important; border-top: 1px solid #E0E0E5 !important; margin: 0 0 32px !important;
}

/* ---------- Сетка: 3 / 2 / 1 ---------- */
.spec-projects-block__grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   Карточка — по макету Figma «Маркетинг», node 92:370 (v3.2).
   Белая карточка + фото сверху отдельным скруглённым блоком (не на
   всю площадь карточки, как было раньше) + текст на белом фоне ниже.

   Пропорция фото — 365∶195 (≈1.872∶1), ОДНА И ТА ЖЕ на всех разрешениях:
   так любая загруженная картинка ложится предсказуемо и на десктопе, и
   на телефоне — в отличие от прежней схемы, где у карточки на каждом
   брейкпоинте было своё соотношение сторон.
   ══════════════════════════════════════════════════════════════════ */
.spec-projects-block__card {
  position: relative !important; display: flex !important; flex-direction: column !important;
  width: 100% !important; min-width: 0 !important;
  border-radius: 24px !important; overflow: hidden !important; isolation: isolate !important;
  margin: 0 !important; text-decoration: none !important;
  background-color: #fff !important;
  border: 1px solid #C9C9C9 !important;
  box-shadow: none !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
.spec-projects-block__card:hover,
.spec-projects-block__card:focus-within {
  box-shadow: 0 16px 32px -10px rgba(5, 18, 53, .18) !important; transform: translateY(-3px) !important;
}
.spec-projects-block__card:active { transform: translateY(-1px) scale(.997) !important; }

/* Фото — вставка внутри карточки с отступом 16px, а не во всю карточку */
.spec-projects-block__cover {
  position: relative !important; z-index: 0 !important;
  margin: 16px 16px 0 !important; border-radius: 16px !important; overflow: hidden !important;
  aspect-ratio: 365 / 195;
  background-color: #EEF1F7 !important;
}
.spec-projects-block__img {
  position: absolute !important; inset: 0 !important; z-index: 0 !important;
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  margin: 0 !important; max-width: none !important;
}
.spec-projects-block__ph {              /* пастельная заглушка, цвет ставит рендер */
  position: absolute !important; inset: 0 !important; z-index: 0 !important;
  background: var(--spec-ph, none) !important;
}
/* Ссылка-хит на всю карточку (в т.ч. на белую текстовую часть под фото) */
.spec-projects-block__hit { position: absolute !important; inset: 0 !important; z-index: 1 !important; }

/* Бейджи — поверх фото, с отступом 16px от его края (не от края карточки) */
.spec-projects-block__top {
  position: absolute !important; z-index: 2 !important; inset: 16px 16px auto 16px !important;
  display: flex !important; align-items: flex-start !important; justify-content: space-between !important;
  gap: 8px !important;
}
/* Плашка категории: типографика и радиус — от .tag-list__item сайта
   (14px/20px/400, radius 4px) — совпадает с макетом «как есть».
   Переопределены только фон и цвет текста: светлая плашка сайта
   не читается на фото. */
.spec-projects-block__tag.tag-list__item {
  background-color: rgba(5, 8, 20, .55) !important; color: #fff !important;
  margin: 0 !important; cursor: inherit !important;
  -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important;
  -webkit-text-fill-color: #fff !important; text-transform: none !important;
}
.spec-projects-block__tag.tag-list__item:hover { background-color: rgba(5, 8, 20, .55) !important; }
.spec-projects-block__new {
  font-family: inherit !important; font-size: 11px !important; line-height: 1.4 !important;
  font-weight: 800 !important; letter-spacing: .03em !important; text-transform: uppercase !important;
  padding: 5px 10px !important; border-radius: 4px !important;
  background: #0158BB !important; color: #fff !important; flex-shrink: 0 !important;
  -webkit-text-fill-color: #fff !important;
}

/* Текст — на белом фоне под фото, обычный поток (не оверлей на фото) */
.spec-projects-block__panel {
  position: relative !important; z-index: 1 !important; flex: 1 !important;
  padding: 16px !important; display: flex !important; flex-direction: column !important;
  justify-content: space-between !important; gap: 16px !important;
  background: #fff !important;
}
.spec-projects-block__body { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.spec-projects-block__card-title {
  font-family: inherit !important; font-size: 20px !important; line-height: 1.2 !important;
  font-weight: 700 !important; margin: 0 !important; padding: 0 !important; color: #383636 !important;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden !important;
  background: none !important; background-clip: unset !important; -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #383636 !important; text-fill-color: #383636 !important;
  text-transform: none !important; letter-spacing: normal !important;
  text-shadow: none !important; text-decoration: none !important;
}
.spec-projects-block__text {
  font-family: inherit !important; font-size: 14px !important; line-height: 1.5 !important;
  font-weight: 400 !important; margin: 0 !important; padding: 0 !important;
  color: rgba(56, 54, 54, .82) !important;
  display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden !important;
  background: none !important; -webkit-text-fill-color: rgba(56, 54, 54, .82) !important;
  text-fill-color: rgba(56, 54, 54, .82) !important; text-transform: none !important;
}

/* Кнопка карточки — НЕ компонент сайта .button (у него 26px/высота 52px —
   не вписывается в компактную карточку по этому макету). Точный размер и
   цвет по Figma-узлам рядом с 92:444: высота 48px, radius 12px, текст
   16px/400. Цвета hover/active — из палитры сайта (@hover-buttons/
   @pressed-buttons), в макете состояния не заданы. */
.spec-projects-block__cta {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; height: 48px !important;
  padding: 12px 24px !important; border-radius: 12px !important; border: none !important;
  background: #0158BB !important;
  font-family: inherit !important; font-size: 16px !important; font-weight: 400 !important;
  line-height: 1.2 !important; color: #fff !important; text-align: center !important;
  text-decoration: none !important; white-space: nowrap !important;
  -webkit-text-fill-color: #fff !important;
  transition: background .15s ease !important;
}
.spec-projects-block__cta:hover  { background: #478DDD !important; }
.spec-projects-block__cta:active { background: #014CA1 !important; }

/* ---------- Прелоадер карточек ----------
   Показывается при переключении фильтра, пока не загрузятся картинки.
   Форма повторяет настоящую карточку (фото сверху + белые полосы текста),
   чтобы сетка не «прыгала» при подмене. */
.spec-projects-block__skeleton {
  position: relative !important; display: flex !important; flex-direction: column !important;
  width: 100% !important; min-width: 0 !important;
  border-radius: 24px !important; overflow: hidden !important;
  background: #fff !important; border: 1px solid #E0E0E5 !important;
}
.spec-projects-block__skeleton-cover {
  position: relative !important; margin: 16px 16px 0 !important;
  border-radius: 16px !important; overflow: hidden !important;
  aspect-ratio: 365 / 195; background: #ECECF2 !important;
}
.spec-projects-block__skeleton-shine {
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(100deg, #ECECF2 30%, #F6F6FA 50%, #ECECF2 70%) !important;
  background-size: 200% 100% !important;
  animation: spec-projects-shimmer 1.3s linear infinite !important;
}
.spec-projects-block__skeleton-body {
  padding: 16px !important; display: flex !important; flex-direction: column !important;
  gap: 8px !important; flex: 1 !important;
}
.spec-projects-block__skeleton-line {
  height: 14px !important; border-radius: 4px !important;
  background: linear-gradient(100deg, #ECECF2 30%, #F6F6FA 50%, #ECECF2 70%) !important;
  background-size: 200% 100% !important; animation: spec-projects-shimmer 1.3s linear infinite !important;
}
.spec-projects-block__skeleton-line--title { width: 70% !important; height: 20px !important; }
.spec-projects-block__skeleton-line--text2 { width: 85% !important; }
.spec-projects-block__skeleton-btn {
  margin-top: auto !important; height: 48px !important; border-radius: 12px !important;
  background: linear-gradient(100deg, #ECECF2 30%, #F6F6FA 50%, #ECECF2 70%) !important;
  background-size: 200% 100% !important; animation: spec-projects-shimmer 1.3s linear infinite !important;
}
@keyframes spec-projects-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Уважаем системную настройку «уменьшить движение»: вместо бегущего
   блеска — спокойная пульсация прозрачности */
@media (prefers-reduced-motion: reduce) {
  .spec-projects-block__skeleton-shine,
  .spec-projects-block__skeleton-line,
  .spec-projects-block__skeleton-btn {
    animation: spec-projects-fade 1.6s ease-in-out infinite !important;
    background: #ECECF2 !important;
  }
  @keyframes spec-projects-fade {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
  }
}

/* ---------- Пустое состояние ---------- */
.spec-projects-block__empty {
  grid-column: 1 / -1 !important; text-align: center !important; padding: 48px 24px !important;
  color: #707075 !important; background: #fff !important;
  border: 1px dashed #E0E0E5 !important; border-radius: 12px !important;
}
.spec-projects-block__empty p {
  margin: 0 0 14px !important; font-size: 15px !important; color: #707075 !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ---------- Планшет: 2 колонки, фильтры прокруткой ---------- */
@media (max-width: 1023px) {
  .spec-projects-block__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .spec-projects-block__filters { flex-wrap: nowrap !important; }
  .spec-projects-block__chips {
    flex-wrap: nowrap !important; overflow-x: auto !important; scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
    /* плавное угасание у краёв, чтобы список не обрывался резко */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent) !important;
            mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent) !important;
  }
  .spec-projects-block__chips::-webkit-scrollbar { display: none !important; }
}

/* ---------- Мобильный: 1 колонка ---------- */
@media (max-width: 767px) {
  .spec-projects-block__wrap { padding: 0 var(--spec-wrap-pad-mobile, 16px) !important; }
  .spec-projects-block__grid { grid-template-columns: minmax(0, 1fr) !important; }
  .spec-projects-block__head { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  .spec-projects-block__title { white-space: nowrap !important; }
  .spec-projects-block__page-title { font-size: 24px !important; margin-bottom: 8px !important; }
  .spec-projects-block__page-intro { font-size: 15px !important; margin-bottom: 20px !important; }
}

/* End */
/* /upload/constructor-blocks/spec-projects/spec-projects.css?179128575720156 */