/**
 * Hero overrides — archive hero (banner as background, breadcrumbs+h1+chips overlaid),
 * archive page header, mobile compact, batch design fixes.
 *
 * Подключается через wp_enqueue_style (handle: bike-hero-overrides)
 * с dependency на 'bike-main'. Только на archive/shop.
 *
 * @package 4Bike
 */

/* === ARCHIVE PAGE HEADER + BANNER === */
.bike-archive-header {
  position: relative;
  margin: 1.5rem 0 1.5rem;
  min-height: 240px;
  border-radius: 14px;
  background: #f5f5f7;
  overflow: hidden;
}
.bike-archive-header--with-banner {
  /* фото banner лежит абсолютно справа, текст ложится поверх слева */
}
.bike-archive-header__text {
  position: relative;
  z-index: 2;
  padding: 0;
  max-width: 55%;
}
.bike-archive-header__title {
  font-family: 'Onest', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.05;
  color: #0b0d12;
  margin: 0 0 .75rem;
  letter-spacing: -0.01em;
}
.bike-archive-header__subtitle {
  font-size: .9375rem;
  color: #6c6d72;
  line-height: 1.5;
  margin: 0 0 .5rem;
  max-width: 480px;
}
.bike-archive-header__count {
  font-size: .875rem;
  color: #9ca3af;
  margin: 0;
}

.bike-archive-header__banner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  z-index: 1;
  pointer-events: none;
}
.bike-archive-header__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}
/* Белый градиент поверх фото — плавный переход слева под текст */
.bike-archive-header__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #f5f5f7 0%, #f5f5f7 8%, rgba(245,245,247,0.85) 28%, rgba(245,245,247,0) 60%);
}

/* === Mobile: compact, banner снизу за текстом === */
@media (max-width: 768px) {
  .bike-archive-header {
    min-height: auto;
  }
  .bike-archive-header__text {
    max-width: 100%;
    padding: 0;
  }
  .bike-archive-header__title {
    font-size: 1.75rem;
  }
  .bike-archive-header__banner {
    position: relative;
    width: 100%;
    height: 140px;
    margin-top: -1rem;
  }
  .bike-archive-header__banner::after {
    background: linear-gradient(to bottom, rgba(245,245,247,0.6) 0%, rgba(245,245,247,0) 50%);
  }
}


/* === BATCH DESIGN FIXES 2026-05-25 === */

/* #5 — нормализация иконок subcategory chips: единый visual size 18x18 */
.bike-chip__icon,
.bike-chip__icon svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}
.bike-chip__icon svg {
  stroke-width: 1.75;
}
.bike-chip--block .bike-chip__icon {
  width: 20px !important;
  height: 20px !important;
}
.bike-chip--block .bike-chip__icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* #4 — banner повыше (text-area имеет subtitle теперь, нужно больше места) */
.bike-archive-header {
  min-height: 300px;
}
.bike-archive-header__text {
  padding: 0;
}
@media (max-width: 768px) {
  .bike-archive-header {
    min-height: auto;
  }
}


/* === ARCHIVE HERO (banner as background, all content overlaid) === */
.bike-archive-hero {
  position: relative;
  margin: 0 0 1.5rem;
  border-radius: 14px;
  overflow: hidden;
  background: #f5f5f7;
  min-height: 215px;
}
.bike-archive-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bike-archive-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}
/* Белый градиент слева — текст и chips на белом фоне читаются */
.bike-archive-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right,
    #f5f5f7 0%,
    #f5f5f7 12%,
    rgba(245,245,247,0.92) 35%,
    rgba(245,245,247,0) 65%
  );
}
.bike-archive-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 215px;
  padding: 0.5rem 1.75rem 1rem 0;
}

/* Breadcrumbs внутри hero */
.bike-archive-hero .bike-archive-breadcrumbs {
  margin: 0 0 1.5rem;
}

/* Text-блок H1+subtitle+count — растягивается, занимает свободное место */
.bike-archive-hero .bike-archive-header__text {
  flex: 1;
  max-width: 55%;
}

/* Chips внизу hero — на всю ширину (до правого края, перенос вниз) */
.bike-archive-hero .bike-archive-chips {
  margin: 1.5rem 0 0;
  max-width: 100%;
}

