/* =========================================================================
   Petali d'Arte - armonizzazione tipografica e fluidita'
   Caricato dopo tutti gli altri CSS: i fogli originali restano invariati.

   - una sola scala tipografica fluida (10 gradini, da 360px a 1440px di
     larghezza, interpolazione lineare: niente salti tra un dispositivo e l'altro)
   - ogni ruolo (titolo di pagina, titolo di sezione, testo, didascalia...)
     ha la stessa misura in tutte le pagine
   - spaziature verticali fluide, ancore non coperte dall'header,
     focus visibile, aree cliccabili >= 44px, rispetto di "riduci movimento"
   ========================================================================= */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Titoli: Playfair Display (variabile 400-900, licenza OFL), il font previsto dal CSS originale
   ma mai caricato: finora i titoli ricadevano su Georgia */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/playfair-display-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/playfair-display-latin-wght-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Scala tipografica (min a 360px -> max a 1440px) */
    --step--2: clamp(0.7812rem, 0.7708rem + 0.0463vw, 0.8125rem); /* 12.5 -> 13   sopratitoli maiuscoli */
    --step--1: clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);  /* 14 -> 15     didascalie, meta, etichette */
    --step-0:  clamp(1rem, 0.9688rem + 0.1389vw, 1.094rem);       /* 16 -> 17.5   testo */
    --step-1:  clamp(1.062rem, 0.9792rem + 0.3704vw, 1.312rem);   /* 17 -> 21     introduzioni, titoli card */
    --step-2:  clamp(1.125rem, 0.9792rem + 0.6481vw, 1.562rem);   /* 18 -> 25     h4 / titoli minori */
    --step-3:  clamp(1.25rem, 1.021rem + 1.019vw, 1.938rem);      /* 20 -> 31     h3 */
    --step-4:  clamp(1.438rem, 1.083rem + 1.574vw, 2.5rem);       /* 23 -> 40     h2 di blocco */
    --step-5:  clamp(1.688rem, 1.083rem + 2.685vw, 3.5rem);       /* 27 -> 56     h2 di sezione */
    --step-6:  clamp(2rem, 1.292rem + 3.148vw, 4.125rem);         /* 32 -> 66     h1 di pagina */
    --step-7:  clamp(2.25rem, 1.167rem + 4.815vw, 5.5rem);        /* 36 -> 88     titolo hero */

    /* Interlinee e spaziatura lettere per ruolo */
    --lh-display: 1.02;
    --lh-heading: 1.08;
    --lh-title: 1.22;
    --lh-body: 1.68;
    --lh-lead: 1.62;
    --ls-display: -0.035em;
    --ls-heading: -0.025em;
    --ls-title: -0.01em;

    /* Spaziature fluide */
    --space-fluid-section: clamp(3.5rem, 2.333rem + 5.185vw, 7rem);
    --space-fluid-block: clamp(2rem, 1.333rem + 2.963vw, 4rem);
    --space-fluid-gap: clamp(1.25rem, 1rem + 1.111vw, 2rem);

    /* Testo secondario leggibile (contrasto >= 4.5:1 anche sul fondo crema) */
    --color-text-light: #635a55;

    /* Ritmo di animazione comune */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 180ms;
    --dur-base: 260ms;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ------------------------------------------------------------------ base */

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height, 80px); /* le ancore (#eventi, #collabora...) non finiscono sotto l'header */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.petali-site {
    font-size: var(--step-0);
    line-height: var(--lh-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
}

body.petali-site :is(h1, h2, h3, h4) {
    text-wrap: balance;
    font-optical-sizing: auto;
}

body.petali-site :is(p, li, .card-text, .lead) {
    text-wrap: pretty;
    hyphens: manual;
}

/* Con scroll-padding sull'html le sezioni della home non hanno bisogno del loro margine:
   ogni ancora si ferma esattamente sotto l'header, senza strisce della sezione precedente */
body.petali-site.home-page .section {
    scroll-margin-top: 0;
}

/* ------------------------------------------------------------------ titoli */

/* Titolo hero della home */
body.petali-site .cinematic-hero .hero-title,
body.petali-site .hero-title {
    font-size: var(--step-7);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
}

/* Titolo di pagina (intestazioni delle pagine interne, dettaglio evento) */
body.petali-site .pet-page-header .page-title,
body.petali-site .detail-hero .page-title,
body.petali-site .page-title {
    font-size: var(--step-6);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
}

/* Titolo della galleria e pagine di servizio: un gradino sotto */
body.petali-site #galleryTitle,
body.petali-site .dashboard-container h1 {
    font-size: var(--step-5);
    line-height: var(--lh-heading);
}

/* Titoli di sezione */
body.petali-site .section-heading h2,
body.petali-site .home-copy h2,
body.petali-site .collaboration-copy h2 {
    font-size: var(--step-5);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

/* Titoli di blocco: contatti, card archivio, chi siamo, testi lunghi */
body.petali-site .contact-panel > h2,
body.petali-site .photo-archive-card .archive-feature-title,
body.petali-site .chi-section h2,
body.petali-site .container-text h2,
body.petali-site .detail-content h2,
body.petali-site .modal-overlay h2 {
    font-size: var(--step-4);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

body.petali-site :is(#modalEventTitle, #modalArticleTitle, #pressTitle) {
    font-size: var(--step-2);
    line-height: var(--lh-title);
}

/* h3: passaggi, servizi, sottotitoli dei testi */
body.petali-site .process-step h3,
body.petali-site .service-stack h3,
body.petali-site .container-text h3,
body.petali-site .detail-content h3,
body.petali-site .chi-cta h3 {
    font-size: var(--step-3);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-title);
}

body.petali-site .container-text h4,
body.petali-site .detail-content h4 {
    font-size: var(--step-2);
    line-height: var(--lh-title);
}

/* Titoli delle card (home e archivi uguali) */
body.petali-site .card-title,
body.petali-site .home-content-feed .card-title,
body.petali-site .archive-grid .card-title {
    font-size: var(--step-1);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-title);
}

body.petali-site .value-card-title,
body.petali-site .story-card strong {
    font-size: var(--step-0);
    line-height: var(--lh-title);
}

body.petali-site .footer-column h3 {
    font-size: var(--step-1);
    line-height: var(--lh-title);
}

body.petali-site .header-logo span {
    font-size: var(--step-1);
}

/* ------------------------------------------------------------------ testi */

/* Introduzioni (lead): stessa misura ovunque, riga leggibile */
body.petali-site .lead,
body.petali-site .hero-subtitle,
body.petali-site .cinematic-hero .hero-subtitle,
body.petali-site .page-description,
body.petali-site .pet-page-header .page-description,
body.petali-site .home-copy .lead,
body.petali-site .collaboration-copy .lead,
body.petali-site .section-heading > p:not(.section-eyebrow),
body.petali-site .archive-feature-text,
body.petali-site .chi-intro p {
    font-size: var(--step-1);
    line-height: var(--lh-lead);
}

body.petali-site :is(.home-copy .lead, .collaboration-copy .lead, .section-heading > p:not(.section-eyebrow), .container-text p, .detail-content p, .chi-section > p) {
    max-inline-size: 68ch;
}

/* Testo corrente */
body.petali-site .process-step p,
body.petali-site .service-stack p,
body.petali-site .container-text p,
body.petali-site .container-text li,
body.petali-site .detail-content,
body.petali-site .chi-section p,
body.petali-site .mission-list li,
body.petali-site .events-list li,
body.petali-site .modal-overlay .card-body,
body.petali-site #pressContent {
    font-size: var(--step-0);
    line-height: var(--lh-body);
}

