/* VETRO token body bg — контент-фон/текст от активной темы */
body{ background-color:var(--bg-alt); color:var(--fg); }

/* VETRO btn tokens — кнопки берут форму/кейс из активной темы (различие тем) */
.btn{ border-radius:var(--btn-radius); text-transform:var(--btn-transform); letter-spacing:var(--btn-tracking); font-weight:var(--btn-weight); }

/* VETRO hero overlay — родной .hero--overlay-layer заливает фоном ТЕМЫ (на светлой = осветляет).
   Здесь переопределяем на затемнение; силу можно менять токеном --hero-overlay-alpha. */
.hero--overlay-layer::after{ background-color: rgba(0,0,0, var(--hero-overlay-alpha, .55)); }

/* VETRO map embed — .google-maps держит пропорцию через padding-bottom при height:0,
   поэтому вставленный Яндекс-конструктор позиционируем абсолютно, чтобы он заполнил блок. */
.google-maps{ position:relative; }
.google-maps iframe,.google-maps ymaps{ position:absolute; top:0; left:0; width:100% !important; height:100% !important; border:0; }
.google-maps.height-auto\@md iframe{ min-height:320px; }

/* VETRO hero-video overlay — слой видео у .hero-video-bg лежит на z-index:1,
   поднимаем затемнение над ним, контент блока и так на z-index:2. */
.hero-video-bg.hero--overlay-layer::after{ z-index:1; }

/* VETRO sticky-hero overlay — родной слой кита заливается цветом фона темы (на светлой осветляет)
   и включается только при прокрутке. Перекрашиваем в тёмный и даём базовое затемнение сразу,
   сохраняя усиление на скролле, как задумано в компоненте. */
.sticky-hero--overlay-layer .sticky-hero__media::after{
  background-color:var(--color-black);
  opacity: var(--hero-overlay-alpha, .55);
}
.sticky-hero--media-is-fixed.sticky-hero--overlay-layer .sticky-hero__media::after{
  opacity: calc(var(--hero-overlay-alpha, .55) + .1);
}

/* VETRO looping-slideshow-v2 — кит объявляет иконку кнопки как --size: inherit,
   то есть размер должен прийти с самой кнопки. Но переменную на кнопке кит нигде не задаёт,
   и иконка схлопывается в 1em (~15px) при кнопке 48px. Задаём размер явно. */
.loop-slideshow-v2__control{ --size: 48px; }

/* VETRO slide dim — слайд затемняется ТОЛЬКО когда на нём есть контент из components,
   иначе картинка показывается как есть. Слой кладём под контент (у контента z-index 1). */
.vetro-slide-dim::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background-color: rgba(0,0,0, var(--slide-overlay-alpha, .45));
  pointer-events:none; z-index:1;   /* над медиа-элементом (figure/video/img), но под контентом */
}

/* VETRO slideshow: режим «на весь экран». Высота слайда в ките берётся из --slideshow-height,
   поэтому переопределяем именно её, а не height у элемента. */
.vetro-slideshow-full{ --slideshow-height: 100vh; }

/* VETRO slideshow: видеофон слайда. Лежит под затемнением (z-index 1) и контентом (2). */
.vetro-slide-video{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:0; margin:0; }
.vetro-slide-video video{ display:block; width:100%; height:100%; object-fit:cover; }

