/* =====================================================================
   FF Theme · pagina Design e mockup (/design-e-mockup/), dopo pagina.css
   Dal concept pagine/federicofloris-mockup-concept.html (blocco «PAGINA DESIGN E MOCKUP»).
   Le anteprime di ogni design (.ff-art--{slug}) arrivano dal campo «Anteprima CSS» del mockup (FF Core),
   stampate nell'<head>; qui la struttura comune, l'anteprima generica (ff-art--auto) e gli stati senza JavaScript.
   ===================================================================== */
.ff-hero .ff-facts{margin-top:4px}

/* ===== 02 · Disponibili: schede grandi in fila, scorrono di lato ===== */
.ff-mk-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(290px,34vw,520px);gap:clamp(16px,1.8vw,28px);margin-top:clamp(40px,7vh,72px);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:4px}
.ff-mk-row::-webkit-scrollbar{display:none}
.ff-mk-row.ff-ovf{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,36px)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,36px)),transparent 100%)}
.ff-mk{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;scroll-snap-align:start;min-width:0;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 55%,transparent);transition:border-color var(--ff-t-mid)}
.ff-mk:hover{border-color:color-mix(in srgb,var(--fg) 35%,transparent)}
.ff-mk-b{display:flex;flex-direction:column;gap:14px;padding:clamp(18px,2vw,26px);min-width:0}
/* i pulsanti stanno sempre in fondo alla scheda: se i tag vanno su due righe cambia solo l'aria sopra i pulsanti */
.ff-mk-a{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:auto!important;padding-top:6px}
.ff-mk-k{display:flex;flex-wrap:nowrap;align-items:baseline;gap:12px;margin:0;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ff-mk-k b{flex:none;color:var(--accent);font-weight:500}
.ff-mk-k .ff-mq{flex:1 1 auto}
.ff-mk-k em{flex:none;margin-left:auto;font-style:normal;font-family:var(--ff-mono);font-size:inherit;letter-spacing:inherit;color:var(--fg);display:inline-flex;align-items:center;gap:6px}
.ff-mk-k em::before{content:"";width:6px;height:6px;border-radius:50%;background:#2fa86b;box-shadow:0 0 0 3px color-mix(in srgb,#2fa86b 22%,transparent)}
.ff-page .ff-scene .ff-mk h3,.ff-cat .ff-mk h3{margin:0;font:italic 400 clamp(2.4rem,3.6vw,3.6rem)/.95 var(--ff-serif);letter-spacing:-.01em;overflow-wrap:anywhere}
.ff-mk .ff-tags li{font-size:.64rem;padding:6px 9px}
/* i tag delle schede vanno a capo (non sono una riga che scorre) */
.ff-page .ff-scene .ff-mk .ff-tags,.ff-cat .ff-mk .ff-tags{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;margin-inline:0;padding-inline:0}
.ff-cat .ff-tags{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.ff-cat .ff-tags li{border:1px solid var(--line);font-family:var(--ff-mono);letter-spacing:.04em;text-transform:uppercase;line-height:1}

/* struttura comune delle anteprime (.ff-art): assets/css/anteprime.css, condivisa con gli articoli */

/* ===== Nota «Da sapere»: la demo è un prototipo, il sito vero lo realizzo in WordPress ===== */
.ff-mk-note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:12px 32px;margin-top:clamp(36px,6vh,56px);padding-top:22px;border-top:1px solid var(--line)}
.ff-mk-note p{margin:0;max-width:70ch}
.ff-mk-note .ff-link{justify-self:start}
.ff-mk-note-k{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.ff-mk-note b{font-weight:600}
.ff-mk-empty{margin-top:clamp(32px,5vh,48px)}

/* ===== «Vedi tutti»: pulsante con l'icona espandi (quattro angoli che si allargano al passaggio) ===== */
.ff-mk-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:clamp(20px,3vh,28px)}
.ff-mk-tools>span{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ff-mk-all{gap:12px}
.ff-mk-all small{font:400 .7rem/1 var(--ff-mono);color:var(--muted)}
.ff-mk-all:hover small{color:inherit}
.ff-expand{position:relative;width:14px;height:14px;flex:none}
.ff-expand b{position:absolute;width:5px;height:5px;border:0 solid currentColor;transition:transform var(--ff-t-mid) var(--ff-ease-out)}
.ff-expand b:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px}
.ff-expand b:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0}
.ff-expand b:nth-child(3){left:0;bottom:0;border-width:0 0 1.5px 1.5px}
.ff-expand b:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0}
.ff-mk-all:hover .ff-expand b:nth-child(1),.ff-mk-all:focus-visible .ff-expand b:nth-child(1){transform:translate(-3px,-3px)}
.ff-mk-all:hover .ff-expand b:nth-child(2),.ff-mk-all:focus-visible .ff-expand b:nth-child(2){transform:translate(3px,-3px)}
.ff-mk-all:hover .ff-expand b:nth-child(3),.ff-mk-all:focus-visible .ff-expand b:nth-child(3){transform:translate(-3px,3px)}
.ff-mk-all:hover .ff-expand b:nth-child(4),.ff-mk-all:focus-visible .ff-expand b:nth-child(4){transform:translate(3px,3px)}

