/* Desktop presentation: wide layout, faster player defaults and modern visual accents. */
@media (min-width: 769px) {
  .container { max-width: 1240px; }
  .courses-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .course-thumbnail { height: 190px; font-size: 3.4rem; }
  .course-content { padding: 1.25rem; }
  .course-content h3 { font-size: 1.15rem; }
  .course-layout { grid-template-columns: 360px minmax(0, 1fr); gap: 2rem; }
  .video-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 1.75rem; }
  .video-sidebar { position: sticky; top: 96px; max-height: calc(100dvh - 130px); }
  /* Пропорции видео задаёт JS после загрузки метаданных: у вертикальных роликов
     9:16 жёсткий 16/9 превращался бы в чёрные поля по бокам. */
  #videoPlayer video { aspect-ratio: var(--player-aspect, 16 / 9); max-height: calc(100dvh - 220px); }
  /* Вертикальный ролик: высоту задаёт экран, ширина выводится из пропорций,
     иначе 9:16 вписывается в 16:9 чёрными полосами по бокам. */
  #videoPlayer.is-portrait video {
    width: auto;
    height: min(calc(100dvh - 260px), 760px);
    max-width: 100%;
    margin: 0 auto;
  }
  /* Первый экран не должен уезжать вниз. Вертикальное фото 9:16 задавало
     высоту всего блока, поэтому ограничиваем высоту снимка и центрируем текст
     по вертикали — иначе он выглядит упавшим в низ страницы. */
  .hero { min-height: calc(100dvh - 78px); display: flex; align-items: center; padding: 3rem 0; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); align-items: center; width: 100%; }
  /* Фото показывается целиком. Раньше здесь стояло width:100% + object-fit:cover
     вместе с max-height, и на невысоких экранах низ кадра со ступнями
     обрезался. Теперь картинка просто уменьшается целиком, а по центру её
     ставит flex-контейнер: рамка и скругление всегда лежат по краям фото. */
  .hero-photo { max-height: calc(100dvh - 190px); display: flex; justify-content: center; }
  .hero-photo img {
    width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 190px);
    object-fit: contain; object-position: center; margin: 0 auto;
  }
  .hero-left { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .hero-left .hero-kicker, .hero-left .hero-title, .hero-left .hero-subtitle, .hero-left .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-left .hero-desc { max-width: 62ch; }
  .hero-left .hero-cta { justify-content: center; width: 100%; }
  .hero-photo img { transition: transform .35s ease, box-shadow .35s ease; }
  .hero-photo:hover img { transform: translateY(-4px) scale(1.01); }
  .btn:focus-visible, .pc-btn:focus-visible, .nav-menu a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(255, 212, 71, .85);
    outline-offset: 3px;
  }
  .course-card, .feature, .audience-card, .lesson-editor-item { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
  .player-controls { padding: .35rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.75); backdrop-filter: blur(8px); }
}