/* Estilos para las tarjetas de proyectos */

/* Contenedor principal de la sección de proyectos */
.projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    min-height: 420px;
    gap: 3rem;
}

/* Cuadrícula de proyectos (3 columnas por defecto) */
.projects__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    justify-content: space-around;
}

/* Introducción de la sección */
.projects__intro {
    text-align: center;
    max-width: 100%;
    padding: 1rem;
}

/* Estilo individual de la tarjeta de proyecto */
.project-card {
    background: rgba(255, 253, 254, 0.035);
    border-radius: 20px;
    padding: 1.5rem;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: transform 0.3s ease, outline-color 0.3s ease, outline-style 0.1s ease, background 0.3s ease;

    display: flex;
    flex-direction: column;
    height: 100%;

    /* Animación de aparición al hacer scroll */
    animation: appearance linear forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
}

/* Efecto hover en la tarjeta de proyecto */
.project-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 253, 254, 0.08);
    outline: 2px solid var(--accent-500);
}

/* Imagen de vista previa del proyecto */
.project-card__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Contenido de texto de la tarjeta */
.project-card__content {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    flex-grow: 1;
}

/* Contenedor de botones de acción en la tarjeta */
.project-card__actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Animación genérica de aparición */
@keyframes appearance {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Adaptación para pantallas medianas (2 columnas) */
@media (max-width: 1024px) {
    .projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Ajustes de descripción para pantallas pequeñas */
@media (max-width: 720px) {
    .section-description {
        text-align: center;
        max-width: 100%;
    }
}

/* Adaptación para pantallas pequeñas (1 columna) */
@media (max-width: 425px) {
    .projects__grid {
        grid-template-columns: 1fr;
    }
}