/* ОБЪЕКТ — блок «Видео» (objv-*): сетка видеокарточек, каналы, «Загрузить ещё», «Смотреть все видео».
   Изолирован от main.css: селекторы из двух классов (.objv .objv-x). Раскладка — от ширины места вставки
   (container queries; пороги чуть ниже 768/1200 — ширина блока меньше экрана на полосу прокрутки):
     до 767px — одна колонка, широкое превью 3:1, низ блока по центру, кнопки на всю ширину;
     768–1199px — две колонки, шапка в столбик;
     от 1200px — четыре колонки, шапка в две колонки, низ блока в одну строку.
   Ролик открывается в общей модалке objv-modal (objekt-video-modal.css/js).
   main.css гасит рамку фокуса у всего (* { outline: none !important }) — поэтому у :focus-visible здесь !important. */

.objv,
.objv *,
.objv *::before,
.objv *::after{box-sizing:border-box;}

.objv{
  container:objv / inline-size;
  background:var(--objekt-color-bg);
  color:var(--objekt-color-cream);
  font-family:var(--objekt-font-body);
  padding:var(--objekt-section-py-cq) 0;
  margin:0;
  --objv-ease:cubic-bezier(.2,.7,.2,1);
}
.objv .objv-wrap{padding:0 16px;}
.objv p{margin:0;padding:0;}
.objv button{font-family:inherit;margin:0;box-shadow:none;-webkit-appearance:none;appearance:none;text-transform:none;letter-spacing:normal;}

/* ---------- шапка ---------- */
.objv .objv-eyebrow{
  display:flex;align-items:center;gap:16px;
  font-size:var(--objekt-fs-caption);
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--objekt-color-accent);
  margin:0 0 16px;
}
.objv .objv-eyebrow span{flex-shrink:0;}
/* линия справа от эйдброу — как во всех obj*-блоках сайта, на телефоне тоже */
.objv .objv-eyebrow i{display:block;flex:1 1 auto;max-width:560px;height:1px;background:var(--objekt-color-line-strong);}
.objv .objv-title{
  font-family:var(--objekt-font-heading);
  font-weight:500;
  font-size:clamp(30px, 8.5cqw, 40px);
  line-height:1.06;
  letter-spacing:var(--objekt-tracking-heading);
  margin:0;
}
.objv .objv-title span{display:block;}
.objv .objv-title__l1{color:var(--objekt-color-cream);}
.objv .objv-title__l2{color:var(--objekt-color-accent);}
.objv .objv-desc{
  margin-top:14px;
  max-width:480px;
  font-size:15px;
  line-height:1.55;
  color:rgba(245,242,237,0.72);
}
/* на телефоне своё короткое описание (если заполнено) */
.objv .objv-desc--mobile{display:none;}
.objv .objv-head--split .objv-desc--mobile,
.objv .objv-desc--only{display:block;}
.objv .objv-head--split .objv-desc--full{display:none;}

/* ---------- сетка и карточка ---------- */
.objv .objv-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:16px;
  margin-top:24px;
}
.objv .objv-card{
  display:flex;flex-direction:column;
  width:100%;min-width:0;
  padding:0;
  border:1px solid rgba(245,242,237,0.08);
  border-radius:var(--objekt-radius-media);
  background:#211F1F;
  color:var(--objekt-color-cream);
  text-align:left;
  overflow:hidden;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .3s ease;
}
.objv .objv-card:focus{outline:none;}
.objv .objv-card:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:3px;}

