/* =============================================================================
   ZAIRA OFFICINA — Progetti su misura  (prefisso .su-)
   ─────────────────────────────────────────────────────────────────────────────
   Foglio della sola pagina servizi/progetti-su-misura.html.
   Come sito-attivo.css e analisi-economica.css NON entra in build-css.sh:
   viene caricato dalla singola pagina, dopo css/main.min.css.

   REGOLA IMPORTANTE — questo file NON ridefinisce :root e NON reinventa
   la tipografia. Usa i token di css/variables.css e la stessa scala di
   titoli della home (display 900 uppercase per hero e sezioni, 800 per i
   titoli di riga): la pagina deve essere riconoscibile come lo stesso sito
   al primo sguardo. Il registro "alto" si ottiene solo con due leve, che
   non toccano il marchio:

     1. ARIA  ↑  — 140px di respiro fra sezioni invece di 88px, misura di
                   lettura stretta (680px), pochi elementi per schermata
     2. RUMORE ↓ — niente emoji, niente card colorate, accento razionato

   Un peso display piu' leggero era stato provato qui ed e' stato tolto:
   a confronto diretto con la home sembrava un altro sito.

   L'accento oro e' razionato di proposito: eyebrow, cifre e poco altro.
   ============================================================================= */


/* ── LAYOUT DI BASE ──────────────────────────────────────────────────────── */

.su-wrap {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

/* Misura di lettura stretta: 680px sono ~75 caratteri, la larghezza oltre
   la quale l'occhio perde la riga. Il testo lungo di questa pagina ci sta
   tutto dentro. */
.su-measure {
    max-width: 680px;
}

.su-sec {
    padding: 140px 0;
    border-top: 1px solid var(--border);
}

/* Variante appena schiarita per alternare le sezioni senza introdurre
   un secondo colore di fondo. */
.su-sec--alt {
    background: rgba(255, 255, 255, 0.012);
}


/* Il CTA della nav qui e' un <button> (apre Cal.com, vedi HTML):
   .nav-cta in css/nav.css e' scritto per un <a>, va azzerato il bordo. */
button.nav-cta {
    border: none;
    cursor: pointer;
}


/* ── TIPOGRAFIA COMUNE ───────────────────────────────────────────────────── */

.su-label {
    margin: 0 0 28px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Stessa scala di .section-title in css/base.css: se questi due valori
   divergono, la pagina smette di sembrare la home. Cambiali insieme. */
.su-h2 {
    margin: 0 0 32px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 3.5vw, 3rem);
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--white);
}

.su-h2 em {
    font-style: normal;
    color: var(--accent);
}

.su-p {
    margin: 0 0 22px;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.06rem;
    line-height: 1.9;
    color: var(--text-mid);
}

.su-p:last-child {
    margin-bottom: 0;
}

/* Paragrafo che segue un blocco (riquadro, elenco, griglia) e ha bisogno
   di staccarsene. Esiste perche' in questo progetto il CSS inline non e'
   ammesso: serviva una classe, non un attributo style. */
.su-p--spaced {
    margin-top: 36px;
}

.su-p strong {
    font-weight: 500;
    color: var(--white);
}

.su-p a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 162, 39, 0.35);
    transition: border-color var(--transition-fast);
}

.su-p a:hover {
    border-bottom-color: var(--accent);
}


/* ── HERO ────────────────────────────────────────────────────────────────── */

/* Nessun pannello, nessuna card, nessuna griglia a due colonne: solo testo.
   E' la schermata che deve dire "studio", non "listino". */
.su-hero {
    padding: 150px 0 110px;
    background: radial-gradient(circle at 15% 0%, rgba(232, 162, 39, 0.06), transparent 42%);
}

.su-hero-eyebrow {
    margin: 0 0 30px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Allineato a .hero-title in css/hero.css: stesso peso, stesso corpo,
   stesso uppercase. E' il primo elemento che il visitatore confronta con
   la home. */
.su-hero-title {
    max-width: 900px;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3.2rem, 5.5vw, 5.5rem);
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--white);
}

.su-hero-title span {
    color: var(--accent);
}

.su-hero-lead {
    max-width: 640px;
    margin: 38px 0 0;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.18rem;
    line-height: 1.82;
    color: var(--text-mid);
}

.su-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 44px;
}

/* Riga sotto le CTA: prezzo minimo, tempi, capienza. */
.su-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 38px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.su-hero-meta strong {
    font-weight: 400;
    color: var(--white);
}

/* Separatore decorativo fra le voci della riga di qualificazione.
   Su telefono le voci si impilano e il puntino resterebbe appeso a fine
   riga: li' viene nascosto (vedi media query a 640px). */
.su-hero-meta-sep {
    color: var(--border);
}


/* ── PER CHI — elenco tipografico, senza icone ───────────────────────────── */

/* Sostituisce deliberatamente il modello a emoji della home: su questo
   target l'emoji e' il segnale "economico" piu' rumoroso disponibile. */
.su-for {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin-top: 56px;
    background: var(--border);
    border: 1px solid var(--border);
}

.su-for-item {
    padding: 38px 34px;
    background: var(--bg);
}

