/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{
    font-family:'Lora',Georgia,serif;
    background:#0a0a0a;
    color:#e0dcd5;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:#c9a84c;text-decoration:none;transition:color .3s}
a:hover{color:#e8c75a}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 1.5rem}
.text-center{text-align:center}

/* ===== TIPOGRAFIA ===== */
h1,h2,h3,h4{font-family:'Cinzel',Georgia,serif;font-weight:700;line-height:1.2}
h2{font-size:clamp(1.6rem,4vw,2.5rem);margin-bottom:0.75rem}

.section__title{
    text-align:center;
    text-transform:uppercase;
    letter-spacing:0.15em;
    position:relative;
    padding-bottom:1rem;
    margin-bottom:0.75rem;
}
.section__title::after{
    content:'';
    display:block;
    width:60px;
    height:2px;
    background:#c9a84c;
    margin:1rem auto 0;
}
.section__subtitle{
    text-align:center;
    color:#8a8580;
    font-style:italic;
    font-size:1.05rem;
    margin-bottom:3rem;
}

/* ===== NAV ===== */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(10,10,10,0.92);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(201,168,76,0.15);
    transition:background .3s;
}
.nav__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:64px;
}
.nav__logo{
    font-family:'Cinzel',Georgia,serif;
    font-weight:700;
    font-size:1.15rem;
    color:#e0dcd5;
    letter-spacing:0.08em;
}
.nav__logo:hover{color:#c9a84c}
.nav__menu{
    display:flex;
    list-style:none;
    gap:2rem;
}
.nav__menu a{
    color:#b0aaa5;
    font-family:'Inter',sans-serif;
    font-size:0.85rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.08em;
    transition:color .3s;
}
.nav__menu a:hover{color:#c9a84c}

/* Hamburger */
.nav__toggle{
    display:none;
    background:none;border:none;cursor:pointer;
    width:28px;height:20px;
    position:relative;
    z-index:101;
}
.nav__toggle span{
    display:block;
    width:100%;height:2px;
    background:#e0dcd5;
    position:absolute;
    left:0;
    transition:all .3s;
}
.nav__toggle span:nth-child(1){top:0}
.nav__toggle span:nth-child(2){top:9px}
.nav__toggle span:nth-child(3){top:18px}
.nav__toggle.active span:nth-child(1){top:9px;transform:rotate(45deg)}
.nav__toggle.active span:nth-child(2){opacity:0}
.nav__toggle.active span:nth-child(3){top:9px;transform:rotate(-45deg)}

/* ===== HERO ===== */
.hero{
    position:relative;
    height:100vh;
    min-height:600px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
}
.hero__bg{
    position:absolute;inset:0;z-index:0;
    background-image:url('/assets/images/punta-pietre-nere-storica.jpg');
    background-size:cover;
    background-position:center 30%;
}


.hero__content{
    position:relative;z-index:2;
    max-width:800px;
    padding:0 1.5rem;
    animation:heroFadeIn 1.5s ease-out;
}
@keyframes heroFadeIn{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
}
.hero__label{
    font-family:'Inter',sans-serif;
    font-size:0.9rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.3em;
    color:#fff;
    margin-bottom:1rem;
    text-shadow:0 1px 4px rgba(0,0,0,0.5), 0 0 20px rgba(0,0,0,0.4);
}
.hero__title{
    font-size:clamp(2.5rem,7vw,5rem);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:#fff;
    margin-bottom:1.5rem;
    text-shadow:0 1px 3px rgba(0,0,0,0.3), 0 4px 20px rgba(0,0,0,0.5);
    position:relative;
    padding-bottom:0.75rem;
}
.hero__title::after{
    content:'';
    display:block;
    width:80px;
    height:2px;
    background:linear-gradient(90deg,#c9a84c,transparent);
    margin:1rem auto 0;
    border-radius:1px;
}
.hero__subtitle{
    font-style:italic;
    font-size:clamp(1rem,2vw,1.25rem);
    color:#fff;
    margin-bottom:2.5rem;
    line-height:1.6;
    text-shadow:0 1px 12px rgba(0,0,0,0.5);
}

/* ===== SOCIAL SHARE IN HERO ===== */
.hero__share{
    display:flex;
    justify-content:center;
    gap:1rem;
    margin-top:2rem;
    position:relative;
    z-index:2;
}
.hero__share-link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.2);
    color:rgba(255,255,255,0.6);
    transition:all 0.3s ease;
    text-shadow:0 1px 6px rgba(0,0,0,0.4);
}
.hero__share-link:hover{
    color:#c9a84c;
    border-color:#c9a84c;
    background:rgba(201,168,76,0.1);
    transform:translateY(-2px);
}

.hero__scroll{
    position:absolute;
    bottom:2.5rem;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
    color:#8a8580;
    font-family:'Inter',sans-serif;
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.2em;
    animation:bounce 2s infinite;
}
@keyframes bounce{
    0%,100%{transform:translateX(-50%) translateY(0)}
    50%{transform:translateX(-50%) translateY(8px)}
}

/* ===== BUTTONS ===== */
.btn{
    display:inline-block;
    padding:0.85rem 2rem;
    font-family:'Inter',sans-serif;
    font-size:0.85rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.1em;
    border-radius:4px;
    transition:all .3s;
    cursor:pointer;
    border:2px solid #c9a84c;
    background:transparent;
    color:#c9a84c;
}
.btn--outline:hover{
    background:#c9a84c;
    color:#0a0a0a;
}

/* ===== SECTIONS ===== */
.section{
    padding:5rem 0;
}
.section--dark{
    background:#0f0f0f;
    border-top:1px solid rgba(201,168,76,0.08);
    border-bottom:1px solid rgba(201,168,76,0.08);
}

/* ===== MISSION ===== */
.mission{
    text-align:center;
    max-width:800px;
    margin:0 auto;
}
.mission__quote{
    font-family:'Cinzel',Georgia,serif;
    font-size:clamp(1.1rem,2.5vw,1.4rem);
    color:#c9a84c;
    line-height:1.5;
    margin-bottom:2rem;
    padding:2rem 0;
    border-top:1px solid rgba(201,168,76,0.3);
    border-bottom:1px solid rgba(201,168,76,0.3);
}
.mission__text{
    color:#a09a95;
    font-style:italic;
    margin-bottom:1rem;
}

/* ===== STORIA ===== */
.storia{
    max-width:750px;
    margin:0 auto;
}
.storia p{
    margin-bottom:1.5rem;
    font-size:1.05rem;
}
.storia__dropcap::first-letter{
    font-size:3.5em;
    font-weight:700;
    float:left;
    line-height:0.9;
    margin-right:0.4rem;
    color:#c9a84c;
    font-family:'Cinzel',Georgia,serif;
}
.storia h3{
    font-size:1.3rem;
    color:#c9a84c;
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin:2.5rem 0 1rem;
}
.storia__highlight{
    text-align:center;
    margin:2.5rem 0;
    padding:2rem 1.5rem;
    border:1px solid rgba(201,168,76,0.25);
    background:rgba(201,168,76,0.04);
    border-radius:4px;
}
.storia__highlight span{
    font-family:'Cinzel',Georgia,serif;
    font-size:1.15rem;
    color:#c9a84c;
    letter-spacing:0.05em;
}
.storia__loss{
    font-weight:600;
    font-size:1.15rem;
    text-align:center;
    color:#d4a050;
    padding:2rem;
    border-left:3px solid #8b3a3a;
    background:rgba(139,58,58,0.06);
    border-radius:0 4px 4px 0;
}

/* ===== CONFRONTO PRIMA/DOPO ===== */
.confronto{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
    max-width:900px;
    margin:0 auto;
}
.confronto__item{
    text-align:center;
}
.confronto__img{
    border-radius:6px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.08);
    aspect-ratio:4/3;
    background:#111;
}
.confronto__img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s;
}
.confronto__item:hover .confronto__img img{
    transform:scale(1.05);
}
.confronto__label{
    margin-top:0.75rem;
    font-family:'Inter',sans-serif;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.15em;
    color:#c9a84c;
}

