/* ============================================================================
   GOSOFT — ПРОМО-БАННЕР (css/promo-banner.css)

   Вынесено из home.css 2026-08-27: та же разметка теперь используется
   и на главной (слайдер), и на страницах категорий каталога.
   Компонент: page-parts/promo-banner.php, данные: includes/promo-banners.php

   Скоуп .page сохранён — им обёрнуты и главная, и архив товаров.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   ЛОКАЛЬНЫЕ ТОКЕНЫ БАННЕРА
   Перенесены из home.css: этими переменными пользуются стили ниже, а баннер
   теперь рендерится и в каталоге, где home.css не подключается.
   Объявление продублировано в home.css НЕ нужно — файл грузится раньше.
   ------------------------------------------------------------------------ */
.page {
  /* Поверхности */
  --h-surface: #ffffff;
  --h-surface-sunken: #f6f9fd;
  --h-surface-raised: #ffffff;
  --h-surface-muted: #eef4fb;
  --h-surface-invert: #1c2024;

  /* Чернила / текст */
  --h-ink: #1b1f24;
  --h-ink-secondary: #4d565f;
  --h-ink-muted: #79838d;
  --h-ink-invert: #f7f9fb;
  --h-ink-invert-muted: #b6c0cb;

  /* Штрихи */
  --h-stroke: #e6ecf3;
  --h-stroke-strong: #d3dce6;
  --h-stroke-invert: rgba(255, 255, 255, 0.14);

  /* Акценты (бренд) */
  --h-accent: var(--primary-blue, #0083ff);
  --h-accent-ink: #0073ef;
  --h-accent-wash: rgba(0, 131, 255, 0.08);
  --h-buy: var(--primary-orange, #ff6600);
  --h-buy-wash: rgba(255, 102, 0, 0.09);
  --h-ok: var(--secondary-green, #0baf03);
  --h-ok-text: #077a02; /* затемнённый зелёный для текста: 5.54:1 на белом */
  --h-ok-wash: rgba(11, 175, 3, 0.1);
  --h-star: var(--secondary-yellow, #ffdd2d);

  /* Тени: контактная + рассеянная, тон сине-графитовый (не чёрный) */
  --h-shadow-xs: 0 1px 2px rgba(17, 29, 46, 0.05);
  --h-shadow-sm: 0 1px 2px rgba(17, 29, 46, 0.06), 0 2px 6px rgba(17, 29, 46, 0.05);
  --h-shadow-md: 0 2px 4px rgba(17, 29, 46, 0.06), 0 8px 20px rgba(17, 29, 46, 0.07);
  --h-shadow-lg: 0 4px 8px rgba(17, 29, 46, 0.07), 0 18px 40px rgba(17, 29, 46, 0.09);
  --h-shadow-accent: 0 6px 16px rgba(0, 131, 255, 0.22);
  --h-shadow-buy: 0 6px 16px rgba(255, 102, 0, 0.24);

  /* Радиусы */
  --h-r-xs: 6px;
  --h-r-sm: 10px;
  --h-r-md: 14px;
  --h-r-lg: 20px;
  --h-r-xl: 28px;
  --h-r-pill: 999px;

  /* Шкала отступов */
  --h-s-1: 4px;
  --h-s-2: 8px;
  --h-s-3: 12px;
  --h-s-4: 16px;
  --h-s-5: 24px;
  --h-s-6: 32px;
  --h-s-7: 48px;
  --h-s-8: 64px;

  /* Ритм секций */
  --h-section-y: clamp(40px, 5vw, 68px);

  /* Моушен */
  --h-dur-fast: 140ms;
  --h-dur: 220ms;
  --h-dur-slow: 320ms;
  --h-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --h-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   3. HERO
   Высота .hero__slider (400px) НЕ трогается - работаем внутри.
   ------------------------------------------------------------------------ */
.page .hero {
  padding-top: var(--h-s-5);
  padding-bottom: var(--h-s-3);
}

.page .hero__item {
  background:
    radial-gradient(120% 140% at 100% 0%, var(--h-surface-muted) 0%, rgba(246, 249, 253, 0) 58%),
    var(--h-surface);
  border-color: var(--h-stroke);
  box-shadow: var(--h-shadow-lg);
  gap: var(--h-s-6);
}
/* Старый декор из style.css:1712 - СПЛОШНОЙ круг 340px с чёткой границей на
   opacity .1. Его дуга резала карточку доверия по диагонали и обрезалась углом
   контейнера. Превращаем в мягкое свечение без края: радиальный градиент,
   уходящий в прозрачность, и никакого видимого контура. */
.page .hero__item::before {
  top: -180px;
  right: -140px;
  width: 460px;
  height: 460px;
  background: radial-gradient(
    circle at 50% 50%,
    var(--hero-accent, var(--primary-orange)) 0%,
    rgba(255, 255, 255, 0) 68%
  );
  opacity: 0.16;
  filter: blur(2px);
}

.page .hero__eyebrow {
  margin-bottom: var(--h-s-3);
  padding: 5px 12px;
  border-radius: var(--h-r-pill);
  /* Пилюля тонируется акцентом СЛАЙДА (--hero-accent из style.css), а не
     фиксированным синим: иначе оранжевый текст слайда 1 ложился на синий
     фон с контрастом 2.66:1.
     Текст берём затемнённый (--hero-eyebrow-ink): чистый #ff6600 на светлой
     подложке даёт 2.6:1, что нечитаемо на 13px. Затемнённые тона сохраняют
     идентичность слайда и дают 4.5:1+. */
  background: #f4f7fb; /* фолбэк для браузеров без color-mix */
  background: color-mix(in srgb, var(--hero-accent, var(--primary-blue)) 10%, #fff);
  color: var(--hero-eyebrow-ink, #005bb8);
  letter-spacing: 0.06em;
}
.page .hero__item--office2021 { --hero-eyebrow-ink: #a83f00; } /* 5.59:1 */
.page .hero__item--office365  { --hero-eyebrow-ink: #005bb8; } /* 5.84:1 */
.page .hero__item--office2024 { --hero-eyebrow-ink: #272a2d; } /* 11.97:1 */

.page .hero__title {
  font-size: clamp(24px, 2.5vw, 33px);
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-wrap: balance;
}

.page .hero__info {
  margin-top: var(--h-s-4);
  gap: var(--h-s-4);
}
.page .hero__info-item {
  font-size: 15px;
  color: var(--h-ink-secondary);
}
.page .hero__info-item__icon {
  width: 20px;
  height: 20px;
}

/* CTA */
.page .hero__cta {
  margin-top: var(--h-s-5);
  height: 52px;
  padding-inline: 28px;
  font-size: 17px;
  box-shadow: var(--h-shadow-buy);
  transition: background-color var(--h-dur) var(--h-ease),
              transform var(--h-dur) var(--h-ease),
              box-shadow var(--h-dur) var(--h-ease);
}
.page .hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 102, 0, 0.3);
}
.page .hero__cta:active {
  transform: translateY(0);
}

/* Микро-строка доверия под CTA */
.page .hero__microtrust {
  margin-top: var(--h-s-3);
  display: flex;
  align-items: center;
  gap: var(--h-s-2);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--h-ink-muted);
}
.page .hero__microtrust-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: var(--h-ok);
}

/* --- Визуал доверия вместо пустой цифры --- */
.page .hero__visual {
  position: relative;
  width: auto;
  min-width: 300px;
  max-width: 340px;
  height: auto;
  align-self: center;
  flex-direction: column;
}
/* Гигантская полупрозрачная цифра года и плавающий бейдж-логотип удалены:
   цифра торчала из-за карточки нечитаемым обрывком, а бейдж накрывал строку
   "Официальная лицензия". Логотип теперь живёт ВНУТРИ карточки, в шапке —
   ничего не перекрывает и сразу называет продукт. */
.page .hero__visual-number {
  display: none;
}
.page .hero__visual-icon {
  display: none;
}

/* Шапка карточки: логотип + название продукта */
.page .hero__trust-head {
  display: flex;
  align-items: center;
  gap: var(--h-s-3);
  padding: var(--h-s-3) var(--h-s-4);
  margin: calc(var(--trust-pad) * -1) calc(var(--trust-pad) * -1) 0;
  border-bottom: 1px solid var(--h-stroke);
  background: var(--h-surface-sunken);
  border-radius: var(--h-r-lg) var(--h-r-lg) 0 0;
}
.page .hero__trust-logo {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  object-fit: contain;
}
.page .hero__trust-head-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.page .hero__trust-head-text b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--h-ink);
}
.page .hero__trust-head-text i {
  font-style: normal;
  font-size: 12px;
  line-height: 1.3;
  color: var(--h-ink-muted);
}

.page .hero__trust {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Паддинг карточки вынесен в переменную: шапка тянет из неё свой
     отрицательный margin, поэтому на любом брейкпоинте её фон совпадает
     с краями карточки (раньше margin был жёстко -16px и на мобиле
     фон шапки не доходил до правого края - была видна ступенька). */
  --trust-pad: var(--h-s-4);
  padding: var(--trust-pad);
  background: var(--h-surface-raised);
  border: 1px solid var(--h-stroke);
  border-radius: var(--h-r-lg);
  box-shadow: var(--h-shadow-md);
}

.page .hero__trust-row {
  display: flex;
  align-items: flex-start;
  gap: var(--h-s-3);
  padding: 9px 0;
}
.page .hero__trust-row ~ .hero__trust-row {
  border-top: 1px solid var(--h-stroke);
}

.page .hero__trust-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 1px;
  fill: var(--h-accent);
  color: var(--h-accent);
}
.page .hero__trust-row--lead .hero__trust-icon {
  fill: var(--h-ok);
  color: var(--h-ok);
}

.page .hero__trust-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.page .hero__trust-text b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--h-ink);
}
.page .hero__trust-text i {
  font-style: normal;
  font-size: 12px;
  line-height: 1.3;
  color: var(--h-ink-muted);
}

/* --- Пагинация: полосы-прогресс вместо точек (только CSS, Swiper не трогаем) --- */
.page .hero__pagination {
  /* Базовое правило (style.css:1519) растягивает пагинацию на всю ширину
     и центрирует её. В новом баннере полосы должны стоять под текстом
     слева, в одной вертикали с кнопкой — иначе они «висят» посреди
     пустого слайда и читаются как случайный элемент. */
  left: clamp(24px, 3.6vw, 60px);
  right: auto;
  justify-content: flex-start;
  gap: var(--h-s-2);
  bottom: 22px;
}
.page .hero__dot {
  width: 34px;
  height: 4px;
  margin: 0;
  border-radius: var(--h-r-pill);
  background: var(--h-stroke-strong);
  transform: none;
  transition: background-color var(--h-dur) var(--h-ease),
              width var(--h-dur) var(--h-ease);
}
.page .hero__dot::before {
  display: none;
}
.page .hero__dot--active {
  width: 52px;
  background: var(--h-buy);
  transform: none;
}


/* ---------------------------------------------------------------------------
   БАННЕР В КАТАЛОГЕ
   На главной .hero__item лежит внутри Swiper с фиксированной высотой 400px.
   В каталоге слайдера нет — высоту задаёт контент, поэтому сбрасываем
   привязку к слайдеру и добавляем отступ снизу.
   ------------------------------------------------------------------------ */
.page .hero--catalog {
  padding-top: var(--gs-space-5, 20px);
  padding-bottom: var(--gs-space-5, 20px);
}

.page .hero--catalog .hero__body {
  display: block;
}

.page .hero--catalog .hero__item {
  height: auto;
  min-height: 0;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 50px);
}

