/* ==========================================================================
   Fascia dinamica della home (uw-templates/home/hero/hero.php)
   ==========================================================================
   Caricato solo dalla home e solo quando la fascia attiva è quella dinamica,
   da uw-templates/home/hero/head_assets.php. Le altre pagine del sito non
   scaricano né questo foglio né il font.

   L'URL porta ?v=<filemtime>, aggiunto da head_assets.php: l'.htaccess di
   radice (righe 78-89) mette max-age=604800 sui .css e i nomi non hanno hash,
   quindi senza quella marca una correzione qui resterebbe invisibile per una
   settimana a chi ha già visitato il sito.

   Contrasto: il rosso del marchio (#ee230b) dà 4.30:1 col bianco — basta per
   il testo grande e in grassetto (AA large, soglia 3:1) ma NON per il testo
   piccolo (soglia 4.5:1). Per questo il rosso resta sui numeri, sui bordi e
   sul pulsante in evidenza, mentre le etichette minute sono bianche sul fondo
   scuro, dove il contrasto è oltre 13:1.
   ========================================================================== */

/* Montserrat 700, solo per i numeri.
   Licenza OFL 1.1: il testo sta in montserrat-OFL.txt, in questa cartella.

   Il font sta QUI e non fra i font del tema: uw-content/themes/ è in
   .gitignore, perché è materiale di terze parti, e un asset nostro lasciato
   lì non avrebbe storia. Accanto al foglio che lo usa invece è versionato —
   come guides.css nella sezione Guide — e /uw-templates/ è servito dal web.

   Il file è un subset di 14 glifi (1,3 KB): cifre, spazio, virgola, punto e
   spazio insecabile. La unicode-range qui sotto elenca esattamente quelli, così
   il browser non lo scarica per il testo e non entra mai in gioco per cinese,
   giapponese e russo. Se si cambiano i separatori in home_hero_number()
   (loader.php) bisogna aggiornare questa riga, altrimenti il separatore cade su
   un altro font e in pagina si vede.

   Attenzione: i .woff2 sono sotto max-age=31536000, immutable (.htaccess:83-85).
   Se un giorno si rigenera il subset, il file va RINOMINATO, non sovrascritto. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(montserrat-700-digits.woff2) format('woff2');
    unicode-range: U+0020, U+002C, U+002E, U+0030-0039, U+00A0;
}

.uw-hero {
    /* Variabile pronta per l'immagine di sfondo 16:9 che arriverà: basta
       assegnarla qui (o inline sull'elemento) senza toccare il resto. */
    --uw-hero-bg-image: none;
    --uw-hero-accent: #ee230b;

    position: relative;
    /* Full-bleed per costruzione: la fascia sta FUORI da uk-container, quindi
       non serve nessun margine negativo. */
    padding: 48px 0 40px;
    background-color: #16100f;
    background-image: var(--uw-hero-bg-image),
        linear-gradient(160deg, #2b0f0a 0%, #16100f 55%, #100c0b 100%);
    background-size: cover;
    background-position: center;
    color: #fff;
}

.uw-hero a {
    color: inherit;
}

/* --- la finestra con la fotografia ------------------------------------- */

/* Il testo non sta MAI sopra la fotografia, e non è una precauzione generica:
   misurando il contrasto del bianco sulle cinque immagini, sul punto più chiaro
   (la finestra della sala, il riflesso sul legno, una spalla in controluce)
   scende fino a 1,0 contro la soglia WCAG di 4,5. Nessun velo ragionevole
   salva un testo che finisce sopra un pixel quasi bianco: servirebbe l'82% di
   opacità, e la fotografia non si vedrebbe più. Quindi due zone separate —
   il testo nella sua colonna, l'immagine nella sua finestra.

   L'elemento è vuoto e decorativo: in hero.php porta aria-hidden. */
