/* ==========================================================================
   pages.css — stili delle pagine interne
   Estende main.css / components.css, stesse variabili e stessi breakpoint.
   ========================================================================== */


.hero-card
{
    padding: 40px 0;
}
.hero-card .breadcrumb
{
    justify-content: center;
    margin-bottom: 22px;
}
/* Hero solo testo allineato a sinistra (dettaglio news) */
.hero-card--left .breadcrumb
{
    justify-content: flex-start;
}
.hero-card h1
{
    color: var(--color-dark);
    font-size: 2.1rem;
    line-height: 1.15;
    letter-spacing: 2px;
}
/* Dettaglio news: titolo -20% su mobile (dopo .hero-card h1, stessa specificità);
   dai 620px in su valgono le regole standard dell'hero. */
.hero-card--left h1
{
    font-size: 1.7rem;
}
.hero-card__lead
{
    max-width: 640px;
    margin: 16px auto 0;
}
/* aspect-ratio sull'img stessa, come .team-photo */
.hero-card__img
{
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    margin-top: 32px;
}

/* ── Breadcrumb ────────────────────────────────────────────────────────── */
.breadcrumb
{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}
.breadcrumb li,
.breadcrumb a
{
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgba(255,255,255,0.7);
}
.breadcrumb a:hover
{
    color: var(--color-white);
}
.breadcrumb li + li::before
{
    content: '/';
    margin-right: 8px;
    color: rgba(255,255,255,0.45);
}
.breadcrumb li[aria-current]
{
    color: var(--color-white);
}

/* Breadcrumb su fondo chiaro */
.breadcrumb--dark li,
.breadcrumb--dark a
{
    color: var(--color-gray);
}
.breadcrumb--dark a:hover
{
    color: var(--color-pr);
}
.breadcrumb--dark li + li::before
{
    color: rgba(128,128,128,0.6);
}
.breadcrumb--dark li[aria-current]
{
    color: var(--color-pr-dark); /* la scheda prodotto lo tiene in verde base via .color-pr sul <li> */
}

/* ── Chip / filtri ─────────────────────────────────────────────────────── */
.chips
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}
.chip
{
    appearance: none;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--color-gray);
    background: transparent;
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1;
    padding: 11px 18px;
    border-radius: 999px;
    transition: all 250ms ease-in-out;
}
.chip:hover
{
    border-color: var(--color-pr);
    color: var(--color-pr);
}
.chip.is-active
{
    background-color: var(--color-pr);
    border-color: var(--color-pr);
    color: var(--color-white);
}
/* Filtri su sezione colorata: quelli non attivi diventano bianchi con bordo verde scuro */
.chips--on-gray .chip:not(.is-active)
{
    background-color: var(--color-white);
    border-color: var(--color-pr-dark);
}

/* ── Griglia card (prodotti, servizi) ───────────────────────────────────────────── */
/* Griglia CSS a colonne uguali dentro un contenitore a 14 colonne (16 da 1780):
   i bordi coincidono con il resto del contenuto e i filtri non lasciano buchi */
