/* =========================
   PAGE GALERIE
========================= */

.gallery-page {
    position: relative;

    min-height: 100svh;

    background-image:
        url("../images/fond-mariage.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    color: var(--blanc);
}


.gallery-overlay {
    position: fixed;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(18, 13, 11, 0.55),
            rgba(18, 13, 11, 0.85)
        );

    z-index: 0;
}


.gallery-content {
    position: relative;

    z-index: 1;

    width: min(1300px, calc(100% - 32px));

    margin: auto;

    padding:
        max(20px, env(safe-area-inset-top))
        0
        max(30px, env(safe-area-inset-bottom));
}


/* =========================
   HEADER
========================= */

.gallery-header {
    min-height: 160px;

    display: grid;

    grid-template-columns:
        180px
        1fr
        180px;

    align-items: center;

    gap: 20px;
}


.gallery-heading {
    text-align: center;
}


.gallery-date {
    margin-bottom: 7px;

    font-size: 10px;

    letter-spacing: 4px;

    opacity: 0.8;
}


.gallery-heading h1 {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: clamp(46px, 6vw, 74px);

    font-weight: 500;

    line-height: 1;
}


.gallery-heading > p:last-child {
    margin-top: 8px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 20px;

    opacity: 0.9;
}


/* =========================
   RETOUR
========================= */

