/* Главная /ru/ (этап 64): первый экран на весь экран — одно фото и слоган; «Новинки» — сразу под ним.
   Шрифт слогана: у h1 класс slogan-v1 | slogan-v2 | slogan-v3 (index.html и kk/index.html), @font-face — fonts/fonts.css.
   После правки поднять ?v= у home.css в index.html, kk/index.html, fonts/index.html и hero/index.html. */

/* Первый экран: высота окна без шапки и полосы над ней — фото занимает весь видимый экран, ниже начинаются «Новинки». */
.hero--full .hero__media { display: block; height: calc(100svh - var(--header-h) - var(--promo-h)); min-height: 420px; max-height: none; }
.hero--full .hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero--full .hero__shade { background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 50%); }
.hero--full .hero__body { padding-bottom: clamp(32px, 7vh, 72px); }
.hero--full .hero__title { margin: 0; max-width: 14ch; text-wrap: balance; }

/* Варианты шрифта слогана (выбор владельца — страница /ru/fonts/). Размер ограничен и шириной, и высотой окна:
   до 4 строк слогана целиком в первом экране ноутбука (1280×720, 1366×768, 1440×900). Копия — erp/static/site_design/hero-preview.css. */
.slogan-v1 { font-family: "Montserrat", var(--font); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; font-size: clamp(36px, min(8.5vw, 14vh), 96px); }
.slogan-v2 { font-family: "Cormorant", Georgia, "Times New Roman", serif; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1; font-size: clamp(46px, min(10vw, 15vh), 120px); }
.slogan-v3 { font-family: "Oswald", "Arial Narrow", var(--font); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; font-size: clamp(44px, min(10vw, 15vh), 124px); }

/* Телефон: длинное слово слогана («резкоконтинентальный» — 448 px при 46 px) шире экрана и раздвигало страницу до 465 px —
   перенос по слогам (lang="ru|kk|en" у <html>), где словаря переносов нет — разрыв слова. ПК не меняется. */
@media (max-width: 600px) {
  .hero--full .hero__title { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
}

/* Кадр из ERP («Сайт → Оформление», site_home_service): <picture> ноутбук/телефон или <video> с заставкой;
   точка кадра — object-position в style. При «уменьшении движения» вместо видео — заставка (.hero__still). */
.hero--full .hero__media picture { display: block; width: 100%; height: 100%; }
.hero--full .hero__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero--full .hero__media .hero__still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero--full .hero__media--still video { display: none; }
  .hero--full .hero__media--still .hero__still { display: block; }
}

/* Пробная страница шрифтов. */
.font-label { position: absolute; top: 16px; left: 0; right: 0; z-index: 2; }
.font-label span { display: inline-block; background: rgba(0,0,0,.6); color: #fff; font-size: var(--fs-s, 14px); padding: 6px 12px; border-radius: 999px; }
.hero__sub { margin: 12px 0 0; font-size: var(--fs-l, 18px); opacity: .92; }
.font-intro { padding-top: 24px; padding-bottom: 24px; }
.font-intro p { margin: 0 0 8px; max-width: 60ch; }
.hero__sub.hero__sub--kk { font-size: clamp(22px, 4vw, 44px); }
.hero__sub.hero__sub--letters { font-size: clamp(18px, 3vw, 28px); }