/* VETRO: TT Wellingtons — лицензионный шрифт клиента, файлы в site/templates/fonts */
@font-face{
  font-family:'TT Wellingtons';
  src:url('../fonts/TTWellingtons-Light.otf') format('opentype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT Wellingtons';
  src:url('../fonts/TTWellingtons-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT Wellingtons';
  src:url('../fonts/TTWellingtons-Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT Wellingtons';
  src:url('../fonts/TTWellingtons-DemiBold.otf') format('opentype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT Wellingtons';
  src:url('../fonts/TTWellingtons-Bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT Wellingtons';
  src:url('../fonts/TTWellingtons-Black.otf') format('opentype');
  font-weight:900; font-style:normal; font-display:swap;
}

/* TT Wellingtons по умолчанию рисует старостильные цифры (разной высоты).
   На оригинале цифры обычные, поэтому включаем lining figures. */
body{ font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "onum" 0; }

/* Кит ставит --heading-font-weight:300 прямо на h1..h4, и это перебивает токен темы из :root.
   Возвращаем управление теме. Заодно применяем регистр заголовков из темы. */
h1,h2,h3,h4{ --heading-font-weight: var(--heading-weight, 700); }
.text-component h1,.text-component h2,.text-component h3{ text-transform: var(--display-transform, none); }

/* СЛОЙ ДВИЖЕНИЯ — скорость и плавность появления берутся из темы,
   поэтому характер анимации меняется вместе с арт-направлением. */
:root{
  --reveal-fx-duration: var(--dur-slow, 700ms);
  --reveal-fx-timing-function: var(--ease, cubic-bezier(.16,1,.3,1));
}
/* каскад: карточки и слайды внутри появившейся секции выезжают по очереди */
.reveal-fx .grid > *,
.reveal-fx .carousel__item,
.reveal-fx .hiw-list__item{
  opacity:0; transform: translateY(var(--reveal-y, 16px));
  transition: opacity var(--dur-base,300ms) var(--ease), transform var(--dur-base,300ms) var(--ease);
}
.reveal-fx--is-visible .grid > *,
.reveal-fx--is-visible .carousel__item,
.reveal-fx--is-visible .hiw-list__item{ opacity:1; transform:none; }
.reveal-fx--is-visible .grid > *:nth-child(1){ transition-delay: 0ms; }
.reveal-fx--is-visible .grid > *:nth-child(2){ transition-delay: 70ms; }
.reveal-fx--is-visible .grid > *:nth-child(3){ transition-delay: 140ms; }
.reveal-fx--is-visible .grid > *:nth-child(4){ transition-delay: 210ms; }
.reveal-fx--is-visible .grid > *:nth-child(n+5){ transition-delay: 280ms; }
@media (prefers-reduced-motion: reduce){
  .reveal-fx, .reveal-fx .grid > *{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ПОВЕДЕНИЕ КНОПОК ПРИ НАВЕДЕНИИ (правка уровня БИБЛИОТЕКИ, наследуют все сайты).
   Кит на :hover переписывает кнопку целиком: скругляет в таблетку (4px -> 50px),
   заливает тёмным, возвращает текстовую гарнитуру и СНИМАЕТ капс.
   Из-за этого кнопка дёргается и меняет форму. Найдено авто-ревизией на /blocks/.
   Оставляем на наведении только цвет/прозрачность — форма, кегль и регистр держатся. */
/* базовая кнопка тоже берёт шрифт ИЗ ТЕМЫ — иначе покой=Inter(кита), а ховер=display,
   и получается прыжок шрифта (нашла авто-ревизия на aurora). Оба состояния из темы. */
.btn{ font-family:var(--btn-font, var(--font-display)); }
.btn:hover,.btn--primary:hover,.btn--secondary:hover,.btn--subtle:hover,.btn--accent:hover{
  border-radius:var(--btn-radius);
  font-family:var(--btn-font, var(--font-display));
  font-weight:var(--btn-weight);
  text-transform:var(--btn-transform);
  letter-spacing:var(--btn-tracking);
  opacity:var(--btn-hover-opacity,.85);
  transition:opacity var(--btn-hover-dur,.25s) var(--ease-out, ease),
             background-color var(--btn-hover-dur,.25s) var(--ease-out, ease),
             color var(--btn-hover-dur,.25s) var(--ease-out, ease);
}
/* кегль на наведении не трогаем ВООБЩЕ: любое значение здесь ломает размер кнопки.
   Исключение — кнопка в шапке: правило кита .btn--primary:hover перебивает её
   собственный класс по весу селектора, поэтому кегль прибиваем в ОБОИХ состояниях. */
.header__nav-btn,.header__nav-btn:hover{ font-size:var(--nav-btn-size,1.125rem); }
.btn:active{ transform:none; }

/* Кит красит невыбранные вкладки loop-tabs в --color-contrast-low (цвет рамок) —
   на светлой теме они пропадают. Поднимаем до читаемого contrast-medium. */
.loop-tabs__control{ color:var(--color-contrast-medium); }
.loop-tabs__control--selected{ color:var(--color-contrast-higher); }

/* VETRO: SKODA Next — лицензионный бренд-шрифт Škoda (файлы клиента), в site/templates/fonts */
@font-face{ font-family:'SKODA Next'; src:url('../fonts/SKODANext-Light.woff') format('woff'),url('../fonts/SKODANext-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'SKODA Next'; src:url('../fonts/SKODANext-Regular.woff') format('woff'),url('../fonts/SKODANext-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'SKODA Next'; src:url('../fonts/SKODANext-Bold.woff') format('woff'),url('../fonts/SKODANext-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'SKODA Next'; src:url('../fonts/SKODANext-Black.woff') format('woff'),url('../fonts/SKODANext-Black.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; }

/* Škoda primary CTA = сигнатурный электрик-грин (accent2 палитры) + тёмный текст.
   Выбор клиента (вариант 2). Цвет из палитры темы, не хардкод. Ховер — то же + opacity из общего правила. */
.btn--primary,.btn--primary:hover{ background:var(--color-accent); color:var(--color-black); border-color:var(--color-accent); }
.btn--primary:focus{ box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-accent); }