.fotos {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none !important;
    -webkit-transition: all .2s linear;
            transition: all .2s linear;
    padding: 5rem 1rem;
}
.fotos .heading {
    text-align: center;
    margin-bottom: 4rem;
    font-size: 3rem;
    color: #222;
}

:root {
    --gap: .75rem;        /* espaço entre cards */
    --thumb-ratio: 4/3;   /* razão dos thumbs */
    --thumb-radius: 1rem; /* bordas dos thumbs */
    --overlay-bg: rgba(0, 0, 0, .9);
}

/* ====== Grid da galeria ====== */
.gallery { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--gap);
}
.gallery figure { 
    margin: 0; 
    position: relative; 
    cursor: zoom-in;
    border-radius: var(--thumb-radius); 
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
    transition: transform .15s ease, box-shadow .15s ease;
    background: #f6f6f6;
}
.gallery figure:focus-within, .gallery figure:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}
.gallery img { 
    width: 100%; 
    height: 100%; 
    display: block; 
    aspect-ratio: var(--thumb-ratio);
    object-fit: cover; 
    filter: saturate(1.02) contrast(1.02);
}
.gallery figcaption { 
    position: absolute; 
    inset: auto 0 0 0; 
    padding: .5rem .65rem; 
    font: 500 0.875rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; 
    color: #fff; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6); 
    background: linear-gradient( to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70% );
}

/* ====== Lightbox ====== */
.lightbox { 
    position: fixed; 
    inset: 0; 
    display: none; 
    place-items: center; 
    background: var(--overlay-bg); 
    z-index: 9999; 
}
.lightbox.is-open { 
    display: grid; 
}
.lightbox__viewport { 
    position: relative; 
    width: min(96vw, 1400px); 
    height: min(92vh, 1000px); 
    display: grid; 
    place-items: center; 
}
.lightbox__img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
    border-radius: .5rem; 
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    user-select: none; 
    -webkit-user-drag: none; 
}

/* Botões */
.lightbox__btn { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    display: grid; 
    place-items: center; 
    width: 3rem; 
    height: 3rem; 
    border-radius: 999px; 
    border: 0; 
    background: rgba(255, 255, 255, .15); 
    color: #fff; 
    font-size: 1.35rem; 
    cursor: pointer; 
    transition: background .2s ease, transform .2s ease; 
}
.lightbox__btn:hover { 
    background: rgba(255, 255, 255, .25); 
    /* transform: translateY(-50%) scale(1.05);  */
}
.lightbox__btn:active { 
    transform: translateY(-50%) scale(.98); 
}
.lightbox__btn--prev { 
    left: .75rem; 
}
.lightbox__btn--next { 
    right: .75rem; 
}
.lightbox__btn--close { 
    top: .75rem; 
    right: .75rem; 
    transform: none; 
    width: 2.75rem; 
    height: 2.75rem; 
    font-size: 1.2rem;
    background: rgba(255, 255, 255, .2);
}

/* Barra inferior com legenda e contador */
.lightbox__bar { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: .5rem; 
    display: flex; 
    justify-content: center; 
    gap: .5rem; 
    align-items: center; 
    color: #fff; 
    font: 500 0.95rem/1.1 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
    pointer-events: none;
}

/* Acessibilidade oculta visual, mas presente para leitores de tela */
.sr-only { 
    position: absolute !important; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0, 0, 0, 0); 
    white-space: nowrap; 
    border: 0; 
}

@media (max-width: 520px) {
    :root { 
        --thumb-ratio: 1/1; 
    }
    .lightbox__btn { 
        width: 2.6rem; 
        height: 2.6rem; 
    }
    .lightbox__btn--prev { 
        left: .25rem; 
    } 
    .lightbox__btn--next { 
        right: .25rem; 
    }
    .lightbox__btn--close { 
        right: .25rem; 
        top: .25rem; 
    }
    .lightbox__bar { 
        font-size: .88rem; 
        bottom: .25rem; 
    }
}

/* MOBILE */
@media (max-width: 767.98px) {
    .fotos {
        padding: 3rem 1rem;
    }
    .gallery { 
        grid-template-columns: repeat(2, 1fr);
    }
}
  
/* TABLET */
@media (min-width: 768px) and (max-width: 991.98px) {
    .fotos {
        padding: 3rem 1rem;
    }
    .gallery { 
        grid-template-columns: repeat(3, 1fr);
    }
}
  
/* DESKTOP */
@media (min-width: 992px) {
    .gallery { 
        grid-template-columns: repeat(6, 1fr); 
    }
}