/* ─────────────────────────────────────────────────────────────
   spread.css — motore di impaginazione delle tavole
   (generato: la parte mobile è duplicata per @media e .force-m)
   ───────────────────────────────────────────────────────────── */
.spread { position: relative; width: 100%; }
.spread-inner {
  position: relative; width: 100%;
  aspect-ratio: 100 / var(--r, 62.5);
  container-type: inline-size;
  overflow: hidden;
}
.spread-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }

.layer {
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  transform: rotate(var(--rot, 0deg));
  z-index: var(--z, 1);
  opacity: var(--o, 1);
  box-sizing: border-box;
}
.hide-d { display: none !important; }

/* testo */
.layer-text {
  display: flex; flex-direction: column; justify-content: var(--valign, flex-start);
  font-size: calc(var(--fs, 18) * 0.069444cqw);
  overflow-wrap: break-word; hyphens: manual;
}
.layer-text .txt { width: 100%; }
.layer-text .txt p { margin: 0 0 .7em; }
.layer-text .txt p:last-child { margin-bottom: 0; }
.layer-text a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.layer-text.vertical .txt { writing-mode: vertical-rl; text-orientation: upright; height: 100%; width: auto; }

/* immagine / grafica */
.layer-image .frame { width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; position: relative; }
.layer-image img { width: 100%; height: 100%; display: block; user-select: none; }
.layer-image .tinted { width: 100%; height: 100%; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.layer-image img[data-lightbox] { cursor: zoom-in; }

/* forme */
.layer-shape { background: var(--fill); border: var(--sw) solid var(--stroke); border-radius: var(--rad, 0); }
.shape-ellipse { border-radius: 50%; }
.shape-line { background: var(--stroke); border: 0; min-width: 1px; min-height: 1px; }

/* animazioni d'ingresso */
[data-anim] { transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), translate 1.1s cubic-bezier(.2,.7,.2,1), clip-path 1.3s cubic-bezier(.7,0,.2,1), filter 1.2s ease; }
[data-anim]:not(.in) { opacity: 0; }
[data-anim="rise"]:not(.in) { translate: 0 28px; }
[data-anim="reveal"]:not(.in) { clip-path: inset(100% 0 0 0); opacity: 1; }
[data-anim="blur"]:not(.in) { filter: blur(14px); }
[data-anim].in { opacity: var(--o, 1); }

/* ── mobile reale ── */
@media (max-width: 760px) {
  body:not(.force-d) .hide-m { display: none !important; }
  body:not(.force-d) .hide-d { display: block !important; }
  body:not(.force-d) .hide-d.hide-m { display: none !important; }
  body:not(.force-d) .layer-text.hide-d { display: flex !important; }

  /* mobile automatico: la composizione diventa un racconto verticale */
  body:not(.force-d) .spread[data-mobile="auto"] .spread-inner {
    aspect-ratio: auto; display: flex; flex-direction: column;
    gap: var(--flow-gap, 22px); padding: 44px 22px;
  }
  body:not(.force-d) .spread[data-mobile="auto"] .layer {
    position: relative; left: auto; top: auto;
    width: var(--fw); height: auto; transform: none;
    order: var(--ord); align-self: var(--falign, center);
    z-index: 1;
  }
  body:not(.force-d) .spread[data-mobile="auto"] .layer.flow-full { width: calc(100% + 44px); margin: 0 -22px; max-width: none; }
  body:not(.force-d) .spread[data-mobile="auto"] .layer-image { aspect-ratio: var(--box); }
  body:not(.force-d) .spread[data-mobile="auto"] .layer-text { font-size: clamp(14px, calc(var(--fs) * 0.46px), 12.5vw); }
  body:not(.force-d) .spread[data-mobile="auto"] .layer-text.vertical .txt { writing-mode: horizontal-tb; height: auto; }
  body:not(.force-d) .spread[data-mobile="auto"] .layer-shape:not(.flow-full) { display: none; }
  body:not(.force-d) .spread[data-mobile="auto"] .has-malign { text-align: var(--malign) !important; }

  /* mobile personalizzato: composizione libera come su desktop */
  body:not(.force-d) .spread[data-mobile="custom"] .spread-inner { aspect-ratio: 100 / var(--mr, 160); }
  body:not(.force-d) .spread[data-mobile="custom"] .layer {
    left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%);
    width: calc(var(--mw) * 1%); height: calc(var(--mh) * 1%);
    transform: rotate(var(--mrot, 0deg));
  }
  body:not(.force-d) .spread[data-mobile="custom"] .layer-text { font-size: calc(var(--mfs, 16) * 0.25641cqw); }
  body:not(.force-d) .spread[data-mobile="custom"] .m-hidden { display: none !important; }

}

