/* ══════════════════════════════════════════════════════════════
   STYLES-GALLERY.CSS – pagine galleria (matrimonio, famiglia,
   natale, business). Navbar, menu e cookie sono in common.css.
══════════════════════════════════════════════════════════════ */

html, body {
    height: 100%;
    overflow: hidden; /* lo scroll lo gestisce la gallery */
}

/* navbar trasparente sopra le foto */
.navbar,
.navbar.scrolled {
    background: transparent;
    backdrop-filter: none;
    padding: 24px 36px;
    pointer-events: none;
}
.navbar > * { pointer-events: auto; }
.navbar-logo img { height: 32px; filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,0.4)); }
.navbar-menu-btn span { box-shadow: 0 0 6px rgba(0,0,0,0.5); }

/* ── CONTENITORE ────────────────────────────────────────────── */
.gallery-container {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.gallery-container::-webkit-scrollbar { display: none; }
.gallery-container.is-dragging { cursor: grabbing; }

/* ── SINGOLA FOTO ───────────────────────────────────────────── */
/* la larghezza deriva dall'aspect-ratio indicato nell'HTML,
   così lo spazio è riservato anche prima che la foto sia scaricata */
.gallery-item {
    position: relative;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    background: #111;
    box-shadow: 2px 0 25px rgba(0,0,0,0.5);
}
.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    color: transparent; /* nasconde l'alt durante il caricamento */
}
.gallery-item img.is-loaded { opacity: 1; }

/* spinner durante il caricamento */
.gallery-item.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 24px; height: 24px;
    margin: -12px 0 0 -12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-top-color: rgba(255,255,255,0.5);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── PANNELLO DI TESTO ──────────────────────────────────────── */
.info-text-block {
    background: #fafafa;
    width: 650px;
    aspect-ratio: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5rem 3rem 4rem;
    box-shadow: none;
    overflow-y: auto;
    cursor: auto;
    user-select: text;
    -webkit-user-select: text;
}
.info-content-wrapper {
    font-family: var(--font-ui);
    color: #0a0a0a;
    text-align: center;
    width: 100%;
    margin: auto 0;
}
.info-subtitle {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 1.4rem;
    color: #666;
}
.info-content-wrapper h1,
.info-content-wrapper h2 {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 1.4rem;
    color: #0a0a0a;
}
.info-lead {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.6;
    color: #333;
}
.info-divider {
    width: 40px;
    height: 1px;
    background: #0a0a0a;
    margin: 1.8rem auto;
}
.info-description p {
    font-size: 0.95rem;
    line-height: 1.8;
    font-weight: 300;
    color: #444;
    margin-bottom: 1rem;
}
.info-description p:last-child { margin-bottom: 0; }

/* schermi desktop bassi: testo più compatto per stare nell'altezza */
@media (min-width: 769px) and (max-height: 820px) {
    .info-text-block { padding: 4.5rem 2.6rem 2rem; }
    .info-subtitle { margin-bottom: 0.8rem; }
    .info-content-wrapper h1, .info-content-wrapper h2 { font-size: 2.3rem; margin-bottom: 0.8rem; }
    .info-lead { font-size: 1.05rem; }
    .info-divider { margin: 1rem auto; }
    .info-description p { font-size: 0.84rem; line-height: 1.65; margin-bottom: 0.6rem; }
}

