/* =========================================================================
   HOME PORTFOLIO - la tavola e lo scalimetro
   Le categorie sono scale di disegno. Il filtro e' uno scalimetro con un cursore
   che scorre sulla scala scelta; sotto, la tavola si reimpagina.

   Le foto dei lavori sono eterogenee (formati, luci, mani diverse), quindi:
   - non si ritagliano: l'impaginazione a colonne rispetta il formato di ognuna;
   - a riposo hanno un tono unico, caldo e monocromo, come stampe montate su una
     tavola; il colore torna al passaggio. E' cio' che le fa stare insieme;
   - le colonne non superano la larghezza che una foto da 800px regge.
   La scala cambia densita' e respiro della tavola, non il ritaglio.

   Filtro e cursore sono in CSS (:has): funziona senza JavaScript. Le regole per
   categoria sono generate dalla view. Colori e font sono i token di siteFE.css.
   ========================================================================= */

.pf-sheet {
    max-width: 84rem;
    margin: 0 auto;
    padding: 3.5rem 1.25rem 5rem;
    min-height: 100vh;
    min-height: 100svh;
    /* impaginazione, riscritta dal righello */
    --pf-col: 20rem;
    --pf-col-m: 100%;
    --pf-gap: 2.5rem;
    --pf-title: 1rem;
    /* graduazioni dello scalimetro */
    --pf-tick: rgba(218,181,135,.55);
    --pf-tick-strong: rgba(218,181,135,.9);
}

/* -- Intestazione: una riga sullo studio, non uno slogan -- */
.pf-intro {
    max-width: 46rem;
    margin-bottom: 2.75rem;
}

.pf-intro-title {
    font-size: clamp(2.25rem, 7vw, 4rem);
    font-weight: 900;
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--primary-dark);
    margin: 0 0 1rem;
}

.pf-intro-line {
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--text-600);
    margin: 0;
    max-width: 38rem;
}

/* -- Scalimetro -- */
.pf-ruler {
    position: sticky;
    top: var(--pf-header-h, 4rem); /* misurata dallo script; 4rem senza JavaScript */
    z-index: 5;
    margin: 0 -1.25rem;
    padding: .6rem 1.25rem .5rem;
    background: var(--page-bg, #F5F1ED);
}

.pf-ruler-track {
    --pf-i: 0;
    --pf-body-h: 4.5rem;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--pf-n), minmax(0, 1fr));
}

/* corpo: faccia verde oliva, graduazioni sabbia sui due bordi a passi diversi,
   come i due lati di uno scalimetro */
.pf-ruler-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--pf-body-h);
    background-color: var(--primary-dark);
    background-image:
        repeating-linear-gradient(90deg, var(--pf-tick-strong) 0 1px, transparent 1px 60px),
        repeating-linear-gradient(90deg, var(--pf-tick) 0 1px, transparent 1px 30px),
        repeating-linear-gradient(90deg, var(--pf-tick) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(90deg, var(--pf-tick-strong) 0 1px, transparent 1px 50px),
        repeating-linear-gradient(90deg, var(--pf-tick) 0 1px, transparent 1px 10px);
    background-repeat: no-repeat;
    background-size: 100% 16px, 100% 11px, 100% 6px, 100% 11px, 100% 6px;
    background-position: left top, left top, left top, left bottom, left bottom;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
                inset 0 -1px 0 rgba(0,0,0,.3),
                0 12px 20px -14px rgba(0,0,0,.6);
}

/* cursore: la finestrella scorrevole con il filo di lettura */
.pf-cursor {
    position: absolute;
    z-index: 1;
    top: -.35rem;
    left: calc(var(--pf-i) * 100% / var(--pf-n));
    width: calc(100% / var(--pf-n));
    height: calc(var(--pf-body-h) + .7rem);
    border: solid var(--primary);
    border-width: 5px 2px;
    background: rgba(255,255,255,.14);
    box-shadow: 0 8px 16px -6px rgba(0,0,0,.45);
    pointer-events: none;
    transition: left .55s cubic-bezier(.22,1,.36,1);
}

.pf-cursor::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    /* il filo si interrompe attorno alla quota, per non tagliarla */
    background: linear-gradient(var(--primary) 0 28%, transparent 28% 72%, var(--primary) 72% 100%);
}

.pf-stop {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.pf-stop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.pf-stop-face {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--pf-body-h);
}

/* spaziatura larga riservata alle quote di scala: sono numeri di disegno */
.pf-stop-quote {
    font-size: clamp(.85rem, 2.6vw, 1.4rem);
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1;
    color: var(--primary-light);
    transition: color .25s;
}

.pf-stop-name {
    position: relative;
    display: block;
    padding: 1rem .4rem 0;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--text-600);
    transition: color .25s;
}

/* linea di richiamo: lega ogni nome alla sua tacca, come una quota su un disegno */
.pf-stop-name::before {
    content: "";
    position: absolute;
    top: .2rem;
    left: 50%;
    width: 1px;
    height: .55rem;
    background: var(--primary-dark);
    opacity: .35;
    transition: opacity .25s, background .25s, height .25s;
}

