/*
=========================================================
GALERIE FOTO GENERALĂ - NAVY.RO
=========================================================
*/


/*
=========================================================
1. PAGINA ALBUMULUI
=========================================================
*/

.photo-album {
    width: 100%;
}


.photo-album-container {
    width: min(
        calc(100% - 30px),
        1100px
    );

    margin: 30px auto 60px;
}


/*
=========================================================
2. TITLUL
=========================================================
*/

.photo-album-title {
    margin: 0 0 30px;

    text-align: center;

    font-size: 24px;
    line-height: 1.3;

    color: #222222;
}


/*
=========================================================
3. GALERIA

Desktop:
3 fotografii pe rând.
=========================================================
*/

.photo-gallery {
    display: grid;

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

    gap: 22px;

    width: 100%;
}


/*
=========================================================
4. FOTOGRAFIE
=========================================================
*/

.photo-item {
    display: block;

    width: 100%;

    margin: 0;
}


/*
=========================================================
5. BUTON MINIATURĂ

Toate miniaturile au același raport 3:2.

Astfel:
- toate rândurile rămân egale;
- fotografiile landscape umplu cadrul;
- fotografiile portret rămân în același cadru.
=========================================================
*/

.photo-button {
    display: block;

    width: 100%;

    aspect-ratio: 3 / 2;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 1px solid #d5d5d5;
    border-radius: 5px;

    background: #eeeeee;

    cursor: zoom-in;

    box-sizing: border-box;
}


/*
=========================================================
6. IMAGINE ÎN GALERIE

În mod implicit fotografia este considerată
landscape și umple complet cadrul 3:2.

Fotografia originală NU este modificată.
=========================================================
*/

.photo-button img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: center;

    border: 0;

    user-select: none;

    -webkit-user-select: none;
    -webkit-user-drag: none;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}


/*
=========================================================
6.1. FOTOGRAFII PORTRET

Clasa "is-portrait" este adăugată automat
din gallery.js.

Fotografia portret:
- nu este tăiată;
- este afișată complet;
- rămâne în cadrul 3:2.
=========================================================
*/

.photo-button img.is-portrait {
    object-fit: contain;
    object-position: center;

    background: #eeeeee;
}


/*
=========================================================
6.2. HOVER
=========================================================
*/

.photo-button:hover img {
    transform: scale(1.02);
}


.photo-button:hover {
    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.18);
}


.photo-button:focus-visible {
    outline: 3px solid #245d8c;
    outline-offset: 4px;
}


/*
=========================================================
7. MESAJ ALBUM GOL
=========================================================
*/

.photo-gallery-empty {
    margin: 30px 0;

    text-align: center;

    font-size: 16px;
    line-height: 1.5;

    color: #555555;
}


/*
=========================================================
8. LIGHTBOX
=========================================================
*/

.photo-modal {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

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

    width: 100vw;
    height: 100vh;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background:
        rgba(0, 0, 0, 0.96);
}


.photo-modal[hidden] {
    display: none;
}


/*
=========================================================
9. FOTOGRAFIA MARE

Fotografia din lightbox este întotdeauna
afișată complet.

Nu folosim crop.
=========================================================
*/

.photo-large {
    display: block;

    width: auto;
    height: auto;

    max-width: 100vw;
    max-height: 100vh;

    margin: 0;
    padding: 0;

    object-fit: contain;

    user-select: none;

    -webkit-user-select: none;
    -webkit-user-drag: none;

    cursor: zoom-in;

    transform-origin: center center;

    transition:
        transform 0.15s ease;
}


.photo-large.is-zoomed {
    cursor: grab;
}


.photo-large.is-dragging {
    cursor: grabbing;

    transition: none;
}


/*
=========================================================
10. SĂGEȚI
=========================================================
*/

.photo-prev,
.photo-next {
    position: fixed;

    top: 50%;

    z-index: 1000001;

    width: 56px;
    height: 76px;

    transform:
        translateY(-50%);

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 5px;

    background:
        rgba(0, 0, 0, 0.45);

    color: #ffffff;

    font-size: 46px;
    line-height: 1;

    cursor: pointer;
}


.photo-prev {
    left: 15px;
}


.photo-next {
    right: 15px;
}


.photo-prev:hover,
.photo-next:hover {
    background:
        rgba(0, 0, 0, 0.80);
}


.photo-prev:focus-visible,
.photo-next:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}


/*
=========================================================
11. ÎNCHIDERE
=========================================================
*/

.photo-close {
    position: fixed;

    top: 10px;
    right: 12px;

    z-index: 1000002;

    width: 48px;
    height: 48px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.55);

    color: #ffffff;

    font-size: 38px;
    line-height: 44px;

    cursor: pointer;
}


.photo-close:hover {
    background:
        rgba(0, 0, 0, 0.90);
}


.photo-close:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}


/*
=========================================================
12. DESCĂRCARE
=========================================================
*/

.photo-download {
    position: fixed;

    top: 12px;
    right: 75px;

    z-index: 1000002;

    display: inline-flex;

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

    min-height: 44px;

    padding: 0 16px;

    border-radius: 5px;

    background:
        rgba(0, 0, 0, 0.55);

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;
}


.photo-download:hover {
    background:
        rgba(0, 0, 0, 0.90);

    color: #ffffff;
}


.photo-download:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}


/*
=========================================================
13. CONTOR
=========================================================
*/

.photo-counter {
    position: fixed;

    bottom: 10px;
    left: 50%;

    z-index: 1000002;

    transform:
        translateX(-50%);

    padding: 6px 12px;

    border-radius: 5px;

    background:
        rgba(0, 0, 0, 0.55);

    color: #ffffff;

    font-size: 14px;

    pointer-events: none;
}


/*
=========================================================
14. BLOCARE SCROLL

Se activează numai când lightbox-ul este deschis.
=========================================================
*/

body.photo-modal-open {
    overflow: hidden;
}


/*
=========================================================
15. TABLETĂ
=========================================================
*/

@media (max-width: 800px) {

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

        gap: 15px;
    }


    .photo-album-title {
        font-size: 21px;
    }

}


/*
=========================================================
16. MOBIL
=========================================================
*/

@media (max-width: 520px) {

    .photo-album-container {
        width:
            calc(100% - 20px);

        margin-top: 20px;
    }


    .photo-gallery {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .photo-prev,
    .photo-next {
        width: 42px;
        height: 60px;

        font-size: 35px;
    }


    .photo-prev {
        left: 3px;
    }


    .photo-next {
        right: 3px;
    }


    .photo-close {
        top: 5px;
        right: 5px;

        width: 44px;
        height: 44px;

        font-size: 34px;
        line-height: 40px;
    }


    .photo-download {
        top: 6px;
        left: 6px;
        right: auto;

        min-height: 40px;

        padding: 0 11px;

        font-size: 13px;
    }


    .photo-counter {
        bottom: 6px;
    }

}


/*
=========================================================
17. REDUCERE ANIMAȚII
=========================================================
*/

@media (prefers-reduced-motion: reduce) {

    .photo-button img,
    .photo-large {
        transition: none;
    }

}