#model-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 60;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: background-color 420ms ease, backdrop-filter 420ms ease, -webkit-backdrop-filter 420ms ease, box-shadow 420ms ease;
}

#model-navbar.is-scrolled {
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* Quando il modale foto è aperto: navbar sale sopra il modale e cambia aspetto */
#model-navbar.is-modal-open {
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

/* Il link "torna ai modelli" si nasconde quando il modale è aperto */
#model-navbar.is-modal-open .model-navbar-link {
    display: none;
}

/* Il tasto "chiudi foto" è nascosto di default, visibile solo con modale aperto */
#navbar-close-modal {
    display: none;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #D4AF37;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 220ms ease, opacity 220ms ease;
}

#model-navbar.is-modal-open #navbar-close-modal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#navbar-close-modal:hover {
    color: #fff;
}

.model-navbar-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.82);
    transition: color 220ms ease;
}

.model-navbar-link:hover {
    color: #D4AF37;
}


@media (max-width: 639px) {
    /* STANDARD MOBILE GALLERY: le foto occupano il massimo spazio disponibile */

    /* Riduce il margine del contenitore principale */
    main.container {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }

    /* Elimina il doppio padding interno della gallery */
    main section > div:not(.model-page-hero) {
        padding: 0 !important;
    }
    main section > div:not(.model-page-hero) > div {
        padding: 0.25rem !important;
        gap: 0.25rem !important;
    }

    /* Il titolo h1 mantiene un minimo di rientro leggibile */
    main.container > h1 {
        padding-left: 0.75rem;
    }
}