/* ═══════════════════════════════════════════════════════════════════════════
   vetrina.css — la scheda di un sito (frame desktop e mobile, velo «Dai
   un'occhiata») e la sua modale: le regole che vanno con assets/moduli/vetrina.js.

   Spostate qui da categorie/categoria.css il 04/10/2026, quando le stesse schede
   sono entrate anche nella griglia dei lavori della home: un solo posto da
   correggere. Le carica ogni pagina che chiama Vetrina.creaScheda (categorie,
   lavori/siti.html, home), prima del proprio foglio di pagina.
   ═══════════════════════════════════════════════════════════════════════════ */
.sito-carta{position:relative;display:flex;flex-direction:column;gap:22px;min-width:0;padding:clamp(18px,2.3vw,30px);background:#fff;border:1px solid var(--bordo);border-radius:20px;box-shadow:0 22px 60px rgb(15 45 107 / .08)}
.sito-carta[hidden]{display:none}
/* In alto: titolo, descrizione e il link al sito. Sotto: i due frame
   affiancati, sempre alla stessa altezza (la impone avviaScale in
   vetrina.js) e ciascuno con le sue proporzioni vere — 16:10 il desktop,
   quelle di un telefono il mobile. */
.sito-testo{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--bordo)}
.sito-testo-corpo{flex:1;min-width:0}
.sito-testo h3{font-size:clamp(19px,2vw,25px);letter-spacing:-.02em}
.sito-testo p{margin-top:8px;color:var(--ardesia);font-size:13px;line-height:1.5}
.sito-apri{flex:none;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:1px solid var(--bordo);border-radius:99px;color:var(--blu);font-size:12px;font-weight:700;transition:background-color 180ms,color 180ms,border-color 180ms}
.sito-apri:hover{background:var(--blu);border-color:var(--blu);color:#fff}
.sito-dispositivi{display:flex;align-items:flex-start;gap:clamp(16px,2.5vw,28px)}
.dispositivo{min-width:0}
.dispositivo-desktop{flex:1;min-width:0}
.dispositivo-mobile{flex:none;aspect-ratio:390/844}
.dispositivo-barra{height:30px;display:flex;align-items:center;gap:6px;padding:0 13px;background:#eaf0f8;border:1px solid #cdd9e9;border-bottom:0;border-radius:12px 12px 0 0}
.dispositivo-barra i{display:block;width:8px;height:8px;border-radius:50%;background:#a5b7ce}.dispositivo-barra i:first-child{background:#ff7168}.dispositivo-barra i:nth-child(2){background:#ffbf45}.dispositivo-barra i:nth-child(3){background:#45c873}
.dispositivo-barra span{min-width:0;margin-left:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6a7d98;font-size:10px}
.dispositivo-schermo{position:relative;overflow:hidden;background:#fff;border:1px solid #cdd9e9;box-shadow:0 20px 50px rgb(15 45 107 / .12)}
.dispositivo-desktop .dispositivo-schermo{aspect-ratio:16/10;border-radius:0 0 12px 12px}
.dispositivo.dispositivo-desktop iframe{position:absolute;left:0;top:0;width:1280px;height:800px;max-width:none;transform:scale(var(--scala-desktop,1));transform-origin:0 0}
.dispositivo-mobile .dispositivo-barra{height:22px;border-radius:16px 16px 0 0;justify-content:center}
/* Qui niente aspect-ratio: l'altezza la impone JS su .dispositivo-mobile
   (uguale al desktop accanto), lo schermo prende quel che resta sotto la
   barra — width:100% ora ha un genitore con larghezza vera, non più in
   circolo con l'aspect-ratio del genitore. */
.dispositivo-mobile .dispositivo-schermo{width:100%;height:calc(100% - 22px);border-radius:0 0 16px 16px;border-width:0 5px 5px}
.dispositivo.dispositivo-mobile iframe{position:absolute;left:0;top:0;width:390px;height:844px;max-width:none;transform:scale(var(--scala-mobile,1));transform-origin:0 0}
.dispositivo iframe{display:block;width:100%;height:100%;border:0;background:#fff}

/* ── Anteprime: indicatore "si scorre dentro" ────────────────────────────
   Appare sopra i due riquadri finché non si comincia a scorrere il sito
   incorniciato, poi sparisce (categoria.js ascolta lo scroll dell'iframe,
   è la stessa origine quindi può farlo). Il cerchio bianco è il fondo
   necessario perché l'icona resti leggibile su qualunque sito sotto. */
.scorri-suggerimento{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16%;pointer-events:none;opacity:1;transition:opacity 320ms ease}
.scorri-suggerimento.scorri-nascosto{opacity:0}
.scorri-cerchio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding-top:10px;width:84px;height:84px;border-radius:50%;background:rgb(255 255 255 / .8);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);box-shadow:0 10px 30px rgb(15 45 107 / .22);color:var(--ardesia)}
.scorri-cerchio svg{display:block}
.scorri-pallino{animation:scorri-suggerimento-scende 1.7s ease-in-out infinite}
.scorri-cerchio span{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
@keyframes scorri-suggerimento-scende{
  0%{transform:translateY(0);opacity:1}
  60%{transform:translateY(9px);opacity:0}
  61%{transform:translateY(0);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@media(prefers-reduced-motion:reduce){.scorri-pallino{animation:none}}

@media(max-width:760px){
  .sito-carta{padding:14px 12px 16px;border-radius:16px;gap:16px}
  .sito-testo{padding-bottom:12px}
  .sito-testo h3{font-size:19px}.sito-testo p{font-size:12px;line-height:1.4;margin-top:5px}
  .sito-dispositivi{gap:10px}
  .dispositivo-barra{height:22px;padding:0 7px;gap:4px;border-radius:7px 7px 0 0}
  .dispositivo-barra i{width:5px;height:5px}.dispositivo-barra span{display:none}
  .dispositivo-desktop .dispositivo-schermo{border-radius:0 0 7px 7px}
  .dispositivo-mobile .dispositivo-barra{border-radius:13px 13px 0 0}
  .dispositivo-mobile .dispositivo-schermo{border-radius:0 0 13px 13px;border-width:0 4px 4px}
  .sito-apri{padding:9px 14px;font-size:11px}
  .scorri-cerchio{width:52px;height:52px;gap:3px}
  .scorri-cerchio svg{width:16px;height:26px}
  .scorri-cerchio span{font-size:6px}
  .dispositivo-mobile .scorri-cerchio{width:40px;height:40px}
  .dispositivo-mobile .scorri-cerchio svg{width:13px;height:21px}
  .dispositivo-mobile .scorri-cerchio span{display:none}
}
@media(prefers-reduced-motion:reduce){.sito-apri{transition:none}}

/* sentinella del caricamento graduale: occupa tutta la riga, invisibile */
.siti-sentinella{grid-column:1/-1;width:100%;height:1px}

/* ── Scheda (29/09/2026): anteprime ferme, velo «Dai un'occhiata», modale ──
   In griglia i due schermi mostrano solo l'immagine dell'anteprima: nessun
   sito vivo. Il velo copre tutta la scheda (titolo, descrizione, schermi)
   tranne «Vai al sito», che sta sopra di lui e resta cliccabile. Col mouse
   appare al passaggio: bianco all'85% con lo sfondo sfocato, scritta e occhio
   in blu (bianco su bianco non si leggerebbe). Col dito non c'è hover: il velo
   è trasparente, sempre attivo, e in basso resta la pillola come invito. */
.dispositivo-schermo img.anteprima{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.sito-carta .sito-apri{position:relative;z-index:5}
.sito-velo{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border-radius:inherit;cursor:pointer;color:var(--blu);
  background:rgb(255 255 255 / .85);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  opacity:0;transition:opacity 220ms var(--ease-out)}
.sito-velo-testo{display:inline-flex;align-items:center;gap:10px;font-size:clamp(17px,1.6vw,22px);font-weight:700;letter-spacing:-.01em;transform:translateY(6px);transition:transform 260ms var(--ease-out)}
.sito-velo svg{width:26px;height:26px;flex:none}
.sito-velo:focus-visible{opacity:1;outline-offset:-4px}
.sito-velo:focus-visible .sito-velo-testo{transform:none}
@media(hover:hover) and (pointer:fine){
  .sito-carta:hover .sito-velo{opacity:1}
  .sito-carta:hover .sito-velo-testo{transform:none}
}
@media(hover:none){
  .sito-velo{opacity:1;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;align-items:flex-end;padding-bottom:22px}
  .sito-velo-testo{transform:none;gap:7px;padding:9px 14px;border-radius:99px;font-size:13px;background:rgb(255 255 255 / .94);box-shadow:0 8px 24px rgb(15 45 107 / .2)}
  .sito-velo svg{width:18px;height:18px}
}
@media(prefers-reduced-motion:reduce){.sito-velo,.sito-velo-testo{transition:none}}

/* ── Modale del sito: desktop e mobile vivi, affiancati ─────────────────────
   La scena ha un'altezza fissa (90svh meno la testa): avviaScale in
   vetrina.js ci fa stare la coppia, restringendo il desktop se serve, e la
   centra. Su telefono la scena va in colonna: prima il mobile, poi il
   desktop, e la dialog scorre se non ci sta tutto. */
.sito-dialog{width:min(1320px,calc(100% - 40px));max-height:92svh;border-radius:22px;background:#f6f9fd}
.sito-dialog-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 28px 16px}
.sito-dialog-corpo{flex:1;min-width:0}
.sito-dialog-testa h2{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em}
.sito-dialog-direzione{margin-top:6px;color:var(--ardesia);font-size:14px;line-height:1.5;max-width:60ch}
.sito-dialog-azioni{display:flex;align-items:center;gap:12px;flex:none}
.sito-dialog .dialog-chiudi{width:42px;height:42px}
.sito-scena{height:calc(90svh - 132px);padding:0 28px 28px}
.sito-scena .sito-dispositivi{height:100%;justify-content:center;align-items:flex-start}
@media(max-width:760px){
  .sito-dialog{width:calc(100% - 20px);border-radius:16px}
  /* La X sta nell'angolo in alto a destra della scheda (29/09/2026); «Vai al
     sito» resta sotto la descrizione, a sinistra. */
  .sito-dialog-testa{padding:16px 64px 12px 16px;flex-wrap:wrap;gap:12px}
  .sito-dialog-azioni{width:100%;justify-content:flex-start}
  .sito-dialog .dialog-chiudi{position:absolute;top:12px;right:12px;z-index:3}
  .sito-scena{height:auto;padding:0 12px 16px}
  .sito-scena .sito-dispositivi{height:auto;flex-direction:column;align-items:center;gap:16px}
  .sito-scena .dispositivo-mobile{order:-1;width:min(64%,250px)}
  .sito-scena .dispositivo-desktop{width:100%;flex:none}
}