/* В каталоге заголовок баннера — не h1 (h1 занят названием категории),
   но визуально должен читаться так же. */
.page .hero--catalog .hero__title {
  font-size: clamp(22px, 2.2vw, 30px);
}

@media (max-width: 1024px) {
  .page .hero--catalog .hero__item {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------------
   АДАПТИВ (перенесено из home.css — те же правила нужны в каталоге)
   ------------------------------------------------------------------------ */

@media (max-width: 1165px) {
.page .hero__visual {
    min-width: 270px;
    max-width: 300px;
  }
.page .hero__title {
    font-size: clamp(22px, 2.4vw, 28px);
  }
}

@media (max-width: 1024px) {
.page .hero__item {
    gap: var(--h-s-4);
  }
.page .hero__visual {
    margin-top: var(--h-s-4);
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
.page .hero__visual-number,
  .page .hero__visual-icon {
    display: none;
  }
.page .hero__trust {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--h-s-2);
    --trust-pad: var(--h-s-3);
    padding: var(--trust-pad);
  }
.page .hero__trust-head {
    flex: 1 0 100%;
    margin-bottom: var(--h-s-2);
    padding: var(--h-s-2) var(--h-s-3);
  }
.page .hero__trust-head-text b {
    font-size: 13.5px;
  }
.page .hero__trust-head-text i {
    font-size: 11.5px;
  }
.page .hero__trust-logo {
    width: 24px;
    height: 24px;
  }
.page .hero__trust-row {
    flex: 1 1 200px;
    padding: var(--h-s-2);
  }
.page .hero__trust-row ~ .hero__trust-row {
    border-top: none;
  }
.page .hero__cta {
    margin-top: var(--h-s-4);
  }
}

@media (max-width: 640px) {
.page .hero__microtrust {
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
.page .hero__trust-row {
    flex: 1 1 100%;
  }
.page .hero__cta {
    height: 48px;
  }
.page .hero__trust {
    --trust-pad: var(--h-s-2);
    padding: var(--trust-pad);
    gap: 0;
  }
.page .hero__trust-row {
    padding: 6px var(--h-s-2);
    align-items: center;
  }
.page .hero__trust-text i {
    display: none;
  }
.page .hero__trust-text b {
    font-size: 13.5px;
  }
.page .hero__microtrust {
    margin-top: var(--h-s-2);
  }
.page .hero__dot {
    width: 26px;
  }
.page .hero__dot--active {
    width: 40px;
  }
}

@media (max-width: 370px) {
.page .hero__trust-head {
    padding: 6px var(--h-s-2);
    gap: var(--h-s-2);
    margin-bottom: var(--h-s-1);
  }
.page .hero__trust-head-text i {
    display: none;
  }
.page .hero__trust-logo {
    width: 22px;
    height: 22px;
  }
}

@media (hover: none) {
.page .product-discount__list .products-catalog__card:hover,
  .page .about__item:hover,
  .page .step__item:hover,
  .page .category-card:hover,
  .page .articles__card:hover,
  .page .articles__item:hover,
  .page .finalcta__btn:hover,
  .page .hero__cta:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
.page .product-discount__list .products-catalog__card:hover,
  .page .about__item:hover,
  .page .step__item:hover,
  .page .category-card:hover,
  .page .hero__cta:hover,
  .page .finalcta__btn:hover {
    transform: none;
  }
}