/* ===== Carosello fermo sul desktop (lo scroll verticale sfoglia le schede) ===== */
.ff-pin{margin-top:clamp(40px,7vh,72px)}
.ff-pin-in .ff-mk-row{margin-top:0}
.ff-pin-in>.ff-hs-nav:first-child{margin-top:0}
.ff-pin-in.is-pinned{position:sticky}
.ff-pin-in.is-pinned .ff-mk-row{scroll-snap-type:none}

/* scheda finale del carosello: apre il catalogo completo */
.ff-mk-end{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:clamp(18px,2vw,26px);background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ff-mk-end:hover{border-color:var(--fg)}
.ff-mk-endb{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:12px;background:none;border:0;padding:0;color:inherit;text-align:left;cursor:pointer}
.ff-mk-endb>span{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.ff-mk-endb strong{font-size:clamp(2.2rem,3.4vw,3.4rem);font-weight:600;letter-spacing:-.04em;line-height:.95}
.ff-mk-endb strong em{font-weight:400}
.ff-mk-endb small{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;opacity:.6}
.ff-expand--big{width:34px;height:34px;margin-bottom:auto;color:var(--ff-magenta)}
.ff-expand--big b{width:11px;height:11px}
.ff-mk-endb:hover .ff-expand b:nth-child(1),.ff-mk-endb:focus-visible .ff-expand b:nth-child(1){transform:translate(-4px,-4px)}
.ff-mk-endb:hover .ff-expand b:nth-child(2),.ff-mk-endb:focus-visible .ff-expand b:nth-child(2){transform:translate(4px,-4px)}
.ff-mk-endb:hover .ff-expand b:nth-child(3),.ff-mk-endb:focus-visible .ff-expand b:nth-child(3){transform:translate(-4px,4px)}
.ff-mk-endb:hover .ff-expand b:nth-child(4),.ff-mk-endb:focus-visible .ff-expand b:nth-child(4){transform:translate(4px,4px)}
.ff-mk-end p{margin:0;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--bg) 22%,transparent);font-size:.92rem;opacity:.85}
.ff-mk-end .ff-link{border-bottom-color:var(--ff-magenta);color:inherit}
.ff-mk-end .ff-link:hover{color:inherit;opacity:.75}

