/* DC-Lab Redesign — Block «В прямом эфире» (broadcast control-room, glass event cards)
   Hidden selling message: live REC dot + «смотрят сейчас» counters = школа активна 26 лет,
   студенты реальны, эфир идёт прямо сейчас — заходи бесплатно ДО оплаты. */
.live{position:relative;overflow:hidden;color:#eaf0f7;
  --rec:#ff3b3b;
  padding:clamp(72px,8vw,124px) 0 clamp(80px,9vw,134px);
  background:linear-gradient(180deg,#070b12 0%,#0b1424 58%,#091120 100%);
  border-top:1px solid rgba(255,255,255,.06)}
.live .container{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,4vw,48px);position:relative;z-index:2}

/* thematic conceptual backdrop: a broadcast control room caught mid-stream, monitors showing
   design content + a red REC dot = «школа дышит прямо сейчас» (look inside, live, before you pay) */
.live__photo{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('../img/live_bg.webp');
  background-size:cover;background-position:center 40%;opacity:.5;transform:scale(1.04);
  will-change:transform}
.live__photo::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 92% at 50% 3%,rgba(7,11,18,.95) 0%,rgba(7,11,18,.5) 36%,rgba(7,11,18,.2) 62%,transparent 82%),
    linear-gradient(180deg,rgba(7,11,18,.82) 0%,rgba(7,11,18,.3) 28%,rgba(7,11,18,.4) 60%,rgba(9,17,32,.96) 100%),
    linear-gradient(90deg,rgba(7,11,18,.58) 0%,transparent 28%,transparent 74%,rgba(7,11,18,.58) 100%)}
/* control-room ambient: faint signal grid + colour bleed (layers over the photo) */
.live__bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(60% 50% at 18% 8%,rgba(18,181,168,.16),transparent 70%),
    radial-gradient(48% 46% at 88% 92%,rgba(255,59,59,.12),transparent 70%),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px) 0 0/100% 46px,
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px) 0 0/46px 100%}
/* horizontal broadcast scanline sweeping the whole block — starts BELOW the head so it
   never washes out the eyebrow/title (begins at the cards region) */
.live__scan{position:absolute;left:0;right:0;top:clamp(220px,24vw,320px);bottom:0;z-index:1;
  pointer-events:none;mix-blend-mode:overlay;opacity:.45;
  background:linear-gradient(180deg,transparent 0%,rgba(127,227,218,.16) 48%,rgba(127,227,218,.04) 52%,transparent 100%);
  height:140px;animation:liveScan 8.5s linear infinite}
@keyframes liveScan{0%{transform:translateY(-160px)}100%{transform:translateY(90vh)}}

/* ---------- head ---------- */
.live__head{position:relative;z-index:2;text-align:center;max-width:720px;margin:0 auto clamp(34px,4.4vw,56px)}
.live__eye{display:inline-flex;align-items:center;gap:.6em;color:var(--rec);
  font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.5em 1.05em;border-radius:999px;background:rgba(8,12,20,.62);
  border:1px solid rgba(255,59,59,.32);backdrop-filter:blur(8px);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.7)}
.live h2{margin:16px 0 0;font-size:clamp(1.9rem,4.4vw,3.2rem);color:#fff;line-height:1.05;
  position:relative}
.live h2 .hl{color:var(--teal)}
/* Photoshop marching-ants viewfinder — IDENTICAL behaviour to #reviews (base .hx--ps),
   just tinted teal to match the live block. Anchors to the position:relative h2 → hugs it. */
.live h2 .hx--ps{inset:-26% -5%;width:auto;height:auto;
  opacity:0;transform:scale(1.04);
  transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.live h2 .hx--ps rect{fill:none;stroke:rgba(127,227,218,.7);stroke-width:1.4;stroke-dasharray:5 4}
.live h2.is-in .hx--ps{opacity:1;transform:scale(1)}
.live h2.is-in .hx--ps rect{animation:hx-ants 22s linear infinite}
.live__sub{margin:18px auto 0;max-width:640px;color:#c3d0e0;font-size:1.02rem;line-height:1.62}
.live__sub b{color:#fff;font-weight:700}
.live__free{display:inline-block;margin-left:.2em;color:var(--gold);font-weight:700;
  border-bottom:1px dashed rgba(224,164,49,.5)}

/* REC / play / eye glyphs (shared) */
.rec{width:9px;height:9px;border-radius:50%;background:var(--rec);
  box-shadow:0 0 0 0 rgba(255,59,59,.6);animation:recPulse 1.6s ease-out infinite}
@keyframes recPulse{0%{box-shadow:0 0 0 0 rgba(255,59,59,.55)}
  70%{box-shadow:0 0 0 7px rgba(255,59,59,0)}100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}}
.play{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent var(--teal);display:inline-block}
.eye{position:relative;width:16px;height:11px;display:inline-block}
.eye::before{content:"";position:absolute;inset:0;border:1.5px solid currentColor;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;opacity:.85}
.eye::after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;
  border-radius:50%;background:currentColor;transform:translate(-50%,-50%)}

/* ---------- grid + event cards ---------- */
.live__grid{position:relative;z-index:2;display:grid;gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(4,1fr)}
.ev{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;
  background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px);
  box-shadow:0 36px 70px -34px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.1);
  opacity:0;transform:translateY(26px);
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s,border-color .4s,box-shadow .4s}
.ev.is-in{opacity:1;transform:none}
.ev:hover{transform:translateY(-7px);border-color:rgba(127,227,218,.34);
  box-shadow:0 50px 96px -40px rgba(0,0,0,.86),0 0 0 1px rgba(127,227,218,.2)}

