/* ==========================================================================
   Velveflix — Рекламные слоты (.vf-ad) — Э4 (AdOps infra)
   Источник: ui_components.md §5 + adops_slots_spec.md §1, §2 (на токенах, 0 хардкода).
   Подключается ТОЛЬКО на is_singular(movies|tvshows|episodes) (как vf-wtw).
   НЕ под .vf-scope.
   Коллизия токенов: используемые имена (--vf-ad-bg/-border/-label, --vf-ad-h-*,
   --vf-space-*, --vf-radius-md, --vf-fs-xs, --vf-ls-caps) проверены — в боевом
   style.css не определены → берутся из vf-tokens.css (Э0), локальный override не нужен.
   Резерв высоты держим МЫ (min-height из токена), сети auto-height запрещён → CLS=0.
   По умолчанию слоты не рендерятся (см. vf_ad_slot() в functions.php): этот CSS
   не даёт визуального эффекта, пока в DOM нет .vf-ad.
   ========================================================================== */

.vf-ad{
  position: relative;
  background: var(--vf-ad-bg);            /* холоднее surface → читается как «не контент» */
  border: 1px solid var(--vf-ad-border);
  border-radius: var(--vf-radius-md);
  margin-block: var(--vf-space-6);        /* ≥32px: отступ от WtW и соседних блоков */
  padding: var(--vf-space-5) var(--vf-space-3) var(--vf-space-3);
  display: grid;
  place-items: center;
  /* не вылазим за ширину контейнера на узких экранах (overflow=0) */
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.vf-ad__label{
  position: absolute;
  top: var(--vf-space-2);
  left: var(--vf-space-3);
  font-size: var(--vf-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--vf-ls-caps);
  color: var(--vf-ad-label);
  line-height: 1;
  pointer-events: none;
}

.vf-ad__slot{
  width: 100%;
  display: grid;
  place-items: center;
  /* резерв держим мы: креатив сети не растягивает контейнер выше токена */
  overflow: hidden;
}

/* Креатив сети не превышает резерв (запрет auto-height; резерв = верхняя граница формата) */
.vf-ad__slot > *{ max-width: 100%; }
.vf-ad__slot img,
.vf-ad__slot iframe,
.vf-ad__slot ins{ max-width: 100%; height: auto; }

/* Резерв высоты под формат (значение = токен Э0; держится ДО загрузки креатива) */
.vf-ad--leaderboard   .vf-ad__slot{ min-height: var(--vf-ad-h-leaderboard); }   /* 728×90 desktop */
.vf-ad--mobile-banner .vf-ad__slot{ min-height: var(--vf-ad-h-mobile); }        /* 320×100 mobile */
.vf-ad--rectangle     .vf-ad__slot{ min-height: var(--vf-ad-h-rectangle); }     /* 300×250 MPU */
.vf-ad--billboard     .vf-ad__slot{ min-height: var(--vf-ad-h-billboard); }     /* 970×250 */

/* На мобайле leaderboard/billboard деградируют в mobile-banner-высоту */
@media (max-width: 767px){
  .vf-ad--leaderboard .vf-ad__slot,
  .vf-ad--billboard   .vf-ad__slot{ min-height: var(--vf-ad-h-mobile); }
}

/* Опц. больший rectangle (336×280) только на десктопе */
@media (min-width: 1024px){
  .vf-ad--rectangle.vf-ad--lg .vf-ad__slot{ min-height: var(--vf-ad-h-rectangle-lg); }
}

/* Листинговые слоты (list_top/list_ingrid): in-grid занимает полный ряд .vf-grid.
   min-width:0 + overflow на слоте: фикс-креатив (300×250) шире узкой колонки
   не распирает грид и клипуется, треки колонок — minmax(0,1fr) в vf-components. */
.vf-grid > .vf-ad{
  grid-column: 1 / -1;
  margin-block: var(--vf-space-4);
  width: 100%;
  min-width: 0;
}
.vf-grid > .vf-ad .vf-ad__slot{
  max-width: 100%;
  overflow: hidden;
}