/* ===== 04 · Archivio ===== */
.ff-arch-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,5vw,96px);margin-top:clamp(40px,7vh,72px);align-items:start}
.ff-arch-grid>:only-child{grid-column:1/-1}
.ff-arch-col{display:grid;gap:16px;min-width:0}
.ff-page .ff-scene .ff-arch-h{display:flex;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--fg) 45%,transparent);font-size:clamp(1.4rem,2vw,1.8rem)}
.ff-arch-h small{font-size:.7rem;font-weight:400}
.ff-arch-h small b{color:var(--accent);font-weight:500}
.ff-arch-h i{margin-left:auto;font-size:.72rem;font-weight:400;font-style:normal;color:var(--muted)}
.ff-arch-p{margin:0;color:var(--muted)}
.ff-soon{list-style:none;margin:0;padding:0}
.ff-soon li{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;grid-template-areas:"n b a" "n s a";align-items:center;gap:2px 14px;padding:14px 0;border-bottom:1px solid var(--line)}
.ff-soon small{grid-area:n;font-size:.7rem;color:var(--muted);align-self:start;padding-top:.6em}
.ff-soon b{grid-area:b;font:italic 400 1.7rem/1 var(--ff-serif);min-width:0;overflow-wrap:anywhere}
.ff-soon span{grid-area:s;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);min-width:0}
.ff-soon .ff-btn{grid-area:a}
/* assegnati: una griglia fitta di nomi barrati (si leggono, ma non sono più in catalogo) */
.ff-sold{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,11.5rem),1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ff-sold li{position:relative;display:grid;gap:6px;align-content:start;padding:14px 14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.ff-sold small{font-size:.64rem;color:var(--muted)}
.ff-sold b{font:italic 400 1.35rem/1 var(--ff-serif);color:color-mix(in srgb,var(--fg) 45%,transparent);text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:1px;overflow-wrap:anywhere}
.ff-sold span{font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ff-sold li::after{content:"Assegnato";position:absolute;top:12px;right:10px;font:400 .56rem/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
/* su misura */
.ff-custom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px 40px;margin-top:clamp(56px,9vh,96px);padding:clamp(24px,3vw,40px);border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.ff-custom>p{grid-column:1/-1;margin:0;font-size:.72rem;color:var(--muted)}
.ff-custom>p b{color:var(--accent);font-weight:500}
.ff-page .ff-scene .ff-custom h3{font-size:clamp(1.8rem,3vw,2.8rem);max-width:20ch}
.ff-custom .ff-actions{margin:0}

/* ===== Catalogo a griglia: foglio a tutto schermo, tono chiaro come la sezione da cui si apre ===== */
.ff-cat{--bg:var(--ff-paper);--surface:var(--ff-paper-2);--fg:var(--ff-char);--muted:#6d6862;--line:rgba(27,25,23,.16);--accent:var(--ff-magenta-ink);color-scheme:light;
  position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);
  clip-path:inset(100% 0 0 0);visibility:hidden;transition:clip-path 700ms var(--ff-ease-io),visibility 0s 700ms}
.ff-cat.is-on{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path 700ms var(--ff-ease-io)}
.ff-cat-h{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px 24px;padding:calc(18px + env(safe-area-inset-top,0px)) var(--ff-pad-r) 18px var(--ff-pad-l);border-bottom:1px solid var(--line)}
.ff-cat-ht{display:grid;gap:8px;min-width:0}
.ff-cat-ht>p:first-child{margin:0;font-size:.72rem;color:var(--muted)}
.ff-cat-ht>p:first-child b{color:var(--accent);font-weight:500}
.ff-cat h2{margin:0;font-size:clamp(2rem,4vw,3.4rem);font-weight:600;letter-spacing:-.04em;line-height:1}
.ff-cat-n{margin:0;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ff-cat-h .ff-x{align-self:start}
.ff-cat-f{grid-column:1/-1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--ff-pad-r) * -1) 0 calc(var(--ff-pad-l) * -1);padding:0 var(--ff-pad-r) 0 var(--ff-pad-l)}
.ff-cat-f::-webkit-scrollbar{display:none}
.ff-cat-f button{flex:none;padding:9px 14px;border:1px solid var(--line);background:none;color:var(--fg);font:500 .9rem/1 var(--ff-sans);cursor:pointer;white-space:nowrap;transition:background-color var(--ff-t-fast),color var(--ff-t-fast),border-color var(--ff-t-fast)}
.ff-cat-f button small{margin-left:4px;font:400 .68rem/1 var(--ff-mono);color:var(--muted)}
.ff-cat-f button:hover{border-color:var(--fg)}
.ff-cat-f button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ff-cat-f button[aria-pressed="true"] small{color:inherit;opacity:.7}
.ff-cat-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:clamp(24px,4vh,40px) var(--ff-pad-r) calc(40px + env(safe-area-inset-bottom,0px)) var(--ff-pad-l)}
/* barra di scorrimento interna come quella dei pannelli: sottile (6 px), a 8 px dal bordo destro, spazio sempre riservato
   (i contenuti non si spostano), magenta al passaggio del mouse; il margine destro dei contenuti resta quello della pagina */
