/* Главная новой витрины (часть 4, Р24): первый экран и «Сейчас в «…»» над каталогом — по эталону
   (`docs/design/reference/layout.css` → `.hero`, `.banners`; `components.css` → `.banner-card`). Размеры —
   токенами, цвета — ролями темы. Каталог под ними — правила menu.css, как на странице меню. */

.home-top {
  display: grid;
  gap: var(--space-7);
  min-width: 0;
  padding-top: var(--space-5);
}
.home-top:empty { display: none; }
.home-catalog { min-width: 0; padding-top: var(--space-7); }
.home-top:empty + .home-catalog { padding-top: 0; }
.home-catalog:focus { outline: none; }

/* ── Первый экран ─────────────────────────────────────────────────────── */
.hero {
  position: relative; display: grid; align-items: end; min-height: calc(var(--space-8) * 4 + var(--space-7));
  overflow: hidden; border-radius: var(--radius-xl); background: var(--dark); color: var(--on-accent);
}
.hero__video, .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Затемнение — под словами: подпись у низа читается на любом кадре (4,5:1 даже на белом), крупный заголовок —
   не хуже 3:1 и там, куда он поднимается на телефоне в три строки. Светлее к верху, чтобы кадр было видно. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: var(--z-raised);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--dark) 80%, transparent) 0%,
    color-mix(in srgb, var(--dark) 62%, transparent) 50%,
    color-mix(in srgb, var(--dark) 46%, transparent) 100%);
}
.hero__text {
  position: relative; z-index: var(--z-above); display: grid; gap: var(--space-4); justify-items: start;
  padding: var(--space-5); max-width: calc(var(--space-8) * 10);
}
/* Заголовок — у левого края, как в эталоне: прежнее правило заголовков экранов ставило его по центру. */
.hero__title { margin: 0; text-align: start; font-family: var(--font-title); font-size: var(--text-hero); line-height: var(--leading-title); color: inherit; }
.hero__lead { margin: 0; font-size: var(--text-lg); color: inherit; }
.hero__go { width: auto; }
.hero__pause {
  position: absolute; right: var(--space-4); bottom: var(--space-4); z-index: var(--z-above);
  color: var(--on-accent); background: color-mix(in srgb, var(--dark) 55%, transparent); border-radius: var(--radius-pill);
}
.hero__pause:hover { background: color-mix(in srgb, var(--dark) 70%, transparent); }
/* Компактный — одни слова на поверхности темы, без кадра и затемнения. */
.hero--compact { min-height: 0; background: var(--panel); color: var(--ink); border: 1px solid var(--border); }
.hero--compact::after { content: none; }
@media (min-width: 1100px) {
  .hero { min-height: calc(var(--space-8) * 7); }
  .hero--compact { min-height: 0; }
  .hero__text { padding: var(--space-7); }
}

/* ── Баннеры ──────────────────────────────────────────────────────────── */
.banners { display: grid; gap: var(--space-4); min-width: 0; }
.banners[hidden] { display: none; }
.banners__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.banners__title { margin: 0; font-family: var(--font-title); font-size: var(--title-md); }
.banners__arrows { display: flex; gap: var(--space-2); }
.banners__arrows .icon-btn { border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--panel); color: var(--ink); }
.banners__arrows .icon-btn:disabled { opacity: 0.4; cursor: default; }
.banners__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--space-5)) / 3);
  gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.banners__track::-webkit-scrollbar { display: none; }
@media (max-width: 1099px) { .banners__track { grid-auto-columns: calc((100% - var(--space-4)) / 2); gap: var(--space-4); } }
@media (max-width: 767px) {
  .banners__track { grid-auto-columns: 86%; gap: var(--space-3); }
  .banners__arrows { display: none; }
  .home-top { gap: var(--space-6); padding-top: var(--space-4); }
  .home-catalog { padding-top: var(--space-6); }
}

.banner-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2);
  min-height: calc(var(--space-8) * 3 + var(--space-5)); padding: var(--space-5); overflow: hidden;
  border-radius: var(--radius-xl); background: var(--panel); color: var(--ink); text-decoration: none;
  scroll-snap-align: start;
}
.banner-card img {
  position: absolute; inset: 0; z-index: var(--z-base); width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--motion-decor) var(--ease);
}
.banner-card:hover img { transform: scale(1.03); }
/* Рамка фокуса — внутрь карточки: лента прокручивается вбок и обрезала бы рамку снаружи. */
.banner-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.banner-card::before {
  content: ""; position: absolute; inset: 0; z-index: var(--z-raised);
  background: linear-gradient(to top, var(--panel) 35%, transparent 80%);
}
.banner-card > span { position: relative; z-index: var(--z-above); }
.banner-card--dark { background: var(--dark); color: var(--footink); }
.banner-card--dark::before { background: linear-gradient(to top, var(--dark) 25%, transparent 75%); }
.banner-card__eyebrow {
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
.banner-card--dark .banner-card__eyebrow { color: var(--gold2); }
.banner-card__title { font-family: var(--font-title); font-size: var(--title-md); line-height: var(--leading-title); }
.banner-card__link { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
@media (prefers-reduced-motion: reduce) {
  .banner-card img { transition: none; }
  .banner-card:hover img { transform: none; }
}