/* ТТ ГРУПП — Медиацентр: раздел /video/.
   Цвета — токены темы из :root (_variables.scss, 26.08.2026); ниже — запасные
   значения на случай темы без токенов. Каркас страниц — .tt-blog темы. */

:root {
   --ttg-bg: var(--bg, #222222);
   --ttg-surface: var(--surface, #181c1f);
   --ttg-surface-2: var(--surface-2, #1e2327);
   --ttg-line: var(--line, rgba(240, 240, 240, .10));
   --ttg-text: var(--text, #f0f0f0);
   --ttg-text-2: var(--text-2, #c4c4c4);
   --ttg-muted: var(--text-muted, #9c9c9c);
   --ttg-accent: var(--accent, #2cb5eb);
   --ttg-scrim: rgba(0, 0, 0, .55);
   --ttg-head: clamp(4.625rem, 1.887vw + 4.2rem, 5.875rem);
   --ttg-radius: 4px;
}

/* ---------- чипы, полки, сетки ---------- */

.ttg-chips {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
   margin: 0 0 1.5rem;
}
.ttg-chip {
   display: inline-flex;
   align-items: center;
   gap: .35rem;
   padding: .45rem .85rem;
   border: 1px solid var(--ttg-line);
   border-radius: 999px;
   background: var(--ttg-surface);
   color: var(--ttg-text-2);
   font-size: .875rem;
   line-height: 1;
   text-decoration: none;
   transition: border-color .2s, color .2s, background-color .2s;
}
.ttg-chip:hover { color: var(--ttg-text); border-color: rgba(44, 181, 235, .6); }
.ttg-chip.is-active { background: var(--ttg-accent); border-color: var(--ttg-accent); color: #fff; }
.ttg-chip__n { color: var(--ttg-muted); font-size: .75rem; }
.ttg-chip.is-active .ttg-chip__n { color: rgba(255, 255, 255, .8); }
.ttg-chip--feed { margin-left: auto; border-color: rgba(44, 181, 235, .5); color: var(--ttg-accent); }

.ttg-shelf { margin: 0 0 2.5rem; }
.ttg-shelf__head {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 1rem;
   margin: 0 0 1rem;
}
.ttg-shelf__title { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--ttg-text); }
.ttg-shelf__more { color: var(--ttg-accent); font-size: .875rem; text-decoration: none; white-space: nowrap; }
.ttg-shelf__more:hover { text-decoration: underline; }
.ttg-empty { color: var(--ttg-muted); }

.ttg-grid { display: grid; gap: 1rem; }
.ttg-grid--shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ttg-grid--full { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 720px) {
   .ttg-grid--shorts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .ttg-grid--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
   .ttg-grid--shorts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
   .ttg-grid--full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- карточка ---------- */

.ttg-card {
   background: var(--ttg-surface);
   border: 1px solid var(--ttg-line);
   border-radius: var(--ttg-radius);
   overflow: hidden;
   transition: border-color .2s, transform .2s;
}
.ttg-card:hover { border-color: rgba(44, 181, 235, .6); transform: translateY(-2px); }
.ttg-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.ttg-card__media {
   position: relative;
   display: block;
   overflow: hidden;
   background: #000;
   aspect-ratio: 16 / 9;
}
.ttg-card--vertical .ttg-card__media { aspect-ratio: 9 / 16; }
.ttg-card--square .ttg-card__media { aspect-ratio: 1 / 1; }
.ttg-card__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ttg-card__img--empty { background: var(--ttg-surface-2); }
/* Круг Play — тот же знак, что у видео-отзывов (.video-player__button.play). */
.ttg-card__play,
.ttg-player__circle {
   position: absolute;
   top: 50%;
   left: 50%;
   width: clamp(3rem, 1.132vw + 2.745rem, 4.75rem);
   height: clamp(3rem, 1.132vw + 2.745rem, 4.75rem);
   border-radius: 50%;
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M81 60L49.5 78.1865L49.5 41.8135L81 60Z' fill='%23211F21'/%3E%3C/svg%3E%0A");
   transform: translate(-50%, -50%);
   transition: background-color .2s, transform .2s;
   pointer-events: none;
}
.ttg-card:hover .ttg-card__play,
.ttg-card:focus-within .ttg-card__play { background-color: var(--ttg-accent); transform: translate(-50%, -50%) scale(1.1); }
.ttg-card__dur {
   position: absolute;
   right: .5rem;
   bottom: .5rem;
   padding: .2rem .45rem;
   background: var(--ttg-scrim);
   color: #fff;
   font-size: .8125rem;
   line-height: 1;
   font-variant-numeric: tabular-nums;
   border-radius: 2px;
}
.ttg-card__body { display: flex; flex-direction: column; gap: .25rem; padding: .75rem .85rem .9rem; }
.ttg-card__title { color: var(--ttg-text); font-weight: 600; font-size: .95rem; line-height: 1.3; }
.ttg-card__sub { color: var(--ttg-muted); font-size: .8rem; line-height: 1.35; }

/* ---------- плеер по Play ---------- */

.ttg-player {
   position: relative;
   width: 100%;
   background: #000;
   line-height: 0;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   border-radius: var(--ttg-radius);
}
.ttg-player--vertical { aspect-ratio: 9 / 16; }
.ttg-player--square { aspect-ratio: 1 / 1; }
.ttg-player__poster { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.ttg-player__poster[hidden] { display: none; }
.ttg-player__frame { position: absolute; inset: 0; }
.ttg-player__frame > iframe { display: block; width: 100%; height: 100%; border: 0; }
.ttg-player__start {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   padding: 0;
   border: 0;
   background: transparent;
   cursor: pointer;
}
.ttg-player__start[hidden] { display: none; }
.ttg-player__start:hover .ttg-player__circle,
.ttg-player__start:focus-visible .ttg-player__circle { background-color: var(--ttg-accent); transform: translate(-50%, -50%) scale(1.1); }
.ttg-player__start:focus-visible { outline: 2px solid var(--ttg-accent); outline-offset: -2px; }
.ttg-player__circle { width: clamp(4rem, 5.283vw + 2.811rem, 7.5rem); height: clamp(4rem, 5.283vw + 2.811rem, 7.5rem); }
.ttg-player__error {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   margin: 0;
   padding: .75rem 1rem;
   background: var(--ttg-scrim);
   color: #f55824;
   font-size: .875rem;
   line-height: 1.3;
}
.ttg-player__pagelink {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   padding: .6rem .85rem;
   background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
   color: #fff;
   font-size: .875rem;
   line-height: 1.3;
   text-decoration: none;
}
.ttg-embed { margin: 1.5rem 0; }
.ttg-embed .ttg-player--vertical { max-width: min(24rem, 60vh); margin: 0 auto; }

/* ---------- страница ролика ---------- */

.ttg-single__layout { display: grid; gap: 1.5rem; margin: 0 0 2.5rem; }
@media (min-width: 1024px) {
   .ttg-single--vertical .ttg-single__layout { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; }
   .ttg-single--vertical .ttg-single__player { position: sticky; top: calc(var(--ttg-head) + 1rem); }
}
.ttg-single--vertical .ttg-single__player { max-width: 22rem; width: 100%; margin: 0 auto; }
.ttg-single__title { margin: 0 0 .75rem; font: var(--font-h2, 400 2rem/1.1 inherit); color: var(--ttg-text); }
.ttg-single__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0 0 1rem; color: var(--ttg-muted); font-size: .875rem; }
.ttg-single__lead { color: var(--ttg-text-2); font-size: 1.05rem; line-height: 1.5; margin: 0 0 1rem; }
.ttg-single__lead p:last-child { margin-bottom: 0; }
.ttg-single__feedlink { margin: 0 0 1.5rem; }
.ttg-btn {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   padding: .6rem 1rem;
   border: 1px solid var(--ttg-accent);
   border-radius: var(--ttg-radius);
   background: var(--ttg-accent);
   color: #fff;
   font-size: .9rem;
   text-decoration: none;
   transition: background-color .2s, color .2s;
}
.ttg-btn--ghost { background: transparent; color: var(--ttg-accent); }
.ttg-btn--ghost:hover { background: var(--ttg-accent); color: #fff; }

.ttg-transcript { padding: 1.25rem 1.25rem 1rem; background: var(--ttg-surface); border: 1px solid var(--ttg-line); border-radius: var(--ttg-radius); margin: 0 0 1.5rem; }
.ttg-transcript__title { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 600; color: var(--ttg-text); }
.ttg-transcript__body { color: var(--ttg-text-2); line-height: 1.6; }
.ttg-transcript__body p { margin: 0 0 .75rem; }
.ttg-transcript__times { margin-top: .5rem; color: var(--ttg-muted); font-size: .875rem; }
.ttg-transcript__times summary { cursor: pointer; color: var(--ttg-accent); }
.ttg-transcript__list { margin: .5rem 0 0; padding-left: 0; list-style: none; }
.ttg-transcript__list li { margin: 0 0 .35rem; }
.ttg-transcript__t { display: inline-block; min-width: 3rem; color: var(--ttg-accent); font-variant-numeric: tabular-nums; }
.ttg-single__topics { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }

.ttg-related { margin: 0 0 2.5rem; }
.ttg-related__list { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .5rem; }
.ttg-related__list a { color: var(--ttg-text); text-decoration: none; border-bottom: 1px solid var(--ttg-line); }
.ttg-related__list a:hover { color: var(--ttg-accent); }

.ttg-pagination { margin: 1rem 0 0; }
.ttg-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.ttg-pagination .page-numbers { padding: .45rem .8rem; border: 1px solid var(--ttg-line); border-radius: var(--ttg-radius); color: var(--ttg-text-2); text-decoration: none; }
.ttg-pagination .page-numbers.current { background: var(--ttg-accent); border-color: var(--ttg-accent); color: #fff; }

/* ---------- лента шортсов ---------- */

.ttg-shorts-main { background: var(--ttg-bg); padding-top: var(--ttg-head); min-height: 100vh; }
.ttg-shorts-top {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: .5rem 1.5rem;
   max-width: 1320px;
   margin: 0 auto;
   padding: .75rem clamp(0.75rem, 2vw + 0.4rem, 2rem) .5rem;
}
.ttg-shorts-top .breadcrumbs { width: 100%; margin-bottom: 0; }
.ttg-shorts-top__title { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--ttg-text); }
.ttg-shorts-top__catalog { color: var(--ttg-accent); text-decoration: none; font-size: .875rem; }
.ttg-shorts-lead { max-width: 1320px; margin: 0 auto; padding: 1rem clamp(0.75rem, 2vw + 0.4rem, 2rem); color: var(--ttg-text-2); font-size: .875rem; }

.ttg-shorts {
   height: calc(100dvh - var(--ttg-head) - 3.5rem);
   height: calc(100vh - var(--ttg-head) - 3.5rem);
   overflow-y: auto;
   scroll-snap-type: y mandatory;
   overscroll-behavior-y: contain;
   scrollbar-width: none;
   outline: none;
}
@supports (height: 100dvh) {
   .ttg-shorts { height: calc(100dvh - var(--ttg-head) - 3.5rem); }
}
.ttg-shorts::-webkit-scrollbar { display: none; }
.ttg-shorts__item {
   position: relative;
   height: 100%;
   scroll-snap-align: start;
   scroll-snap-stop: always;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1.5rem;
   padding: .25rem 0 .75rem;
   box-sizing: border-box;
}
.ttg-shorts__stage {
   position: relative;
   height: 100%;
   aspect-ratio: 9 / 16;
   max-width: 100%;
}
.ttg-shorts__stage .ttg-player { height: 100%; width: auto; aspect-ratio: 9 / 16; border-radius: 12px; }
.ttg-shorts__info {
   display: none;
   max-width: 20rem;
   color: var(--ttg-text-2);
   font-size: .9rem;
   line-height: 1.45;
}
.ttg-shorts__title { display: block; margin: 0 0 .35rem; color: var(--ttg-text); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.ttg-shorts__sub { margin: 0 0 .75rem; color: var(--ttg-muted); }
.ttg-shorts__desc { margin: 0 0 .75rem; }
.ttg-shorts__page { color: var(--ttg-accent); text-decoration: none; font-size: .875rem; }
@media (min-width: 1024px) {
   .ttg-shorts__info { display: block; }
}
/* На телефоне подпись — поверх нижнего края кадра, как в приложениях. */
@media (max-width: 1023.98px) {
   .ttg-shorts__info {
      display: block;
      position: absolute;
      left: 50%;
      bottom: 1rem;
      transform: translateX(-50%);
      width: min(100%, calc((100dvh - var(--ttg-head) - 4.5rem) * 9 / 16));
      width: min(100%, calc((100vh - var(--ttg-head) - 4.5rem) * 9 / 16));
      padding: 2.5rem .85rem .85rem;
      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
      border-radius: 0 0 12px 12px;
      pointer-events: none;
      max-width: none;
   }
   .ttg-shorts__info a { pointer-events: auto; }
   .ttg-shorts__desc { display: none; }
   .ttg-shorts__stage .ttg-player { border-radius: 12px; }
}
.ttg-shorts__item--next { align-items: center; }
.ttg-shorts__nextwrap a { color: var(--ttg-accent); font-size: 1.1rem; text-decoration: none; }
.ttg-shorts__nav {
   position: fixed;
   right: 1rem;
   bottom: 1.5rem;
   display: none;
   flex-direction: column;
   gap: .5rem;
}
@media (min-width: 1024px) { .ttg-shorts__nav { display: flex; } }
.ttg-shorts__btn {
   width: 2.75rem;
   height: 2.75rem;
   border: 1px solid var(--ttg-line);
   border-radius: 50%;
   background: var(--ttg-surface);
   color: var(--ttg-text);
   font-size: 1.1rem;
   cursor: pointer;
}
.ttg-shorts__btn:hover { border-color: var(--ttg-accent); color: var(--ttg-accent); }