.card-grid
{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 620px)
{
    .card-grid
    {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}
@media (min-width: 1024px)
{
    .card-grid
    {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1780px)
{
    .card-grid
    {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Prossima esperienza (dettagli: orario, luogo, prezzo) ─────────────── */
.event-meta
{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: -6px 0 30px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(128,128,128,0.22);
}
.event-meta li
{
    position: relative;
    color: var(--color-dark);
    font-size: 0.95rem;
    line-height: 1.5rem;
    font-weight: 600;
    padding-left: 14px;
}
.event-meta li::before
{
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-sec);
}

/* ── Prodotti in evidenza ──────────────────────────────────────────────── */
.featured__foot
{
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.featured__price
{
    color: var(--color-pr);
    font-size: 1.6rem;
    font-weight: 700;
}
.featured__format
{
    color: var(--color-gray);
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.card
{
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(var(--color-dark-rgb),0.12);
    transition: transform 300ms ease, box-shadow 300ms ease, background-color 300ms ease;
}
.card:hover
{
    transform: translateY(-4px);
    background: var(--color-pr-light); /* verde chiarissimo opaco: niente trasparenza sul fondo della sezione */
    box-shadow: 0 2px 6px rgba(var(--color-pr-rgb),0.20);
}
/* Su sezioni bianche (senza classe bg-*) la card è verde chiarissimo e sull'hover verde pieno */
section:not([class*="bg-"]) .card
{
    background: var(--color-pr-light);
}
section:not([class*="bg-"]) .card:hover
{
    background: var(--color-pr);
}
.card__media
{
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1/0.68;
    border-bottom-left-radius: 22px;
}
.card__media img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms ease;
}
.card:hover .card__media img
{
    transform: scale(1.05);
}
/* Sul fondo verde dell'hover: testi bianchi, titolo e "Scopri" restano scuri */
.card:hover .card__meta,
.card:hover .card__text,
.card:hover .card__price
{
    color: var(--color-dark) !important;
}
.card:hover .card__title,
.card:hover .card__link
{
    color: var(--color-dark);
}
/* Variante su sezione bianca (hover verde pieno): testi bianchi, titolo e link scuri */
section:not([class*="bg-"]) .card:hover .card__meta,
section:not([class*="bg-"]) .card:hover .card__text,
section:not([class*="bg-"]) .card:hover .card__price
{
    color: var(--color-white) !important;
}
section:not([class*="bg-"]) .card:hover .card__title,
section:not([class*="bg-"]) .card:hover .card__link
{
    color: var(--color-dark);
}
.card__tag
{
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-pr);
    color: var(--color-white);
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 2px;
}
.card__tag.dark
{
    background: var(--color-dark);
}
.card__body
{
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 36px 30px 32px;
}
.card__title
{
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--color-pr-dark);
    margin-bottom: 10px;
}
.card__text
{
    font-size: 0.95rem !important;
    line-height: 1.6rem !important;
    margin-bottom: 18px;
}
.card__foot
{
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card__price
{
    color: var(--color-pr);
    font-weight: 700;
    font-size: 1.05rem;
}
.card__link
{
    color: var(--color-pr-dark);
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 200ms ease;
}
.card__link:hover
{
    gap: 12px;
}
.card__meta
{
    color: var(--color-gray);
    font-size: 0.82rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* ── Numeri / statistiche ──────────────────────────────────────────────── */
/* La banda scura è staccata dalla sezione sopra con lo stesso respiro verticale
   che le sezioni hanno al loro interno (fl-*-area-*); sotto resta attaccata.
   È un padding e non un margin: così lo stacco prende il colore di sfondo della
   sezione (es. bg-color-gray-light), mentre la banda scura è il container. */
.stats-band
{
    padding-top: 48px;
}
.stat
{
    text-align: center;
}
.stat__num
{
    color: var(--color-pr);
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1px;
}
.stat__label
{
    color: var(--color-white) !important;
    font-size: 1.05rem !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 10px;
}

/* ── Blocchi alternati testo/immagine ──────────────────────────────────── */
/* L'immagine è fuori dal flusso: così non è lei a dettare l'altezza della
   riga, ma si adatta a quella del blocco di testo affiancato. */
.split-media
{
    position: relative;
    overflow: hidden;
    min-height: 280px;
}
.split-img
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Angolo superiore smussato verso il blocco di testo (news in evidenza):
   --split-corner cresce con i breakpoint; --left è la variante specchiata. */
.split-media--corner,
.split-media--corner-left
{
    --split-corner: 48px;
}
.split-media--corner
{
    border-top-right-radius: var(--split-corner);
}
.split-media--corner-left
{
    border-top-left-radius: var(--split-corner);
}
/* Riquadri in evidenza impilati: solo row-gap, così --g resta 0 e le colonne
   flexo non si restringono. */
.split-stack
{
    row-gap: 32px;
}

/* ── Valori ────────────────────────────────────────────────────────────── */
.value-box
{
    height: 100%;
    background: var(--color-pr-light);
    padding: 32px 26px;
    border-top: 3px solid var(--color-pr);
}
.value-box h4
{
    color: var(--color-pr-dark);
    margin-bottom: 12px;
}
.value-box p
{
    font-size: 0.95rem !important;
    line-height: 1.6rem !important;
}

/* ── Citazione ─────────────────────────────────────────────────────────── */
.quote
{
    text-align: center;
}
.quote p
{
    color: var(--color-beige) !important;
    font-size: 1.4rem !important;
    line-height: 2.1rem !important;
    font-style: italic;
}
.quote cite
{
    display: block;
    margin-top: 24px;
    color: var(--color-pr);
    font-size: 1.05rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-style: normal;
}

/* ── Dettaglio prodotto ────────────────────────────────────────────────── */
.gallery__main img
{
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}
.gallery__thumbs
{
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.gallery__thumbs img
{
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 250ms ease;
}
.gallery__thumbs img:hover,
.gallery__thumbs img.is-active
{
    opacity: 1;
}
.eyebrow
{
    color: var(--color-pr);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.spec-table
{
    width: 100%;
    border-collapse: collapse;
}
.spec-table th,
.spec-table td
{
    text-align: left;
    padding: 14px 0;
    border-bottom: 1px solid rgba(128,128,128,0.28);
    font-size: 0.98rem;
    line-height: 1.5;
    vertical-align: top;
}
.spec-table th
{
    color: var(--color-dark);
    font-weight: 700;
    width: 42%;
    padding-right: 16px;
}
.spec-table td
{
    color: var(--color-text);
}

/* ── Barra info servizio ───────────────────────────────────────────────── */
.info-bar
{
    background: var(--color-white);
    border: 1px solid rgba(128,128,128,0.28);
}
.info-bar__item
{
    text-align: center;
    padding: 22px 16px;
}
.info-bar__label
{
    color: var(--color-gray);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.info-bar__value
{
    color: var(--color-dark);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
}
/* Variante scura: etichette bianche, valori in verde */
.info-bar--dark
{
    background: var(--color-dark);
    border-color: var(--color-dark);
}
.info-bar--dark .info-bar__label
{
    color: var(--color-white);
}
.info-bar--dark .info-bar__value
{
    color: var(--color-pr);
}

/* ── Elenco puntato con spunta ─────────────────────────────────────────── */
.check-list
{
    list-style: none;
}
.check-list li
{
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    line-height: 1.6rem;
}
.check-list li::before
{
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-pr);
}

/* Colonne "Il programma" (bianca, bordo grigio) e "Vuoi partecipare?" (verde scuro:
   occhiello, riga ed etichette verde base, altri testi beige) */
.program-col--program
{
    border: 1px solid rgba(128,128,128,0.35); /* grigio; per il dark: var(--color-dark) */
}
.program-col--form .form-label,
.program-col--form .form-required
{
    color: var(--color-pr) !important;
    font-weight: 400;
}
.program-col--form .form-check,
.program-col--form .booking-form__text
{
    color: var(--color-beige) !important;
}
.program-col--form .form-check a
{
    color: var(--color-beige);
}
.program-col--form .form-input
{
    border-color: var(--color-pr-dark);
}

/* ── Modulo di partecipazione (scheda esperienza): trasparente, allineato al titolo ── */
.booking-form
{
    margin-top: 32px;
}
.booking-form__text
{
    margin-bottom: 20px;
}
/* Su fondo verde scuro: testo beige e bordo verde base; l'hover viene da .btn.on-pr-dark */
.booking-form .btn
{
    background-color: transparent;
    cursor: pointer;
    font-family: inherit;
    display: block;
    margin-left: auto;
    margin-top: 8px;
    border-color: var(--color-pr);
    color: var(--color-beige);
}

/* ── Timeline / programma ──────────────────────────────────────────────── */
.timeline
{
    list-style: none;
    position: relative;
    padding-left: 32px;
}
/* La linea è disegnata tratto per tratto (da ogni punto al successivo),
   così non prosegue sotto l'ultimo punto */
.timeline li:not(:last-child)::after
{
    content: '';
    position: absolute;
    left: -25px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: rgba(var(--color-pr-rgb),0.3);
}
.timeline li
{
    position: relative;
    padding-bottom: 26px;
}
.timeline li:last-child
{
    padding-bottom: 0;
}
.timeline li::before
{
    content: '';
    position: absolute;
    left: -32px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-pr);
}
/* Partenza in verde pieno, arrivo in verde scuro */
.timeline li:first-child::before
{
    background: var(--color-pr);
    border-color: var(--color-pr);
}
.timeline li:last-child::before
{
    background: var(--color-pr-dark);
    border-color: var(--color-pr-dark);
}
.timeline__time
{
    color: var(--color-pr);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 16px; /* stessa altezza del punto: ora e punto centrati */
    letter-spacing: 1px;
    display: block;
    margin-bottom: 6px;
}
.timeline__text
{
    font-size: 0.98rem !important;
    line-height: 1.6rem !important;
}

/* ── Articolo news ─────────────────────────────────────────────────────── */
.article p
{
    margin-bottom: 22px;
}
.article h3
{
    color: var(--color-dark);
    margin: 34px 0 16px;
}
.article blockquote
{
    border-left: 3px solid var(--color-pr);
    padding: 6px 0 6px 24px;
    margin: 30px 0;
}
.article blockquote p
{
    font-style: italic;
    font-size: 1.15rem !important;
    line-height: 1.85rem !important;
    margin-bottom: 0;
}
.article img
{
    width: 100%;
    display: block;
    margin: 30px 0;
}
/* Testo lungo della scheda su due colonne, per righe più corte */
@media (min-width: 1024px)
{
    .article--2col
    {
        column-count: 2;
        column-gap: 48px;
    }
    .article--2col p
    {
        break-inside: avoid;
    }
}
.article-meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    color: var(--color-gray);
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ── Collaborazioni ────────────────────────────────────────────────────── */
.partner
{
    height: 100%;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.partner__logo
{
    background: var(--color-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 24px;
    min-height: 150px;
}
.partner__logo img
{
    max-width: 160px;
    max-height: 80px;
    width: 100%;
    object-fit: contain;
}
.partner__body
{
    padding: 26px 24px 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.partner__role
{
    color: var(--color-pr-dark);
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
/* Card partner: nome in marrone scuro, ruolo e link ("Chiedi info", "Il percorso") in verde scuro */
.partner .card__title
{
    color: var(--color-brown);
}
.partner .card__link
{
    color: var(--color-pr-dark);
}

/* ── Contatti ──────────────────────────────────────────────────────────── */
/* I tre recapiti: una colonna su mobile, tre affiancate da 1024px */
.contact-grid
{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 1024px)
{
    .contact-grid
    {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}
/* Recapiti su beige, senza ombra: etichetta (bold) e riga sotto in verde scuro, testo dark */
.contact-card
{
    height: 100%;
    background: var(--color-beige);
    padding: 32px 26px;
    text-align: center;
    border-bottom: 3px solid var(--color-pr-dark);
}
.contact-card__label
{
    color: var(--color-pr-dark);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.contact-card p,
.contact-card a
{
    font-size: 1rem !important;
    line-height: 1.7rem !important;
    color: var(--color-dark);
}
.contact-card a:hover
{
    color: var(--color-pr);
}
.map-embed
{
    width: 100%;
    aspect-ratio: 1/0.6;
    min-height: 260px;
    overflow: hidden;
    background: var(--color-gray-light);
}
.map-embed iframe
{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.hours-list
{
    list-style: none;
}
.hours-list li
{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(128,128,128,0.25);
    font-size: 0.98rem;
}
.hours-list li:last-child
{
    border-bottom: 0;
}
.hours-list b
{
    color: var(--color-dark);
}

/* ── Banda CTA ─────────────────────────────────────────────────────────── */
.cta-band h3
{
    color: var(--color-white);
    margin-bottom: 14px;
}
.cta-band p
{
    color: rgba(255,255,255,0.85) !important;
}
/* Banda su fondo grigio chiaro: titolo scuro, testo normale */
.cta-band.bg-color-gray-light h3
{
    color: var(--color-dark);
}
.cta-band.bg-color-gray-light p
{
    color: var(--color-text) !important;
}

/* ── Team ──────────────────────────────────────────────────────────────── */
.team-member
{
    margin-top: 40px;
}
.team-divider
{
    border: 0;
    height: 1px;
    background: rgba(var(--color-pr-dark-rgb),0.2);
    margin-top: 40px;
}
/* Sezione su fondo beige (bg-color-beige): il dark diventa marrone scuro,
   il verde base diventa verde scuro (occhielli, riga del titolo, pulsanti).
   Usata in Chi siamo (le persone), nella scheda prodotto ("Come nasce"), nelle
   pagine categoria dei servizi ("Cosa si può fare") e in Collaborazioni ("I nostri partner") */
.section-beige h2,
.section-beige .team-name
{
    color: var(--color-brown);
}
.section-beige div.int,
.section-beige .eyebrow
{
    color: var(--color-pr-dark);
}
.section-beige .section-rule
{
    background-color: var(--color-pr-dark);
}
.section-beige .btn
{
    border-color: var(--color-pr-dark);
    color: var(--color-pr-dark);
}
.section-beige .btn:hover
{
    border-color: var(--color-pr-dark);
    background-color: var(--color-pr-dark);
    color: var(--color-white);
    box-shadow: 0 4px 14px rgba(var(--color-pr-dark-rgb),0.35);
}
/* aspect-ratio sull'img stessa: niente height:100% in un box ad altezza auto */
.team-photo
{
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
}
.team-name
{
    color: var(--color-dark);
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}
.team-bio
{
    margin-bottom: 16px;
}
.team-btn
{
    margin-top: 28px;
}

/* ── Photogallery a muratura ───────────────────────────────────────────── */
/* Colonne CSS: le foto scorrono dall'alto in basso colonna per colonna,
   ognuna con la propria altezza naturale. Niente JS. */
.masonry
{
    columns: 2;
    column-gap: 6px;
    margin-top: 32px;
}
.masonry__item
{
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 6px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--color-gray-light);
}
.masonry__item img
{
    width: 100%;
    height: auto;
    display: block;
    transition: transform 600ms ease;
}
.masonry__item:hover img
{
    transform: scale(1.04);
}

/* ── Lightbox ──────────────────────────────────────────────────────────── */
.lightbox
{
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(var(--color-dark-rgb),0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 52px 48px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}
.lightbox.is-open
{
    opacity: 1;
    pointer-events: all;
}
.lightbox__figure
{
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transform: scale(0.96);
    transition: transform 300ms ease;
}
.lightbox.is-open .lightbox__figure
{
    transform: scale(1);
}
.lightbox__img
{
    max-width: 100%;
    max-height: calc(100vh - 150px);
    object-fit: contain;
    display: block;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.lightbox__caption
{
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-align: center;
}
.lightbox__close,
.lightbox__nav
{
    position: absolute;
    appearance: none;
    background: none;
    border: 0;
    color: var(--color-white);
    cursor: pointer;
    padding: 8px;
    line-height: 0;
    opacity: 0.8;
    transition: opacity 200ms ease;
}
.lightbox__close:hover,
.lightbox__nav:hover
{
    opacity: 1;
}
.lightbox__close
{
    top: 14px;
    right: 16px;
}
.lightbox__close svg.icons
{
    font-size: 2.2rem;
}
.lightbox__nav
{
    top: 50%;
    transform: translateY(-50%);
}
.lightbox__nav svg.icons
{
    font-size: 2.6rem;
}
.lightbox__prev
{
    left: 4px;
}
.lightbox__next
{
    right: 4px;
}

/* ── Breakpoint ────────────────────────────────────────────────────────── */
@media (min-width: 620px)
{
    .hero-card
    {
        padding: 50px 0;
    }
    .hero-card h1
    {
        font-size: 2.6rem;
    }
    .hero-card__img
    {
        aspect-ratio: 16/9;
        margin-top: 40px;
    }
    .stat__num
    {
        font-size: 3rem;
    }
    .masonry
    {
        columns: 3;
        column-gap: 8px;
        margin-top: 40px;
    }
    .masonry__item
    {
        margin-bottom: 8px;
    }
}
@media (min-width: 1024px)
{
    .hero-card
    {
        padding: 70px 0;
    }
    .hero-card h1
    {
        font-size: 3.2rem;
        letter-spacing: 3px;
    }
    .hero-card__img
    {
        aspect-ratio: 1/0.5;
        margin-top: 48px;
    }
    .card
    {
        border-radius: 6px;
        border: 1px solid rgba(var(--color-dark-rgb),0.15)
    }
    .value-box,
    .partner,
    .contact-card,
    .info-bar
    {
        border-radius: 6px;
    }
    .partner
    {
        border-radius: 6px;
    }
    .split-media
    {
        min-height: 420px;
    }
    .split-media--corner,
    .split-media--corner-left
    {
        --split-corner: 80px;
    }
    /* Riquadro specchiato: immagine a destra (sotto 1024 resta impilata, immagine sopra) */
    .split-row--reverse
    {
        flex-direction: row-reverse;
    }
    .split-stack
    {
        row-gap: 48px;
    }

    .card__title
    {
        font-size: 1.4rem;
    }
    .stats-band
    {
        padding-top: 80px;
    }
    .stat__num
    {
        font-size: 3.6rem;
    }
    .quote p
    {
        font-size: 1.8rem !important;
        line-height: 2.8rem !important;
    }
    .team-member,
    .team-divider
    {
        margin-top: 56px;
    }
    .team-name
    {
        font-size: 2.2rem;
    }
    .eyebrow
    {
        font-size: 1.2rem;
    }
    .stat__label
    {
        font-size: 1.15rem !important;
    }
    .featured__foot
    {
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(var(--color-pr-dark-rgb),0.25);
    }
    .team-photo
    {
        border-radius: 6px;
    }
    .masonry
    {
        column-gap: 10px;
        margin-top: 48px;
    }
    .masonry__item
    {
        margin-bottom: 10px;
        border-radius: 6px;
    }
    .lightbox
    {
        padding: 64px 96px 48px;
    }
    .lightbox__prev
    {
        left: 24px;
    }
    .lightbox__next
    {
        right: 24px;
    }
    .lightbox__nav svg.icons
    {
        font-size: 3.4rem;
    }
    .card__body 
    {
        padding: 40px 32px 48px;
    }
}
@media (min-width: 1460px)
{
    /* Prodotti in evidenza: spazio sopra la riga (padding) e fra riga e pulsante (margin) */
    .featured__foot
    {
        padding-bottom: 32px;
    }
    .featured__foot + .team-btn
    {
        margin-top: 40px;
    }
    .card__price
    {
        font-size: 1.2rem;
    }
    .card__link
    {
        font-size: 1.08rem;
    }
    .hero-card
    {
        padding: 80px 0;
    }
    .hero-card h1
    {
        font-size: 4rem;
        letter-spacing: 4px;
    }
    .hero-card--left h1 /* dettaglio news: titolo -20% */
    {
        font-size: 3.2rem;
    }
    .hero-card__img
    {
        aspect-ratio: 1/0.55;
    }
    .card__body
    {
        padding: 56px 48px 64px;
    }
    .card__title
    {
        font-size: 1.6rem;
    }
    .stats-band
    {
        padding-top: 112px;
    }
    .stat__num
    {
        font-size: 4.4rem;
    }
    .split-media
    {
        min-height: 520px;
    }
    .breadcrumb li,
    .breadcrumb a
    {
        font-size: 0.95rem;
    }
    .card__media 
    {
        border-bottom-left-radius: 48px;
    }
    .hero-card__lead 
    {
      max-width: 780px;
      margin: 16px auto 8px;
    }
    /* Scheda prodotto: pulsante Ordina staccato dalla tabella dei dati */
    .product-order
    {
        margin-top: 16px;
    }
    /* Programma: punto e orario più grandi (la linea resta centrata sul punto) */
    .timeline
    {
        padding-left: 40px;
    }
    .timeline li::before
    {
        left: -40px;
        width: 22px;
        height: 22px;
    }
    .timeline li:not(:last-child)::after
    {
        left: -30px;
        top: 22px;
    }
    .timeline__time
    {
        font-size: 1.15rem;
        line-height: 22px;
        margin-bottom: 8px;
    }
    .timeline li
    {
        padding-bottom: 32px;
    }
    /* Scheda esperienza: più aria nella barra info e nei box, soprattutto ai lati */
    .info-bar__item
    {
        padding: 30px 24px;
    }
    .includes-box,
    .program-col
    {
        padding: 56px 80px !important; /* prevale sulle classi flexo fl-*-padding-* */
    }
}
@media (min-width: 1780px)
{
    /* Valori: i tre riquadri si allargano e restano più vicini (gap fisso al
       posto dello spazio avanzato da justify-between), con più aria dentro */
    .row.values-row /* .row: deve prevalere su .row.fl-lg-gap-24 di flexo */
    {
        --g: 40px;
        gap: 40px;
    }
    .values-row > .fl-box
    {
        flex: 1 1 0;
        width: auto;
        max-width: none;
    }
    .value-box
    {
        padding: 44px 40px;
    }
    .eyebrow 
    {
    font-size: 1.3rem;
  }
    .stats-band
    {
        padding-top: 128px;
    }
    .hero-card h1
    {
        font-size: 4.6rem;
    }
    .hero-card--left h1 /* dettaglio news: titolo -20% */
    {
        font-size: 3.7rem;
    }
    .split-media
    {
        min-height: 580px;
    }
    .split-media--corner,
    .split-media--corner-left
    {
        --split-corner: 100px;
    }
    .card__media 
    {
        border-bottom-left-radius: 64px;
    }
    .featured__foot
    {
        padding-bottom: 40px;
    }
    .featured__foot + .team-btn
    {
        margin-top: 48px;
    }
    .hero-card__lead
    {
    max-width: 960px;
    margin: 24px auto 24px;
  }
    /* Scheda esperienza: barra info più grande e box con più padding */
    .info-bar__item
    {
        padding: 40px 32px;
    }
    .info-bar__label
    {
        font-size: 0.95rem;
    }
    .info-bar__value
    {
        font-size: 1.35rem;
    }
    .includes-box,
    .program-col
    {
        padding: 64px 96px !important;
    }
}