/* ============================================================
 *  A.S.H. — Stile specifico: dettaglio-realizzazione
 *  GENERATO dalla fase 1: non modificare a mano senza aggiornare
 *  anche le altre pagine. Vedi includes/layout/head.php.
 * ============================================================ */

/* ================= PALETTE BIANCO & ORO (come homepage) ================= */

        
        :root {
            --oro:        #c9a24b;
            --oro-scuro:  #a9822f;
            --oro-testo:  #7c5f20; /* oro profondo: leggibile su bianco (WCAG AA) */
            --oro-chiaro: #f5edd9;
            --crema:      #f5eee0;
            --scuro:      #2e3b42;
            --testo:      #4a5158;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            color: var(--testo);
            background-color: #faf7ef;
            overflow-x: hidden;
        }

        .title-underline.a-sinistra { margin-left: 0; }

        .menu-servizi .dropdown-item:hover,
        .menu-servizi .dropdown-item:focus,
        .menu-servizi .dropdown-item.attivo {
            background: var(--oro-chiaro);
            color: var(--oro-testo);
            transform: translateX(4px);
        }

        @media (min-width: 992px) {
            .navbar .dropdown:hover > .dropdown-menu {
                display: block;
                animation: comparsa .25s ease;
            }

            .menu-servizi::before {
                content: "";
                position: absolute;
                top: -.6rem;
                left: 0;
                right: 0;
                height: .6rem;
            }
        }

