/* Единый первый экран страниц отдельных курсов. Подключается последним. */
@media (min-width: 801px) {
  .sc-inner .hero.course-hero-standard,
  .sc-inner .hero.sc-course-hero-xl {
    position: relative !important;
    min-height: 560px !important;
    padding: 48px clamp(42px, 5vw, 110px) !important;
    overflow: hidden !important;
    background: #090a0d !important;
  }

  /* У страниц курсов контент всегда идёт вертикально слева.
     Иначе ссылки, kicker и заголовок становятся элементами одной flex-строки. */
  .sc-inner .hero.course-hero-standard {
    display: block !important;
    padding-top: 108px !important;
    padding-bottom: 70px !important;
  }

  /* Единая позиция монолита на всех страницах курсов — у правого края,
     как на эталонной странице Short Club. */
  .sc-inner .hero.course-hero-standard .sc-course-monolith,
  .sc-inner .hero.sc-course-hero-xl .sc-hero-monolith {
    position: absolute !important;
    z-index: 2 !important;
    top: 50% !important;
    right: clamp(34px, 5vw, 120px) !important;
    width: clamp(270px, 24vw, 455px) !important;
    height: clamp(430px, 52vh, 570px) !important;
    transform: translateY(-48%) !important;
    pointer-events: none !important;
  }

  .sc-inner .hero.course-hero-standard .monolith-outline,
  .sc-inner .hero.sc-course-hero-xl .monolith-outline {
    position: absolute !important;
    inset: 22px -20px -18px 22px !important;
    border: 1px solid #343740 !important;
    clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%) !important;
  }

  .sc-inner .hero.course-hero-standard .monolith-slab,
  .sc-inner .hero.sc-course-hero-xl .monolith-slab {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    background: #e03030 !important;
    clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%) !important;
  }

  .sc-inner .hero.course-hero-standard .monolith-word,
  .sc-inner .hero.sc-course-hero-xl .monolith-word {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    color: #f3f1eb !important;
    font: 900 clamp(74px, 7vw, 116px)/.8 "Arial Black", Arial, sans-serif !important;
    letter-spacing: -.1em !important;
    white-space: nowrap !important;
    transform: translate(-50%, -50%) rotate(-90deg) !important;
  }

  .sc-inner .hero.course-hero-standard .monolith-word em,
  .sc-inner .hero.sc-course-hero-xl .monolith-word em {
    color: #f3f1eb !important;
    font-style: normal !important;
  }

  .sc-inner .hero.course-hero-standard .monolith-cut,
  .sc-inner .hero.sc-course-hero-xl .monolith-cut {
    position: absolute !important;
    left: -10% !important;
    width: 120% !important;
    height: 9% !important;
    background: #090a0d !important;
    /* Три неподвижные прорези — та же «зебра», что на первом экране главной. */
    animation: none !important;
  }

  .sc-inner .hero.course-hero-standard .monolith-cut-one,
  .sc-inner .hero.sc-course-hero-xl .monolith-cut-one { top: 23% !important; }
  .sc-inner .hero.course-hero-standard .monolith-cut-two,
  .sc-inner .hero.sc-course-hero-xl .monolith-cut-two { top: 48% !important; }
  .sc-inner .hero.course-hero-standard .monolith-cut-three,
  .sc-inner .hero.sc-course-hero-xl .monolith-cut-three { top: 73% !important; }
  /* Позиции задаются только именованными классами выше: у разных страниц
     прорези могут быть span или i, поэтому :nth-of-type здесь неверен. */

  .sc-inner .hero.course-hero-standard .monolith-scan,
  .sc-inner .hero.sc-course-hero-xl .monolith-scan {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 8%;
    width: 8px !important;
    background: #fff !important;
    box-shadow: 0 0 12px #fff, 0 0 28px rgba(255, 255, 255, .9) !important;
    /* Точное правило первого экрана главной: один проход слева направо. */
    animation: monolithScan 4.8s linear infinite !important;
    opacity: 1;
    visibility: visible !important;
    z-index: 50 !important;
    will-change: left, opacity !important;
  }

  .sc-inner .hero.course-hero-standard .monolith-caption,
  .sc-inner .hero.sc-course-hero-xl .monolith-caption {
    position: absolute !important;
    left: -8px !important;
    bottom: -42px !important;
    color: #7c8291 !important;
    font: 600 9px/1.4 ui-monospace, Consolas, monospace !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
  }

  .sc-inner .hero.course-hero-standard .monolith-caption strong,
  .sc-inner .hero.sc-course-hero-xl .monolith-caption strong { color: #f3f1eb !important; font-size: 11px !important; }

  .sc-inner .hero.sc-course-hero-xl {
    display: flex !important;
    align-items: center !important;
  }

  .sc-inner .hero.course-hero-standard > :not(.sc-course-monolith),
  .sc-inner .hero.sc-course-hero-xl > :not(.sc-hero-monolith) {
    position: relative;
    z-index: 3;
    width: calc(100% - clamp(370px, 31vw, 540px));
    max-width: none;
  }

  .sc-inner .hero.course-hero-standard > :not(.sc-course-monolith) {
    display: block;
    /* Отдельная колонка: длинное имя курса переносится до монолита,
       а не поверх него. */
    width: min(56%, calc(100% - 420px)) !important;
  }

  .sc-inner .hero.course-hero-standard > .back-link {
    width: fit-content !important;
  }

  .sc-inner .hero.course-hero-standard h1,
  .sc-inner .hero.sc-course-hero-xl h1 {
    max-width: none !important;
    margin: 22px 0 26px !important;
    font-size: clamp(60px, 5.25vw, 118px) !important;
    line-height: .88 !important;
    letter-spacing: -.065em !important;
  }

  .sc-inner .hero.course-hero-standard h1 span,
  .sc-inner .hero.sc-course-hero-xl h1 span { display: block !important; }

  .sc-inner .hero.course-hero-standard .als-kicker,
  .sc-inner .hero.course-hero-standard .ah-kicker,
  .sc-inner .hero.course-hero-standard .ai-course-kicker,
  .sc-inner .hero.sc-course-hero-xl .sc-course-kicker { color: #e03030 !important; }

  .sc-inner .hero.course-hero-standard .als-title,
  .sc-inner .hero.course-hero-standard .ah-title,
  .sc-inner .hero.course-hero-standard .ai-course-title,
  .sc-inner .hero.sc-course-hero-xl .sc-course-title { color: #f3f1eb !important; }

  .sc-inner .course-hero-details,
  .sc-inner .ah-course-hero-details,
  .sc-inner .sc-course-hero-statement {
    padding-top: 64px !important;
  }
}

/* Такой же маршрут, как у .hero-monolith на index.html. */
@keyframes monolithScan {
  0% { left: -8%; opacity: 0; }
  8% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 108%; opacity: 0; }
}

/* Полоса — обязательный анимированный элемент стандарта, даже если браузер
   сокращает необязательные эффекты. */
@media (prefers-reduced-motion: reduce) {
  .sc-inner .hero.course-hero-standard .monolith-scan,
  .sc-inner .hero.sc-course-hero-xl .monolith-scan {
    animation-name: monolithScan !important;
    animation-duration: 4.8s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-direction: normal !important;
    animation-play-state: running !important;
  }
}

@media (max-width: 800px) {
  .sc-inner .hero.course-hero-standard,
  .sc-inner .hero.sc-course-hero-xl {
    min-height: 0 !important;
    padding: 64px 20px 48px !important;
    display: block !important;
    overflow: visible !important;
  }

  .sc-inner .hero.course-hero-standard > :not(.sc-course-monolith),
  .sc-inner .hero.sc-course-hero-xl > :not(.sc-hero-monolith) { width: 100% !important; }

  .sc-inner .hero.course-hero-standard h1,
  .sc-inner .hero.sc-course-hero-xl h1 {
    max-width: 100% !important;
    font-size: clamp(48px, 12vw, 76px) !important;
    line-height: .96 !important;
  }

  .sc-course-monolith,
  .sc-hero-monolith { display: none !important; }
}