/* =========================================================================
   La Querce — Premi v2 ("l'albo")
   Caricato SOLO da tpl/premi-v2.html, dopo style.css e v2-base.css.
   Tutto è scopato su body.premi-v2: le altre pagine non cambiano.

   Idea: l'albo dei riconoscimenti. Testata scura col collage delle guide,
   poi un registro su carta chiara con l'anno in colonna a sinistra e i
   documenti (diplomi, pagine di guida) mostrati come fogli con le loro
   proporzioni reali, invece che ritagliati in 16:9.

   Token comuni in v2-base.css, come la home: un solo font, titoli in
   maiuscolo spaziato, oro come unico accento.
   ========================================================================= */

.premi-v2 {
    /* token comuni in v2-base.css: qui solo le misure dell'albo */
    --measure: 62ch;
    --doc-h: 15rem;          /* altezza dei documenti su desktop */
    --year-col: 9.5rem;      /* colonna dell'anno */
}

/* =========================================================================
   TESTATA — il collage delle guide smorzato sotto il titolo
   ========================================================================= */

.premi-v2 .albo-hero {
    position: relative;
    overflow: hidden;
    background-color: #0e0e0d;
    /* 6rem = altezza dell'header fisso */
    padding: calc(6rem + clamp(3rem, 9vw, 7rem)) var(--gutter) clamp(3rem, 8vw, 6rem);
}

.premi-v2 .albo-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    opacity: .22;
    filter: saturate(.5) blur(1.5px);
    transform: scale(1.03); /* nasconde il bordo sfumato del blur */
    z-index: 0;
}

.premi-v2 .albo-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(14, 14, 13, .55) 0%, rgba(14, 14, 13, .2) 50%, rgba(14, 14, 13, .8) 100%);
}

.premi-v2 .albo-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 72rem;
    margin: 0 auto;
    /* allineato alla colonna del testo del registro */
    padding-left: calc(var(--year-col) + var(--gutter));
}

.premi-v2 .albo-hero h1 {
    background-image: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
    text-align: left;
    font-weight: 300;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
    margin: 0;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}

.premi-v2 .albo-hero__sub {
    margin: 1.1rem 0 0;
    max-width: 48ch;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.6;
    color: rgba(244, 242, 237, .78);
}

/* l'arco di anni coperto dall'albo: piccolo, in oro, con il filetto */
.premi-v2 .albo-hero__range {
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--gold-light);
    position: relative;
}

.premi-v2 .albo-hero__range::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4.5rem;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-light), transparent);
}

/* =========================================================================
   MAIN
   ========================================================================= */

.premi-v2 main {
    max-width: 72rem;
    padding: clamp(1rem, 4vw, 3rem) var(--gutter) clamp(3rem, 8vw, 6rem);
}

.premi-v2 .albo-intro {
    max-width: var(--measure);
    margin: 0 0 3rem calc(var(--year-col) + var(--gutter));
    color: var(--text-soft);
    line-height: 1.7;
}

/* =========================================================================
   IL REGISTRO
   ========================================================================= */

.premi-v2 .albo {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* la linea del tempo: corre sul bordo destro della colonna dell'anno */
.premi-v2 .albo::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--year-col);
    width: 1px;
    background-color: var(--line);
}

.premi-v2 .albo__row {
    display: grid;
    grid-template-columns: var(--year-col) minmax(0, 1fr);
    column-gap: var(--gutter);
    padding: clamp(2rem, 4.5vw, 3.25rem) 0;
    border-top: 1px solid var(--line);
    position: relative;
}

.premi-v2 .albo__row:first-child {
    border-top: 0;
}

/* il segno sulla linea, all'altezza del titolo */
.premi-v2 .albo__row::before {
    content: "";
    position: absolute;
    left: calc(var(--year-col) - 3px);
    top: calc(clamp(2rem, 4.5vw, 3.25rem) + .55em);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--gold);
    box-shadow: 0 0 0 4px var(--paper);
}

/* --- anno ------------------------------------------------------------- */

.premi-v2 .albo__year {
    align-self: start;
    position: sticky;
    top: 7rem;   /* sotto l'header fisso */
    padding-right: 1.25rem;
    text-align: right;
    font-weight: 200;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    /* allinea la base della cifra alla riga del titolo */
    margin-top: -.14em;
}

