/* ═══════════════════════════════════════════════════════════
   UFC VIDEOS — блок видео на главной
   Перевод исходного Tailwind-ТЗ в обычный CSS.
   Брейкпоинты: sm 640 · md 768 · lg 1024 · xl 1280
   ═══════════════════════════════════════════════════════════ */

/* Токены нужны и блоку на главной, и архиву, и внутряку —
   поэтому вынесены отдельно от стилей самой секции. */
.ufcv,
.ufcv-archive,
.ufcv-single__player{
  --ufcv-red:var(--red,#dc2626);        /* red-600  */
  --ufcv-red-soft:var(--red-h,#ef4444); /* red-500  */
  --ufcv-red-hi:#f05a5a;                /* red-400  */
  --ufcv-bg:#070707;
  --ufcv-card:#101010;
  --ufcv-line:rgba(255,255,255,.1);
  --ufcv-text:#fff;
  --ufcv-muted:rgba(255,255,255,.45);

  /* Форма и типографика: тема может переопределить через фильтр ufcv_css_vars. */
  --ufcv-radius:3px;
  --ufcv-font-head:var(--font-head,'Oswald',sans-serif);
  --ufcv-font-body:var(--font-body,'Inter',sans-serif);
}

.ufcv{
  position:relative;
  overflow:hidden;
  border-top:1px solid color-mix(in srgb,var(--ufcv-red) 20%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--ufcv-red) 20%,transparent);
  background:var(--ufcv-bg);
  padding:56px 0;
}
@media(min-width:768px){ .ufcv{padding:64px 0} }
@media(min-width:1024px){ .ufcv{padding:80px 0} }

.ufcv__glow{
  pointer-events:none;
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center,rgba(200,20,25,.10),transparent 52%);
}

.ufcv__inner{position:relative}

/* ── Заголовок ── */

.ufcv__head{text-align:center;margin-bottom:32px}

.ufcv__eyebrow{
  display:block;
  margin-bottom:8px;
  font-family:var(--ufcv-font-head);
  font-size:10px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.35em;
  color:var(--ufcv-red-soft);
}

.ufcv__title{
  font-family:var(--ufcv-font-head);
  font-size:30px;
  font-weight:700;
  font-style:italic;
  line-height:1.05;
  letter-spacing:-.025em;
  text-transform:uppercase;
  color:var(--ufcv-text);
}
@media(min-width:640px){ .ufcv__title{font-size:36px} }
@media(min-width:1024px){ .ufcv__title{font-size:48px} }

.ufcv__title-accent{color:var(--ufcv-red)}

.ufcv__subtitle{
  margin-top:12px;
  font-family:var(--ufcv-font-body);
  font-size:10px;
  line-height:1.5;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ufcv-muted);
}
@media(min-width:640px){ .ufcv__subtitle{font-size:12px} }

/* ── Сетка ── */

.ufcv__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
}
.ufcv-card--main{order:1}
.ufcv-card--left{order:2}
.ufcv-card--right{order:3}

@media(min-width:768px){
  .ufcv__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ufcv-card--main{grid-column:span 2}
}

@media(min-width:1024px){
  .ufcv__grid{
    grid-template-columns:minmax(0,.72fr) minmax(0,1.9fr) minmax(0,.72fr);
    align-items:end;
  }
  .ufcv-card--main{grid-column:2;grid-row:1;order:2}
  .ufcv-card--left{order:1}
  .ufcv-card--right{order:3}
}

@media(min-width:1280px){ .ufcv__grid{gap:20px} }

/* ── Карточка ── */

.ufcv-card{
  position:relative;
  display:block;
  overflow:hidden;
  border:1px solid var(--ufcv-line);
  border-radius:var(--ufcv-radius);
  background:var(--ufcv-card);
  color:inherit;
  text-decoration:none;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.ufcv-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--ufcv-red) 55%,transparent);
}
.ufcv-card:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--ufcv-red);
}

.ufcv-card__media{
  position:relative;
  overflow:hidden;
  background:#000;
}
.ufcv-card__media--main{aspect-ratio:16/9}
.ufcv-card__media--side{aspect-ratio:16/9}
@media(min-width:640px){ .ufcv-card__media--side{aspect-ratio:4/3} }
@media(min-width:1024px){ .ufcv-card__media--side{aspect-ratio:3/4} }

.ufcv-card__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(0,0,.2,1);
}
.ufcv-card:hover .ufcv-card__img{transform:scale(1.035)}

/* Размытая подложка боковых карточек — включается только на десктопе (3:4),
   где широкое превью 16:9 иначе пришлось бы сильно обрезать. */
.ufcv-card__bg{display:none}
@media(min-width:1024px){
  .ufcv-card--side .ufcv-card__bg{
    display:block;
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    filter:blur(22px) saturate(.7) brightness(.28);
    transform:scale(1.15);
    z-index:0;
  }
  /* Тёмная рамка поверх подложки: без неё яркие превью дают серые полосы. */
  .ufcv-card--side .ufcv-card__media::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 28%,transparent 72%,rgba(0,0,0,.55));
  }
  /* Подложка трансформирована, поэтому без z-index она перекрыла бы само превью. */
  .ufcv-card--side .ufcv-card__img{position:relative;z-index:1;object-fit:contain}
  .ufcv-card--side .ufcv-card__shade{z-index:2}
}

.ufcv-card__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,#000 0%,rgba(0,0,0,.15) 50%,transparent 100%);
}

.ufcv-card__badge{
  position:absolute;
  left:12px;
  top:12px;
  z-index:10;
  background:var(--ufcv-red);
  padding:6px 12px;
  font-family:var(--ufcv-font-head);
  font-size:10px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--ufcv-text);
}

