/* ==========================================================
   Catalogo sfogliabile — caricato solo nelle pagine /catalogo/ e /en/catalogue/
   Colori, caratteri e pulsanti arrivano da style.css; qui solo ciò che serve al libro.
   Tutto è racchiuso in .catalogo per non toccare il resto del sito.
   ========================================================== */
.catalogo { --bar-h: 64px; }
.catalogo svg.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* area di lettura: tutto lo schermo sotto l'intestazione del sito */
.catalogo .reader { position: relative; display: flex; flex-direction: column; height: calc(100svh - var(--hdr-h) - 1px); min-height: 420px; background: radial-gradient(ellipse at 50% 42%, #f3ede4 0%, #e3d8c9 70%, #d9ccba 100%); }
.catalogo .stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vh, 36px) clamp(12px, 3vw, 56px); overflow: hidden; }

/* ---------- libro */
.catalogo .book { position: relative; flex: none; --shift: 0px; transform: translateX(var(--shift)); }
.catalogo .leaf { position: absolute; top: 0; width: 50%; height: 100%; }
.catalogo .leaf--l { left: 0; }
.catalogo .leaf--r { left: 50%; }
.catalogo .leaf:not(.leaf--empty) { box-shadow: 0 22px 40px -22px rgba(44, 33, 25, .55), 0 2px 6px rgba(44, 33, 25, .12); }
.catalogo .book.is-portrait { overflow: hidden; }
.catalogo .book.is-portrait .leaf--l { display: none; }
.catalogo .book.is-portrait .leaf--r { left: 0; width: 100%; }