/* Testi secondari: mai sotto i 14px */
body.petali-site .card-text,
body.petali-site .archive-grid .card-text,
body.petali-site .value-card-desc,
body.petali-site .story-card span,
body.petali-site .form-note,
body.petali-site .photo-archive-note,
body.petali-site .footer-links li,
body.petali-site .footer-bottom,
body.petali-site .footer-column p,
body.petali-site .upload-hero p,
body.petali-site .terms-box {
    font-size: var(--step--1);
    line-height: 1.62;
}

body.petali-site .card-meta,
body.petali-site .card-meta-item {
    font-size: var(--step--1);
    line-height: 1.45;
    color: var(--color-text-light);
}

/* Sopratitoli maiuscoli (unico stile anche in Chi siamo) */
body.petali-site .section-eyebrow,
body.petali-site .chi-section-label {
    font-size: var(--step--2);
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Etichette, badge, filtri */
body.petali-site .badge,
body.petali-site .filter-chip,
body.petali-site .hero-proof span,
body.petali-site .photo-archive-tags span,
body.petali-site .events-sort-select,
body.petali-site .press-year-select {
    font-size: var(--step--1);
    line-height: 1.25;
}

/* ------------------------------------------------------------------ comandi */

body.petali-site .nav-link {
    font-size: calc(var(--step-0) * 0.94);
}

body.petali-site .btn {
    font-size: var(--step-0);
    line-height: 1.2;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    cursor: pointer;
    transition:
        background-color var(--dur-fast) ease,
        border-color var(--dur-fast) ease,
        color var(--dur-fast) ease,
        box-shadow var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

body.petali-site .btn-sm {
    font-size: var(--step--1);
    min-height: 44px;
}

body.petali-site .filter-chip,
body.petali-site .events-sort-select,
body.petali-site .press-year-select {
    min-height: 44px;
}

body.petali-site .form-label {
    font-size: var(--step--1);
    font-weight: 600;
}

/* 16px minimo nei campi: su iPhone evita lo zoom automatico */
body.petali-site .form-control,
body.petali-site input,
body.petali-site select,
body.petali-site textarea {
    font-size: max(16px, var(--step-0));
}

body.petali-site .card {
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

body.petali-site :is(.card[role="button"], .card[data-open], .carousel-btn, .filter-chip) {
    cursor: pointer;
}

/* ------------------------------------------------------------------ focus */

body.petali-site :is(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
    outline: 3px solid rgba(230, 57, 70, 0.55);
    outline-offset: 3px;
    border-radius: 6px;
}

body.petali-site .card:focus-visible {
    border-radius: 26px;
}

/* ------------------------------------------------------------------ spaziature */

/* Sezioni della home: stesso respiro verticale, proporzionato allo schermo */
body.petali-site .home-story,
body.petali-site .process-cinema,
body.petali-site .home-dynamic-section,
body.petali-site .gallery-cinema,
body.petali-site .press-cinema,
body.petali-site .collaboration-cinema {
    padding-top: var(--space-fluid-section);
    padding-bottom: var(--space-fluid-section);
}

body.petali-site .section-heading {
    margin-bottom: var(--space-fluid-block);
}

body.petali-site :is(.section-heading h2, .home-copy h2, .collaboration-copy h2) {
    margin-bottom: 0.45em;
}

body.petali-site .section-eyebrow {
    margin-bottom: 0.9rem;
}

body.petali-site .archive-grid,
body.petali-site .grid-3 {
    gap: var(--space-fluid-gap);
}

/* Pagine interne: intestazione e sezioni con lo stesso ritmo */
body.petali-site:not(.home-page):has(.pet-page-header) .section,
body.petali-site:not(.home-page):has(.pet-page-header) main.container {
    padding-top: var(--space-fluid-section);
    padding-bottom: var(--space-fluid-section);
}

body.petali-site .container-text :is(h2, h3, h4) {
    margin-top: 1.6em;
    margin-bottom: 0.55em;
}

body.petali-site .container-text :is(h2, h3, h4):first-child {
    margin-top: 0;
}

body.petali-site .container-text :is(ul, ol) {
    padding-left: 1.25em;
    margin-bottom: 1.25em;
}

body.petali-site .container-text li + li {
    margin-top: 0.35em;
}

/* Dettaglio evento: la hero cresce con il titolo invece di tagliarlo */
body.petali-site .detail-hero {
    height: auto;
    min-height: clamp(420px, 62vh, 640px);
    padding-top: var(--space-fluid-block); /* l'header e' gia' nel flusso della pagina */
}

body.petali-site .detail-hero-content {
    padding-bottom: var(--space-fluid-block);
}

body.petali-site .detail-hero-overlay {
    background: linear-gradient(to top, rgba(20, 12, 10, 0.86) 0%, rgba(20, 12, 10, 0.55) 45%, rgba(20, 12, 10, 0.15) 100%);
}

body.petali-site .detail-meta {
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: var(--step-0);
}

body.petali-site .detail-content {
    padding-top: var(--space-fluid-block);
    padding-bottom: var(--space-fluid-section);
}

/* Pulsante "Gestisci cookie" e selettore lingua: leggibili e facili da toccare */
body.petali-site .cookie-manage-btn {
    font-size: var(--step--1);
    min-height: 40px;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 768px) {
    body.petali-site .nav-link {
        font-size: var(--step-1);
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    body.petali-site .hero-cta .btn,
    body.petali-site .collaboration-actions .btn,
    body.petali-site .page-header-actions .btn {
        min-height: 48px;
    }
}

/* ------------------------------------------------------------------ movimento */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body.petali-site *,
    body.petali-site *::before,
    body.petali-site *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    body.petali-site [data-scroll-fx] {
        transform: none !important;
    }
}

/* ------------------------------------------------------------------ correzioni */

/* Filtro attivo: nel CSS originale lo sfondo veniva coperto da una regola piu' specifica
   e il testo bianco spariva ("Tutti" sembrava un pulsante vuoto) */
body.petali-site .section-sm .filter-chip.active,
body.petali-site .archive-tools .filter-chip.active {
    background-color: var(--color-primary, #E63946);
    border-color: var(--color-primary, #E63946);
    color: #fff;
    box-shadow: 0 6px 18px rgba(230, 57, 70, 0.28);
}

body.petali-site .archive-tools .filter-chip:not(.active):hover {
    border-color: var(--color-primary, #E63946);
    color: var(--color-primary, #E63946);
}

/* ------------------------------------------------------------------ icone */

/* Icone SVG (icone.css) al posto delle emoji: un solo stile lineare, colore del marchio */
body.petali-site :is(.card-meta-item, .detail-meta-item, .footer-links li, .contact-panel h3) > .pi,
body.petali-site .value-card-icon,
body.petali-site .filter-chip .pi {
    color: var(--color-primary, #E63946);
}

body.petali-site .detail-hero .detail-meta-item > .pi,
body.petali-site .detail-hero .btn .pi {
    color: inherit;
}

body.petali-site .footer-links li > .pi {
    margin-right: 0.35em;
}

body.petali-site .value-card-icon {
    display: flex;
    justify-content: center;
    font-size: 1.6rem;
}

/* Copertina segnaposto (card senza immagine): icona grande e tenue */
body.petali-site .card-image > .pi,
body.petali-site .social-card-icon > .pi,
body.petali-site .social-embed-placeholder-icon > .pi {
    color: var(--color-primary, #E63946);
    opacity: 0.6;
}

body.petali-site .filter-chip.active .pi {
    color: inherit;
}

/* Badge con icona: lo spazio tra icona e testo si perde nei contenitori flex */
body.petali-site :is(.badge, .filter-chip, .btn):has(> .pi) {
    gap: 0.4em;
}

body.petali-site .badge:has(> .pi) {
    display: inline-flex;
    align-items: center;
}

/* ------------------------------------------------------------------ card: testi armonizzati */

/* Estratti delle card (home e archivi): massimo 3 righe, cosi' le card hanno altezze simili */
body.petali-site .card .card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Titoli delle card: massimo 3 righe */
body.petali-site .card .card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Data, luogo e pulsante sempre in fondo alla card */
body.petali-site .home-content-feed .card,
body.petali-site .archive-grid .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.petali-site .home-content-feed .card .card-body,
body.petali-site .archive-grid .card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.petali-site .home-content-feed .card .card-meta,
body.petali-site .archive-grid .card .card-meta {
    margin-top: auto;
    padding-top: var(--space-sm, 0.5rem);
}

body.petali-site .home-content-feed .card .card-body > .btn,
body.petali-site .archive-grid .card .card-body > .btn {
    align-self: flex-start;
}

body.petali-site .home-content-feed .card .card-body > .badge,
body.petali-site .archive-grid .card .card-body > .badge {
    align-self: flex-start;
}