/* ============================================================
   TV-расписание — финальная версия
   Синяя фирменная схема (как график собраний, [tv_board]),
   читаемость с 3-5 метров
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #1a0c48;
    font-family: 'Golos Text', system-ui, sans-serif;
    color: #fff;
}

/* ─── Общая обёртка ───────────────────────────────────────── */

.tv {
    width: 100vw;
    height: 100vh;
    display: flex;
    overflow: hidden;
    /* Фон задан прямо здесь, а не только на html/body — некоторые шаблоны
       страниц (например page-tv.php) прописывают свой инлайновый <style>
       с фоном ПОСЛЕ wp_head(), и он перебивает фон на html/body той же
       специфичностью. На самом .tv так не перебьёт. */
    background: #1a0c48;
}

/* ─── Боковая панель ──────────────────────────────────────── */

.tv__sidebar {
    width: 130px;
    flex-shrink: 0;
    background: #2a1868;
    display: flex;
    flex-direction: column;
}

.tv__sidebar--right { order: 2; }
.tv__sidebar--left  { order: 0; }

.tv__main { order: 1; }

.tv__sidebar-top {
    padding: 32px 18px 24px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* flex gap — не через свойство gap (старые встроенные браузеры телевизоров
   его не знают), а через margin на всех детях, кроме первого. */
.tv__sidebar-top > * {
    margin-top: 8px;
}

.tv__sidebar-top > *:first-child {
    margin-top: 0;
}

.tv__sidebar-clock {
    font-size: 38px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
    line-height: 1;
    text-align: center;
}

.tv__sidebar-date {
    font-size: 15px;
    color: rgba(255,255,255,.7);
    text-align: center;
    line-height: 1.5;
}

.tv__sidebar-bot {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px 18px;
}

.tv__sidebar-course {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    text-align: center;
    line-height: 1.6;
}

.tv__sidebar-weekday {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.tv__sidebar-course-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,.15);
    padding: 20px 10px;
}

.tv__sidebar-course-num {
    font-size: 48px;
    font-weight: 900;
    color: rgba(255,255,255,.7);
    line-height: 1;
    letter-spacing: -.04em;
}

.tv__sidebar-course-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-top: 4px;
}

/* ─── Основная область ────────────────────────────────────── */

.tv__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ─── Сетка карточек ──────────────────────────────────────── */

.tv__slider {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.tv__track {
    padding: 7px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    /* Прокрутку теперь двигает JS напрямую через transform (см. tv.js) —
       без CSS-переменных и @keyframes, чтобы работало и на старых
       встроенных браузерах телевизоров (например Samsung S6), которые
       CSS-переменные могут тихо игнорировать. */
}

/* Сетка карточек — раньше была через CSS Grid (grid-template-columns + gap),
   но на старом встроенном браузере Samsung S6 (WebKit без поддержки Grid,
   она появилась в вебките только в 2017) это тихо игнорировалось: все
   карточки просто схлопывались в одну колонку без отступов ("всё слилось").
   Flexbox + ширина в процентах через calc() работает и на старых движках. */
.tv__track > .tv__group {
    width: calc(33.333% - 10px);
    margin: 5px;
}

/* ─── Прогресс ────────────────────────────────────────────── */
/* Сидит прямо на синем фоне страницы, не на белой карточке —
   поэтому светлая, а не тёмная, шкала. */

.tv__progress {
    flex-shrink: 0;
    height: 4px;
    background: rgba(255,255,255,.15);
    position: relative;
}

.tv__progress-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: #fff;
    width: 0%;
    transition: width .4s linear;
}

/* ─── Карточка группы ─────────────────────────────────────── */

.tv__group {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.tv__group-name {
    padding: 12px 16px;
    font-size: 22px;
    font-weight: 800;
    color: #1a0c48;
    border-bottom: 2px solid #1a0c48;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.01em;
    background: #fff;
}

/* ─── Строка пары ─────────────────────────────────────────── */

.tv__row {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
}

.tv__row:last-child { border-bottom: none; }

.tv__row-num-col {
    width: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(26,12,72,.08);
    background: rgba(26,12,72,.04);
}

.tv__row-num {
    font-size: 32px;
    font-weight: 900;
    color: #1a0c48;
    line-height: 1;
    letter-spacing: -.03em;
}

.tv__row-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
}

.tv__row-body > * {
    margin-top: 3px;
}

.tv__row-body > *:first-child {
    margin-top: 0;
}

.tv__row-time {
    font-size: 15px;
    font-weight: 700;
    color: #bbb;
    letter-spacing: .04em;
}

/* Бегущая строка */
.tv__marquee-wrap {
    overflow: hidden;
    white-space: nowrap;
}

.tv__row-disc {
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    color: #1a0c48;
    white-space: nowrap;
    line-height: 1.25;
}

.tv__row-teacher {
    display: inline-block;
    font-size: 17px;
    color: #555;
    font-style: italic;
    white-space: nowrap;
}

/* Аудитория — синий тег */
.tv__row-room-wrap {
    display: flex;
    align-items: flex-start;
}

.tv__row-room {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #1a0c48;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: normal;
    word-break: break-word;
    letter-spacing: .01em;
    line-height: 1.35;
}

/* Бегущая строка теперь тоже двигается через transform из tv.js напрямую —
   без CSS-переменных/@keyframes, см. комментарий у .tv__track выше. */

/* ─── Горизонтальный режим (1920×1080) ────────────────────── */

.tv--horizontal {
    overflow: hidden;
}

.tv--horizontal .tv__main {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tv--horizontal .tv__slider {
    display: flex;
    flex: 1;
    min-height: 0;
    width: 100%;
    will-change: transform;
    transition: transform .7s cubic-bezier(.4, 0, .2, 1);
    overflow: visible;
}

/* Слайд — колонка: заголовок курса сверху (не скроллится), под ним —
   область с карточками, которая уже сама умеет прокручиваться, если
   карточки не влезли (см. .tv__slide-viewport и tv.js: primeSlide). */
.tv__slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    min-height: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Сидит прямо на синем фоне страницы (не на карточке) — светлый текст. */
.tv__slide-label {
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255,255,255,.3);
    margin-bottom: 2px;
}

.tv__slide-viewport {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* Внутри горизонтального курса карточки в 4 колонки (во весь экран),
   а не в 3, как в одиночной вертикальной панели курса. */
.tv__slide-viewport .tv__track > .tv__group {
    width: calc(25% - 10px);
}

.tv__dots {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    background: #2a1868;
}

.tv__dot {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    transition: background .3s, transform .3s;
}

.tv__dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

/* ─── Пустой экран — сидит прямо на синем фоне ─────────────── */

.tv-empty {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 28px;
    color: rgba(255,255,255,.6);
    font-weight: 300;
    text-align: center;
}

.tv-empty i {
    margin-bottom: 16px;
    font-size: 52px;
    color: rgba(255,255,255,.35);
}