/* ==========================================================================
   Presentazioni pubbliche (/presentazione) — solo ciò che il portale non ha:
   storie da 3 o 5 schede, modulo "Parliamone", modalità "Presenta", stampa PDF.
   Tipografia, colori e sezioni arrivano da /proposte/assets/css (stesso design).
   ========================================================================== */

/* Storie con 3 o 5 schede (il portale ne prevede 4) */
@media (min-width: 1000px) {   /* sotto: scorrimento orizzontale come nel portale */
    .storie-card:has(> .storia:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
    .storie-card:has(> .storia:nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); }
}
.sez--storie .storie-testa .titolo { font-size: clamp(1.9rem, 3vw, 3.3rem); }   /* parole lunghe ("PRODUZIONE") intere nella colonna stretta */
.storie-testa .testo { margin-top: clamp(14px, 2.2vh, 24px); max-width: 30em; }
.storia p:empty { display: none; }

/* Portfolio con molte card: immagini più basse, e 4 colonne da 7 card in su (stanno in una schermata) */
@media (min-width: 821px) {
    .griglia-card:has(> .card:nth-child(4)) .card figure { aspect-ratio: 16 / 6.6; }
    .griglia-card:has(> .card:nth-child(4)) .card h3 .nome-corsivo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .15em; font-size: clamp(1.02rem, 1.42vw, 1.55rem); }
    .griglia-card:has(> .card:nth-child(7)) { grid-template-columns: repeat(4, 1fr); }
}

/* Schede con foto di sfondo (es. "Linguaggi", "Il metodo"): velo più scuro, testi sempre leggibili */
.sez--servizi > .velo { background: linear-gradient(90deg, rgba(10, 11, 11, .9) 0%, rgba(10, 11, 11, .74) 55%, rgba(10, 11, 11, .6) 100%); }

/* "← Tutte le presentazioni" accanto al logo */
.barra-sinistra { display: flex; align-items: center; gap: 18px; min-width: 0; }
.barra .tutte-presentazioni { white-space: nowrap; }
@media (max-width: 900px) { .tutte-presentazioni__testo { display: none; } .barra .tutte-presentazioni { padding: 9px 14px; } }
.barra .btn--piccolo { white-space: nowrap; }
@media (max-width: 560px) { .barra-sinistra .barra-logo { display: none; } }   /* telefono: basta la freccia, il logo è nella copertina */
.presenta-tutte { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid rgba(242, 240, 234, .25); border-radius: 999px; color: inherit; text-decoration: none; white-space: nowrap; }

/* Pulsante fisso "Parliamone" nella barra */
.barra .btn--parliamone { background: var(--ui-avorio); color: var(--ui-nero); border-color: var(--ui-avorio); }
.barra .btn--parliamone:hover, .barra .btn--parliamone:focus-visible { background: transparent; color: var(--ui-avorio); }
.scarica-pdf-fondo { margin: 0; padding: 26px var(--ui-margine) 34px; text-align: center; background: var(--ui-nero); font-size: 13px; letter-spacing: .04em; color: var(--ui-avorio); }

/* --------------------------------------------------------------------------
   Modulo "Parliamone"
   -------------------------------------------------------------------------- */
