/* =========================================================
   Catálogo de proyectos
   ========================================================= */

.projects-archive {
    padding:
        5rem 0 2rem;
}


/* =========================================================
   Cabecera
   ========================================================= */

.projects-archive__header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 2rem;

    padding-bottom: 2rem;

    border-bottom:
        1px solid var(--portfolio-border);
}


.projects-archive__eyebrow {
    margin-bottom: 0.7rem;

    color:
        var(--portfolio-text-muted);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.72rem;

    text-transform: uppercase;

    letter-spacing: 0.09em;
}


.projects-archive__title {
    margin: 0;

    font-size:
        clamp(2.7rem, 6vw, 4.8rem);

    line-height: 1;

    letter-spacing: -0.055em;
}


.projects-archive__count {
    color:
        var(--portfolio-text-muted);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.85rem;
}


.projects-archive__intro {
    max-width: 650px;

    margin:
        2rem 0 4rem;

    color:
        var(--portfolio-text-muted);

    font-size: 1.05rem;
}


.projects-archive__intro p {
    margin: 0;
}


/* =========================================================
   Grid
   ========================================================= */

.projects-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 1.2rem;
}


/* =========================================================
   Tarjeta
   ========================================================= */

.project-card {
    position: relative;

    min-height: 400px;

    display: flex;
    flex-direction: column;

    padding: 1.5rem;

    border:
        1px solid var(--portfolio-border);

    border-radius:
        8px;

    background:
        var(--portfolio-bg);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}


.project-card:hover {
    transform:
        translateY(-4px);

    border-color:
        var(--portfolio-accent);

    background:
        var(--portfolio-bg-soft);
}


/*
 * Enlace invisible que ocupa la tarjeta completa.
 */

.project-card__link {
    position: absolute;

    inset: 0;

    z-index: 1;
}


/*
 * Elementos visuales por encima.
 */

.project-card > *:not(
    .project-card__link
) {
    position: relative;

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   Parte superior
   ========================================================= */

.project-card__top {
    min-height: 64px;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1.5rem;
}


.project-card__icon {
    width: 58px;
    height: 58px;

    flex: 0 0 auto;
}


.project-card__icon-image {
    width: 58px;
    height: 58px;

    display: block;

    object-fit: cover;

    border:
        1px solid
        var(--portfolio-border);

    border-radius: 12px;
}


.project-card__icon--empty {
    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid var(--portfolio-border);

    border-radius: 12px;

    color:
        var(--portfolio-text-muted);

    background:
        var(--portfolio-bg-soft);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.75rem;
}


.project-card__year {
    color:
        var(--portfolio-text-muted);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.7rem;
}


/* =========================================================
   Tipo / título
   ========================================================= */

.project-card__type {
    min-height: 1.2rem;

    margin-bottom: 0.6rem;

    color:
        var(--portfolio-text-muted);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.64rem;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}


.project-card__title {
    margin:
        0 0 1rem;

    font-size:
        clamp(1.35rem, 2vw, 1.65rem);

    line-height: 1.15;

    letter-spacing: -0.035em;
}


/* =========================================================
   Extracto
   ========================================================= */

.project-card__excerpt {
    margin-bottom: 1.5rem;

    color:
        var(--portfolio-text-muted);

    font-size: 0.88rem;

    line-height: 1.65;
}


.project-card__excerpt p {
    margin: 0;
}


/* =========================================================
   Etiquetas
   ========================================================= */

.project-card__tags {
    display: flex;

    flex-wrap: wrap;

    gap: 0.45rem;

    margin-top: auto;

    padding-top: 1rem;
}


/*
 * Reutilizamos los colores de project-tag,
 * pero un poco más pequeños en el catálogo.
 */

.project-card .project-tag {
    padding:
        0.35rem 0.55rem;

    font-size: 0.61rem;
}


.project-card__more-tags {
    display: inline-flex;

    align-items: center;

    color:
        var(--portfolio-text-muted);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.65rem;
}


/* =========================================================
   Footer tarjeta
   ========================================================= */

.project-card__footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-top: 1.7rem;

    padding-top: 1.1rem;

    border-top:
        1px solid var(--portfolio-border);

    font-family:
        "IBM Plex Mono",
        Consolas,
        monospace;

    font-size: 0.66rem;
}


.project-card__status {
    color:
        var(--portfolio-text-muted);
}


.project-card__arrow {
    color:
        var(--portfolio-accent);

    transition:
        transform 180ms ease;
}


.project-card:hover
.project-card__arrow {

    transform:
        translateX(4px);
}
.project-card__icon-image {
    transition:
        transform 220ms ease;
}


.project-card:hover
.project-card__icon-image {

    transform:
        scale(1.045);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 950px) {

    .projects-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 600px) {

    .projects-archive {
        padding-top: 3rem;
    }


    .projects-archive__header {
        align-items: flex-start;
    }


    .projects-archive__title {
        font-size:
            clamp(
                2.5rem,
                14vw,
                3.5rem
            );
    }


    .projects-archive__intro {
        margin-bottom: 2.5rem;
    }


    .projects-grid {
        grid-template-columns: 1fr;

        gap: 1rem;
    }


    .project-card {
        min-height: 0;
    }

}