/* ============================================================
   Starter Site "Remus" — i due pezzi fatti a mano.

   Caricato solo quando Remus e' lo starter site installato. Tutto in
   CSS: nessuna libreria, nessuno script, nessun calcolo in JavaScript
   sullo scroll. Le animazioni si spengono da sole per chi ha chiesto
   meno movimento nelle impostazioni del sistema.

   I colori arrivano dalle variabili del tema, quindi se si cambia la
   palette dal builder questi due pezzi la seguono senza ritocchi.
============================================================ */

/* I blocchi snippet stanno dentro l'involucro del Live Builder, che tiene
   24px di margine di sicurezza per lato. A queste due sezioni serve andare
   da bordo a bordo, quindi li annullano: l'involucro e' largo quanto la
   finestra, perche' sono esattamente 24 non c'e' scorrimento in orizzontale. */
.rem-apertura,
.rem-mosaico {
    margin-left: -24px;
    margin-right: -24px;
}

/* ── Apertura editoriale ───────────────────────────────── */
.rem-apertura {
    position: relative;
    min-height: 92vh;
    display: grid;
    align-items: center;
    overflow: hidden;
    background: var(--wac-cream);
}
.rem-apertura-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.rem-apertura-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* La foto entra appena ingrandita e si assesta: dà profondità senza
       muovere niente durante lo scorrimento. */
    animation: rem-respiro 1.8s cubic-bezier(.16,.84,.44,1) both;
}
.rem-apertura::after {
    /* Velo scuro in basso: tiene leggibile il testo su qualsiasi foto. */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(18,20,18,.30) 0%, rgba(18,20,18,.72) 100%);
}
.rem-apertura-testo {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    color: #fff;
}
.rem-occhiello {
    margin: 0 0 14px;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.85;
    animation: rem-sale .8s .1s cubic-bezier(.16,.84,.44,1) both;
}
.rem-apertura-titolo {
    margin: 0 0 20px;
    font-family: var(--wac-display, Georgia, serif);
    font-weight: 400;
    font-size: clamp(42px, 7.4vw, 104px);
    line-height: 0.98;
    letter-spacing: -0.015em;
}
.rem-apertura-titolo span {
    display: block;
    /* Ogni riga si scopre da sotto una maschera: è la riga stessa a salire,
       non il blocco, quindi l'effetto resta pulito anche su più righe. */
    clip-path: inset(0 0 100% 0);
    transform: translateY(0.34em);
    animation: rem-scopri 1s cubic-bezier(.16,.84,.44,1) both;
    animation-delay: calc(.18s + var(--i, 0) * .12s);
}
.rem-apertura-sotto {
    max-width: 46ch;
    margin: 0 0 30px;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.65;
    color: rgba(255,255,255,.88);
    animation: rem-sale .9s .62s cubic-bezier(.16,.84,.44,1) both;
}
.rem-apertura-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    animation: rem-sale .9s .74s cubic-bezier(.16,.84,.44,1) both;
}
.rem-btn {
    display: inline-block;
    padding: 15px 34px;
    background: var(--wac-gold);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    border: 1px solid var(--wac-gold);
    transition: background .25s, color .25s, border-color .25s;
}
.rem-btn:hover { background: #fff; border-color: #fff; color: var(--wac-coffee); }
.rem-btn--nudo { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.rem-btn--nudo:hover { background: #fff; border-color: #fff; color: var(--wac-coffee); }

/* ── Mosaico delle categorie ───────────────────────────── */
.rem-mosaico {
    padding: 110px 0;
    background: #fff;
}
.rem-mosaico-testata {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 24px;
}
.rem-mosaico-testata .rem-occhiello {
    color: var(--wac-gold-deep);
    opacity: 1;
    animation: none;
}
.rem-titolo {
    margin: 0;
    font-family: var(--wac-display, Georgia, serif);
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.08;
    color: var(--wac-coffee);
}
.rem-mosaico-griglia {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    /* Righe di altezza definita, non 1fr: con righe indefinite l'immagine
       piu' alta (un ritratto verticale) decideva per tutte e il mosaico
       diventava alto il doppio. Cosi' invece sono le foto a ritagliarsi,
       qualunque proporzione abbiano. */
    grid-template-rows: repeat(2, clamp(190px, 22vw, 300px));
    gap: 18px;
}
.rem-tassello {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--wac-cream-2);
    text-decoration: none;
}
.rem-tassello--grande { grid-row: span 2; }
.rem-tassello img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.16,.84,.44,1);
}
.rem-tassello:hover img { transform: scale(1.055); }
.rem-tassello::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18,20,18,0) 45%, rgba(18,20,18,.62) 100%);
}
.rem-tassello-eti {
    position: absolute;
    left: 26px;
    bottom: 24px;
    z-index: 1;
    color: #fff;
}
.rem-tassello-eti em {
    display: block;
    font-family: var(--wac-display, Georgia, serif);
    font-style: normal;
    font-size: 26px;
    line-height: 1.15;
}
.rem-tassello-eti i {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.82;
}

@media (max-width: 900px) {
    .rem-mosaico { padding: 70px 0; }
    .rem-mosaico-griglia {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .rem-tassello { aspect-ratio: 4 / 3; }
    .rem-tassello--grande { grid-row: auto; aspect-ratio: 3 / 2; }
}
@media (max-width: 600px) {
    .rem-apertura { min-height: 86vh; }
    .rem-apertura-azioni .rem-btn { flex: 1 1 100%; text-align: center; }
}

/* ── Movimenti ─────────────────────────────────────────── */
@keyframes rem-scopri {
    from { clip-path: inset(0 0 100% 0); transform: translateY(0.34em); }
    to   { clip-path: inset(0 0 -10% 0); transform: translateY(0); }
}
@keyframes rem-sale {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rem-respiro {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

/* Chi ha chiesto meno movimento nelle impostazioni del sistema vede
   tutto fermo e al posto giusto, senza perdere niente. */
@media (prefers-reduced-motion: reduce) {
    .rem-apertura-media img,
    .rem-apertura-titolo span,
    .rem-occhiello,
    .rem-apertura-sotto,
    .rem-apertura-azioni {
        animation: none;
        clip-path: none;
        transform: none;
        opacity: 1;
    }
    .rem-tassello img { transition: none; }
    .rem-tassello:hover img { transform: none; }
}