/**
 * Grid "un entorno que transforma" (contenedor Elementor .grid-entorno).
 *
 * Cada tarjeta muestra solo las primeras palabras del texto; el resto se abre
 * con hover, foco o clic. El clic existe para táctil, donde no hay hover.
 *
 * El texto oculto NO se quita del DOM ni se pone display:none a propósito:
 * así sigue disponible para lectores de pantalla y para el buscador.
 */

/* Sin esto las cuatro tarjetas se estiran a la altura de la más alta y al abrir
   una se mueven todas. Con align-items:start cada una crece por su cuenta. */
.grid-entorno {
    align-items: start;
}

.gd-entorno-card {
    cursor: pointer;
}

.gd-entorno-dots {
    transition: opacity 0.2s ease;
}

/* Truco de grid-template-rows 0fr -> 1fr: es la única forma de animar hacia
   una altura automática sin fijar un max-height a ojo. */
.gd-entorno-rest {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease;
}

.gd-entorno-rest > span {
    overflow: hidden;
    min-height: 0;
}

.gd-entorno-card:hover .gd-entorno-rest,
.gd-entorno-card:focus-visible .gd-entorno-rest,
.gd-entorno-card.is-open .gd-entorno-rest {
    grid-template-rows: 1fr;
    opacity: 1;
}

.gd-entorno-card:hover .gd-entorno-dots,
.gd-entorno-card:focus-visible .gd-entorno-dots,
.gd-entorno-card.is-open .gd-entorno-dots {
    opacity: 0;
}

.gd-entorno-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* En táctil el :hover de algunos navegadores se queda pegado después del tap.
   Ahí mandamos solo por clic (.is-open). */
@media (hover: none) {
    .gd-entorno-card:hover .gd-entorno-rest {
        grid-template-rows: 0fr;
        opacity: 0;
    }

    .gd-entorno-card:hover .gd-entorno-dots {
        opacity: 1;
    }

    .gd-entorno-card.is-open .gd-entorno-rest {
        grid-template-rows: 1fr;
        opacity: 1;
    }

    .gd-entorno-card.is-open .gd-entorno-dots {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gd-entorno-rest,
    .gd-entorno-dots {
        transition: none;
    }
}