/* ========== PROJECT VIEWER ========== */

/* Fade-in inicial de la página completa */
.page--project {
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 400ms ease, transform 500ms ease;
}

.page--project.is-loaded {
    opacity: 1;
    transform: translateX(0);
}

/* Ajustes de página proyecto */
.page--project .site-main {
    padding-inline: var(--container-pad);
    padding-bottom: 48px;
    padding-top: 0;
}

.project {
    max-width: 1100px;
    margin-inline: auto;
    padding-top: 2rem;
}

/* 3 columnas: flecha / contenido / flecha */
.project-viewer {
    --nav-w: 56px;

    display: grid;
    grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--nav-w);
    align-items: center;

    /* el contenedor ocupa todo el ancho del main, por eso las flechas no se mueven */
    width: 100%;
}

/* Bloques flechas */
.project-nav--prev {
    grid-column: 1;
    justify-self: start;
}

.project-nav--next {
    justify-self: end;
}

.project-nav {
    width: var(--nav-w);
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;

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

    color: inherit;
}

.project-nav:disabled {
    visibility: hidden;
    pointer-events: none;
}

.project-nav__icon {
    font-size: 22px;
    line-height: 1;
    user-select: none;
    font-family: inherit;
}

.project-nav__icon img {
    width: 18px;
    height: auto;
    display: block;
}

/* Bloque 2: columna central fija (no se achica por la imagen) */
.project-stage {


    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    align-self: start;
    /* ← evita que Safari estire en el eje cruzado */
    min-width: 0;
}

.project-title {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
}

/* Figure */
.project-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-media {
    /* elegí un alto fijo razonable; podés ajustar este número */
    height: 520px;

    /* opcional: evitás saltos si alguna imagen tarda */
    display: flex;
    align-items: center;
    justify-content: center;

    /* como ya tenías max-height, lo sacamos para que el height mande */
    max-height: none;
}

.project-img {
    max-width: 100%;
    max-height: none;

    object-fit: contain;
    display: block;

    height: 100%;
    width: auto;

    /* Fade entre fotos */
    transition: opacity 100ms ease;
}

.project-caption {
    font-size: 14px;
    line-height: 1.25;
    max-width: 70ch;
    color: black;
}

.project-category {
    font-size: 15px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0;
}

/* Elementos móviles: ocultos por defecto (desktop) */
.project-title--mobile,
.project-category--mobile {
    display: none;
}

/* Logo visible en proyectos */
.page--project .brand__live {
    opacity: 1;
}

/* Track invisible para el grid en desktop: sus hijos participan directamente */
.project-viewer__track {
    display: contents;
}

/* ========== PROJECT: RESPONSIVE MOBILE ========== */

@media (max-width: 768px) {

    /* Body ocupa exactamente el viewport */
    .page--project {
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Main ocupa el espacio restante tras el header, project se pega al fondo */
    .page--project .site-main {
        flex: 1;
        min-height: 0;
        height: calc(100vh - var(--header-h));
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-end;
        padding-top: 0;
        padding-inline: 0;
        padding-bottom: 70px;
    }

    /* Project al fondo; el espacio vacío queda arriba */
    .page--project .project {
        padding-top: 0;
        padding-bottom: 24px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }


    /* Ocultar title y category originales (viven dentro del stage/track) */
    .project-stage .project-title,
    .project-stage .project-category {
        display: none;
    }

    /* Mostrar los elementos móviles externos */
    .project-title--mobile,
    .project-category--mobile {
        display: block;
        padding-inline: var(--container-pad);
        width: 100%;
        box-sizing: border-box;
        flex-shrink: 0;
        font-size: 15px;
        font-weight: 400;
        margin: 0;
    }

    /* El viewer es columna: título / carrusel+botones / category */
    /* .project-viewer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    } */
    .project-viewer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;

        /* position: absolute; */
    }

    /* Fila interna: botón prev + stage + botón next */
    .project-viewer__track {
        width: 100%;
        position: relative;
        overflow: visible;
        /* era hidden: bloqueaba el gesto táctil en el stage */
    }

    /* El stage es el track horizontal deslizable */
    .project-stage {
        display: flex;
        flex-direction: row;
        /* fotos en fila horizontal */
        width: 100%;
        gap: 0;

        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;

        /* ocultar scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .project-stage::-webkit-scrollbar {
        display: none;
    }

    .project-figure {
        flex: 0 0 100vw;
        width: 100vw;
        margin: 0;
        box-sizing: border-box;

        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-inline: var(--container-pad);
    }

    /* Contenedor de imagen ocupa todo el slide */
    .project-media {
        width: 100%;
        height: clamp(200px, 65vh, 500px);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-shrink: 0;
    }

    .project-img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: none;
        /* sin fade en mobile, el scroll es la transición */
    }

    /* Botones: cuadrados pequeños invisibles en esquinas inferiores del track */
    .project-nav {
        position: absolute;
        bottom: 100px;
        width: 200px;
        height: 200px;
        padding: 0;
        margin: 0;
        background: transparent;
        border: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 5;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-touch-callout: none;
    }

    .project-nav--prev {
        left: 0;
    }

    .project-nav--next {
        right: 0;
    }

    .project-nav__icon {
        display: none;
    }

    .project-nav:focus,
    .project-nav:focus:not(:focus-visible) {
        outline: none;
    }

    .project-nav:disabled {
        visibility: hidden;
        pointer-events: none;
    }
}