/* ===== GALLERY ===== */
.gallery__filters{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:0.75rem;
    margin-bottom:2.5rem;
}
.gallery__filter{
    padding:0.5rem 1.25rem;
    font-family:'Inter',sans-serif;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
    border:1px solid rgba(201,168,76,0.2);
    background:transparent;
    color:#b0aaa5;
    border-radius:4px;
    cursor:pointer;
    transition:all .3s;
}
.gallery__filter:hover,
.gallery__filter.active{
    background:rgba(201,168,76,0.1);
    border-color:#c9a84c;
    color:#c9a84c;
}
.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:1rem;
}
.gallery__item{
    position:relative;
    border-radius:6px;
    overflow:hidden;
    cursor:pointer;
    aspect-ratio:4/3;
    background:#111;
    border:1px solid rgba(255,255,255,0.06);
}
.gallery__item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s;
}
.gallery__item:hover img{transform:scale(1.08)}
.gallery__item .gallery__caption{
    position:absolute;
    bottom:0;left:0;right:0;
    padding:0.75rem;
    background:linear-gradient(transparent,rgba(0,0,0,0.8));
    color:#e0dcd5;
    font-size:0.85rem;
    opacity:0;
    transition:opacity .3s;
}
.gallery__item:hover .gallery__caption{opacity:1}

