/* ===================================================================
   SoFitness — Component layer (design system condiviso)
   Stili dei COMPONENTI riusabili da tutto il sito, costruiti SOLO sui
   token di design-system.css (--ds-*). Caricato dopo i token e dopo
   app.css, prima del layout di pagina (home.css).
   Convenzione classi: BEM con prefisso .sf-  (es. .sf-btn--claret).
   I componenti Twig (templates/components/*.html.twig) usano queste classi.

   ⚠️ Dipendenza: alcune regole usano variabili --sf-* (es. --sf-shadow-soft,
   --sf-bg-warm, --sf-sub-2, --sf-quote-text, --sf-ink-80, --sf-border-warm)
   oggi definite su .sf-home (home.css). Sulla home si risolvono perché i
   componenti vivono dentro .sf-home. Per riusarli in ALTRE pagine fuori da
   .sf-home, promuovere quel blocco di token a :root (in design-system.css)
   o aggiungere un wrapper. (Follow-up alla migrazione della prossima pagina.)
   =================================================================== */

/* ---------- Tipografia (utility riusabili) ---------- */
/* niente text-transform: i titoli hero sono frasi scritte da Sofia, il Title Case
   le rendeva "Diventa Chi Vuoi Con SoFitness" (correzione sua, 21 ago 2026) */
.sf-display {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: 80px;
    line-height: 1.1;
    letter-spacing: -2px;
}
/* niente text-transform, come .sf-display: i titoli di sezione sono frasi scritte da Sofia
   e il Title Case le rendeva "Perché Scegliere SoFitness?" / "Le Ultime.. Dal Blog".
   Nel suo PDF sono in minuscolo. (22 ago 2026) */
.sf-title {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -2px;
    color: var(--ds-heading);
}
.sf-accent { /* parola/accento in serif corsivo */
    font-family: var(--ds-font-serif);
    font-weight: 500;
    font-style: italic;
    text-transform: none;
}
.sf-lead { /* sottotitolo — niente text-transform: i testi arrivano dal CMS già puntati bene */
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.23px;
}
.sf-body {
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.23px;
}
/* sottotitolo sezione riusabile (20px, su chiaro) */
.sf-sub {
    font-family: var(--ds-font-display);
    font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.23px;
    color: var(--sf-sub-2); max-width: 350px;
}

/* ---------- Container (griglia UNICA) ----------
   Gutter laterale FISSO = --sf-edge (66px), identico a header e hero. Le sezioni
   si allargano con la viewport (niente max-width che "cappa"). Su mobile (≤980)
   il gutter scende a 24px (media query in fondo). --sf-edge è definita su .sf-home. */
.sf-inner { padding-inline: var(--sf-edge); }

/* ---------- Section head (titolo + sottotitolo centrati) ---------- */
.sf-sec-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.sf-sec-head .sf-title { color: var(--ds-heading); max-width: 928px; }