/* facciate */
.catalogo .face { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.catalogo .face img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.catalogo .face--none { background: transparent; }
.catalogo .face--blank { background: #fbfaf7; }
.catalogo .face--paper { background: #f1ede6; }
/* piega centrale: solo una fascia stretta vicino alla rilegatura */
.catalogo .face::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.catalogo .face--l:not(.face--cover):not(.face--none)::after { background: linear-gradient(to left, rgba(24, 14, 6, .30) 0%, rgba(24, 14, 6, .12) 1.8%, rgba(24, 14, 6, .04) 5%, transparent 9%); }
.catalogo .face--r:not(.face--cover):not(.face--none)::after { background: linear-gradient(to right, rgba(24, 14, 6, .28) 0%, rgba(24, 14, 6, .11) 1.8%, rgba(24, 14, 6, .035) 5%, transparent 9%); }
.catalogo .book.is-portrait .face--r:not(.face--cover)::after { background: linear-gradient(to right, rgba(24, 14, 6, .14) 0%, rgba(24, 14, 6, .04) 2.5%, transparent 6%); }

/* ombre dinamiche durante il giro pagina (opacità comandata dallo script) */
.catalogo .shade, .catalogo .cast { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.catalogo .face--r .shade { background: linear-gradient(to right, rgba(24, 14, 6, .25), rgba(24, 14, 6, .6)); }
.catalogo .face--l .shade { background: linear-gradient(to left, rgba(24, 14, 6, .25), rgba(24, 14, 6, .6)); }
.catalogo .leaf--r .cast { background: linear-gradient(to right, rgba(24, 14, 6, .5), rgba(24, 14, 6, .12) 35%, transparent 75%); }
.catalogo .leaf--l .cast { background: linear-gradient(to left, rgba(24, 14, 6, .5), rgba(24, 14, 6, .12) 35%, transparent 75%); }

/* la pagina che gira: due facce (fronte e retro) che ruotano attorno alla rilegatura */
.catalogo .turner { position: absolute; top: 0; z-index: 10; width: 50%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.catalogo .turner--r { left: 50%; transform-origin: 0 50%; }
.catalogo .turner--l { left: 0; transform-origin: 100% 50%; }
.catalogo .book.is-portrait .turner { left: 0; width: 100%; transform-origin: 0 50%; }
.catalogo .turner .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.catalogo .turner .face--back { transform: rotateY(180deg); }

/* ---------- copertina: foto piena, logo e titolo bianchi */
.catalogo .face--cover { background: #1d1611; color: #fff; container-type: inline-size; }
.catalogo .cover-full, .catalogo .cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.catalogo .face--cover-front::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(15, 11, 8, .62) 0%, rgba(15, 11, 8, .22) 34%, transparent 55%), linear-gradient(to bottom, rgba(15, 11, 8, .62) 0%, rgba(15, 11, 8, .25) 16%, transparent 32%); }
.catalogo .cover-art { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 9% 9% 10%; }
.catalogo .face img.cover-logo { width: 36%; height: auto; object-fit: contain; }
.catalogo .cover-kicker { margin: 0 0 2.6cqi; font-size: 2.3cqi; letter-spacing: .32em; text-transform: uppercase; opacity: .9; }
.catalogo .cover-title { margin: 0; font: 300 14cqi/.95 var(--serif); }
.catalogo .cover-sub { margin: 1.8cqi 0 0; font: italic 4.4cqi/1.3 var(--serif); opacity: .92; }
.catalogo .face--cover-back { background: #2c2119; }
.catalogo .cover-art--back { align-items: center; justify-content: center; gap: 7cqi; text-align: center; }
.catalogo .face img.cover-logo--sm { width: 30%; }
.catalogo .cover-contacts { margin: 0; font-size: 3cqi; line-height: 1.8; letter-spacing: .05em; color: rgba(246, 243, 236, .85); }

.catalogo .hint--touch { display: none; }
@media (hover: none) { .catalogo .hint--mouse { display: none; } .catalogo .hint--touch { display: inline; } }
.catalogo .hint { position: absolute; z-index: 6; left: 50%; top: 10px; transform: translateX(-50%); margin: 0; padding: .45rem 1rem; border-radius: 999px; background: rgba(44, 33, 25, .78); color: #fff; font-size: .78rem; white-space: nowrap; pointer-events: none; transition: opacity .6s; }
.catalogo .hint.is-gone { opacity: 0; }

/* frecce laterali grandi (computer) */
.catalogo .side { position: absolute; top: 50%; z-index: 5; display: none; place-items: center; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 1px solid rgba(44, 33, 25, .18); border-radius: 50%; background: rgba(255, 255, 255, .35); color: var(--ink); backdrop-filter: blur(6px); transition: background .2s, opacity .3s; }
.catalogo .side:hover { background: rgba(255, 255, 255, .7); }
.catalogo .side:disabled { opacity: 0; pointer-events: none; }
.catalogo .side--prev { left: clamp(8px, 1.5vw, 24px); }
.catalogo .side--next { right: clamp(8px, 1.5vw, 24px); }
@media (hover: hover) and (min-width: 900px) { .catalogo .side { display: grid; } }

/* barra comandi */
.catalogo .bar { flex: none; height: var(--bar-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; padding: 0 clamp(8px, 2vw, 32px); background: rgba(253, 251, 247, .92); border-top: 1px solid var(--line); }
.catalogo .bar__group { display: flex; align-items: center; gap: .25rem; }
.catalogo .bar__right { justify-content: flex-end; }
.catalogo .bar__pages { min-width: 7.5em; text-align: center; font-size: .82rem; letter-spacing: .06em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.catalogo .tool { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .8rem; border: 0; border-radius: 999px; background: none; color: var(--ink); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background .2s; }
.catalogo .tool:hover { background: var(--bg-alt); }
.catalogo .tool:disabled { opacity: .3; cursor: default; background: none; }
.catalogo .tool--icon { width: 44px; padding: 0; justify-content: center; }
.catalogo .tool--light { color: #fff; }
.catalogo .tool--light:hover { background: rgba(255, 255, 255, .15); }
@media (max-width: 560px) { .catalogo .tool span { display: none; } .catalogo .tool { padding: 0 .6rem; } .catalogo .bar__pages { min-width: 5.5em; font-size: .76rem; } }

/* collegamento alla scheda del modello che si sta guardando */
.catalogo .fb-chip { position: absolute; left: 50%; bottom: calc(var(--bar-h) + 14px); z-index: 6; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .7rem; padding: .55rem .6rem .55rem 1.1rem; border-radius: 999px; background: var(--dark); color: var(--bg); text-decoration: none; box-shadow: 0 10px 30px rgba(44, 33, 25, .25); white-space: nowrap; animation: fbChipIn .4s var(--ease); }
.catalogo .fb-chip__name { font: 400 1.1rem/1 var(--serif); }
.catalogo .fb-chip__cta { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.catalogo .fb-chip { align-items: baseline; }
.catalogo .fb-chip svg.ic { width: 18px; height: 18px; align-self: center; }
.catalogo .fb-chip:hover { background: var(--taupe-dark); }
@keyframes fbChipIn { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (max-width: 420px) { .catalogo .fb-chip__cta { display: none; } }

/* testo e indice sotto il catalogo */
.catalogo .info { display: grid; gap: 3rem; max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter); }
@media (min-width: 900px) { .catalogo .info { grid-template-columns: 1.1fr 1fr; } }
.catalogo .info p { color: var(--ink-2); max-width: 56ch; }
.catalogo .info__btns { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.catalogo .info__list h2 { margin: 0 0 1rem; font: 400 1.6rem/1.1 var(--serif); }
.catalogo .info__list ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.catalogo .info__list li { break-inside: avoid; border-bottom: 1px solid var(--line); }
.catalogo .info__list a { display: block; padding: .5rem 0; text-decoration: none; }
.catalogo .info__list a:hover { color: var(--taupe-dark); }

/* finestre: indice e zoom */
.catalogo dialog::backdrop { background: rgba(44, 33, 25, .55); }
.catalogo .toc { width: min(980px, 100vw); height: min(86vh, 100%); margin: auto; background: var(--bg); color: var(--ink); }
.catalogo .toc[open] { display: flex; flex-direction: column; }
.catalogo .toc__head { display: flex; align-items: center; justify-content: space-between; padding: .6rem .6rem .6rem 1.4rem; border-bottom: 1px solid var(--line); }
.catalogo .toc__head h2 { margin: 0; font: 400 1.6rem/1 var(--serif); }
.catalogo .toc__grid { list-style: none; margin: 0; padding: 1.2rem; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.4rem 1rem; }
@media (max-width: 480px) { .catalogo .toc__grid { grid-template-columns: 1fr 1fr; gap: 1rem .7rem; padding: 1rem; } }
.catalogo .toc__grid button { width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.catalogo .toc__grid img { width: 100%; aspect-ratio: 560 / 300; object-fit: contain; background: #fff; box-shadow: 0 2px 8px rgba(44, 33, 25, .12); transition: transform .3s var(--ease); }
.catalogo .toc__grid button:hover img { transform: translateY(-3px); }
.catalogo .toc__name { display: block; margin-top: .5rem; font: 400 1.05rem/1.2 var(--serif); }
.catalogo .toc__num { font-size: .72rem; color: var(--muted); }
.catalogo .toc__section .toc__name { font-weight: 600; }
.catalogo .toc__section .toc__name::before { content: '— '; color: var(--taupe-dark); }

.catalogo .zoom { width: 100vw; height: 100vh; margin: 0; background: #1f1813; }
.catalogo .zoom[open] { display: block; }
.catalogo .zoom__bar { position: fixed; top: 10px; right: 10px; z-index: 2; display: flex; gap: .3rem; padding: .25rem; border-radius: 999px; background: rgba(0, 0, 0, .45); }
.catalogo .zoom__scroll { width: 100%; height: 100%; overflow: auto; cursor: zoom-in; }
.catalogo .zoom__nav { position: fixed; top: 50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; transition: background .2s, opacity .3s; }
.catalogo .zoom__nav:hover { background: rgba(0, 0, 0, .7); }
.catalogo .zoom__nav:disabled { opacity: 0; pointer-events: none; }
.catalogo .zoom__nav--prev { left: 14px; }
.catalogo .zoom__nav--next { right: 14px; }
.catalogo .zoom__scroll.is-zoomed { cursor: grab; }
.catalogo .zoom__pages { display: flex; min-width: 100%; min-height: 100%; width: max-content; margin: auto; align-items: center; justify-content: center; padding: 56px 16px 16px; }
.catalogo .zoom__pages img { height: calc((100vh - 72px) * var(--z, 1)); width: auto; max-width: none; background: #fff; }

/* ---------- smartphone e tablet: niente sfogliatore, copertina + PDF nel visualizzatore del telefono */
.catalogo .pocket { display: none; }
@media not ((hover: hover) and (pointer: fine) and (min-width: 900px)) {
  .catalogo .reader { display: none; }
  .catalogo .pocket { display: grid; justify-items: center; gap: 1.6rem; padding: 2rem var(--gutter) 2.5rem; text-align: center; background: radial-gradient(ellipse at 50% 30%, #f3ede4 0%, #e3d8c9 75%, #d9ccba 100%); }
  .catalogo .pocket__cover { display: block; width: min(78vw, 420px); aspect-ratio: 280 / 300; position: relative; box-shadow: 0 30px 50px -28px rgba(44, 33, 25, .6), 0 3px 10px rgba(44, 33, 25, .15); }
  .catalogo .pocket__cover .face { position: absolute; inset: 0; }
  .catalogo .pocket__text { display: grid; justify-items: center; gap: .3rem; }
  .catalogo .pocket__btn { min-width: min(80vw, 320px); }
  .catalogo .pocket__btn svg.ic { width: 20px; height: 20px; }
  .catalogo .pocket__meta { margin: .6rem 0 0; font-size: .78rem; letter-spacing: .08em; color: var(--muted); }
  .catalogo .info { padding-top: 2.5rem; }
  .catalogo .info__btns .btn--ghost { display: none; } /* il PDF si apre già dal pulsante sopra */
}