/*
 * Intellego PC — vídeo ampliado en escritorio
 *
 * Cargar DESPUÉS de:
 *   css/video.css
 *   css/pc.css
 *
 * No afecta móvil, iPhone/iPad táctil, login, tienda ni Stripe.
 */

@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {

  /*
   * La versión PC limita normalmente #app a 680 px.
   * Solo mientras la página de vídeo está presente, ampliamos el lienzo.
   */
  body:has(.video-page) #app {
    width: min(100vw, 1580px) !important;
    max-width: 1580px !important;
    margin-inline: auto !important;
  }

  body:has(.video-page) .view,
  body:has(.video-page) .view-main,
  body:has(.video-page) .page.video-page {
    width: 100% !important;
    max-width: 1580px !important;
    margin-inline: auto !important;
  }

  body:has(.video-page) {
    overflow: hidden !important;
  }

  /* Más espacio real para el reproductor, manteniendo el ejercicio visible. */
  .video-page .video-page-content {
    padding:
      clamp(12px, 1.2vw, 20px)
      clamp(14px, 1.8vw, 28px)
      clamp(14px, 1.4vw, 22px) !important;
  }

  .video-page .video-workspace {
    width: min(100%, 1520px) !important;
    max-width: 1520px !important;
    grid-template-columns:
      minmax(0, 1.78fr)
      minmax(360px, .62fr) !important;
    gap: clamp(14px, 1.4vw, 22px) !important;
  }

  .video-page .video-stage {
    min-width: 0;
  }

  .video-page .embed-container {
    border-radius: 20px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .46) !important;
  }

  /* El panel del ejercicio sigue siendo cómodo, pero no roba ancho al vídeo. */
  .video-page .exercise-dock {
    width: 100%;
    max-width: 430px;
    justify-self: end;
    padding: clamp(14px, 1.3vw, 20px) !important;
  }

  .video-page #user-input {
    min-height: 96px;
    max-height: 150px;
  }

  .video-page .feedback-output {
    font-size: .92rem;
  }
}

/* Escritorios medianos: ampliar sin dejar el ejercicio demasiado estrecho. */
@media
  (min-width: 1000px)
  and (max-width: 1280px)
  and (hover: hover)
  and (pointer: fine) {

  body:has(.video-page) #app,
  body:has(.video-page) .view,
  body:has(.video-page) .view-main,
  body:has(.video-page) .page.video-page {
    max-width: 1240px !important;
  }

  .video-page .video-workspace {
    max-width: 1200px !important;
    grid-template-columns:
      minmax(0, 1.48fr)
      minmax(340px, .72fr) !important;
  }

  .video-page .exercise-dock {
    max-width: 390px;
  }
}

/*
 * Fallback para navegadores de escritorio antiguos sin :has().
 * La página de vídeo al menos usa todo el ancho disponible del contenedor.
 */
@supports not selector(body:has(.video-page)) {
  @media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
    .video-page {
      width: 100% !important;
      max-width: none !important;
    }

    .video-page .video-workspace {
      width: 100% !important;
      max-width: 1260px !important;
      grid-template-columns:
        minmax(0, 1.55fr)
        minmax(350px, .68fr) !important;
    }
  }
}