.pf-stop:hover .pf-stop-quote,
.pf-stop.is-current .pf-stop-quote,
.pf-stop:has(.pf-stop-input:checked) .pf-stop-quote {
    color: var(--white);
}

.pf-stop:hover .pf-stop-name {
    color: var(--primary-dark);
}

.pf-stop.is-current .pf-stop-name,
.pf-stop:has(.pf-stop-input:checked) .pf-stop-name {
    color: var(--primary);
}

.pf-stop.is-current .pf-stop-name::before,
.pf-stop:has(.pf-stop-input:checked) .pf-stop-name::before {
    background: var(--primary);
    opacity: 1;
    height: .7rem;
}

/* nelle pagine di categoria le tacche sono link: stesso aspetto, nessuna sottolineatura */
a.pf-stop {
    text-decoration: none;
}

a.pf-stop:focus-visible {
    outline: none;
}

a.pf-stop:focus-visible .pf-stop-face {
    outline: 2px solid var(--primary-light);
    outline-offset: -5px;
}

/* focus da tastiera: anello chiaro, leggibile sul verde del righello */
.pf-stop:has(.pf-stop-input:focus-visible) .pf-stop-face {
    outline: 2px solid var(--primary-light);
    outline-offset: -5px;
}

/* -- Lettura: che cosa si sta guardando. E' il titolo della tavola. -- */
.pf-readout {
    margin: 2.25rem 0 2.5rem;
    min-height: 7.5rem;
}

.pf-readout-item {
    display: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: 1rem 3rem;
    align-items: end;
}

.pf-sheet:has(#pf-scale-all:checked) .pf-readout-all {
    display: grid;
}

.pf-readout-name {
    margin: 0;
    font-size: clamp(1.6rem, 4.2vw, 2.6rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: .01em;
    color: var(--primary-dark);
}

.pf-readout-meta {
    margin: .5rem 0 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--primary);
}

.pf-readout-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-600);
}

/* -- La tavola: colonne che rispettano il formato di ogni foto -- */
.pf-works {
    column-width: var(--pf-col);
    column-gap: var(--pf-gap);
}

.pf-work {
    display: inline-block;
    width: 100%;
    margin: 0 0 var(--pf-gap);
    break-inside: avoid;
    text-decoration: none;
    color: inherit;
}

/* Con JavaScript le colonne sono vere (una per div) e ogni nuovo lavoro va nella piu' corta:
   cio' che e' gia' in pagina non si sposta quando arriva un altro lotto. */
.pf-works--js {
    column-width: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--pf-gap);
    position: relative;
}

.pf-col {
    flex: 1 1 0;
    min-width: 0;
}

/* sonda: risolve in pixel la larghezza di colonna della scala corrente (rem o %) */
.pf-col-probe {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    width: var(--pf-col);
}

/* -- Altri lavori: stato + pulsante -- */
.pf-more {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(90,91,62,.25);
}

.pf-more[hidden] {
    display: none;
}

.pf-more-status {
    margin: 0;
    font-size: .95rem;
    color: var(--text-600);
}

.pf-more-btn {
    padding: .7rem 1.4rem;
    font: inherit;
    font-weight: 700;
    color: var(--white);
    background: var(--primary-dark);
    border: 0;
    cursor: pointer;
    transition: background .2s;
}

.pf-more-btn:hover {
    background: var(--primary);
}

.pf-more-btn:disabled {
    opacity: .6;
    cursor: progress;
}

.pf-more-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* lo scroll infinito sostituisce la paginazione, che resta per chi non ha JavaScript */
.pf-sheet:has(.pf-works--js) .pf-pagination {
    display: none !important;
}

/* Stampa montata sulla tavola. Sotto c'e' il retino: dove la foto manca o non
   carica, la tessera si disegna da sola come la campitura di una pianta. */
.pf-plate {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--placeholder-bg);
    background-image: repeating-linear-gradient(45deg, rgba(90,91,62,.2) 0 1px, transparent 1px 9px);
    box-shadow: 0 1px 0 rgba(90,91,62,.18), 0 14px 24px -18px rgba(15,23,42,.55);
}

.pf-work[data-c="CON"] .pf-plate {
    background-image: repeating-linear-gradient(0deg, rgba(85,107,47,.24) 0 1px, transparent 1px 14px),
                      repeating-linear-gradient(90deg, rgba(85,107,47,.13) 0 1px, transparent 1px 42px);
}

.pf-work[data-c="LOC"] .pf-plate {
    background-image: repeating-linear-gradient(90deg, rgba(90,91,62,.28) 0 2px, transparent 2px 28px),
                      repeating-linear-gradient(0deg, rgba(90,91,62,.16) 0 2px, transparent 2px 28px);
}

.pf-work[data-c="RES"] .pf-plate {
    background-image: repeating-linear-gradient(90deg, rgba(135,92,70,.26) 0 1px, transparent 1px 18px),
                      repeating-linear-gradient(0deg, rgba(135,92,70,.26) 0 1px, transparent 1px 18px);
}

.pf-work[data-c="MOB"] .pf-plate {
    background-image: repeating-linear-gradient(45deg, rgba(135,92,70,.32) 0 1px, transparent 1px 7px);
}