.su-for-name {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    letter-spacing: 0.01em;
    color: var(--white);
}

.su-for-desc {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-low);
}


/* ── METODO — le fasi ────────────────────────────────────────────────────── */

/* Il metodo e' la parte che giustifica il prezzo: mostra che esiste un
   processo, non "ti faccio un sito". Righe separate da filetto, non card:
   piu' vicino a un documento che a un catalogo. */
.su-steps {
    margin-top: 56px;
    border-top: 1px solid var(--border);
}

.su-step {
    display: grid;
    grid-template-columns: 90px 1fr 150px;
    gap: 32px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid var(--border);
}

.su-step-num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--accent);
}

.su-step-title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--white);
}

.su-step-desc {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--text-low);
}

.su-step-time {
    padding-top: 6px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-align: right;
    color: var(--muted);
}


/* ── COSA INCLUDE ────────────────────────────────────────────────────────── */

.su-incl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 48px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.su-incl li {
    position: relative;
    padding: 18px 0 18px 26px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 0.99rem;
    line-height: 1.6;
    color: var(--text-mid);
}

.su-incl li::before {
    content: '—';
    position: absolute;
    top: 18px;
    left: 0;
    color: var(--accent);
}


/* ── PREZZO ──────────────────────────────────────────────────────────────── */

.su-price {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0 0 30px;
}

/* Stessa cifra della sezione prezzi in home (.pz-main-price-num). */
.su-price-num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3.4rem, 7vw, 5rem);
    line-height: 0.9;
    letter-spacing: -0.01em;
    color: var(--accent);
}

.su-price-note {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--muted);
}

/* Cosa muove il prezzo: elenco asciutto che spiega il "da". */
.su-price-what-lead {
    margin-top: 36px;
    color: var(--white);
}

.su-price-what {
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border);
}

.su-price-what li {
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 0.97rem;
    color: var(--text-low);
}

/* Rimando alla formula a canone: una riga sola, in fondo, volutamente
   dimessa rispetto alla cifra sopra. */
.su-alt {
    margin: 44px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--border);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 0.93rem;
    line-height: 1.7;
    color: var(--muted);
}

.su-alt a {
    color: var(--text-mid);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.su-alt a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}


/* ── LAVORI ──────────────────────────────────────────────────────────────── */

/* Al momento non in uso: la sezione "chi sono" rimanda al portfolio.
   Pronto per il primo caso di uno studio, da mettere sotto il paragrafo. */

.su-works {
    margin-top: 52px;
    border-top: 1px solid var(--border);
}

.su-work {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    padding: 34px 0;
    border-bottom: 1px solid var(--border);
}

.su-work-tag {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.su-work-name {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--white);
}

.su-work-desc {
    max-width: 560px;
    margin: 0;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-low);
}

.su-work-link {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--accent);
    white-space: nowrap;
    transition: opacity var(--transition-fast);
}

.su-work-link:hover {
    opacity: 0.7;
}


/* ── CTA FINALE ──────────────────────────────────────────────────────────── */

.su-cta {
    padding: 130px 0 140px;
    border-top: 1px solid var(--border);
    text-align: center;
    background: radial-gradient(circle at 50% 100%, rgba(232, 162, 39, 0.07), transparent 55%);
}

.su-cta-title {
    max-width: 780px;
    margin: 0 auto 26px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--white);
}

.su-cta-sub {
    max-width: 540px;
    margin: 0 auto 44px;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.06rem;
    line-height: 1.8;
    color: var(--text-mid);
}

.su-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.su-cta-note {
    margin: 30px 0 0;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    color: var(--muted);
}


/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width: 980px) {

    .su-for,
    .su-incl {
        grid-template-columns: 1fr;
    }

    /* Il tempo di fase passa sotto il testo invece che a destra */
    .su-step {
        grid-template-columns: 70px 1fr;
        gap: 24px;
    }

    .su-step-time {
        grid-column: 2;
        padding-top: 12px;
        text-align: left;
    }

    .su-work {
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: start;
    }
}

@media (max-width: 640px) {

    .su-wrap {
        width: calc(100% - 36px);
    }

    .su-hero {
        padding: 120px 0 80px;
    }

    /* Riga di qualificazione: da telefono diventa un elenco verticale,
       senza i puntini di separazione che resterebbero orfani a fine riga. */
    .su-hero-meta {
        flex-direction: column;
        gap: 8px;
    }

    .su-hero-meta-sep {
        display: none;
    }

    .su-sec {
        padding: 90px 0;
    }

    .su-cta {
        padding: 90px 0 100px;
    }

    .su-for-item {
        padding: 30px 26px;
    }

    /* La cifra va a capo su due righe a questa larghezza: la nota deve
       finirle sotto, non affiancarsi alla prima riga. */
    .su-price {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .su-hero-actions a,
    .su-hero-actions button,
    .su-cta-actions a,
    .su-cta-actions button {
        width: 100%;
        text-align: center;
    }

    /* La barra CTA mobile fissa copre il fondo pagina */
    .su-cta {
        padding-bottom: 130px;
    }
}