/* превью: на телефоне широкое 3:1, дальше 6:5 */
.objv .objv-card__media{position:relative;display:block;aspect-ratio:3 / 1;overflow:hidden;background:#151313;}
/* при наведении превью растёт размером слоя (inset), а не transform: scale — без мыла на время анимации */
.objv .objv-card__zoom{position:absolute;inset:0;display:block;transition:inset .6s var(--objv-ease);}
.objv .objv-card__zoom picture{display:block;width:100%;height:100%;}
.objv .objv-card__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  max-width:none;
  object-fit:cover;
  display:block;margin:0;border-radius:0;
}
.objv .objv-card__play{
  position:absolute;left:50%;top:50%;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:clamp(52px, 13cqw, 60px);height:clamp(52px, 13cqw, 60px);
  margin:calc(clamp(52px, 13cqw, 60px) / -2) 0 0 calc(clamp(52px, 13cqw, 60px) / -2);
  border:1.5px solid rgba(245,242,237,0.85);
  border-radius:50%;
  background:rgba(20,18,18,0.5);
  color:#fff;
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
.objv .objv-card__play svg{width:42%;height:42%;margin-left:6%;}
.objv .objv-card__time{
  position:absolute;right:10px;bottom:10px;z-index:1;
  padding:4px 10px;
  border-radius:6px;
  background:rgba(20,18,18,0.72);
  color:#fff;
  font-size:14px;
  line-height:1.3;
  font-variant-numeric:tabular-nums;
}

.objv .objv-card__body{display:block;padding:14px 18px 16px;}
.objv .objv-card__cat{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  line-height:1.4;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--objekt-color-accent);
}
.objv .objv-card__row{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.objv .objv-card__title{
  flex:1;min-width:0;
  font-family:var(--objekt-font-heading);
  font-weight:500;
  font-size:clamp(17px, 5.2cqw, 21px);
  line-height:1.3;
  color:var(--objekt-color-cream);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.objv .objv-card__arrow{flex-shrink:0;display:flex;width:28px;height:16px;color:var(--objekt-color-accent);transition:transform .3s var(--objv-ease);}
.objv .objv-card__arrow svg{width:100%;height:100%;}

/* на телефоне и планшете сразу видна только часть первой пачки, остальное открывает «Загрузить ещё» */
.objv .objv-card--more:not(.is-shown){display:none;}

/* догруженные карточки появляются мягко, по очереди */
.objv .objv-card.is-new{opacity:0;transform:translateY(16px);}
.objv .objv-card.is-new.is-in{opacity:1;transform:none;transition:opacity .4s ease, transform .4s ease, border-color .3s ease;transition-delay:var(--objv-delay, 0ms);}

/* ---------- низ блока ---------- */
.objv .objv-foot{
  display:flex;flex-direction:column;align-items:stretch;gap:20px;
  margin-top:28px;
}
.objv .objv-channels{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.objv .objv-channels__logos{display:flex;align-items:center;gap:16px;}
.objv .objv-channel{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--objekt-color-cream);
  font-size:17px;
  line-height:1;
  text-decoration:none;
  transition:color .2s;
}
.objv .objv-channel:hover,
.objv .objv-channel:focus,
.objv .objv-channel:visited{color:var(--objekt-color-cream);text-decoration:none;}
.objv .objv-channel:hover{color:var(--objekt-color-accent);}
.objv .objv-channel:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:4px;}
/* обе площадки в одном стиле: значок акцентный, подпись кремовая, при наведении подпись акцентная */
.objv .objv-logo{display:block;color:var(--objekt-color-accent);}
.objv .objv-logo--yt{width:34px;height:24px;}
.objv .objv-logo--rt{width:20px;height:22px;}
.objv .objv-channels__sep{display:block;width:1px;height:30px;background:rgba(245,242,237,0.3);}
.objv .objv-channels__subs{font-size:14px;color:rgba(245,242,237,0.6);}
.objv .objv-foot__line{display:none;}

.objv .objv-foot__actions{display:flex;flex-direction:column;align-items:stretch;gap:14px;}
.objv .objv-more-wrap{display:flex;flex-direction:column;align-items:stretch;gap:8px;}
.objv .objv-more-wrap[hidden]{display:none;}
.objv .objv-more{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:14px;
  min-height:54px;
  padding:0 32px;
  border:0;border-radius:0;
  background:var(--objekt-color-accent);
  color:var(--objekt-color-bg);
  font-size:var(--objekt-fs-button);
  font-weight:500;
  cursor:pointer;
  transition:background-color .2s, opacity .2s;
}
.objv .objv-more:hover{background:var(--objekt-color-accent-hover);}
.objv .objv-more:focus-visible{outline:2px solid var(--objekt-color-cream) !important;outline-offset:3px;}
.objv .objv-more:disabled{cursor:progress;opacity:.85;}
.objv .objv-more__icon{position:relative;display:flex;width:20px;height:20px;}
.objv .objv-more__icon svg{width:100%;height:100%;}
.objv .objv-spinner{
  position:absolute;inset:1px;
  display:none;
  border:2px solid rgba(28,26,26,0.25);
  border-top-color:var(--objekt-color-bg);
  border-radius:50%;
  animation:objvSpin .8s linear infinite;
}
.objv .objv-more.is-loading .objv-more__icon svg{display:none;}
.objv .objv-more.is-loading .objv-spinner{display:block;}
@keyframes objvSpin{to{transform:rotate(360deg);}}
.objv .objv-more__note{text-align:center;font-size:14px;color:rgba(245,242,237,0.6);}

.objv .objv-all{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:24px;
  min-height:54px;
  padding:0 32px;
  border:1px solid var(--objekt-color-accent);
  color:var(--objekt-color-accent);
  font-size:var(--objekt-fs-button);
  text-decoration:none;
  transition:background-color .2s, color .2s;
}
.objv .objv-all:hover,
.objv .objv-all:focus,
.objv .objv-all:visited{color:var(--objekt-color-accent);text-decoration:none;}
.objv .objv-all:hover{background:rgba(169,150,125,0.12);}
.objv .objv-all:focus-visible{outline:2px solid var(--objekt-color-cream) !important;outline-offset:3px;}
.objv .objv-all svg{width:28px;height:16px;flex-shrink:0;transition:transform .3s var(--objv-ease);}
.objv .objv-all:hover svg{transform:translateX(4px);}
/* на телефоне: текст по центру, стрелка у правого края */
.objv .objv-all svg{position:absolute;right:24px;top:50%;margin-top:-8px;}

@container objv (min-width: 390px){
  .objv .objv-wrap{padding:0 20px;}
}

/* ---------- 768+: две колонки ---------- */
@container objv (min-width: 750px){
  .objv .objv-wrap{padding:0 32px;}
  .objv .objv-eyebrow{font-size:var(--objekt-fs-meta);letter-spacing:0.3em;gap:24px;margin-bottom:20px;}
  .objv .objv-title{font-size:clamp(34px, 5.4cqw, 56px);}
  .objv .objv-desc{font-size:16px;margin-top:18px;}
  .objv .objv-head--split .objv-desc--mobile{display:none;}
  .objv .objv-head--split .objv-desc--full{display:block;}
  .objv .objv-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:clamp(12px, 1.2cqw, 22px);margin-top:36px;}
  .objv .objv-card__media{aspect-ratio:6 / 5;}
  .objv .objv-card__play{
    width:clamp(52px, 4.4cqw, 76px);height:clamp(52px, 4.4cqw, 76px);
    margin:calc(clamp(52px, 4.4cqw, 76px) / -2) 0 0 calc(clamp(52px, 4.4cqw, 76px) / -2);
  }
  .objv .objv-card__time{right:12px;bottom:12px;font-size:15px;}
  .objv .objv-card__body{padding:clamp(18px, 1.7cqw, 28px);}
  .objv .objv-card__cat{margin-bottom:10px;}
  .objv .objv-card__title{font-size:clamp(17px, 2.4cqw, 23px);}

  .objv .objv-foot{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:24px;margin-top:clamp(32px, 2.8cqw, 48px);}
  .objv .objv-channels{align-items:flex-start;text-align:left;padding-top:10px;}
  .objv .objv-foot__actions{flex-direction:row;align-items:flex-start;gap:clamp(16px, 1.6cqw, 28px);}
  .objv .objv-more{padding:0 clamp(28px, 2.6cqw, 48px);}
  .objv .objv-all svg{position:static;margin:0;}
}