/* per le carte da parati il pattern non e' un ripiego: e' il contenuto */
.pf-work[data-c="CAR"] .pf-plate {
    background-image: radial-gradient(circle at 25% 25%, rgba(226,114,91,.4) 18%, transparent 19%),
                      radial-gradient(circle at 75% 75%, rgba(85,107,47,.32) 18%, transparent 19%);
    background-size: 2.5rem 2.5rem;
}

/* tono unico a riposo: monocromo caldo. Il colore torna al passaggio. */
.pf-plate-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.08) brightness(1.04);
    transition: filter .5s ease, transform .7s cubic-bezier(.165,.84,.44,1);
}

.pf-plate::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary-light);
    mix-blend-mode: multiply;
    opacity: .46;
    pointer-events: none;
    transition: opacity .5s ease;
}

.pf-plate:not(:has(.pf-plate-photo))::after {
    display: none;
}

.pf-work:hover .pf-plate-photo,
.pf-work:focus-visible .pf-plate-photo {
    filter: none;
    transform: scale(1.03);
}

.pf-work:hover .pf-plate::after,
.pf-work:focus-visible .pf-plate::after {
    opacity: 0;
}

.pf-work:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 5px;
}

.pf-work-meta {
    display: block;
    padding-top: .75rem;
}

.pf-work-title {
    display: inline;
    font-size: var(--pf-title);
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-dark);
    background: linear-gradient(var(--primary), var(--primary)) left bottom / 0 2px no-repeat;
    transition: background-size .35s cubic-bezier(.22,1,.36,1), color .25s;
}

.pf-work:hover .pf-work-title,
.pf-work:focus-visible .pf-work-title {
    background-size: 100% 2px;
    color: var(--primary);
}

.pf-work-teaser {
    display: block;
    margin-top: .35rem;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--text-600);
}

.pf-work-cat {
    display: block;
    margin-top: .2rem;
    font-size: .8rem;
    color: var(--text-500);
}

/* dentro una categoria il nome della categoria sotto ogni lavoro e' ridondante */
.pf-sheet:has(#pf-scale-all):not(:has(#pf-scale-all:checked)) .pf-work-cat {
    display: none;
}

/* -- Stato vuoto: una tavola ancora bianca, non un errore -- */
.pf-empty {
    display: none;
    max-width: 36rem;
    padding: 2.5rem 2rem;
    border: 1px dashed rgba(90,91,62,.45);
    background-image: repeating-linear-gradient(45deg, rgba(90,91,62,.06) 0 1px, transparent 1px 11px);
}

.pf-empty-title {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.pf-empty-text {
    margin: 0;
    color: var(--text-600);
    line-height: 1.6;
}

.pf-empty-global {
    display: block;
}

/* -- Link di riserva senza JavaScript -- */
.pf-noscript {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.pf-noscript a {
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* Touch: non c'e' passaggio del mouse, quindi il colore resta sempre visibile,
   appena smorzato perche' le foto stiano comunque insieme. */
@media (hover: none) {
    .pf-plate-photo {
        filter: saturate(.78) contrast(1.03);
    }

    .pf-plate::after {
        opacity: .16;
    }
}

/* -- Tablet e telefono -- */
@media (max-width: 991.98px) {
    .pf-readout-item {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Telefono: lo scalimetro sta tutto nello schermo, senza scorrere. I nomi sotto
   le tacche non ci starebbero: il nome della scala scelta lo dice la lettura, in
   grande, subito sotto. Restano nel markup per i lettori di schermo. */
@media (max-width: 767.98px) {
    .pf-sheet {
        padding: 2.25rem 1rem 3.5rem;
    }

    .pf-ruler {
        margin: 0 -1rem;
        padding: .55rem 1rem .6rem;
    }

    .pf-ruler-track {
        --pf-body-h: 3.5rem;
    }

    .pf-stop-quote {
        letter-spacing: .03em;
    }

    .pf-stop-name {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .pf-readout {
        margin: 1.5rem 0 1.75rem;
        min-height: 9.5rem;
    }

    .pf-works {
        column-width: var(--pf-col-m);
        column-gap: min(var(--pf-gap), 1rem);
    }

    .pf-works--js {
        gap: min(var(--pf-gap), 1rem);
    }

    .pf-col-probe {
        width: var(--pf-col-m);
    }

    .pf-work {
        margin-bottom: min(var(--pf-gap), 1.5rem);
    }
}

/* -- Movimento ridotto: la tavola si reimpagina, senza animazioni -- */
@media (prefers-reduced-motion: reduce) {
    .pf-more-btn,
    .pf-cursor,
    .pf-plate::after,
    .pf-plate-photo,
    .pf-stop-quote,
    .pf-stop-name,
    .pf-stop-name::before,
    .pf-work-title {
        transition: none;
    }

    .pf-works {
        animation: none !important;
    }

    .pf-work:hover .pf-plate-photo {
        transform: none;
    }
}

/* durante la misura delle altezze (script) nessuna animazione deve falsare il valore */
.pf-measuring,
.pf-measuring * {
    transition: none !important;
    animation: none !important;
}