/* ---------- Bottoni (Button / ButtonGroup / IconButton) ---------- */
.sf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ds-font-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.64px;
    padding: 16px 24px;
    border-radius: var(--ds-radius);
    box-shadow: var(--sf-shadow-soft);
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.sf-btn--white { background: #fff; color: var(--ds-ink); }
.sf-btn--claret { background: var(--ds-claret); color: #fff; }
.sf-btn--ink { background: var(--ds-ink); color: #fff; }
.sf-btn--ghost { background: transparent; box-shadow: none; color: var(--ds-ink); }
/* hover (opzione B): si apre il gap (box freccia scivola a destra). Bottoni singoli: lift leggero */
.sf-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12); }
.sf-btn-group:hover .sf-btn { transform: none; box-shadow: var(--sf-shadow-soft); }
.sf-btn--claret:hover,
.sf-btn-group:hover .sf-btn--claret { background: var(--ds-claret-deep); }
.sf-btn:active { transform: translateY(0); }
/* il bottone acquista viene disabilitato da JS quando il piano e' gia' posseduto */
.sf-btn:disabled { opacity: .55; cursor: not-allowed; }
.sf-btn:disabled:hover { transform: none; box-shadow: var(--sf-shadow-soft); }

/* gruppo bottone + box freccia separato (pattern del design) */
.sf-btn-group { display: inline-flex; align-items: center; gap: 4px; }
.sf-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: var(--ds-radius);
    box-shadow: var(--sf-shadow-soft);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.sf-iconbtn--white { background: #fff; }
.sf-iconbtn--claret { background: var(--ds-claret); }
.sf-iconbtn img { width: 24px; height: 24px; }
.sf-btn-group:hover .sf-iconbtn { transform: translateX(8px); }
.sf-btn-group:hover .sf-iconbtn--claret { background: var(--ds-claret-deep); }

/* ---------- Chip icona (64px, radius 16, bg/bordo translucidi su verde) ---------- */
.sf-icon-chip {
    width: 64px;
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.sf-icon-chip img { width: 52px; height: 52px; }

/* ---------- Badge pill (icona + testo, su crema) ---------- */
.sf-badge-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: var(--ds-radius-xl);
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--sf-border-warm);
}
.sf-badge-pill img { width: 20px; height: 20px; }
.sf-badge-pill span {
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: -0.23px;
    color: var(--sf-ink-80);
}

/* ---------- Quote (citazione centrata su crema) ---------- */
.sf-quote {
    background: var(--sf-bg-warm);
    padding: 140px 80px;
    margin: 0;
}
.sf-quote--white { background: #fff; }
/* variante su verde: chiude una pagina staccandosi dalle sezioni chiare intorno */
.sf-quote--green { background: var(--ds-green); }
.sf-quote--green .sf-quote__text { color: rgba(255, 255, 255, 0.92); }
.sf-quote--green .sf-quote__name { color: #fff; }
.sf-quote--green .sf-quote__mark { filter: brightness(0) invert(1); opacity: 0.9; }
.sf-quote__inner {
    max-width: 832px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}
.sf-quote__mark { width: 56px; height: 56px; margin-bottom: 8px; transform: rotate(180deg); }
.sf-quote__text {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-style: italic;
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: -0.23px;
    color: var(--sf-quote-text);
}
.sf-quote__name {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.23px;
    color: var(--ds-ink);
}

/* ============================================================
   RESPONSIVE dei componenti condivisi (stessi breakpoint di home.css)
   ============================================================ */
@media (max-width: 980px) {
    .sf-title { font-size: 36px; letter-spacing: -1px; }
    .sf-inner { padding-inline: 24px; }
    .sf-quote { padding: 88px 24px; }
    .sf-badge-pill span { font-size: 18px; }
}

@media (max-width: 560px) {
    .sf-title { font-size: 30px; }
    .sf-quote__text { font-size: 24px; }
    .sf-badge-pill span { font-size: 16px; }
    .sf-badge-pill { align-items: flex-start; }
}

/* ---------- Reveal on scroll (comparsa testi, come sgprogram) ----------
   fade-in + slide-up dei titoli quando entrano in viewport. La classe .sf-reveal
   è aggiunta via JS ai target → se JS è off i testi restano visibili (progressive
   enhancement). prefers-reduced-motion: nessuna animazione. */
/* gate su .sf-js (aggiunta da uno script inline prima del paint): se JS è off
   o reduced-motion, .sf-js non viene aggiunta → i testi restano visibili. */
.sf-js .sf-reveal {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity .8s ease-out, transform 1s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
.sf-js .sf-reveal.is-visible { opacity: 1; transform: none; }
/* Nell'hero il contenuto sta a 40px dal fondo di una card con overflow:hidden: con 80px
   di traslazione il titolo finiva ritagliato fuori, l'osservatore lo vedeva intersecare
   sotto la soglia e non gli dava mai .is-visible → restava invisibile per sempre. Si vede
   dove la card è bassa, cioè sul telefono ("Chi sono" non compariva). */
.sf-js .sf-hero__content .sf-reveal { transform: translateY(24px); }
.sf-js .sf-hero__content .sf-reveal.is-visible { transform: none; }

/* I blocchi-foto entrano senza animazione. La hero è sticky e resta dietro TUTTA la
   pagina: un blocco che sfuma la lascia vedere in trasparenza (l'opacity vale anche per
   il suo sfondo, quindi non basta dargliene uno), e uno che scorre di 80px scopre una
   striscia di hero sotto di sé. In entrambi i casi sembra che a fare il fade sia la hero.
   I testi non hanno il problema: stanno dentro sezioni opache che restano ferme. */
.sf-js .sf-basplit.sf-reveal,
.sf-js .sf-band img.sf-reveal,
.sf-js .sf-pgrid__viewport.sf-reveal,
.sf-js .sf-mediatext__media.sf-reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
    .sf-js .sf-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   FINESTRA DEGLI ABBONAMENTI (.sf-plandlg) — prende il posto della pagina "Piani e prezzi"
   nel percorso d'acquisto (vocali di Sofia, 21 set 2026: "trasparentino opaco", titoletto
   piccolo, due linguette, i quattro pacchettini copiati dalla home e "Inizia ora" in basso
   a destra). È un <dialog> nativo: del velo si occupa ::backdrop.
   ============================================================ */
.sf-plandlg {
    width: min(1180px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    max-height: calc(100svh - 32px);
    padding: 0;
    border: 0;
    border-radius: var(--ds-radius-xl);
    background: var(--ds-bg);
    box-shadow: var(--ds-shadow-lg);
    overflow: auto;
    /* il margin: auto del browser lo azzera il reset `* { margin: 0 }` di app.css:
       senza questa riga la finestra resta incollata in alto a sinistra */
    margin: auto;
}
.sf-plandlg::backdrop { background: rgba(30, 59, 47, 0.55); backdrop-filter: blur(3px); }
/* Lenis scorre la finestra e non il <dialog>: senza questo il fondo continua a muoversi */
html.sf-plandlg-open { overflow: hidden; }

.sf-plandlg__body { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 40px; }

.sf-plandlg__closer { position: absolute; top: 16px; right: 16px; margin: 0; }
.sf-plandlg__x {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--ds-border); border-radius: var(--ds-radius-pill);
    background: #fff; color: var(--ds-heading);
    font-size: 24px; line-height: 1; cursor: pointer;
}
.sf-plandlg__x:hover { background: var(--sf-bg-warm); }

.sf-plandlg__kicker {
    margin: 0; padding-right: 56px;
    font-family: var(--ds-font-display);
    font-weight: 500; font-size: 18px; line-height: 1.4; letter-spacing: var(--ds-tracking-body);
    color: var(--ds-green);
}

/* linguette del livello */
.sf-plandlg__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-plandlg__tab {
    padding: 10px 24px;
    border: 1.5px solid var(--ds-green); border-radius: var(--ds-radius-pill);
    background: transparent; color: var(--sf-green-80);
    font-family: var(--ds-font-display);
    font-weight: 400; font-size: 18px; line-height: 1.5; letter-spacing: var(--ds-tracking-body);
    text-transform: capitalize; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.sf-plandlg__tab:hover { background: var(--sf-green-05); }
.sf-plandlg__tab.is-active { background: var(--ds-green); color: #fff; }

/* il gap del corpo non arriva qui dentro: senza questo il pulsante tocca le card */
.sf-plandlg__pane { display: flex; flex-direction: column; gap: 24px; }
/* il livello non scelto si nasconde con [hidden]: la riga serve perché il display qui sopra
   rimetterebbe in pagina anche l'altro (già succeduto con .sf-phase) */
.sf-plandlg__pane[hidden] { display: none; }

/* le quattro durate: stessa griglia della home */
.sf-plandlg__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* la durata scelta: anello invece di bordo, così non sposta la card featured */
.sf-plandlg__grid .sf-pcard.is-selected { outline: 2px solid var(--ds-claret); outline-offset: 2px; }
.sf-plandlg__grid .sf-pcard { cursor: pointer; }
/* le card qui sono più strette che in home: il badge va a capo invece di spezzare "1 Anno" */
.sf-plandlg__grid .sf-pcard__name-row { flex-wrap: wrap; }
.sf-plandlg__grid .sf-pcard__name { white-space: nowrap; }
.sf-plandlg__grid .sf-pcard__btn { cursor: pointer; }
/* in home la card "più scelto" ha il bottone vinaccia per conto suo; qui il bottone pieno
   vuol dire "questa è la durata che hai scelto", quindi si spegne: altrimenti due card
   sembrano scelte insieme. A distinguerla resta il suo badge. */
.sf-plandlg__grid .sf-pcard--featured .sf-pcard__btn { background: transparent; border-color: var(--ds-green); color: var(--sf-green-80); }
.sf-plandlg__grid .sf-pcard.is-selected .sf-pcard__btn { background: var(--ds-claret); border-color: var(--ds-claret); color: #fff; }

/* piede: "Inizia ora" in basso a destra, come nel disegno */
.sf-plandlg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; }
.sf-plandlg__note,
.sf-plandlg__owned {
    margin: 0; margin-right: auto;
    font-family: var(--ds-font-display);
    font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: var(--ds-tracking-body);
    color: var(--sf-green-80);
}
.sf-plandlg__owned { font-weight: 500; color: var(--ds-green); }
.sf-plandlg__error {
    margin: 0; margin-right: auto;
    font-family: var(--ds-font-display); font-size: 16px; line-height: 1.5;
    color: var(--ds-danger);
}
.sf-plandlg__buy:disabled { opacity: .6; cursor: default; }

@media (max-width: 1000px) {
    .sf-plandlg__body { padding: 32px 20px; gap: 20px; }
    .sf-plandlg__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .sf-plandlg { width: 100vw; max-width: 100vw; max-height: 100svh; border-radius: 0; }
    .sf-plandlg__grid { grid-template-columns: 1fr; }
    /* le card in colonna spingono "Inizia ora" sotto quattro schermate: qui resta attaccato
       in basso, altrimenti il pulsante che serve è l'unico che non si vede */
    .sf-plandlg__foot {
        position: sticky; bottom: 0;
        margin: 0 -20px -32px; padding: 16px 20px;
        background: var(--ds-bg);
        border-top: 1px solid var(--ds-border);
    }
    .sf-plandlg__buy { width: 100%; }
    .sf-plandlg__note, .sf-plandlg__error, .sf-plandlg__owned { margin-right: 0; }
}