/* === Убрать background у обычного header — фон теперь даёт hero === */
.bike-archive-hero .bike-archive-header,
.bike-archive-hero .bike-archive-header--with-banner {
  background: transparent;
  min-height: auto;
  padding: 0;
  margin: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .bike-archive-hero {
    min-height: auto;
  }
  .bike-archive-hero__content {
    min-height: auto;
    padding: 1rem 1.25rem 1.25rem;
  }
  .bike-archive-hero .bike-archive-header__text {
    max-width: 100%;
  }
  .bike-archive-hero .bike-archive-chips {
    max-width: 100%;
  }
  .bike-archive-hero__overlay {
    background: linear-gradient(to bottom,
      rgba(245,245,247,0.95) 0%,
      rgba(245,245,247,0.8) 45%,
      rgba(245,245,247,0.4) 100%
    );
  }
}


/* Hero compact tweaks (ближе к header, плотнее) */
.bike-archive-hero .bike-archive-breadcrumbs {
  margin: 0 0 0.75rem;
}
.bike-archive-hero .bike-archive-chips {
  margin: auto 0 0;
}
.bike-archive-hero .bike-archive-header__text {
  flex: 0 1 auto;
  margin-bottom: auto;
}
.bike-archive-hero .bike-archive-header__title {
  font-size: 2.25rem;
  margin-bottom: .5rem;
}
.bike-archive-hero .bike-archive-header__subtitle {
  margin-bottom: .375rem;
}

/* === WC wrapper pt-1 (4px) для archive — явно === */
.pt-1 { padding-top: 4px !important; }
.md\\:pt-1 { padding-top: 4px !important; }


/* Hero: текст и chips выровнены с sidebar (padding-left = 0) */
.bike-archive-hero__content {
  padding-left: 0 !important;
}
.bike-archive-hero .bike-archive-header__text {
  padding-left: 0 !important;
}
.bike-archive-hero .bike-archive-chips {
  margin-left: 0;
  padding-left: 0;
}
/* Внутри hero весь контент сдвигается на padding контейнера (border-radius hero не мешает) */
.bike-archive-hero__content > * {
  padding-left: 0;
}

/* Подъём текста к breadcrumbs */
.bike-archive-hero .bike-archive-header__title {
  margin-top: 0;
}
.bike-archive-hero .bike-archive-breadcrumbs {
  margin-bottom: 0.5rem;
}


/* === HERO FINAL TWEAKS: равные gap'ы + выравнивание слева с sidebar === */

/* 1. Левый отступ контента hero = padding sidebar (1.25rem = как у .bike-filter-toggle-wrap) */
.bike-archive-hero__content {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem;
}
.bike-archive-hero .bike-archive-header__text,
.bike-archive-hero .bike-archive-breadcrumbs,
.bike-archive-hero .bike-archive-chips {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* 2. Убираем flex-auto распределение, ставим плотные равные gap'ы */
.bike-archive-hero__content {
  display: block;        /* отказ от flex с auto-margins */
}
.bike-archive-hero .bike-archive-breadcrumbs {
  margin: 0 0 0.5rem;
}
.bike-archive-hero .bike-archive-header__title {
  margin: 0 0 0.375rem;
}
.bike-archive-hero .bike-archive-header__subtitle {
  margin: 0 0 0.25rem;
}
.bike-archive-hero .bike-archive-header__count {
  margin: 0 0 0.5rem;
}
.bike-archive-hero .bike-archive-header__text {
  margin: 0 0 0.5rem;    /* gap до chips = gap breadcrumbs→H1 */
  flex: none;
  max-width: 55%;
}
.bike-archive-hero .bike-archive-chips {
  margin: 0;             /* count margin-bottom уже создаёт gap */
}


/* === HERO: flex column с равным gap'ом между ВСЕМИ блоками === */
.bike-archive-hero__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;       /* единый gap для всех соседних блоков */
  align-items: flex-start;
}

/* Обнуляем margin у всех дочерних — gap делает всю работу */
.bike-archive-hero__content > * {
  margin: 0 !important;
}
.bike-archive-hero .bike-archive-breadcrumbs,
.bike-archive-hero .bike-archive-header__text,
.bike-archive-hero .bike-archive-chips {
  margin: 0 !important;
}