/* the «screen» — a stream-window header with parallax colour-bars + sweep */
.ev__scr{position:relative;height:104px;flex:0 0 auto;overflow:hidden;
  background:
    radial-gradient(120% 140% at 30% 18%,rgba(18,181,168,.32),transparent 60%),
    radial-gradient(120% 140% at 82% 90%,rgba(255,59,59,.22),transparent 62%),
    linear-gradient(125deg,#0c1626,#0a1120)}
.ev__scr::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px);
  opacity:.4;transition:transform .6s ease}
.ev__scr::after{content:"";position:absolute;top:0;bottom:0;width:46%;
  left:-60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-16deg);transition:left .8s cubic-bezier(.22,1,.36,1)}
.ev:hover .ev__scr::after{left:120%}
.ev:hover .ev__scr::before{transform:translateX(6px) scale(1.04)}
.ev--live .ev__scr{background:
    radial-gradient(120% 150% at 28% 14%,rgba(255,59,59,.34),transparent 58%),
    radial-gradient(120% 150% at 84% 92%,rgba(18,181,168,.26),transparent 60%),
    linear-gradient(125deg,#10131e,#0a1120)}

/* status bar overlay on the screen */
.ev__bar{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:12px 14px}
.ev__status{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:#cdd8e6;
  padding:.34em .66em;border-radius:999px;background:rgba(8,12,20,.55);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px)}
.ev__status--on{color:#fff;border-color:rgba(255,59,59,.5);background:rgba(40,10,12,.55)}
.ev__when{font-size:.68rem;font-weight:600;color:#9fb0c6;letter-spacing:.02em;
  padding:.32em .6em;border-radius:999px;background:rgba(8,12,20,.5);
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px)}

.ev__body{display:flex;flex-direction:column;flex:1;
  padding:clamp(18px,1.9vw,24px) clamp(18px,1.9vw,24px) 4px}
.ev__kind{font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal)}
.ev__title{margin:9px 0 0;font-family:var(--ff-display);font-weight:700;
  font-size:1.12rem;line-height:1.16;color:#fff;letter-spacing:-.01em}
.ev__desc{margin:11px 0 0;color:#c2cee0;font-size:.9rem;line-height:1.56;flex:1}

.ev__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:16px;padding:14px clamp(18px,1.9vw,24px) clamp(18px,1.9vw,22px);
  border-top:1px solid rgba(255,255,255,.08)}
.ev__live{display:inline-flex;align-items:center;gap:.5em;font-size:.78rem;color:#9fb0c6}
.ev__live .eye{color:var(--teal)}
.ev__live b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.ev__cta{display:inline-flex;align-items:center;gap:.3em;font-weight:700;font-size:.82rem;
  color:var(--gold);white-space:nowrap;transition:gap .3s,color .3s}
.ev:hover .ev__cta{gap:.6em;color:#ffce6a}

/* ---------- closing CTA ---------- */
.live__cta{position:relative;margin-top:clamp(36px,4.4vw,56px);text-align:center}
.live__cta p{margin:0 0 18px;color:#aebbcd;font-size:.98rem}
.live .btn--lg{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:1rem;
  color:#0a1322;background:linear-gradient(135deg,var(--teal),#3fd6c8);
  padding:1em 2em;border-radius:999px;border:0;cursor:pointer;
  box-shadow:0 18px 40px -14px rgba(18,181,168,.6);
  transition:transform .35s,box-shadow .3s,filter .3s}
.live .btn--lg:hover{transform:translateY(-3px);filter:brightness(1.06);
  box-shadow:0 26px 56px -16px rgba(18,181,168,.72)}

/* ---------- responsive ---------- */
@media (max-width:1080px){.live__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .live__grid{grid-template-columns:1fr}
  .ev__scr{height:92px}
}
@media (prefers-reduced-motion:reduce){
  .live__scan{display:none}
  .rec{animation:none}
  .ev,.ev__scr::after,.ev__scr::before{transition:none}
}