/* Besfo — главная страница. Только то, что есть на главной и больше нигде.
   Шапка, подвал и карточка товара подключаются из shell.css и components.css.

   Написано Mobile First: базовые правила для узкого экрана, шире — через
   min-width. Брейкпоинты из дизайн-системы: 768 и 1025. */

/* Рабочая область. Сверху роль «между компонентами»: крошек на главной нет,
   и первый блок стоит прямо под шапкой. Снизу роль «перед подвалом». */
/* Сверху — роль «между компонентами»: крошек на главной нет, и баннеры
   начинаются сразу под шапкой, на том месте, где прежде стоял заголовок
   (решение заказчика 18.09.2026). Снизу — роль «перед подвалом». */
.home {
  padding-top: var(--gap-component);
  padding-bottom: var(--gap-page);
}

/* ── Баннеры ───────────────────────────────────────────────────────────────
   На узком экране слайдер и плитка идут друг под другом, с 768 — в один ряд.

   РАСПОЛОЖЕНИЕ НА ТЕЛЕФОНЕ НЕ СВЕРЕНО с действующим сайтом: снимка мобильной
   главной не было. Если на сайте плитка на телефоне скрыта или стоит иначе —
   правится здесь. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-block);
}

/* Слайдер обрезает содержимое по скруглению: без overflow углы баннера
   торчали бы за радиус. Скругление — роль блока страницы, 16px. */
.hero__slider {
  position: relative;
  min-width: 0;
  border-radius: var(--radius-block);
  overflow: hidden;
}

/* Лента: один баннер на всю ширину, остальные за краем. scroll-snap
   останавливает ленту на целом баннере, а не на половине.
   Пропорция задана самой ленте, а не картинке: место под баннер занято до
   загрузки, и блоки ниже не прыгают. */
.hero__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  aspect-ratio: 2060 / 690;
  list-style: none;
  overflow-x: auto;
  /* Обязательно явно: задав только overflow-x, по спецификации получаешь
     overflow-y: auto — и колесо мыши застревает в ленте. */
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hero__track::-webkit-scrollbar { display: none; }

.hero__slide {
  scroll-snap-align: start;
  min-width: 0;
}

/* Ссылка растянута на весь слайд. position нужен кольцу фокуса ниже. */
.hero__link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* cover: баннер сверстан под эту пропорцию целиком, полей быть не должно. */
.hero__link img,
.hero__side img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .15s ease;
}

/* Кольцо фокуса ВНУТРИ баннера. Общее кольцо из shell.css рисуется снаружи
   элемента, а слайдер обрезает все, что за его краем, — от кольца осталась
   бы невидимая часть. Слои те же, темный-белый-темный, только внутрь.
   Рисуется поверх картинки псевдоэлементом: тень самой ссылки картинка
   перекрыла бы. */
.hero__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-block);
  pointer-events: none;
}
.hero__link:focus-visible {
  outline: none;
  box-shadow: none;
}
.hero__link:focus-visible::after {
  box-shadow:
    inset 0 0 0 2px var(--focus-ring-outer),
    inset 0 0 0 4px var(--focus-ring-inner),
    inset 0 0 0 6px var(--focus-ring-outer);
}

/* Плитка рядом со слайдером. Кольцо фокуса у нее общее: она не обрезана. */
.hero__side {
  display: block;
  aspect-ratio: 330 / 345;
  border-radius: var(--radius-block);
  overflow: hidden;
}

/* Отклик на наведение и нажатие у баннеров — легкое затемнение картинки.
   Цветом тут отвечать нечем: у баннера нет своего фона и текста в разметке.
   Затемнение, а не прозрачность: прозрачность поверх белой страницы
   осветляет, и нарисованный на баннере текст терял бы контраст. */
@media (hover: hover) and (pointer: fine) {
  .hero__link:hover img,
  .hero__side:hover img { filter: brightness(.96); }
  .hero__arrow:hover .hero__arrow-disc { background: var(--color-border); }
}
.hero__link:active img,
.hero__side:active img { filter: brightness(.92); }

/* Стрелки. На узком экране их нет: там листают пальцем, а кнопки поверх
   баннера закрывали бы нарисованный на нем текст. */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-text);
}
.hero__arrow--prev { left: var(--gap-block); }
.hero__arrow--next { right: var(--gap-block); }

/* Плашка нужна: под стрелкой лежит баннер любых цветов, и без фона шеврон
   на нем терялся бы. */
.hero__arrow-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-gray-light);
  transition: background-color .15s ease;
}
.hero__arrow svg { display: block; width: 20px; height: 20px; }
/* Шеврон в спрайте один и смотрит вправо — «назад» получается разворотом. */
.hero__arrow--prev svg { transform: rotate(180deg); }
.hero__arrow:active .hero__arrow-disc { background: var(--color-gray-pressed); }

/* Край ленты: стрелка прячется, но место за ней остается занятым.
   Класс ставит общая лента besfoSlider из components.js. */
.hero__arrow.is-hidden { visibility: hidden; pointer-events: none; }

/* Кружки на белой подложке. У кружков галереи в карточке подложки нет, но
   там снимки на белом фоне; баннер бывает любого цвета, и серый кружок на
   нем пропал бы — та же причина, по которой на странице товара кружки
   вынесены из-под темных снимков. */
.hero__dots {
  position: absolute;
  left: 50%;
  bottom: var(--gap-inner);
  transform: translateX(-50%);
  display: flex;
  gap: var(--gap-tight);
  padding: var(--gap-tight) var(--gap-inner);
  border-radius: 8px;
  background: var(--color-white);
  pointer-events: none;
}

.hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-placeholder);
  transition: background-color .15s ease, transform .15s ease;
}
/* Активный помечен цветом И размером: цвет как единственный признак не
   работает для тех, кто его не различает. */
.hero__dot[data-current="true"] {
  background: var(--color-text);
  transform: scale(1.34);
}

/* ≥ 768: слайдер и плитка в один ряд. Колонки в пропорции ширин при равной
   высоте: 2060x690 и 330x345, приведенные к высоте 690, — это 2060 и 660.
   fr делит место уже за вычетом промежутка, поэтому высоты совпадают на
   любой ширине, а не только на 1440. */
@media (min-width: 768px) {
  .hero {
    grid-template-columns: minmax(0, 2060fr) minmax(0, 660fr);
    gap: var(--gap-component);
  }
}

/* ≥ 1025: стрелки. Ниже этой ширины экраны в основном сенсорные. */
@media (min-width: 1025px) {
  .hero__arrow { display: flex; }
}