/* Оформление перенесено с moodle3.de: та же палитра, шрифты и приёмы —
   бумажный фон, жёсткие тени без размытия, толстые линии, uppercase-навигация.
   Имена переменных сохранены (--op-*), чтобы правки ходили между проектами. */
:root{
  --op-accent:#e8492a; --op-accent2:#111111;
  --op-paper:#f3f2ee; --op-card:#fff; --op-card2:#fbfaf7;
  --op-ink:#121212; --op-muted:#4f4f4f; --op-line:rgba(0,0,0,.14);
  --op-rad:6px; --op-gap:23px;
  --op-head:'Archivo',Arial,sans-serif; --op-body:'Archivo',Arial,sans-serif;
  --op-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --op-live:#1f9d55;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--op-paper);color:var(--op-ink);font:16px/1.6 var(--op-body);font-weight:500;overflow-x:hidden}
h1,h2,h3{font-family:var(--op-head);letter-spacing:-.02em;margin:0 0 10px}
a{color:inherit}
.op-wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}

.op-head{border-bottom:3px solid var(--op-ink);background:var(--op-paper);position:sticky;top:0;z-index:20}
.op-head .op-wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.op-logo-txt{font:800 20px/1 var(--op-head);letter-spacing:-.04em;text-decoration:none}
.op-logo-txt em{font-style:normal;color:var(--op-accent)}
.op-nav{margin-left:auto;display:flex;gap:2px}
.op-nav a{padding:8px 12px;text-decoration:none;font:600 13px/1 var(--op-body);letter-spacing:.06em;text-transform:uppercase;border-radius:var(--op-rad)}
.op-nav a:hover{background:rgba(127,127,127,.12)}

.op-hero{border-bottom:3px solid var(--op-ink);padding:34px 0 30px}
.op-hero h1{font-size:clamp(30px,5vw,56px);max-width:18ch;margin-bottom:14px}
.op-hero h1 em{font-style:normal;color:var(--op-accent)}
.op-eyebrow{font:600 11px/1 var(--op-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--op-muted);margin:0 0 16px}
.op-lead{max-width:72ch;color:var(--op-muted);margin:0}
.op-meta{font:500 12px/1.4 var(--op-mono);color:var(--op-muted)}

.op-sec{padding:34px 0;border-bottom:1px solid var(--op-line)}
.op-sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.op-sec-head h2{font-size:22px;text-transform:uppercase;letter-spacing:.02em;margin:0}
.op-sec-head a{margin-left:auto;font:600 12px/1 var(--op-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--op-muted);text-decoration:none}

.op-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border:2px solid var(--op-ink);border-radius:var(--op-rad);background:var(--op-accent);color:#fff;font:700 14px/1 var(--op-body);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;box-shadow:4px 4px 0 var(--op-ink);transition:.12s}
.op-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--op-ink)}
.op-btn.ghost{background:var(--op-card);color:var(--op-ink)}

/* Карточки эфира и видео — та же «бумажная» геометрия, что у блоков рейтинга на moodle3. */
.op-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:var(--op-gap)}
.op-card{background:var(--op-card);border:2px solid var(--op-ink);border-radius:var(--op-rad);box-shadow:4px 4px 0 var(--op-ink);overflow:hidden;display:flex;flex-direction:column}
.op-card:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--op-ink)}
.op-card{transition:.12s}
.op-thumb{display:block;position:relative;aspect-ratio:16/9;background:#111;border-bottom:2px solid var(--op-ink)}
.op-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.op-card-body{padding:12px 14px}
.op-card h3{font-size:15px;line-height:1.3;margin:0 0 6px}
.op-card h3 a{text-decoration:none}
.op-tag{position:absolute;left:8px;top:8px;font:700 10px/1 var(--op-mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 7px;border:2px solid var(--op-ink);border-radius:4px;background:#fff}
.op-tag.live{background:var(--op-live);color:#fff}
.op-tag.mult{left:auto;right:8px;top:auto;bottom:8px;background:var(--op-accent);color:#fff}

/* Плеер-фасад: до клика только превью, iframe подставляется по нажатию. */
.op-player{position:relative;aspect-ratio:16/9;background:#111;border:2px solid var(--op-ink);border-radius:var(--op-rad);box-shadow:5px 5px 0 var(--op-ink);overflow:hidden}
.op-player img,.op-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
/* Нет кадра трансляции — показываем аватар канала как опознавательный знак,
   а не растягиваем квадрат на всю ширину. */
.op-player img.avatar{width:34%;max-width:190px;height:auto;aspect-ratio:1;inset:0;margin:auto;border-radius:50%;border:2px solid var(--op-ink);box-shadow:4px 4px 0 var(--op-ink)}
.op-player button{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;border:2px solid var(--op-ink);background:var(--op-accent);color:#fff;font-size:24px;cursor:pointer;box-shadow:4px 4px 0 var(--op-ink)}
.op-player button:hover{transform:translate(-1px,-1px)}
.op-player .src{position:absolute;left:10px;bottom:10px;font:600 11px/1 var(--op-mono);background:#fff;border:2px solid var(--op-ink);padding:4px 7px;border-radius:4px}
.op-player .src a{text-decoration:none}

.op-air{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(250px,1fr);gap:var(--op-gap);align-items:start}
.op-air-list{display:grid;gap:10px;max-height:520px;overflow:auto}
.op-air-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--op-card2);border:1px solid var(--op-line);border-radius:var(--op-rad);padding:9px 11px;text-decoration:none}
.op-air-item.on{border:2px solid var(--op-accent)}
.op-air-item b{font-size:14px}
.op-air-item small{display:block;font:500 11px/1.3 var(--op-mono);color:var(--op-muted)}
.op-air-sep{margin:14px 0 2px;font:600 10px/1 var(--op-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--op-muted)}
.op-air-find{display:block;margin-top:4px;font:600 9px/1 var(--op-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--op-muted);border:1px solid var(--op-line);border-radius:3px;padding:3px 4px;text-align:center}
.op-dot{width:9px;height:9px;border-radius:50%;background:#bbb}
.op-dot.on{background:var(--op-live)}

.op-facts{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0 0 14px;font:500 14px/1.5 var(--op-body)}
.op-facts dt{font-family:var(--op-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--op-muted)}
.op-facts dd{margin:0}
.op-unknown{color:#8d8d8d}
.op-warn{font:600 12px/1.5 var(--op-mono);color:var(--op-accent);margin:0 0 12px}
.op-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr);gap:26px;padding-top:26px}
.op-list{list-style:none;padding:0;display:grid;gap:10px}
.op-list li{background:var(--op-card);border:2px solid var(--op-ink);border-radius:var(--op-rad);box-shadow:4px 4px 0 var(--op-ink);padding:11px 14px;display:flex;justify-content:space-between}
.op-list a{text-decoration:none;font-weight:700}
.op-empty{color:var(--op-muted);padding:34px 0;font-family:var(--op-mono);font-size:13px}
.op-crumbs{font:500 11px/1 var(--op-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--op-muted);padding:18px 0 0}
.op-foot{border-top:3px solid var(--op-ink);margin-top:30px;padding:22px 0 40px;font:500 12px/1.6 var(--op-mono);color:var(--op-muted)}
.op-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px}
.op-foot nav a{text-decoration:none;font-weight:700;color:var(--op-ink)}
@media(max-width:860px){.op-air,.op-cols{grid-template-columns:1fr}}