/* ── INDICAZIONE "SCORRI" ───────────────────────────────────── */
.scroll-hint {
    position: fixed;
    bottom: calc(2.4rem + var(--cookie-h, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--white);
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
    pointer-events: none;
    transition: opacity 0.5s ease;
    animation: nudge 2s ease-in-out infinite;
}
.scroll-hint.hidden { opacity: 0; }
.scroll-hint .bi-arrow-down { display: none; }
@keyframes nudge {
    0%, 100% { transform: translateX(-50%); }
    50%      { transform: translateX(calc(-50% + 5px)); }
}
@keyframes nudgeDown {
    0%, 100% { transform: translateX(-50%); }
    50%      { transform: translate(-50%, 5px); }
}

/* ── CONTATORE (solo mobile) ────────────────────────────────── */
.slide-counter {
    position: fixed;
    bottom: calc(1rem + var(--cookie-h, 0px));
    left: 1.2rem;
    z-index: 70;
    display: none;
    align-items: center;
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--white);
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.slide-counter em {
    font-style: normal;
    font-size: 0.75rem;
    opacity: 0.5;
    margin: 0 3px;
}

/* ── PULSANTE WHATSAPP ──────────────────────────────────────── */
.cta-float {
    position: fixed;
    bottom: calc(2rem + var(--cookie-h, 0px));
    right: 2.5rem;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #0a0a0a;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}
.cta-float:hover { transform: scale(1.05); }
.cta-float i { font-size: 1.1rem; }

/* ── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .navbar, .navbar.scrolled { padding: 18px 20px; }
    .navbar-logo img { height: 26px; }

    .gallery-container {
        flex-direction: column;
        gap: 0;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        cursor: default;
    }
    .gallery-item {
        width: 100%;
        height: 100dvh;
        aspect-ratio: auto !important;
        scroll-snap-align: start;
        box-shadow: none;
    }

    .info-text-block {
        width: 100%;
        padding: 5.5rem 1.6rem 6rem;
        align-items: flex-start;
    }
    .info-content-wrapper h1, .info-content-wrapper h2 { font-size: 2.2rem; }
    .info-description p { font-size: 0.9rem; line-height: 1.7; }

    .slide-counter { display: flex; }

    .scroll-hint {
        bottom: calc(5.4rem + var(--cookie-h, 0px));
        flex-direction: column;
        gap: 4px;
        animation-name: nudgeDown;
    }
    .scroll-hint .bi-arrow-right { display: none; }
    .scroll-hint .bi-arrow-down { display: inline-block; }

    /* WhatsApp: pulsante tondo in basso a destra */
    .cta-float {
        bottom: calc(1rem + var(--cookie-h, 0px));
        right: 1rem;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        font-size: 0;
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    }
    .cta-float i { font-size: 1.35rem; }
}

/* link "Vedi i prezzi" nel pannello di testo */
.info-description .info-more { margin-top: 1.6rem; }
.info-more a {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #0a0a0a;
    text-decoration: none;
    border: 1px solid #0a0a0a;
    padding: 10px 18px;
    transition: background 0.2s, color 0.2s;
}
.info-more a:hover { background: #0a0a0a; color: #fff; }

/* ── PANNELLI "COME FUNZIONA" E "DOMANDE FREQUENTI" ─────────── */
.info-content-wrapper h2 { font-size: 2.6rem; }
.info-steps { list-style: none; counter-reset: step; text-align: left; margin: 0 auto; max-width: 480px; }
.info-steps li { counter-increment: step; position: relative; padding: 0 0 1.1rem 3rem; }
.info-steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute; left: 0; top: 0.1rem;
    font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: #999;
}
.info-steps strong { display: block; font-weight: 400; font-size: 0.98rem; color: #0a0a0a; margin-bottom: 0.2rem; }
.info-steps span { display: block; font-size: 0.9rem; font-weight: 300; line-height: 1.7; color: #444; }
.info-price {
    margin: 0.4rem auto 0; max-width: 480px;
    padding: 1rem 1.2rem; border: 1px solid #0a0a0a;
    font-size: 0.9rem; font-weight: 300; line-height: 1.6; color: #222; text-align: center;
}
.info-price strong { font-weight: 500; }
.info-quote { margin: 1.8rem auto 0; max-width: 480px; }
.info-quote p { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.45; color: #222; }
.info-quote cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #777; }
.faq { text-align: left; max-width: 500px; margin: 0 auto; }
.faq details { border-top: 1px solid rgba(0,0,0,0.15); }
.faq details:last-child { border-bottom: 1px solid rgba(0,0,0,0.15); }
.faq summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 0.85rem 2rem 0.85rem 0;
    font-size: 0.95rem; font-weight: 400; color: #0a0a0a;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0.2rem; top: 0.7rem; font-size: 1.2rem; color: #777; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1rem; font-size: 0.9rem; font-weight: 300; line-height: 1.7; color: #444; }
.info-actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
@media (min-width: 769px) and (max-height: 820px) {
    .info-content-wrapper h2 { font-size: 2rem; margin-bottom: 0.8rem; }
    .info-steps li { padding-bottom: 0.7rem; }
    .info-steps span, .faq details p { font-size: 0.82rem; line-height: 1.55; }
    .faq summary { padding: 0.6rem 2rem 0.6rem 0; font-size: 0.88rem; }
}
@media (max-width: 768px) {
    .info-content-wrapper h2 { font-size: 2rem; }
}
@media (max-width: 768px) {
    /* i pannelli di testo si allungano quanto serve: niente scorrimento interno */
    .info-text-block { height: auto !important; min-height: 100dvh; overflow: visible; }
}

/* logo e menu leggibili sia sulle foto sia sui pannelli bianchi */
.navbar, .navbar.scrolled { mix-blend-mode: difference; }
.navbar-logo img { filter: brightness(0) invert(1); }
.navbar-menu-btn span { box-shadow: none; }
body.menu-is-open .navbar { mix-blend-mode: normal; }

/* pannelli finali più larghi su desktop, così il testo sta nell'altezza */
@media (min-width: 769px) {
    .info-text-block[aria-labelledby^="how-"],
    .info-text-block[aria-labelledby^="faq-"] { width: 820px; padding-top: 4.2rem; padding-bottom: 2rem; }
    .info-text-block[aria-labelledby^="how-"] .info-steps,
    .info-text-block[aria-labelledby^="how-"] .info-price,
    .info-text-block[aria-labelledby^="faq-"] .faq,
    .info-text-block[aria-labelledby^="faq-"] .info-quote { max-width: 640px; }
}