/*
========================================
galeria.css
Colegio Madrid de Veracruz
========================================
*/

/* ENCABEZADO */

.pagina-encabezado{
    padding:50px 20px 35px;
    text-align:center;
}

.pagina-encabezado h1{
    color:#1d5ca8;
    font:700 46px/46px "Open Sans",sans-serif;
    margin-bottom:10px;
}

.pagina-encabezado p{
    color:#1d70b8;
    font:400 18px/24px "Open Sans",sans-serif;
    text-transform:uppercase;
}


/* GALERÍA */

.galeria{
    padding:20px 20px 60px;
}

.contenedor-galeria{
    width:100%;
    max-width:1320px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.foto{
    overflow:hidden;
    cursor:pointer;
    border-radius:8px;
    aspect-ratio:4/3;
}

.foto img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .35s ease;
}

.foto:hover img{
    transform:scale(1.08);
}


/* LIGHTBOX */

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.88);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
    padding:40px;
}

.lightbox.activo{
    display:flex;
}

#lightbox-img{
    max-width:90vw;
    max-height:90vh;
    border-radius:8px;
    box-shadow:0 10px 40px rgba(0,0,0,.5);
}

.lightbox-cerrar{
    position:absolute;
    top:18px;
    right:25px;
    background:none;
    border:none;
    color:#ffffff;
    font-size:46px;
    cursor:pointer;
    line-height:1;
}

.lightbox-anterior,
.lightbox-siguiente{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:56px;
    height:56px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    color:#ffffff;
    font-size:34px;
    cursor:pointer;
    transition:.25s;
}

.lightbox-anterior:hover,
.lightbox-siguiente:hover{
    background:rgba(255,255,255,.35);
}

.lightbox-anterior{
    left:30px;
}

.lightbox-siguiente{
    right:30px;
}


/* RESPONSIVE */

@media (max-width:1000px){

    .contenedor-galeria{
        grid-template-columns:repeat(3,1fr);
    }

}

@media (max-width:700px){

    .pagina-encabezado h1{
        font-size:36px;
        line-height:38px;
    }

    .pagina-encabezado p{
        font-size:16px;
        line-height:22px;
    }

    .contenedor-galeria{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .lightbox-anterior,
    .lightbox-siguiente{
        width:44px;
        height:44px;
        font-size:28px;
    }

}

@media (max-width:500px){

    .contenedor-galeria{
        grid-template-columns:1fr;
    }

    .lightbox{
        padding:20px;
    }

    .lightbox-anterior{
        left:10px;
    }

    .lightbox-siguiente{
        right:10px;
    }

}