/* ---------- 1200+: четыре колонки, шапка в две колонки, низ одной строкой ---------- */
@container objv (min-width: 1180px){
  .objv .objv-head{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 480px);column-gap:clamp(32px, 4cqw, 80px);align-items:start;}
  .objv .objv-desc{margin-top:0;padding-top:clamp(52px, 4cqw, 64px);}
  .objv .objv-title{font-size:clamp(34px, 3.8cqw, 68px);}
  .objv .objv-grid{grid-template-columns:repeat(4, minmax(0, 1fr));}
  /* на компьютере первая пачка видна целиком (по умолчанию 8 роликов) */
  .objv .objv-card--more:not(.is-shown){display:flex;}
  /* колонки уже, чем в макете (общая сетка сайта 81.77%) — поля и кегль чуть меньше, чтобы название влезало в 2 строки */
  .objv .objv-card__body{padding:clamp(16px, 1.3cqw, 26px) clamp(16px, 1.3cqw, 26px) clamp(18px, 1.4cqw, 28px);}
  .objv .objv-card__row{gap:12px;}
  .objv .objv-card__title{font-size:clamp(17px, 1.2cqw, 22px);}
  .objv .objv-foot{align-items:center;}
  .objv .objv-channels{padding-top:0;}
  .objv .objv-foot__line{display:block;flex:1 1 auto;min-width:40px;height:1px;background:rgba(245,242,237,0.15);}
  .objv .objv-more-wrap{position:relative;}
  /* подпись «Ещё N роликов» под кнопкой не сдвигает строку: кнопки выровнены по центру с логотипами */
  .objv .objv-more__note{position:absolute;left:0;right:0;top:calc(100% + 8px);}
}
@container objv (min-width: 1200px){
  .objv .objv-wrap{width:min(81.77083cqw, 1600px);margin:0 auto;padding:0;}
}
/* ноутбуки 1200–1440: четыре колонки совсем узкие — названию можно 3 строки, чтобы не обрезалось */
@container objv (min-width: 1180px) and (max-width: 1439px){
  .objv .objv-card__title{-webkit-line-clamp:3;}
}