/* Внутри text-блока тоже равные gap'ы между H1/subtitle/count */
.bike-archive-hero .bike-archive-header__text {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.bike-archive-hero .bike-archive-header__title,
.bike-archive-hero .bike-archive-header__subtitle,
.bike-archive-hero .bike-archive-header__count {
  margin: 0 !important;
}


/* === Hero chips: убрать нижний padding/border (он нужен только вне hero) === */
.bike-archive-hero .bike-archive-chips {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  margin: 0 !important;
}


/* === Hero chips: убрать padding-top тоже (юзер заметил в DevTools = 20px) === */
.bike-archive-hero .bike-archive-chips {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}


/* === FINAL: gap между всеми блоками hero = 20px (ручной подбор юзера через DevTools) === */
.bike-archive-hero__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  align-items: flex-start !important;
}
/* Внутри text-блока (H1/subtitle/count) — компактный gap 6px */
.bike-archive-hero .bike-archive-header__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.bike-archive-hero .bike-archive-header__text > *,
.bike-archive-hero__content > * {
  margin: 0 !important;
}
.bike-archive-hero .bike-archive-chips {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}


/* === Hero count: число красным жирным === */
.bike-archive-header__count-number {
  color: #E22A1C;
  font-weight: 700;
}


/* === Hero visual balance (по DevTools-подсказкам юзера) === */

/* 1. Text-блок gap 10px между H1/subtitle/count */
.bike-archive-hero .bike-archive-header__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* 2. Chips: padding-top равный визуальной 'хвостовой' части breadcrumbs.
   У breadcrumbs снизу букв ~20px пустого пространства (line-height + padding).
   Добавляем chips сверху столько же чтобы визуально gap уравнялся. */
.bike-archive-hero .bike-archive-chips {
  padding-top: 20px !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}


/* === Chips: отступ снизу chips до низа hero (симметрично padding-top) === */
.bike-archive-hero .bike-archive-chips {
  padding-bottom: 20px !important;
}


/* Chips: уменьшил отступ снизу 20 → 12px */
.bike-archive-hero .bike-archive-chips {
  padding-bottom: 12px !important;
}


/* === Hero subtitle шире на десктопе (юзер 2026-07-10: текст был ограничен ~480px, +половину ширины).
   Реальный лимит — max-width:58ch у самого subtitle (main.css); text-блок просто обнимал его.
   Расширяем subtitle 58ch→88ch (+~50%) и даём text-блоку запас.
   ⚠ Только ДЕСКТОП ≥1280 (модель проекта): раньше было ≥1024 → лезло на планшет-ландшафт
   1024-1279 (iPad), где слоган расползался на фото (регрессия R2 2026-07-10). === */
@media (min-width: 1280px) {
  .bike-archive-hero .bike-archive-header__text {
    max-width: 66%;
  }
  .bike-archive-hero .bike-archive-header__subtitle {
    max-width: 88ch;
  }
}


/* Chips: уменьшил шрифт на 1px (14px → 13px) */
.bike-chip,
.bike-chip__text {
  font-size: 13px !important;
}


/* === Chips hover: премиум серая обводка + иконка не исчезает === */
.bike-chip:hover,
.bike-chip--block:hover,
.bike-chip--pill:hover {
  border-color: #d4d6da !important;     /* премиум светло-серый */
  background-color: #fafafb !important; /* очень лёгкая подложка */
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.04) !important;
  color: #0b0d12 !important;
}

/* Иконка при hover остаётся видимой + цвет brand red */
.bike-chip:hover .bike-chip__icon,
.bike-chip--block:hover .bike-chip__icon,
.bike-chip:hover .bike-chip__icon svg {
  color: #E22A1C !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
}

/* Активный chip (например 'Все резина' красный) при hover остаётся красным */
.bike-chip--active:hover {
  background-color: #E22A1C !important;
  border-color: #E22A1C !important;
  color: #fff !important;
}
.bike-chip--active:hover .bike-chip__icon,
.bike-chip--active:hover .bike-chip__icon svg {
  color: #fff !important;
}

/* Баннер каталога: описание (слоган) чёрным на мобиле+планшете — серый #6c6d72 плохо
   читался на светлом фоне баннера (заказчик 2026-07-14). Десктоп не трогаем. */
@media (max-width: 1023px) {
  .bike-archive-header__subtitle { color: #111316; }
}


/* === Hero content gap: 16px (DevTools-подбор юзера) === */
.bike-archive-hero__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-start !important;
}