/* @cle-edit */
/*
 * Glue WP del DS v2 — reglas escritas a mano (NO generadas por tools/v2-port).
 * Replica con CSS las visibilidades que en la app Next resolvía el renderizado
 * condicional de React (isMobileScreen / isDesktopScreen), porque en PHP
 * renderizamos siempre todo el markup.
 */

/* Header.jsx: la nav móvil solo se montaba con isMobileScreen (< 768px) */
@media (min-width: 768px) {
  .v2-header__mainNavWrapper {
    display: none !important;
  }
}

/* React usaba size={isMobile ? 'default' : 'medium'} en los CTA de
   BenefitsList y HeroImageHome; en PHP renderizamos 'medium' fijo */
@media only screen and (max-width: 767px) {
  .v2-benefitslist__cta.v2-button__button--medium,
  .v2-heroimagehome__buttons .v2-button__button--medium {
    padding: 1.5rem 2.4rem;
    font-size: 1.6rem;
    border-radius: 5rem;
  }
  .v2-benefitslist__cta.v2-button__button--medium .v2-button__icon,
  .v2-heroimagehome__buttons .v2-button__button--medium .v2-button__icon {
    width: 2rem;
    height: 2rem;
  }
  .v2-benefitslist__cta.v2-button__button--medium .v2-button__label,
  .v2-benefitslist__cta.v2-button__button--medium .v2-button__labelDuplicate,
  .v2-benefitslist__cta.v2-button__button--medium .v2-button__labelWrapper,
  .v2-heroimagehome__buttons .v2-button__button--medium .v2-button__label,
  .v2-heroimagehome__buttons .v2-button__button--medium .v2-button__labelDuplicate,
  .v2-heroimagehome__buttons .v2-button__button--medium .v2-button__labelWrapper {
    height: 1.8rem;
  }
}

/* TitleScrollReveal.module.scss no está compilado (sin sección propia):
   tipografía del título del CoursesCarousel (variante isSmall + font-quote) */
.v2-coursescarousel__title p {
  font: normal 500 3.2rem/1.2 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media only screen and (min-width: 768px) {
  .v2-coursescarousel__title p {
    font-size: 6.8rem;
  }
}

/* FAQ del LMS: respuestas con listas largas — el cap original de 30rem
   las recortaría (la transición de apertura usa max-height) */
#lms-faq .v2-faq__itemContentOpen {
  max-height: 120rem;
}

/* BenefitsList en móvil: el grid apilado pasa a slider horizontal con
   scroll-snap (mismo formato que los carruseles) + hint de swipe. En desktop
   sigue siendo el grid de 3 columnas. Comportamiento por defecto del bloque. */
@media only screen and (max-width: 767px) {
  .v2-benefitslist__grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1.6rem;
  }
  .v2-benefitslist__grid::-webkit-scrollbar {
    display: none;
  }
  .v2-benefitslist__grid > .v2-benefitslist__card {
    flex: 0 0 auto;
    width: 82%;
    scroll-snap-align: center;
  }
}

/* FAQ v2: el CSS compilado solo da tipografía a los <p> de la respuesta;
   las listas <ul>/<li> heredaban el tamaño del body (más grande). Las
   igualamos a los <p> para que se vean "como el resto". */
.v2-faq__itemAnswer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.v2-faq__itemAnswer li {
  font: normal 400 1.6rem/1.5 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #666;
}
@media only screen and (min-width: 768px) {
  .v2-faq__itemAnswer li {
    font-size: 1.8rem;
    line-height: 145%;
  }
}

/* TitleScrollReveal: segmentos e imagen inline del título del
   FeaturedFeaturesCarousel (la imagen se oculta en móvil, como isSmall) */
.v2-featfeatcarousel__textSegment {
  display: inline;
}
.v2-featfeatcarousel__inlineImage {
  display: inline-block;
  width: 5.6rem;
  height: 5.6rem;
  margin: 0 0.8rem;
  vertical-align: baseline;
  transform: translateY(0.45rem);
  object-fit: contain;
}
@media only screen and (max-width: 767px) {
  .v2-featfeatcarousel__inlineImage {
    display: none;
  }
}