/* ============================================================
   STILE BASE E PC (DESKTOP)
   ============================================================ */

/* RESET DI BASE */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background: #f3f4f6;
    color: #111827;
    overflow-x: hidden; /* Evita scorrimenti laterali */
}

/* HEADER */
header {
    position: relative;
    background: #ffffff;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    z-index: 10;
}

/* TESTO ANIMATO HEADER */
.slider {
    flex: 1;
    margin: 0 16px;
    border-radius: 20px;
    background: #e5e7eb;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.animated-text {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15em;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111827;
}

.animated-text span {
    display: inline-block;
    opacity: 0;
    animation: slideIn 0.8s forwards;
}

.animated-text span:hover {
    animation: dance 0.25s infinite alternate !important;
}

@keyframes slideIn {
    from { transform: translateX(100vw); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes dance {
    from { transform: translate(0,0) rotate(0deg); }
    to   { transform: translate(4px,-4px) rotate(5deg); }
}

/* HAMBURGER */
.hamburger {
    cursor: pointer;
    padding: 8px 10px;
    font-size: 22px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

/* SIDEBAR */
.sidebar {
    position: fixed;
    top: 16px;
    left: 16px;
    height: calc(100% - 32px);
    width: 240px;
    background: #111827;
    color: #e5e7eb;
    padding-top: 80px;
    transform: translateX(-260px);
    transition: 0.25s;
    border-radius: 20px;
    z-index: 1000;
}
.sidebar.active { transform: translateX(0); }
.sidebar a {
    display: block;
    padding: 12px 20px;
    color: #e5e7eb;
    text-decoration: none;
    border-radius: 999px;
    margin: 6px 10px;
}
.sidebar a:hover { background: #1f2937; }

/* BARRA DI RICERCA */
.search-bar-section { width: 100%; padding-top: 10px; }
.search-bar-wrapper {
    width: 66vw;
    max-width: 1000px;
    margin: 0 auto 10px auto;
    position: relative;
}
.search-box {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 999px;
    background: #f9fafb; border: 1px solid #e5e7eb;
}
.search-box input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; }
.icon-search-svg { width: 18px; height: 18px; stroke: #4b5563; }

/* HERO IMAGE */
.hero-fullscreen { width: 100%; height: 60vh; overflow: hidden; transition: 0.4s; }
.hero-fullscreen img { width: 100%; height: 100%; object-fit: cover; }

/* CARD E VIDEO */
.card { background: white; border-radius: 20px; padding: 18px 20px; box-shadow: 0 8px 18px rgba(0,0,0,0.06); margin-bottom: 20px; }
.video-card, .text-below-video { width: 66vw; margin: 0 auto 20px auto; }
.video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; }
.video-wrapper iframe { position: absolute; width: 100%; height: 100%; border-radius: 20px; border: none; }

/* GALLERIA + ADS (PC) */
.gallery-layout {
    width: 66vw; 
    margin: 20px auto;
    display: grid; 
    grid-template-columns: 1fr 2fr 1fr; 
    gap: 16px;
}
.ad-box { background: #fff; border-radius: 16px; padding: 12px; border: 1px solid #e5e7eb; text-align: center; min-height: 120px; overflow: hidden; }

/* EFFETTO CLICCA PER INGRANDIRE */
.gallery { display: grid; grid-template-columns: 1fr; gap: 16px; }
.gallery-item { position: relative; overflow: hidden; border-radius: 16px; }
.gallery-item img { width: 100%; border-radius: 16px; cursor: zoom-in; transition: 0.3s; }

.gallery-item::after {
    content: "Clicca per ingrandire";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(17, 24, 39, 0.85);
    color: white;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item:hover img { filter: brightness(0.7); transform: scale(1.02); }

/* ZOOM E POPUP 3D */
.img-zoom-overlay { position: fixed; inset: 0; display: none; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; z-index: 2500; }
.img-zoom-overlay.visible { display: flex; }
.img-zoom-overlay img { width: 1024px; height: 768px; object-fit: contain; max-width: 95%; max-height: 95%; border-radius: 20px; }

.section-3d { width: 100%; padding: 24px 16px; background: #111827; color: white; text-align: center; margin-top: 40px; cursor: pointer; }
.popup-overlay { position: fixed; inset: 0; display: none; background: rgba(0,0,0,0.7); justify-content: center; align-items: center; z-index: 2000; }
.popup-overlay.visible { display: flex; }
.popup-3d { background: #fff; padding: 24px; border-radius: 20px; max-width: 95%; }
.iframe-3d { width: 1024px; max-width: 100%; height: 576px; border-radius: 16px; border: none; background: #000; }

/* FOOTER E WHATSAPP */
.site-footer { width: 100%; background: #111827; padding: 30px 20px; margin-top: 40px; color: #f9fafb; border-top-left-radius: 24px; border-top-right-radius: 24px; }
.footer-content { width: 66vw; margin: 0 auto; text-align: center; }
.social-icon { width: 40px; height: 40px; display: inline-flex; background: #1f2937; border-radius: 50%; align-items: center; justify-content: center; padding: 8px; transition: 0.2s; }
.social-icon img { filter: invert(100%); width: 100%; }
.social-icon:hover { transform: scale(1.1); background: #374151; }

.whatsapp-float { position: fixed; bottom: 120px; right: 20px; width: 64px; height: 64px; z-index: 3000; }
.whatsapp-float img { width: 100%; height: 100%; padding: 12px; background: #25D366; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,0.25); }

/* ============================================================
   ADATTAMENTO DINAMICO PER SMARTPHONE (Media Query)
   ============================================================ */
@media screen and (max-width: 992px) {
    /* Portiamo le larghezze al 92% per sfruttare lo schermo del telefono */
    .search-bar-wrapper, 
    .video-card, 
    .text-below-video, 
    .gallery-layout, 
    .footer-content {
        width: 92vw !important;
    }

    /* Incolonniamo Ads e Galleria */
    .gallery-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Rimuoviamo l'effetto "Clicca per ingrandire" che su touch non serve */
    .gallery-item::after { display: none !important; }
    .gallery-item:hover img { filter: none; transform: none; }

    /* Ridimensionamento testi e icone */
    .animated-text { font-size: 1.8rem; justify-content: center; }
    .slider { margin: 0; padding: 10px; }

    .iframe-3d {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* Impedisce ai banner AdSense di uscire dai bordi */
    ins.adsbygoogle {
        max-width: 100% !important;
        display: block !important;
    }

    /* WhatsApp pił basso su mobile per non coprire i contenuti */
    .whatsapp-float {
        bottom: 20px;
        right: 15px;
        width: 55px;
        height: 55px;
    }
}