/* Lightbox */
.gallery__lightbox{
    display:none;
    position:fixed;
    inset:0;
    z-index:200;
    background:rgba(0,0,0,0.95);
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
.gallery__lightbox.active{display:flex}
.gallery__lightbox img{
    max-width:90vw;
    max-height:80vh;
    object-fit:contain;
    border-radius:4px;
}
.gallery__lightbox .gallery__close{
    position:absolute;
    top:1.5rem;right:2rem;
    font-size:2.5rem;
    color:#fff;
    background:none;
    border:none;
    cursor:pointer;
    opacity:0.7;
    transition:opacity .3s;
}
.gallery__lightbox .gallery__close:hover{opacity:1}
.gallery__lightbox #lightboxCaption{
    margin-top:1rem;
    color:#b0aaa5;
    font-style:italic;
    text-align:center;
    max-width:600px;
}
.gallery__lightbox .gallery__prev,
.gallery__lightbox .gallery__next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:3rem;
    color:#fff;
    background:none;
    border:none;
    cursor:pointer;
    opacity:0.5;
    transition:opacity .3s;
    padding:1rem;
}
.gallery__lightbox .gallery__prev{left:1rem}
.gallery__lightbox .gallery__next{right:1rem}
.gallery__lightbox .gallery__prev:hover,
.gallery__lightbox .gallery__next:hover{opacity:1}

/* ===== DOCS GRID ===== */
.docs-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:1.25rem;
    max-width:900px;
    margin:0 auto;
}
.docs-card{
    padding:1.5rem;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:6px;
    transition:all .3s;
}
.docs-card:hover{
    background:rgba(201,168,76,0.04);
    border-color:rgba(201,168,76,0.2);
    transform:translateY(-2px);
}
.docs-card__title{
    font-family:'Cinzel',Georgia,serif;
    font-size:1rem;
    color:#c9a84c;
    margin-bottom:0.5rem;
}
.docs-card__desc{
    font-size:0.9rem;
    color:#8a8580;
    margin-bottom:0.75rem;
}
.docs-card__link{
    font-family:'Inter',sans-serif;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
}
.documenti-biblio{
    text-align:center;
    margin-top:3rem;
    padding:1.5rem;
    border:1px solid rgba(201,168,76,0.15);
    border-radius:6px;
}
.documenti-biblio h3{
    margin-bottom:0.75rem;
}

/* ===== BLOG PREVIEW ===== */
.blog-preview{
    max-width:800px;
    margin:0 auto;
}
.blog-preview__empty{
    text-align:center;
    color:#6a6560;
    font-style:italic;
    padding:3rem;
    border:1px dashed rgba(255,255,255,0.08);
    border-radius:6px;
}

/* ===== CONTATTI ===== */
.contatti{
    max-width:600px;
    margin:0 auto;
}
.contatti__form{
    display:flex;
    flex-direction:column;
    gap:1.25rem;
    margin-bottom:2.5rem;
}
.contatti__field{
    display:flex;
    flex-direction:column;
    gap:0.4rem;
}
.contatti__label{
    font-family:'Inter',sans-serif;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:#8a8580;
}
.contatti__input,
.contatti__textarea{
    width:100%;
    padding:0.75rem 1rem;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:4px;
    color:#e0dcd5;
    font-family:'Lora',Georgia,serif;
    font-size:0.95rem;
    transition:border-color 0.3s, background 0.3s;
}
.contatti__input:focus,
.contatti__textarea:focus{
    outline:none;
    border-color:#c9a84c;
    background:rgba(255,255,255,0.08);
}
.contatti__textarea{
    resize:vertical;
}
.contatti__submit{
    align-self:flex-start;
    cursor:pointer;
}
.contatti__submit:disabled{
    opacity:0.5;
    cursor:not-allowed;
}
.contatti__feedback{
    font-size:0.9rem;
    min-height:1.5rem;
}
.contatti__feedback--success{color:#6bbf6b}
.contatti__feedback--error{color:#e06060}
.contatti__info{
    text-align:center;
    border-top:1px solid rgba(255,255,255,0.08);
    padding-top:2rem;
}
.contatti__info p{
    margin-bottom:1rem;
    color:#b0aaa5;
}
.contatti__info strong{
    color:#e0dcd5;
}
.contatti__info a{
    color:#c9a84c;
}
.contatti__contrib{
    font-style:italic;
    font-size:0.9rem;
    max-width:450px;
    margin:0 auto;
}

/* ===== FOOTER ===== */
.footer{
    padding:3rem 0;
    border-top:1px solid rgba(255,255,255,0.05);
    text-align:center;
}
.footer__copy{
    font-family:'Inter',sans-serif;
    font-size:0.8rem;
    color:#6a6560;
    margin-bottom:0.5rem;
}
.footer__mission{
    font-style:italic;
    font-size:0.9rem;
    color:#5a5550;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
    .nav__toggle{display:block}
    .nav__menu{
        position:fixed;
        top:0;right:-100%;
        width:280px;height:100vh;
        background:rgba(10,10,10,0.98);
        border-left:1px solid rgba(201,168,76,0.15);
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:2rem;
        transition:right .4s;
        z-index:100;
    }
    .nav__menu.open{right:0}
    .nav__menu a{font-size:1rem}
    
    .confronto{
        grid-template-columns:1fr;
        max-width:500px;
    }
    .gallery{
        grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    }
    .section{padding:3rem 0}
}