.sez--modulo { align-items: flex-start; }
.modulo-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.modulo-testa { position: sticky; top: 110px; }
.sez--modulo .titolo { font-size: clamp(2rem, 3.4vw, 3.6rem); }
.modulo-frase { margin-top: clamp(18px, 3vh, 30px); max-width: 30em; color: rgba(242, 240, 234, .78); }
.modulo { display: grid; gap: 26px; font-size: 15px; }
.modulo-esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo-domanda { margin: 0; padding: 0; border: 0; min-width: 0; }
.modulo-domanda legend, .modulo-etichetta { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--verde-chiaro); }
.modulo-etichetta small { text-transform: none; letter-spacing: 0; opacity: .7; }
.modulo-richiesta, .modulo-scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.modulo-pillola, .modulo-scelta { position: relative; cursor: pointer; }
.modulo-pillola input, .modulo-scelta input { position: absolute; opacity: 0; pointer-events: none; }
.modulo-pillola span, .modulo-scelta span {
    display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
    border: 1px solid rgba(242, 240, 234, .32); border-radius: 999px; color: rgba(242, 240, 234, .88);
    font-size: 13px; line-height: 1.3; transition: background-color .25s, border-color .25s, color .25s;
}
.modulo-pillola span { min-height: 48px; padding: 12px 22px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.modulo-pillola:hover span, .modulo-scelta:hover span { border-color: rgba(242, 240, 234, .7); }
.modulo-pillola input:checked + span, .modulo-scelta input:checked + span { background: var(--carta); border-color: var(--carta); color: #0A0B0B; }
.modulo-pillola input:focus-visible + span, .modulo-scelta input:focus-visible + span { outline: 1px solid var(--carta); outline-offset: 3px; }
.modulo-campo { display: block; }
.modulo-campo input {
    width: 100%; min-height: 46px; padding: 10px 16px; border: 1px solid rgba(242, 240, 234, .3); border-radius: 12px;
    background: rgba(242, 240, 234, .04); color: var(--carta); font: inherit; font-size: 15px;
}
.modulo-campo input:focus { outline: none; border-color: var(--carta); background: rgba(242, 240, 234, .07); }
.modulo-campo input[aria-invalid="true"], .modulo-domanda[aria-invalid="true"] .modulo-scelte span { border-color: #E2A3A3; }
.modulo-dati { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modulo-dati .modulo-campo:first-child { grid-column: 1 / -1; }
.modulo-privacy { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: rgba(242, 240, 234, .78); cursor: pointer; }
.modulo-privacy input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--verde-chiaro); }
.modulo-errore { margin: 0; color: #E2A3A3; font-size: 14px; }
.modulo-invia { justify-self: start; min-width: 220px; }
.modulo-invia[disabled] { opacity: .6; cursor: progress; }
.modulo-esito { grid-column: 2; padding: clamp(24px, 4vh, 40px) 0; }
.modulo-esito .titolo-esito { margin: 0 0 14px; font-size: clamp(28px, 3vw, 44px); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.modulo-esito .testo { max-width: 34em; }
.modulo-layout:has(.modulo-esito:not([hidden])) .modulo { display: none; }

@media (max-width: 820px) {
    .modulo-layout { grid-template-columns: 1fr; }
    .modulo-testa { position: static; }
    .modulo-esito { grid-column: 1; }
    .modulo-dati { grid-template-columns: 1fr; }
    .modulo-invia { justify-self: stretch; }
}

/* --------------------------------------------------------------------------
   Modalità "Presenta" (tablet): una sezione alla volta a schermo intero
   -------------------------------------------------------------------------- */
.presenta-comandi { position: fixed; z-index: 70; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 6px;
    padding: 6px; border-radius: 999px; background: rgba(10, 11, 11, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: rgba(242, 240, 234, .85); font: 500 12px/1 var(--ui-sans, "Poppins", sans-serif); letter-spacing: .08em; }
.presenta-comandi[hidden] { display: none; }
.presenta-comandi button { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px;
    border: 1px solid rgba(242, 240, 234, .25); border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.presenta-comandi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.presenta-comandi [data-presenta-contatore] { min-width: 54px; text-align: center; }

html.in-presentazione, html.in-presentazione body { overflow: hidden; height: 100%; }
html.in-presentazione .barra, html.in-presentazione .avanzamento, html.in-presentazione .scarica-pdf-fondo,
html.in-presentazione .sez--modulo, html.in-presentazione .audio-gruppo { display: none !important; }
html.in-presentazione #contenuto > .sez { display: none; }
html.in-presentazione #contenuto > .sez.presenta-attiva { display: flex; position: fixed; inset: 0; z-index: 10; height: 100vh; height: 100dvh; min-height: 0; overflow-y: auto; }
html.in-presentazione .fine-presentazione.presenta-attiva { display: grid; }

/* Ultima schermata: QR code verso la pagina */
.fine-presentazione { position: fixed; inset: 0; z-index: 10; display: none; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: clamp(30px, 6vw, 110px); padding: clamp(40px, 8vh, 90px) clamp(24px, 8vw, 154px); background: #0A0B0B; color: var(--carta); }
.fine-presentazione[hidden] { display: none !important; }
html.in-presentazione .fine-presentazione.presenta-attiva[hidden] { display: grid !important; }
.fine-presentazione .titolo { color: var(--carta); }
.fine-presentazione .testo { margin-top: 22px; max-width: 26em; color: rgba(242, 240, 234, .8); }
.fine-presentazione__url { margin-top: 18px; font-size: 14px; letter-spacing: .08em; color: var(--verde-chiaro); }
.fine-presentazione__qr { width: clamp(200px, 26vw, 340px); padding: 18px; border-radius: 18px; background: #F2F0EA; }
.fine-presentazione__qr svg { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .fine-presentazione { grid-template-columns: 1fr; justify-items: start; } }

/* --------------------------------------------------------------------------
   Stampa dal browser (il PDF ufficiale è quello del pulsante "Scarica PDF"):
   niente interfaccia, tutto già visibile, corsivi in tinta unita
   -------------------------------------------------------------------------- */
@media print {
    html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .barra, .avanzamento, .presenta-comandi, .fine-presentazione, .privacy, .scarica-pdf-fondo, .sez--modulo, .audio-gruppo, .audio-video, .scorri { display: none !important; }
    #contenuto > .sez { break-inside: avoid; }
    .js [data-rivela], .js [data-rivela="tendina"], .js [data-rivela="tendina"] img, .js .sez .titolo .riga > span,
    .js .linea-apertura[data-rivela], .js .filetto[data-rivela] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
    .js .sez .titolo .riga { clip-path: none !important; }
    .corsivo, .evidenza, .sfumato { background: none !important; -webkit-text-fill-color: currentColor; color: #54796F !important; }
    .tema-scuro .corsivo, .tema-verde .corsivo { color: #A9D8C1 !important; }
}

/* --------------------------------------------------------------------------
   Card del portfolio con galleria e finestra a schermo intero
   -------------------------------------------------------------------------- */
.card--galleria { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.card--galleria figure { position: relative; }
.card--galleria figure img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.card--galleria figure::after {
    content: ""; position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(242, 240, 234, .6); background: rgba(10, 11, 11, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F0EA' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 18px no-repeat;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .3s;
}
@media (hover: hover) { .card--galleria:hover figure img { transform: scale(1.05); } }
.card--galleria:active figure img { transform: scale(1.05); }
.card--galleria:focus-visible { outline: 2px solid #F2F0EA; outline-offset: 4px; }

html.galleria-aperta, html.galleria-aperta body { overflow: hidden; }
dialog.finestra-lavoro {
    position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: #0A0B0B; color: #F2F0EA; font-family: var(--ui-sans, "Poppins", sans-serif); overflow: hidden; box-sizing: border-box;
}
/* una sola colonna: testa (titolo + X) · corpo (frecce ai lati del media) · contatore */
dialog.finestra-lavoro[open] {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "testa" "corpo" "comandi"; animation: galleria-entra .45s cubic-bezier(.16, 1, .3, 1);
}
dialog.finestra-lavoro:not([open]) { display: none !important; }   /* chiusa = sparita, sempre */
dialog.finestra-lavoro::backdrop { background: #0A0B0B; }
@keyframes galleria-entra { from { opacity: 0; } }
.galleria__testa { grid-area: testa; position: relative; padding: clamp(16px, 2.6vh, 28px) clamp(76px, 8vw, 110px) clamp(8px, 1.4vh, 14px) clamp(20px, 4vw, 56px); }
.galleria__kicker { margin: 0 0 4px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 240, 234, .6); }
.galleria__titolo { margin: 0; font-family: "Libre Bodoni", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(20px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -.01em; }
.galleria__chiudi {
    position: absolute; top: clamp(12px, 2.2vh, 24px); right: clamp(14px, 2.6vw, 30px); width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(242, 240, 234, .35); background: transparent; color: #F2F0EA; font-size: 28px; line-height: 1; cursor: pointer;
}
.galleria__chiudi:hover, .galleria__chiudi:focus-visible { background: #F2F0EA; color: #0A0B0B; outline: none; }
/* corpo: freccia · media · freccia. Il media resta intero, nel suo formato, il più grande possibile */
.galleria__corpo { grid-area: corpo; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 1.6vw, 24px); min-height: 0; padding: 0 clamp(12px, 2.4vw, 36px); }
.galleria__freccia--prec { grid-column: 1; } .galleria__freccia--succ { grid-column: 3; }
.galleria__palco { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; min-width: 0; touch-action: pan-y; }
.galleria__media { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #0A0B0B; }
.galleria__comandi { grid-area: comandi; position: relative; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: clamp(10px, 1.8vh, 18px) 16px clamp(14px, 2.6vh, 26px); font-size: 13px; letter-spacing: .1em; }
.galleria__freccia, .galleria__audio {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; min-width: 52px; padding: 0 14px;
    border: 1px solid rgba(242, 240, 234, .35); border-radius: 999px; background: rgba(10, 11, 11, .4); color: #F2F0EA; font: inherit; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.galleria__freccia { padding: 0; }
.galleria__freccia[hidden], .galleria__audio[hidden] { display: none; }
.galleria__corpo:has(.galleria__freccia[hidden]) { grid-template-columns: 0 minmax(0, 1fr) 0; gap: 0; }
.galleria__freccia:hover, .galleria__audio:hover, .galleria__freccia:focus-visible, .galleria__audio:focus-visible { border-color: #F2F0EA; outline: none; }
.galleria__freccia svg, .galleria__audio svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.galleria__audio .onde { display: none; }
.galleria__audio[aria-pressed="true"] .onde { display: inline; }
.galleria__audio[aria-pressed="true"] .muto { display: none; }
.galleria__comandi .galleria__audio { position: absolute; right: clamp(14px, 2.6vw, 30px); top: 50%; transform: translateY(-50%); }
.galleria__contatore { min-width: 64px; text-align: center; color: rgba(242, 240, 234, .8); font-variant-numeric: tabular-nums; }
/* telefono: frecce sovrapposte ai bordi del media, così l'immagine usa tutta la larghezza */
@media (max-width: 600px) {
    .galleria__corpo { grid-template-columns: minmax(0, 1fr); padding: 0 10px; position: relative; }
    .galleria__palco { grid-column: 1; grid-row: 1; }
    .galleria__corpo:has(.galleria__freccia[hidden]) { grid-template-columns: minmax(0, 1fr); }
    .galleria__freccia { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; height: 44px; min-width: 44px; }
    .galleria__freccia--prec { left: 14px; } .galleria__freccia--succ { right: 14px; }
}
@media (prefers-reduced-motion: reduce) { dialog.finestra-lavoro[open] { animation: none; } }

/* "Linguaggi" con cinque voci (come nel PDF): tutte su una riga sugli schermi larghi */
@media (min-width: 1200px) {
    .sez--servizi:has(> .sfondo) .griglia-servizi:has(> .voce:nth-child(5):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 0 clamp(18px, 2vw, 34px); }
    .sez--servizi:has(> .sfondo) .griglia-servizi:has(> .voce:nth-child(5):last-child) .nome-corsivo { font-size: clamp(1.1rem, 1.35vw, 1.5rem); }
    .sez--servizi:has(> .sfondo) .griglia-servizi:has(> .voce:nth-child(5):last-child) .voce p { font-size: clamp(13px, .9vw, 15px); }
}

/* "Per chi lavoriamo" con cinque settori: card grandi (circa 2/3 dello schermo), colonna del titolo più stretta.
   Le misure si dividono per --scala perché sugli schermi grandi il contenuto delle slide è ingrandito (zoom). */
@media (min-width: 1000px) {
    .storie-layout:has(.storia:nth-child(5):last-child) { grid-template-columns: minmax(190px, .6fr) 3.9fr; gap: clamp(20px, 2.4vw, 44px); }
    .storie-card:has(> .storia:nth-child(5):last-child) { display: grid; grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: clamp(8px, .9vw, 14px); }
    .storie-card:has(> .storia:nth-child(5):last-child) .storia { aspect-ratio: auto; height: calc(68vh / var(--scala, 1)); max-height: none; }
    .storie-card:has(> .storia:nth-child(5):last-child) .storia .nome-corsivo { font-size: clamp(1.15rem, 1.5vw, 1.7rem); }
    .storie-layout:has(.storia:nth-child(5):last-child) .storie-testa .titolo { font-size: clamp(1.7rem, 2.4vw, 2.6rem); }
}
@media (min-width: 1000px) and (max-width: 1199px) {   /* tablet orizzontale: titolo sopra, cinque card a tutta larghezza */
    .storie-layout:has(.storia:nth-child(5):last-child) { grid-template-columns: 1fr; gap: clamp(16px, 2.6vh, 28px); }
    .storie-card:has(> .storia:nth-child(5):last-child) .storia { height: 52vh; }
}

/* Prossimo passo con il faretto (come nel PDF): sfondo a tutta pagina, faretto sul lato destro tagliato dal bordo,
   fascio di luce verso il testo. Una sfumatura scura dietro le scritte le tiene leggibili. */
.sez--chiusura { position: relative; isolation: isolate; }
.sez--chiusura > .sfondo--destra img { object-position: 100% 50%; }
.velo--chiusura { background: linear-gradient(90deg, rgba(10, 11, 11, .78) 0%, rgba(10, 11, 11, .45) 38%, rgba(10, 11, 11, 0) 62%); }
.sez--chiusura:has(> .sfondo--destra) { background: #0A0B0B; }
@media (max-width: 820px), (orientation: portrait) and (max-width: 1100px) {
    /* tablet in verticale e telefono: il faretto resta come sfondo, il testo ha una base scura */
    .sez--chiusura > .sfondo--destra img { object-position: 82% 50%; }
    .velo--chiusura { background: linear-gradient(180deg, rgba(10, 11, 11, .3) 0%, rgba(10, 11, 11, .62) 40%, rgba(10, 11, 11, .86) 100%); }
}

/* "Parliamone" in fondo alla pagina: tre pulsanti che aprono il modulo unico del sito */
.sez--parliamone { align-items: center; }
.parliamone-pres { max-width: 980px; }
.sez--parliamone .titolo { font-size: clamp(2rem, 3.6vw, 3.8rem); }
.parliamone-pulsanti { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 5vh, 52px); }
.parliamone-pulsante { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; cursor: pointer; font: inherit; }
.parliamone-pulsante svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.parliamone-referente { margin-top: 18px; font-size: 13px; color: rgba(242, 240, 234, .62); }
.parliamone-referente .ui-link { color: inherit; }
@media (max-width: 600px) {
    .parliamone-pulsanti { flex-direction: column; }
    .parliamone-pulsante { width: 100%; padding: 0 16px; font-size: 12px; letter-spacing: .08em; }
}