/* =========================================================================
   course-detail.css — Ajustes finos para /curso/{slug}/ y /en/course/{slug}/
   Solo se carga en el detalle. NO afecta al listado.
   ========================================================================= */

/* ---------- Orb más grande y circular en la cabecera ---------- */
.course-hero .course-orb,
.course-hero .course-orb--lg{
  --orb: 180px;
  width: var(--orb) !important;
  height: var(--orb) !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 var(--orb);     /* evita que el flex parent lo aplaste */
  min-width: var(--orb);
  min-height: var(--orb);
  border-radius: 50% !important;
}

/* Asegurar que el contenedor interno también es circular */
.course-hero .course-orb-inner,
.course-hero .course-orb-ring{
  border-radius: 50% !important;
}

/* Que el logo dentro del orb tenga buena proporción */
.course-hero .course-orb-logo{
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.course-hero .course-orb-logo.is-external{
  width: 88%;
  height: 88%;
}

/* Ajuste del flex del lado izquierdo: dar espacio al orb sin aplastarlo */
.course-hero-left{
  gap: 22px !important;
  align-items: center;
}

/* En móvil, centramos y reducimos un poco para que no domine */
@media (max-width: 880px){
  .course-hero .course-orb,
  .course-hero .course-orb--lg{
    --orb: 160px;
  }
}
@media (max-width: 560px){
  .course-hero .course-orb,
  .course-hero .course-orb--lg{
    --orb: 140px;
  }
}