.gallery-back {
    width: fit-content;

    color: white;

    text-decoration: none;

    font-size: 13px;

    display: flex;

    align-items: center;

    gap: 8px;

    opacity: 0.85;

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


.gallery-back:hover {
    opacity: 1;

    transform: translateX(-3px);
}


/* =========================
   BOUTON AJOUTER
========================= */

.gallery-upload,
.gallery-upload-mobile {
    border: 1px solid rgba(255,255,255,0.42);

    border-radius: 999px;

    color: white;

    background:
        rgba(122, 62, 66, 0.64);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    text-decoration: none;

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


.gallery-upload {
    justify-self: end;

    padding: 12px 18px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 12px;
}


.gallery-upload span {
    font-size: 18px;
}


.gallery-upload:hover,
.gallery-upload-mobile:hover {
    transform: translateY(-2px);

    background:
        rgba(148, 76, 82, 0.85);
}


.gallery-upload-mobile {
    display: none;
}


/* =========================
   INTRO
========================= */

.gallery-intro {
    margin:
        10px
        auto
        28px;

    text-align: center;
}


.gallery-intro p {
    font-size: 12px;

    opacity: 0.75;
}


/* =========================
   PHOTO GRID
========================= */

.photo-grid {
    column-count: 4;

    column-gap: 13px;
}


.photo-card {
    width: 100%;

    margin:
        0
        0
        13px;

    padding: 0;

    display: block;

    break-inside: avoid;

    overflow: hidden;

    border: none;

    border-radius: 14px;

    background: rgba(255,255,255,0.05);

    cursor: zoom-in;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


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

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}


.photo-card img {
    width: 100%;

    height: auto;

    display: block;
}


/* =========================
   GALERIE VIDE
========================= */

.gallery-empty {
    display: none;

    max-width: 500px;

    margin: 70px auto;

    padding: 40px 24px;

    text-align: center;

    border:
        1px solid rgba(255,255,255,0.25);

    border-radius: 20px;

    background:
        rgba(35, 26, 23, 0.5);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);
}


.gallery-empty span {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 42px;
}


.gallery-empty h2 {
    margin: 5px 0 8px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 31px;

    font-weight: 500;
}


.gallery-empty p {
    margin-bottom: 20px;

    font-size: 12px;

    opacity: 0.75;
}


.gallery-empty a {
    display: inline-block;

    padding: 12px 22px;

    border-radius: 999px;

    background:
        rgba(122, 62, 66, 0.8);

    color: white;

    text-decoration: none;

    font-size: 12px;
}


/* =========================
   FOOTER
========================= */

.gallery-footer {
    padding: 45px 0 10px;

    text-align: center;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 18px;

    opacity: 0.8;
}


.gallery-footer span {
    margin: 0 5px;
}


/* =========================
   LIGHTBOX
========================= */

.lightbox {
    position: fixed;

    inset: 0;

    z-index: 2000;

    padding: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(8, 6, 5, 0.94);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}


.lightbox.active {
    opacity: 1;

    visibility: visible;
}


.lightbox img {
    max-width: min(1100px, 95vw);

    max-height: 88vh;

    border-radius: 12px;

    box-shadow:
        0 20px 80px rgba(0,0,0,0.6);
}


.lightbox-close {
    position: absolute;

    top:
        max(
            15px,
            env(safe-area-inset-top)
        );

    right: 20px;

    width: 45px;

    height: 45px;

    border: 1px solid rgba(255,255,255,0.3);

    border-radius: 50%;

    background:
        rgba(255,255,255,0.08);

    color: white;

    font-size: 30px;

    cursor: pointer;
}


/* =========================
   TABLETTE
========================= */

@media (max-width: 1000px) {

    .photo-grid {
        column-count: 3;
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

    .gallery-page {
        background-attachment: scroll;
    }


    .gallery-content {
        width:
            calc(100% - 20px);
    }


    .gallery-header {
        min-height: auto;

        padding: 15px 0 5px;

        grid-template-columns:
            45px
            1fr
            45px;
    }


    .gallery-back span {
        display: none;
    }


    .gallery-back {
        font-size: 26px;
    }


    .gallery-upload {
        display: none;
    }


    .gallery-heading h1 {
        font-size: 43px;
    }


    .gallery-heading > p:last-child {
        font-size: 16px;
    }


    .gallery-date {
        font-size: 8px;

        letter-spacing: 2px;
    }


    .gallery-intro {
        margin-bottom: 18px;
    }


    .gallery-intro p {
        margin-bottom: 14px;
    }


    .gallery-upload-mobile {
        display: inline-flex;

        padding: 11px 18px;

        font-size: 11px;
    }


    .photo-grid {
        column-count: 2;

        column-gap: 8px;
    }


    .photo-card {
        margin-bottom: 8px;

        border-radius: 10px;
    }

}


/* =========================
   PETITS TÉLÉPHONES
========================= */

@media (max-width: 390px) {

    .gallery-heading h1 {
        font-size: 37px;
    }


    .gallery-heading > p:last-child {
        font-size: 14px;
    }

}


/* =========================
   NOUVELLES PHOTOS
========================= */

.new-photos-button {
    position: fixed;
    z-index: 1500;

    left: 50%;
    bottom: 24px;

    transform: translateX(-50%);

    padding: 12px 20px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;

    background: rgba(122, 62, 66, 0.92);

    color: white;

    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 500;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    cursor: pointer;

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


.new-photos-button:hover {
    transform:
        translateX(-50%)
        translateY(-2px);

    background:
        rgba(148, 76, 82, 0.96);
}


.new-photos-button[hidden] {
    display: none;
}


.new-photos-button:disabled {
    cursor: wait;
    opacity: 0.8;
}


@media (max-width: 700px) {

    .new-photos-button {
        bottom: max(
            18px,
            env(safe-area-inset-bottom)
        );

        width: calc(100% - 40px);
        max-width: 340px;

        text-align: center;
    }
}


/* =========================
   INFORMATIONS LIGHTBOX
========================= */

.lightbox-container {
    max-width: min(1100px, 95vw);
    max-height: 92vh;

    display: flex;
    flex-direction: column;

    align-items: center;
}

.lightbox-container > img {
    max-width: 100%;
    max-height: 75vh;

    object-fit: contain;

    border-radius: 12px;
}

.lightbox-info {
    width: 100%;
    max-width: 750px;

    margin-top: 14px;
    padding: 14px 18px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.06);

    color: white;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lightbox-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

#lightboxGuest {
    font-family: "Cormorant Garamond", serif;
    font-size: 21px;
    font-weight: 500;
}

#lightboxDate {
    font-family: "Montserrat", sans-serif;
    font-size: 9px;

    letter-spacing: 0.5px;

    opacity: 0.6;
}

#lightboxMessage {
    margin-top: 8px;

    font-family: "Montserrat", sans-serif;
    font-size: 11px;

    line-height: 1.55;

    opacity: 0.88;
}


@media (max-width: 700px) {

    .lightbox {
        padding:
            max(60px, env(safe-area-inset-top))
            12px
            max(15px, env(safe-area-inset-bottom));
    }

    .lightbox-container {
        max-width: 100%;
        max-height: 100%;
    }

    .lightbox-container > img {
        max-height: 68vh;
    }

    .lightbox-info {
        margin-top: 10px;
        padding: 12px 14px;
    }

    #lightboxGuest {
        font-size: 19px;
    }

    #lightboxDate {
        font-size: 8px;
    }

}

.admin-link {
    position: fixed;
    right: 18px;
    bottom: 18px;

    z-index: 50;

    padding: 9px 14px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;

    background: rgba(30, 24, 22, 0.65);
    backdrop-filter: blur(10px);

    color: white;
    text-decoration: none;

    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;

    transition: 0.2s ease;
}

.admin-link:hover {
    background: rgba(30, 24, 22, 0.85);
    transform: translateY(-1px);
}