/* ================= HERO PAGINA ================= */

        
        .hero-servizio {
            min-height: 60vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            background: var(--scuro);
            padding: 9.5rem 0 4.5rem;
        }

        .hero-servizio .hero-bg {
            position: absolute;
            inset: 0;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            animation: kenburns 22s ease-in-out infinite alternate;
            will-change: transform;
        }

        @keyframes kenburns {
            from { transform: scale(1); }
            to   { transform: scale(1.1) translate(-1.5%, -1%); }
        }

        .hero-servizio .hero-overlay {
            position: absolute;
            inset: 0;
            background:
                linear-gradient(100deg, rgba(24, 30, 34, .93) 0%, rgba(24, 30, 34, .75) 45%, rgba(24, 30, 34, .4) 100%),
                linear-gradient(0deg, rgba(169, 130, 47, .18), rgba(169, 130, 47, .18));
        }

        .hero-servizio .hero-badge {
            background: rgba(255, 255, 255, .14);
            color: #ecd9a8;
            backdrop-filter: blur(4px);
        }

        .hero-servizio h1 {
            font-weight: 800;
            font-size: clamp(1.9rem, 4.2vw, 3rem);
            line-height: 1.14;
            color: #ffffff;
            letter-spacing: .5px;
        }

        .hero-servizio h1 .gold {
            background: linear-gradient(135deg, #e8cc82, var(--oro));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-servizio .lead { max-width: 640px; color: rgba(255, 255, 255, .88); }

        .hero-servizio .btn-outline-scuro { border-color: #fff; color: #fff; }

        .hero-servizio .btn-outline-scuro:hover { background: #fff; color: var(--scuro); }

/* Meta rapide sotto al titolo (luogo · anno · servizio) */

        
        .hero-meta {
            display: flex;
            flex-wrap: wrap;
            gap: .6rem 1.4rem;
            margin-top: 1.4rem;
            color: rgba(255, 255, 255, .82);
            font-size: .88rem;
            font-weight: 600;
        }

        .hero-meta span { display: inline-flex; align-items: center; gap: .5rem; }

        .hero-meta i { color: #e8cc82; }

/* Breadcrumb nell'hero */

        
        .breadcrumb-servizio {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .35rem;
            margin-bottom: 2.5rem;
            padding: 0;
            font-size: .82rem;
            font-weight: 600;
            letter-spacing: .6px;
        }

        .breadcrumb-servizio a {
            color: rgba(255, 255, 255, .85);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            transition: color .2s ease;
        }

        .breadcrumb-servizio a:hover { color: #e8cc82; }

        .breadcrumb-servizio .separatore { color: rgba(255, 255, 255, .45); font-size: .7rem; }

        .breadcrumb-servizio .corrente { color: #e8cc82; max-width: 100%; }

        @media (prefers-reduced-motion: reduce) {
            .hero-servizio .hero-bg { animation: none; }
        }

/* ================= DETTAGLIO PROGETTO ================= */

        
        #dettaglio { padding: 5.5rem 0; background: linear-gradient(180deg, #fdfbf5 0%, #faf7ef 100%); }

/* Copertina grande del progetto */

        
        .progetto-copertina {
            position: relative;
            border-radius: 22px;
            overflow: hidden;
            border: 1px solid #eee6d4;
            box-shadow: 0 22px 50px rgba(46, 59, 66, .16);
            margin-bottom: 2.4rem;
        }

        .progetto-copertina img {
            display: block;
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }

        .progetto-copertina .badge-categoria-foto {
            position: absolute;
            top: 18px;
            left: 18px;
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .5rem 1rem;
            border-radius: 50rem;
            background: rgba(255, 255, 255, .94);
            color: var(--oro-testo);
            font-size: .74rem;
            font-weight: 700;
            letter-spacing: .8px;
            text-transform: uppercase;
            box-shadow: 0 8px 20px rgba(24, 30, 34, .18);
            backdrop-filter: blur(4px);
        }

/* Testo del racconto */

        
        .blocco-testo h2 {
            font-size: 1.5rem;
            font-weight: 800;
            margin-bottom: .4rem;
        }

        .blocco-testo .occhiello {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            color: var(--oro-testo);
            font-weight: 700;
            font-size: .78rem;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            margin-bottom: .8rem;
        }

        .blocco-testo p { line-height: 1.9; margin-bottom: 1.1rem; }

        .blocco-sfida {
            background: var(--oro-chiaro);
            border-left: 4px solid var(--oro);
            border-radius: 0 14px 14px 0;
            padding: 1.2rem 1.4rem;
            margin-bottom: 2rem;
            font-size: .98rem;
            line-height: 1.8;
            color: var(--scuro);
        }

        .blocco-sfida strong { color: var(--oro-testo); }

/* Lista "Cosa abbiamo fatto" */

        
        .lista-interventi {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: .8rem 1.6rem;
        }

        .lista-interventi li {
            display: flex;
            align-items: flex-start;
            gap: .7rem;
            font-size: .92rem;
            font-weight: 600;
            color: var(--scuro);
            line-height: 1.5;
        }

        .lista-interventi li i {
            flex-shrink: 0;
            margin-top: .1rem;
            color: var(--oro-scuro);
            font-size: 1.05rem;
        }

        @media (max-width: 575.98px) {
            .lista-interventi { grid-template-columns: 1fr; }
        }

/* ================= SCHEDA PROGETTO (sidebar) ================= */

        
        .scheda-progetto {
            background: linear-gradient(160deg, #fffefb 0%, #fdf8ec 100%);
            border: 1px solid #e6d5a8;
            border-radius: 18px;
            padding: 1.7rem 1.6rem;
            box-shadow: 0 14px 34px rgba(169, 130, 47, .12);
            position: relative;
            overflow: hidden;
        }

        .scheda-progetto::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--oro-scuro), var(--oro) 45%, #e8cc82 70%, var(--oro-scuro));
        }

        @media (min-width: 992px) {
            .scheda-progetto.sticky-desktop { position: sticky; top: 100px; }
        }

        .scheda-progetto h3 {
            font-size: .82rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: var(--scuro);
            margin-bottom: 1.1rem;
        }

        .scheda-progetto h3 i { color: var(--oro-scuro); margin-right: .4rem; }

        .scheda-lista { display: grid; gap: .2rem; }

        .scheda-riga {
            display: flex;
            align-items: flex-start;
            gap: .85rem;
            padding: .8rem 0;
            border-bottom: 1px solid #f0e5cb;
        }

        .scheda-riga:last-child { border-bottom: none; }

        .scheda-riga .ico {
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            border-radius: 11px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            color: #fff;
            background: linear-gradient(135deg, #d9b866, var(--oro-scuro));
            box-shadow: 0 6px 14px rgba(169, 130, 47, .3);
        }

        .scheda-riga .testo { display: flex; flex-direction: column; }

        .scheda-riga .label {
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--oro-testo);
        }

        .scheda-riga .valore { font-size: .95rem; font-weight: 600; color: var(--scuro); }

        .scheda-riga a.valore { text-decoration: none; }

        .scheda-riga a.valore:hover { color: var(--oro-scuro); text-decoration: underline; }

        .scheda-progetto .btn-oro { width: 100%; text-align: center; margin-top: 1.3rem; }

        .scheda-progetto .btn-scheda-secondario {
            display: block;
            width: 100%;
            text-align: center;
            margin-top: .7rem;
            padding: .6rem 1rem;
            border-radius: 50rem;
            border: 1px solid #e0cf9f;
            background: #fff;
            color: var(--scuro);
            font-weight: 700;
            font-size: .85rem;
            text-decoration: none;
            transition: background .25s ease, border-color .25s ease, color .25s ease;
        }

        .scheda-progetto .btn-scheda-secondario:hover {
            background: var(--oro-chiaro);
            border-color: var(--oro);
            color: var(--oro-testo);
        }

/* ================= GALLERIA ================= */

        
        #galleria {
            padding: 5.5rem 0;
            background: linear-gradient(180deg, #f4edda 0%, #f9f4e8 100%);
            position: relative;
            overflow: hidden;
        }

        #galleria::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 6px;
            background: linear-gradient(90deg, var(--oro-scuro) 0%, var(--oro) 25%, #e8cc82 50%, var(--oro) 75%, var(--oro-scuro) 100%);
        }

        .griglia-galleria {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        @media (max-width: 767.98px) { .griglia-galleria { grid-template-columns: repeat(2, 1fr); } }

        @media (max-width: 419.98px) { .griglia-galleria { grid-template-columns: 1fr; } }

        .galleria-item {
            position: relative;
            margin: 0;
            padding: 0;
            border: none;
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            cursor: zoom-in;
            box-shadow: 0 12px 30px rgba(46, 59, 66, .12);
            transition: transform .3s ease, box-shadow .3s ease;
        }

        .galleria-item img {
            display: block;
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            transition: transform .5s ease;
        }

        .galleria-item::after {
            content: "\F52A"; /* bi-zoom-in */
            font-family: "bootstrap-icons";
            position: absolute;
            top: 12px;
            right: 12px;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255, 255, 255, .92);
            color: var(--oro-testo);
            font-size: 1rem;
            opacity: 0;
            transform: scale(.8);
            transition: opacity .3s ease, transform .3s ease;
        }

        .galleria-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 18px 40px rgba(169, 130, 47, .22);
        }

        .galleria-item:hover img { transform: scale(1.07); }

        .galleria-item:hover::after { opacity: 1; transform: scale(1); }

        .galleria-item:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }

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

        
        .lightbox {
            position: fixed;
            inset: 0;
            z-index: 1080;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(18, 22, 25, .93);
            padding: 2rem 1rem;
        }

        .lightbox.aperto { display: flex; }

        .lightbox img {
            max-width: min(1100px, 94vw);
            max-height: 84vh;
            border-radius: 12px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
            animation: fadeUp .4s ease;
        }

        .lightbox-btn {
            position: absolute;
            border: none;
            background: rgba(255, 255, 255, .12);
            color: #fff;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background .25s ease, transform .2s ease;
        }

        .lightbox-btn:hover { background: var(--oro-scuro); transform: scale(1.06); }

        .lightbox-chiudi { top: 22px; right: 22px; }

        .lightbox-prec { left: 20px; top: 50%; transform: translateY(-50%); }

        .lightbox-succ { right: 20px; top: 50%; transform: translateY(-50%); }

        .lightbox-prec:hover, .lightbox-succ:hover { transform: translateY(-50%) scale(1.06); }

        .lightbox-conta {
            position: absolute;
            bottom: 22px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, .85);
            font-size: .85rem;
            font-weight: 600;
            letter-spacing: 1px;
        }

        @media (max-width: 575.98px) {
            .lightbox-prec { left: 8px; }
            .lightbox-succ { right: 8px; }
            .lightbox-btn { width: 44px; height: 44px; font-size: 1.25rem; }
        }

/* ================= ALTRI PROGETTI ================= */

        
        #altri-progetti { padding: 5.5rem 0 6rem; background: var(--crema); }

        .card-progetto {
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
            border: 1px solid #eee6d4;
            border-radius: 18px;
            background: #fff;
            transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
        }

        .card-progetto::after {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--oro), var(--oro-scuro));
            border-radius: 0 0 4px 4px;
            transition: width .4s ease;
            z-index: 2;
        }

        .card-progetto:hover {
            transform: translateY(-8px);
            box-shadow: 0 18px 40px rgba(169, 130, 47, .16);
            border-color: var(--oro);
        }

        .card-progetto:hover::after { width: 55%; }

        .card-progetto .foto {
            position: relative;
            overflow: hidden;
            aspect-ratio: 16 / 10;
            background: var(--oro-chiaro);
        }

        .card-progetto .foto img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s ease;
        }

        .card-progetto:hover .foto img { transform: scale(1.07); }

        .card-progetto .foto::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(24, 30, 34, 0) 55%, rgba(24, 30, 34, .32) 100%);
            opacity: 0;
            transition: opacity .35s ease;
        }

        .card-progetto:hover .foto::after { opacity: 1; }

        .card-progetto .corpo {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            padding: 1.6rem 1.6rem 1.4rem;
        }

        .card-progetto h3 {
            font-size: 1.08rem;
            font-weight: 700;
            line-height: 1.35;
            margin-bottom: .55rem;
        }

        .card-progetto .sottotitolo {
            font-size: .88rem;
            line-height: 1.7;
            margin-bottom: 1.2rem;
        }

        .card-progetto .fondo {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .8rem;
            flex-wrap: wrap;
            padding-top: 1.1rem;
            border-top: 1px solid #f0e8d6;
        }

        .card-progetto .luogo {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            font-size: .78rem;
            font-weight: 600;
            color: var(--oro-testo);
            letter-spacing: .4px;
        }

        .badge-categoria {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .4rem .9rem;
            border-radius: 50rem;
            background: var(--oro-chiaro);
            border: 1px solid #ecdfc0;
            color: var(--oro-testo);
            font-size: .7rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .badge-categoria i { font-size: .85rem; }

        .card-progetto .badge-categoria {
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 2;
            background: rgba(255, 255, 255, .94);
            border-color: rgba(255, 255, 255, .55);
            box-shadow: 0 4px 12px rgba(24, 30, 34, .16);
        }

        .card-progetto .fondo .link-progetto { margin-left: auto; }

        .link-progetto {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .55rem 1.3rem;
            border-radius: 50rem;
            background: linear-gradient(135deg, #d9b866, var(--oro));
            color: var(--scuro);
            font-size: .74rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            text-decoration: none;
            box-shadow: 0 6px 16px rgba(169, 130, 47, .25);
            transition: background .3s ease, color .3s ease, transform .25s ease, box-shadow .25s ease;
        }

        .link-progetto i { transition: transform .3s ease; }

        .link-progetto:hover,
        .card-progetto:hover .link-progetto {
            background: var(--scuro);
            color: #d9b866;
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(46, 59, 66, .32);
        }

        .link-progetto:hover i,
        .card-progetto:hover .link-progetto i { transform: translateX(4px); }

/* ================= CTA FINALE ================= */

        
        #cta-finale {
            background: linear-gradient(120deg, #6f541e 0%, #7c5f20 55%, #8a6a26 100%);
            color: #fff;
            padding: 5rem 0;
            position: relative;
            overflow: hidden;
        }

        #cta-finale::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, var(--oro-scuro) 0%, var(--oro) 25%, #e8cc82 50%, var(--oro) 75%, var(--oro-scuro) 100%);
        }

        #cta-finale::after {
            content: "";
            position: absolute;
            width: 380px;
            height: 380px;
            border: 40px solid rgba(255, 255, 255, .08);
            border-radius: 50%;
            top: -160px;
            right: -120px;
        }

        #cta-finale .container { position: relative; z-index: 1; }

        #cta-finale h2 { color: #fff; font-weight: 800; }

        .btn-bianco {
            background: #fff;
            color: var(--oro-testo);
            font-weight: 700;
            padding: .75rem 1.8rem;
            border-radius: 50rem;
            border: none;
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .btn-bianco:hover {
            background: #fff;
            color: var(--oro-testo);
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
        }

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

        
        @media (max-width: 991.98px) {
            .hero-servizio { min-height: 0; padding: 7.5rem 0 3.2rem; }

            .navbar-collapse {
                margin-top: .7rem;
                padding: .3rem .1rem .9rem;
                border-top: 1px solid #eee6d4;
                max-height: calc(100dvh - 84px);
                overflow-y: auto;
            }

            .navbar .nav-link {
                margin: 0;
                padding: .7rem .3rem;
                font-size: 1rem;
            }

            .navbar .nav-link::after { display: none; }

            .navbar .nav-link.active { color: var(--oro-testo); }

            .navbar:has(.navbar-collapse.show) { box-shadow: 0 4px 24px rgba(46, 59, 66, .12); }

            .menu-servizi {
                box-shadow: none;
                margin: .2rem 0 .6rem;
                background: #fbf8f0;
            }

            .menu-servizi .dropdown-item { padding: .68rem .9rem; }

            .navbar .nav-item .btn-oro {
                display: block;
                width: 100%;
                text-align: center;
                margin-top: .4rem;
                padding: .75rem 1rem !important;
                font-size: .95rem;
            }

            .btn-oro:active, .btn-bianco:active { transform: scale(.97); }

            .scheda-progetto { margin-top: 2.4rem; }
        }

        @media (max-width: 575.98px) {
            #dettaglio, #galleria { padding: 3.8rem 0; }
            #altri-progetti { padding: 3.8rem 0 4.2rem; }
            #cta-finale { padding: 3.4rem 0; }

            .row.g-4 { --bs-gutter-y: 2rem; }

            #cta-finale .btn-bianco {
                display: flex;
                justify-content: center;
                width: 100%;
                padding-top: .85rem;
                padding-bottom: .85rem;
            }

            footer { padding-top: 3.2rem; }
            footer a { overflow-wrap: anywhere; }
            .footer-bottom { margin-top: 2rem; }

            .btn-whatsapp {
                right: max(16px, env(safe-area-inset-right));
                bottom: max(18px, env(safe-area-inset-bottom));
            }

            .btn-top {
                right: max(21px, env(safe-area-inset-right));
                bottom: 88px;
            }
        }