.premi-v2 .albo__year:empty {
    display: none;
}

/* "2020 – 2025": due righe, più piccolo */
.premi-v2 .albo__year--range {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    margin-top: 0;
    line-height: 1.1;
    max-width: 6.5em;
    margin-left: auto;
}

/* su desktop l'anno in colonna basta */
.premi-v2 .albo__year-inline {
    display: none;
}

/* --- titolo e testo --------------------------------------------------- */

.premi-v2 .albo__title {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text);
    margin: 0 0 1rem;
    max-width: var(--measure);
    text-wrap: balance;
}

.premi-v2 .albo__text {
    max-width: var(--measure);
    margin: 0;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-soft);
}

/* --- documenti -------------------------------------------------------- */

.premi-v2 .albo__docs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 1.75rem;
}

.premi-v2 .albo__doc {
    display: block;
    flex: 0 0 auto;
    border-radius: 2px;
    background-color: #fff;
    box-shadow:
        0 0 0 1px rgba(28, 27, 23, .08),
        0 1px 2px rgba(28, 27, 23, .06),
        0 12px 28px rgba(28, 27, 23, .14);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}

/* proporzioni reali: altezza fissa, larghezza di conseguenza */
.premi-v2 .albo__doc img {
    display: block;
    width: auto;
    height: var(--doc-h);
    max-width: min(100%, 24rem);
    object-fit: contain;
    border-radius: 2px;
    margin: 0;
    border: 0;
}

.premi-v2 .albo__doc:hover,
.premi-v2 .albo__doc:focus-visible {
    transform: translateY(-4px);
    box-shadow:
        0 0 0 1px var(--gold),
        0 2px 4px rgba(28, 27, 23, .06),
        0 20px 40px rgba(28, 27, 23, .2);
    text-decoration: none;
}

/* =========================================================================
   FOOTER — attacca senza il margine chiaro
   ========================================================================= */

.premi-v2 footer {
    margin-top: 0;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media screen and (max-width: 900px) {

    .premi-v2 {
        --year-col: 6.5rem;
        --doc-h: 12rem;
    }

    .premi-v2 .albo__year {
        font-size: clamp(1.7rem, 4.5vw, 2.4rem);
        padding-right: 1rem;
        margin-top: -.08em;
    }

    .premi-v2 .albo__year--range {
        font-size: 1.15rem;
    }
}

@media screen and (max-width: 640px) {

    .premi-v2 {
        --doc-h: 11rem;
    }

    /* niente colonna: l'anno sale sopra il titolo, la linea sparisce */
    .premi-v2 .albo-hero__inner,
    .premi-v2 .albo-intro {
        padding-left: 0;
        margin-left: 0;
    }

    .premi-v2 .albo::before,
    .premi-v2 .albo__row::before,
    .premi-v2 .albo__year {
        display: none;
    }

    .premi-v2 main {
        padding-top: 0;
    }

    .premi-v2 .albo__row {
        display: block;
        padding: 2.25rem 0;
    }

    .premi-v2 .albo__year-inline {
        display: block;
        font-weight: 300;
        font-size: 1.6rem;
        line-height: 1;
        letter-spacing: 0;
        text-transform: none;
        color: var(--gold);
        margin-bottom: .6rem;
    }

    .premi-v2 .albo__year-inline:empty {
        display: none;
    }

    /* i documenti scorrono in orizzontale, a tutta larghezza */
    .premi-v2 .albo__docs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: calc(-1 * var(--gutter));
        margin-right: calc(-1 * var(--gutter));
        padding: .75rem var(--gutter) 1.25rem;
    }

    .premi-v2 .albo__docs::-webkit-scrollbar {
        display: none;
    }

    .premi-v2 .albo__doc {
        scroll-snap-align: start;
    }

    .premi-v2 .albo__doc img {
        max-width: 80vw;
    }

    /* un solo documento: niente scroll, resta in colonna */
    .premi-v2 .albo__docs[data-count="1"] {
        overflow: visible;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

/* =========================================================================
   ACCESSIBILITÀ — rispetta "riduci animazioni"
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {

    .premi-v2 .albo__doc {
        transition: none;
    }

    .premi-v2 .albo__doc:hover,
    .premi-v2 .albo__doc:focus-visible {
        transform: none;
    }
}