/*
Theme Name:     Elearning Child Theme
Template:       elearning
Version:        1.0.0
Author:         S0KR4M
Description:    Tema hijo de Elearning
*/

/* Aquí puedes agregar tus estilos personalizados */

/*******************************************************
  ESTILO PARA DESCRIPCIÓN "LEER MÁS" EN CURSOS
********************************************************/

/* Contenedor de la descripción que se va a cortar */
.viva-collapsible-description {
    /* Altura máxima inicial. Ajusta este valor según cuánto quieras mostrar */
    max-height: 400px; 
    overflow: hidden;
    position: relative;
    /* Transición suave para cuando se expanda */
    transition: max-height 0.5s ease-in-out;
}

/* Pseudo-elemento para crear el degradado "fade-out" en la parte inferior */
.viva-collapsible-description:not(.is-expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px; /* Altura del degradado */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none; /* Permite hacer clic a través del degradado */
}

/* Cuando se expande, la altura máxima se quita */
.viva-collapsible-description.is-expanded {
    max-height: 5000px; /* Un valor grande para asegurar que todo el contenido quepa */
}

/* Estilo del botón "Leer más / Leer menos" */
.viva-read-more-btn {
    background-color: transparent;
    border: 1px solid #ff8c00; 
    color: #ff8c00;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin: 15px 15px 15px auto;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
    width: fit-content;
}

/* Efecto hover para el botón */
.viva-read-more-btn:hover {
    background-color: #ff8c00;
    color: #fff;
}

/* --- REGLA CLAVE PARA OCULTAR EL BOTÓN --- */
/*
  Esto se lee como: "Selecciona el botón .viva-read-more-btn que está
  justo después de un elemento .course-overview que TAMBIÉN tiene la clase .masteriyo-hidden"
*/
.tab-content.course-overview.masteriyo-hidden + .viva-read-more-btn {
    display: none;
}

/*******************************************************
  RESPONSIVE: "LEER MÁS" SOLO EN MÓVILES
********************************************************/

/* Usamos una media query para aplicar estos estilos solo en pantallas grandes (escritorio).
   El valor 768px es un punto de corte común para tablets. Puedes ajustarlo. */

@media (min-width: 769px) {

    /* 1. Hacemos que la descripción en escritorio siempre se muestre completa */
    .viva-collapsible-description {
        max-height: none; /* Quitamos la altura máxima */
        overflow: visible; /* Mostramos todo el contenido */
    }

    /* 2. Ocultamos el degradado "fade-out" en escritorio */
    .viva-collapsible-description::after {
        display: none;
    }

    /* 3. Ocultamos el botón "Leer más" en escritorio */
    .viva-read-more-btn {
        display: none;
    }
}