.uw-hero__art {
    display: none;   /* acceso solo da 960px in su, vedi in fondo */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
    background-image: var(--uw-hero-bg-image);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;

    /* Il raccordo si fa con una maschera, non con un velo di colore sopra: lo
       sfondo della fascia è un gradiente diagonale, quindi il suo colore cambia
       lungo la linea di giunzione e un velo di tinta fissa lasciava un taglio
       verticale visibile. Sfumando verso la trasparenza, invece, sotto si vede
       il fondo vero, qualunque tinta abbia in quel punto.
       Le due grafie coprono anche i Safari meno recenti. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 30%, #000 62%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 30%, #000 62%);
}

/* --- titolo ------------------------------------------------------------- */

.uw-hero__title {
    margin: 0 0 6px;
    color: #fff;
    font-size: clamp(1.3rem, 3.2vw, 2rem);
    line-height: 1.2;
    /* Il tema mette text-transform: uppercase su tutti gli h1-h6: qui il titolo
       è una frase, e in maiuscolo sarebbe illeggibile in nove lingue. */
    text-transform: none;
}

.uw-hero__lead {
    margin: 0 0 26px;
    max-width: 46em;
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
    line-height: 1.5;
}

/* --- scelta dello strumento --------------------------------------------- */

.uw-hero__instruments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.uw-hero__instrument {
    display: inline-block;
    box-sizing: border-box;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 2px;
    color: #fff;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color .15s ease, background-color .15s ease;
}

.uw-hero__instrument:hover,
.uw-hero__instrument:focus-visible {
    border-color: #fff;
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
}

.uw-hero__instrument--current {
    border-color: var(--uw-hero-accent);
    background-color: var(--uw-hero-accent);
    color: #fff;
    font-weight: 700;
}

/* --- i tre conteggi ----------------------------------------------------- */

.uw-hero__counts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.uw-hero__card {
    display: block;
    /* Il tema non applica border-box a questi elementi: senza questa riga
       height:100% sommava padding e bordi all'altezza della riga della griglia,
       e la card cresceva di 36px lasciando un vuoto sotto il testo. */
    box-sizing: border-box;
    height: 100%;
    padding: 18px 20px 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-left: 3px solid var(--uw-hero-accent);
    border-radius: 2px;
    background-color: rgba(255, 255, 255, .05);
    color: #fff;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.uw-hero__card:hover,
.uw-hero__card:focus-visible {
    background-color: rgba(255, 255, 255, .11);
    border-color: rgba(255, 255, 255, .4);
    border-left-color: var(--uw-hero-accent);
    color: #fff;
    text-decoration: none;
}

.uw-hero__num {
    display: block;
    font-family: 'Montserrat', 'Poppins', sans-serif;
    font-weight: 700;
    /* Le cifre hanno tutte la stessa larghezza: passando da uno strumento
       all'altro i numeri non ballano. */
    font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 5.4vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -.02em;
}

.uw-hero__label {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .88);
    font-size: .86rem;
    line-height: 1.3;
}

.uw-hero__more {
    display: block;
    margin-top: 10px;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.uw-hero__card:hover .uw-hero__more {
    text-decoration: underline;
}

/* Quando un numero non è disponibile la card resta un link utile: si mostra
   l'invito, non uno zero. */
.uw-hero__num--unknown {
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    line-height: 1.4;
    letter-spacing: 0;
}

/* --- riga di autorevolezza ---------------------------------------------- */

.uw-hero__trust {
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .72);
    font-size: .82rem;
    line-height: 1.5;
}

.uw-hero__trust b {
    color: #fff;
    font-family: 'Montserrat', 'Poppins', sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* ==========================================================================
   Il blocco per chi pubblica (uw-templates/home/hero/publish.php)
   ==========================================================================
   Fondo chiaro e testo scuro: è l'opposto della fascia perché parla a un'altra
   persona — non a chi cerca un posto, ma a chi lo offre. Altezza contenuta, per
   non rubare spazio al feed che viene subito dopo. */

.uw-pub {
    padding: 26px 0;
    background-color: #f7f5f4;
    color: #2b2422;
    border-bottom: 1px solid #e6e1df;
}

.uw-pub__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.uw-pub__text {
    flex: 1 1 480px;
    min-width: 0;
}

.uw-pub__title {
    margin: 0 0 4px;
    color: #2b2422;
    font-size: 1.05rem;
    line-height: 1.3;
    /* Il tema mette uppercase su tutti gli h1-h6: qui è una domanda, e in
       maiuscolo suonerebbe come un annuncio. */
    text-transform: none;
}

.uw-pub__lead {
    margin: 0 0 8px;
    max-width: 62em;
    font-size: .88rem;
    line-height: 1.5;
    color: #4a403d;
}

.uw-pub__lead b {
    color: #2b2422;
    font-family: 'Montserrat', 'Poppins', sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.uw-pub__terms {
    display: inline-block;
    color: #a81a08;   /* il rosso del marchio scurito: su fondo chiaro #ee230b dà 4,3:1, sotto la soglia di 4,5 per il testo piccolo */
    font-size: .82rem;
    text-decoration: underline;
}

.uw-pub__terms:hover,
.uw-pub__terms:focus-visible {
    color: #7d1406;
}

.uw-pub__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
}

/* Tre form affiancati in colonna: ognuno ha il suo bottone, perché af=insup
   viaggia solo in POST. I margini dei form li azzeriamo, altrimenti il tema li
   spaziarebbe come blocchi di testo. */
.uw-pub__form {
    margin: 0;
}

.uw-pub__button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 20px;
    border: 1px solid var(--uw-hero-accent, #ee230b);
    border-radius: 2px;
    background: transparent;
    color: #a81a08;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.uw-pub__button:hover,
.uw-pub__button:focus-visible {
    background-color: var(--uw-hero-accent, #ee230b);
    color: #fff;
}

@media (max-width: 639px) {
    .uw-pub {
        padding: 20px 0;
    }

    .uw-pub__inner {
        gap: 16px;
    }

    /* I tre pulsanti a tutta larghezza, uno sotto l'altro: su 375px affiancati
       sarebbero tre etichette illeggibili. */
    .uw-pub__actions {
        width: 100%;
    }
}

/* --- schermi piccoli ---------------------------------------------------- */

@media (max-width: 639px) {
    .uw-hero {
        padding: 30px 0 26px;
    }

    /* I tre conteggi in colonna: su 375 px tre card affiancate sarebbero
       illeggibili, e il numero è la ragione per cui la fascia esiste.
       Ogni card però si appiattisce su una riga sola — numero e etichetta
       affiancati — perché tre card impilate in verticale spingevano il feed
       oltre una schermata e mezza. Così la fascia sta in una schermata. */
    .uw-hero__counts {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .uw-hero__card {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 11px 14px;
    }

    .uw-hero__num {
        font-size: 1.85rem;
        flex: 0 0 auto;
    }

    .uw-hero__num--unknown {
        font-size: 1rem;
    }

    .uw-hero__label {
        margin-top: 0;
        font-size: .82rem;
    }

    /* L'invito è ridondante quando la card è già tutta cliccabile: il link
       resta annunciato dall'aria-label, che nomina sezione e strumento. */
    .uw-hero__more {
        display: none;
    }

    /* Gli strumenti in griglia 2x2, a tutta larghezza. */
    .uw-hero__instruments {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .uw-hero__instrument {
        text-align: center;
    }
}

/* Su desktop la fascia non deve rubare la pagina: il feed sotto resta
   raggiungibile con uno scroll breve. */
@media (min-width: 960px) {
    .uw-hero {
        max-height: 65vh;
        overflow: hidden;
    }

    /* Le fotografie compaiono solo qui, dove c'è spazio per una colonna
       dedicata. Sotto i 960px il layout va in colonna e il testo occuperebbe
       tutta la larghezza: display:none impedisce anche il download, perché il
       background di un elemento non visualizzato il browser non lo scarica. */
    .uw-hero--art .uw-hero__art {
        display: block;
    }

    /* Il contenuto si ferma prima della finestra, con un margine di rispetto:
       senza questo limite il titolo più lungo (tedesco e russo) entrerebbe
       nella fotografia, e a filo esatto il testo sembrava spingere contro
       l'immagine. */
    .uw-hero--art .uw-hero__body {
        max-width: 54%;
        padding-right: 24px;
    }
}

/* Chi ha chiesto meno animazioni non le riceve. */
@media (prefers-reduced-motion: reduce) {
    .uw-hero__instrument,
    .uw-hero__card {
        transition: none;
    }
}