/* ---------- мышь: наведение на карточку ---------- */
@media (hover: hover) and (pointer: fine){
  .objv .objv-card:hover{border-color:rgba(169,150,125,0.35);}
  .objv .objv-card:hover .objv-card__zoom{inset:-2%;}
  .objv .objv-card:hover .objv-card__play{background:var(--objekt-color-accent);border-color:var(--objekt-color-accent);color:var(--objekt-color-bg);}
  .objv .objv-card:hover .objv-card__arrow{transform:translateX(6px);}
}
/* клавиатура — то же состояние */
.objv .objv-card:focus-visible{border-color:rgba(169,150,125,0.35);}
.objv .objv-card:focus-visible .objv-card__play{background:var(--objekt-color-accent);border-color:var(--objekt-color-accent);color:var(--objekt-color-bg);}
.objv .objv-card:focus-visible .objv-card__arrow{transform:translateX(6px);}

@media (prefers-reduced-motion: reduce){
  .objv .objv-card,
  .objv .objv-card__zoom,
  .objv .objv-card__play,
  .objv .objv-card__arrow,
  .objv .objv-all svg{transition:none;}
  .objv .objv-card:hover .objv-card__zoom{inset:0;}
  .objv .objv-card.is-new{opacity:1;transform:none;}
  .objv .objv-spinner{animation-duration:2s;}
}

/* ---------- режим «один ролик» (layout="single"): превью 16:9 по центру, на всю ширину контейнера,
   но не выше экрана (ширина ограничена высотой окна: ролик целиком виден под шапкой) ---------- */
.objv--single .objv-single{margin:24px auto 0;width:min(100%, max(640px, calc((100svh - 260px) * 16 / 9)));max-width:none;}
.objv--single .objv-single__card{border-radius:2px;}
.objv--single .objv-single__card .objv-card__media,
.objv--single .objv-single__card .objv-card__media{aspect-ratio:16 / 9;}
.objv--single .objv-single__card .objv-card__play{
  width:clamp(60px, 7cqw, 96px);height:clamp(60px, 7cqw, 96px);
  margin:calc(clamp(60px, 7cqw, 96px) / -2) 0 0 calc(clamp(60px, 7cqw, 96px) / -2);
}
.objv--single .objv-single__caption{margin-top:14px;font-size:clamp(15px, 1vw, 18px);line-height:1.5;color:rgba(245,242,237,0.7);}
@container objv (min-width: 590px){
  .objv--single .objv-single{margin-top:32px;}
  .objv--single .objv-single__card .objv-card__media{aspect-ratio:16 / 9;}
}