/* ── anteprima mobile forzata (editor) ── */
.force-m .hide-m { display: none !important; }
.force-m .hide-d { display: block !important; }
.force-m .hide-d.hide-m { display: none !important; }
.force-m .layer-text.hide-d { display: flex !important; }

/* mobile automatico: la composizione diventa un racconto verticale */
.force-m .spread[data-mobile="auto"] .spread-inner {
  aspect-ratio: auto; display: flex; flex-direction: column;
  gap: var(--flow-gap, 22px); padding: 44px 22px;
}
.force-m .spread[data-mobile="auto"] .layer {
  position: relative; left: auto; top: auto;
  width: var(--fw); height: auto; transform: none;
  order: var(--ord); align-self: var(--falign, center);
  z-index: 1;
}
.force-m .spread[data-mobile="auto"] .layer.flow-full { width: calc(100% + 44px); margin: 0 -22px; max-width: none; }
.force-m .spread[data-mobile="auto"] .layer-image { aspect-ratio: var(--box); }
.force-m .spread[data-mobile="auto"] .layer-text { font-size: clamp(14px, calc(var(--fs) * 0.46px), 12.5vw); }
.force-m .spread[data-mobile="auto"] .layer-text.vertical .txt { writing-mode: horizontal-tb; height: auto; }
.force-m .spread[data-mobile="auto"] .layer-shape:not(.flow-full) { display: none; }
.force-m .spread[data-mobile="auto"] .has-malign { text-align: var(--malign) !important; }

/* mobile personalizzato: composizione libera come su desktop */
.force-m .spread[data-mobile="custom"] .spread-inner { aspect-ratio: 100 / var(--mr, 160); }
.force-m .spread[data-mobile="custom"] .layer {
  left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%);
  width: calc(var(--mw) * 1%); height: calc(var(--mh) * 1%);
  transform: rotate(var(--mrot, 0deg));
}
.force-m .spread[data-mobile="custom"] .layer-text { font-size: calc(var(--mfs, 16) * 0.25641cqw); }
.force-m .spread[data-mobile="custom"] .m-hidden { display: none !important; }


/* animazioni aggiuntive */
[data-anim="zoom"] { transition: opacity 1.4s ease, scale 2.2s cubic-bezier(.2,.7,.2,1); }
[data-anim="zoom"]:not(.in) { scale: 1.06; }
[data-anim="left"]:not(.in) { translate: -40px 0; }
[data-anim="right"]:not(.in) { translate: 40px 0; }

/* ───── TAVOLA GALLERIA: griglia automatica, altezza libera ───── */
.spread[data-kind="gallery"] { height: auto; aspect-ratio: auto; padding: var(--pad) var(--pad); container-type: inline-size; }
.spread[data-kind="gallery"] .spread-inner { position: relative; height: auto; columns: var(--cols); column-gap: var(--gap); }
.spread[data-kind="gallery"] .layer { position: relative; inset: auto; width: 100%; height: auto; transform: none; rotate: 0deg; break-inside: avoid; margin: 0 0 var(--gap); display: block; }
.spread[data-kind="gallery"] .layer .frame { position: relative; width: 100%; height: auto; }
.spread[data-kind="gallery"] .layer img { position: relative; width: 100%; height: auto; display: block; }
.spread[data-kind="gallery"] .layer-text { column-span: all; margin-bottom: calc(var(--gap) * 1.4); }
.spread[data-kind="gallery"] .layer-text .txt { position: relative; inset: auto; }
@media (max-width: 900px) { .spread[data-kind="gallery"] .spread-inner { columns: min(var(--cols), 2); } }
@media (max-width: 560px) { .spread[data-kind="gallery"] .spread-inner { columns: 1; } }
.force-m .spread[data-kind="gallery"] .spread-inner { columns: 1; }