.ufcv-card__duration{
  position:absolute;
  bottom:12px;
  left:16px;
  z-index:10;
  font-family:var(--ufcv-font-body);
  font-size:12px;
  font-weight:700;
  color:var(--ufcv-text);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.ufcv-card__duration--side{left:12px}

/* ── Play ── */

.ufcv-play{
  position:absolute;
  left:50%;
  top:50%;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(0,0,0,.75);
  color:var(--ufcv-text);
  transition:transform .3s ease;
}
.ufcv-card:hover .ufcv-play{transform:translate(-50%,-50%) scale(1.1)}

.ufcv-play--lg{
  width:64px;height:64px;
  border:2px solid var(--ufcv-red);
  box-shadow:0 0 25px color-mix(in srgb,var(--ufcv-red) 18%,transparent);
}
@media(min-width:640px){ .ufcv-play--lg{width:80px;height:80px} }

.ufcv-play--sm{
  width:56px;height:56px;
  border:1px solid var(--ufcv-red);
}

.ufcv-play svg{width:38%;height:38%;margin-left:8%}

/* ── Главная карточка: нижняя панель ── */

.ufcv-card__panel{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:16px;
}
@media(min-width:640px){ .ufcv-card__panel{padding:20px} }
@media(min-width:768px){
  .ufcv-card__panel{flex-direction:row;align-items:flex-end;justify-content:space-between}
}

.ufcv-card__title{
  font-family:var(--ufcv-font-head);
  font-size:18px;
  font-weight:700;
  line-height:1.05;
  text-transform:uppercase;
  color:var(--ufcv-text);
}
.ufcv-card__title--main{font-size:20px;line-height:1.15}
@media(min-width:640px){ .ufcv-card__title--main{font-size:24px} }

.ufcv-card__desc{
  margin-top:12px;
  font-family:var(--ufcv-font-body);
  font-size:14px;
  line-height:20px;
  color:var(--ufcv-muted);
}
.ufcv-card__desc--main{margin-top:8px;max-width:36rem;line-height:24px}

.ufcv-card__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--ufcv-font-head);
  font-size:10px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ufcv-red-soft);
  transition:color .3s ease;
}
.ufcv-card:hover .ufcv-card__link{color:var(--ufcv-red-hi)}
.ufcv-card__link--main{white-space:nowrap}

.ufcv-ico-ext{width:12px;height:12px;flex:none}

/* ── Боковые карточки: тело ── */

.ufcv-card__body{
  display:flex;
  flex-direction:column;
  min-height:170px;
  padding:16px;
}
.ufcv-card__body .ufcv-card__link{margin-top:auto;padding-top:20px}

/* ── Кнопка под блоком ── */

.ufcv__more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:48px;
  margin:36px auto 0;
  padding:0 24px;
  border:1px solid var(--ufcv-red);
  font-family:var(--ufcv-font-head);
  font-size:10px;
  font-weight:700;
  line-height:1;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none;
  letter-spacing:.2em;
  color:var(--ufcv-red-soft);
  transition:background-color .3s ease,color .3s ease;
}
.ufcv__more:hover{background:var(--ufcv-red);color:var(--ufcv-text)}
.ufcv__more:focus-visible{outline:2px solid var(--ufcv-red);outline-offset:2px}
@media(min-width:640px){
  .ufcv__more{width:fit-content;min-width:310px}
}

/* ── Архив видео ── */

.ufcv-archive{padding:32px 0 64px}

.ufcv-archive__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
}
@media(min-width:640px){ .ufcv-archive__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1024px){ .ufcv-archive__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} }

.ufcv-card--grid .ufcv-card__body{min-height:150px}

/* ── Внутряк: плеер ── */

.ufcv-single__player{margin:0 0 28px;padding:0;border:0}
.ufcv-single__player .tjm-vi-block{margin:0}

.ufcv-single__yt{margin:24px 0 0}
.ufcv-single__yt a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--ufcv-font-head);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--ufcv-red-soft);
  text-decoration:none;
}
.ufcv-single__yt a:hover{color:var(--ufcv-red-hi)}

.ufcv-single__missing{margin:16px 0;color:var(--gray,#888)}

/* ── Мягкий «стеклянный» вариант ──
   Для сайтов с округлым дизайном (Brawl Stars). Включается классом,
   который тема добавляет через фильтр ufcv_section_class. */

.ufcv--glass .ufcv-card{
  background-image:linear-gradient(157deg,rgba(255,255,255,.06),rgba(255,255,255,0) 55%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.ufcv--glass .ufcv-card__badge{border-radius:999px}
.ufcv--glass .ufcv__title{font-style:normal;letter-spacing:0}
.ufcv--glass .ufcv-card__title{text-transform:none;line-height:1.2}

.ufcv__more{border-radius:var(--ufcv-radius)}

/* ── Светлая тема: секция остаётся тёмной (как .hero/.event/.cta) ── */

body.light-theme .ufcv{background:var(--ufcv-bg)}
body.light-theme .ufcv .ufcv-card__title,
body.light-theme .ufcv .ufcv__title{color:var(--ufcv-text)}

/* ── Уважение к prefers-reduced-motion ── */

@media(prefers-reduced-motion:reduce){
  .ufcv-card,
  .ufcv-card__img,
  .ufcv-play,
  .ufcv-card__link,
  .ufcv__more{transition:none}
  .ufcv-card:hover{transform:none}
  .ufcv-card:hover .ufcv-card__img{transform:none}
  .ufcv-card:hover .ufcv-play{transform:translate(-50%,-50%)}
}