/* ---------- фильтры, «Где смотреть», пустая тема (параметры filters / source_switch) ---------- */
.objv .objv-filters{margin-bottom:clamp(24px, 2.4cqw, 40px);}
.objv .objv-switch{margin-top:20px;}
.objv .objv-empty{margin-top:24px;font-size:15px;color:rgba(245,242,237,0.6);}
.objv .objv-empty[hidden]{display:none;}
@container objv (min-width: 1180px){
  .objv .objv-head--switch .objv-switch{grid-column:1 / -1;margin-top:24px;}
}

/* ---------- без каналов (show_channels="0"): внизу только «Загрузить ещё» по центру ---------- */
.objv--no-channels .objv-foot{align-items:center;}
.objv--no-channels .objv-foot__actions{align-items:center;}
.objv--no-channels .objv-more-wrap{align-items:center;}
@container objv (min-width: 750px){
  .objv--no-channels .objv-foot{justify-content:center;}
  .objv--no-channels .objv-foot__actions{flex-direction:column;align-items:center;}
}
@container objv (min-width: 1180px){
  .objv--no-channels .objv-more-wrap{position:static;}
  .objv--no-channels .objv-more__note{position:static;}
}

/* ---------- columns="3": три колонки на компьютере ---------- */
@container objv (min-width: 1180px){
  .objv--cols-3 .objv-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

/* ---------- columns="2" (страница «Видео»): крупное превью 16:9, под ним название и стрелка, без метки плейлиста.
   Телефон — одна колонка, от 600px — две; первая пачка целиком видна с 1024px ---------- */
.objv--cols-2 .objv-grid{row-gap:clamp(22px, 2.2cqw, 32px);}
.objv--cols-2 .objv-card{border:0;border-radius:0;background:transparent;overflow:visible;}
.objv--cols-2 .objv-card__media{aspect-ratio:16 / 9;border-radius:var(--objekt-radius-media);}
.objv--cols-2 .objv-card__cat{display:none;}
.objv--cols-2 .objv-card__body{padding:12px 0 0;}
.objv--cols-2 .objv-card__row{align-items:flex-start;}
.objv--cols-2 .objv-card__title{font-size:clamp(17px, 1.15vw, 22px);line-height:1.3;}
.objv--cols-2 .objv-card__arrow{margin-top:.35em;}
@container objv (min-width: 590px){
  .objv--cols-2 .objv-grid{grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:clamp(14px, 1.6cqw, 24px);}
}
@container objv (min-width: 750px){
  .objv--cols-2 .objv-card__media{aspect-ratio:16 / 9;}
  .objv--cols-2 .objv-card__body{padding:14px 0 0;}
  .objv--cols-2 .objv-card__title{font-size:clamp(17px, 1.15vw, 22px);}
}
@container objv (min-width: 1000px){
  .objv--cols-2 .objv-card--more:not(.is-shown){display:flex;}
}
@container objv (min-width: 1180px){
  .objv--cols-2 .objv-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .objv--cols-2 .objv-card__body{padding:16px 0 0;}
  .objv--cols-2 .objv-card__title{-webkit-line-clamp:2;}
}

/* ---------- один ролик с текстом слева (layout="single" text_side="left"): «Видеообращение» на «О компании» ---------- */
.objv--side .objv-wrap{display:flex;flex-direction:column;}
.objv--side .objv-single{order:-1;margin:0 0 24px;width:100%;}   /* телефон: превью сверху, текст под ним */
.objv--side .objv-single__caption{display:none;}
.objv--side .objv-head{margin:0;}
.objv--side .objv-side__sub{margin:14px 0 0;max-width:30em;font-size:clamp(15px, 1.05vw, 19px);line-height:1.55;color:rgba(245,242,237,0.75);}
@container objv (min-width: 860px){
  .objv--side .objv-wrap{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);column-gap:clamp(32px, 4cqw, 80px);align-items:center;}
  .objv--side .objv-single{order:0;margin:0;}
  .objv--side .objv-head{display:block;}
}
.objv--side .objv-title{font-size:clamp(30px, 2.6vw, 52px);line-height:1.1;}