.ff-cat-scroll{--ff-sb:6px;scrollbar-gutter:stable;margin-right:8px;padding-right:calc(var(--ff-pad-r) - 8px - var(--ff-sb))}
.ff-cat-scroll::-webkit-scrollbar{width:var(--ff-sb)}
.ff-cat-scroll::-webkit-scrollbar-track{background:transparent}
.ff-cat-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--fg) 22%,transparent);border-radius:0}
.ff-cat-scroll::-webkit-scrollbar-thumb:hover{background:var(--accent)}
@supports not selector(::-webkit-scrollbar){
  .ff-cat-scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 22%,transparent) transparent}
}
.ff-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(16px,1.8vw,28px)}
.ff-cat-in{animation:ff-cat-in 600ms var(--ff-ease-out) both;animation-delay:calc(var(--i,0) * 60ms + 180ms)}
@keyframes ff-cat-in{from{opacity:0;transform:translateY(18px)}}
.ff-cat-more{margin:24px 0 0;text-align:center;font-size:.7rem;color:var(--muted)}
.ff-cat-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(32px,5vh,48px);padding-top:20px;border-top:1px solid var(--line)}
.ff-cat-end p{margin:0;font-weight:500}

/* ===== Avvisami ===== */
.ff-al-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ff-al-list span small{font-family:var(--ff-mono);font-size:.62rem!important;letter-spacing:.04em;text-transform:uppercase}
.ff-alert .ff-check a{color:inherit;text-underline-offset:3px}
.ff-alert .ff-field>span small{text-transform:none;letter-spacing:0;opacity:.8}
.ff-alert #ff-al-go:disabled{opacity:.4;cursor:default}

/* ===== Senza JavaScript: niente catalogo né pannelli; restano le schede, i link e i pulsanti che portano alle pagine ===== */
html:not(.ff-js) .ff-mk-tools,html:not(.ff-js) .ff-mk-endb{display:none}
html:not(.ff-js) .ff-mk-end{justify-content:flex-end}
html:not(.ff-js) .ff-mk-end p{border-top:0;padding-top:0}

/* ===== Desktop stretto ===== */
@media (min-width:900px) and (max-width:1180px){
  .ff-arch-grid{grid-template-columns:1fr}
}
/* ===== Tablet e telefono ===== */
@media (max-width:899px){
  .ff-mk-row{grid-auto-columns:min(82vw,420px);margin-top:28px}
  .ff-mk-note{grid-template-columns:1fr}
  .ff-arch-grid{grid-template-columns:1fr}
  .ff-custom{grid-template-columns:1fr;align-items:start}
  .ff-cat-h{padding-left:var(--ff-gutter);padding-right:var(--ff-gutter-r)}
  .ff-cat-f{margin:0 calc(var(--ff-gutter-r) * -1) 0 calc(var(--ff-gutter) * -1);padding:0 var(--ff-gutter-r) 0 var(--ff-gutter)}
  .ff-cat-scroll{padding-left:var(--ff-gutter);padding-right:calc(var(--ff-gutter-r) - 8px - var(--ff-sb))}
}
@media (max-width:520px){
  .ff-soon li{grid-template-columns:1.8rem minmax(0,1fr) auto;gap:2px 10px}
  .ff-soon b{font-size:1.4rem}
  /* assegnati: due colonne anche sul telefono (in una sola la lista diventa lunghissima) */
  .ff-sold{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ff-sold li{padding:12px 10px 14px}
  .ff-sold li::after{display:none}
  .ff-page .ff-scene .ff-custom .ff-actions{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;margin-inline:0;padding-inline:0}
}
@media (max-width:420px){.ff-al-list{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .ff-cat-in{animation:none}
}