/* ==========================================================================
   TYPE — IBM Plex Sans (SIL OFL, uso libero anche commerciale/web)
   ========================================================================== */
@font-face {
  font-family: "IBM Plex Sans";
  src:
    url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"),
    url("../fonts/IBMPlexSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   RESET & BASE
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

:root {
  --bg: #161616;
  --paper: #edebe0;
  --ink: #2b2b28;
  --muted: #8a877c;
  --hairline: rgba(43, 43, 40, 0.12);
  --panel-width: 740px;
  --transition-ms: 2000ms;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, "Courier New", monospace;
}

/* -------------------------------------------------------------------------
   PAGE PANEL — il "foglio" chiaro centrato sullo sfondo scuro
   ------------------------------------------------------------------------- */
.page {
  position: relative;
  width: min(100%, var(--panel-width));
  min-height: calc(100vh - 40px);
  margin: 20px auto;
  background: var(--paper);
  padding: 32px 40px 56px;
  display: flex;
  flex-direction: column;
}

.page.has-fixed-bars {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 700px) {
  .page {
    width: 100%;
    min-height: 100dvh;
    margin: 0 auto;
    padding: 24px 20px 40px;
  }
}

/* -------------------------------------------------------------------------
   HOME — lista statica (nessuna animazione). Le dimensioni del blocco
   .home-list vengono impostate da JS leggendo LAYOUT.home in content.js
   (o dal valore che hai trascinato tu in modalità modifica, vedi in fondo).
   ------------------------------------------------------------------------- */
.home-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  padding-bottom: 68px;
}

.home-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  position: relative;
}

.home-list li {
  line-height: 1.5;
  font-size: 0.95rem;
}

.home-list a {
  display: inline-block;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.home-list a:hover {
  opacity: 0.55;
}

.home-spacer {
  flex: 1 1 auto;
}

.home-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 32px;
  font-size: 0.95rem;
  color: var(--ink);
}

.home-footer .footer-link:hover {
  opacity: 0.6;
}

/* -------------------------------------------------------------------------
   GALLERY (progetti + core archive) — descrizione in alto, poi le foto.
   Tra una foto e l'altra (manuale o in automatico) lo scorrimento è
   ORIZZONTALE (le foto scorrono lateralmente, come una slide). La PAGINA
   nel suo insieme scorre invece in verticale quando testo o foto non
   entrano nello schermo, per poterli vedere per intero.
   ------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--paper);
  padding: 28px 40px;
  border-bottom: 1px solid transparent;
}

.topbar-index {
  font-size: 0.95rem;
  min-width: 1.5em;
}

.topbar-title {
  font-size: 0.95rem;
  flex: 1;
}

/* L'hamburger è un link che torna alla home (niente menu a comparsa). */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 22px;
  padding: 4px;
}

.hamburger span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  width: 100%;
}

/* La larghezza/altezza di .description viene impostata da JS leggendo
   LAYOUT.gallery.descriptionWidth (o descriptionBox del singolo progetto). */
.description {
  padding: 8px 40px 40px;
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 100%;
  position: relative;
}

.description p + p {
  margin-top: 1.1em;
}

/* Il "binario" orizzontale: contiene tutte le foto in fila, una accanto
   all'altra. La finestra (.photo-viewport) ne clip-pa la larghezza e
   mostra una sola foto alla volta, facendo scorrere il binario con una
   transform. L'altezza della finestra viene impostata da JS in base alla
   foto corrente, così la pagina scorre in verticale q.b. per vederla
   tutta se è più alta dello schermo. */
.photo-viewport {
  overflow: hidden;
  position: relative;
  width: 100%;
  transition: height var(--transition-ms) ease;
}

.photo-track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  transition: transform var(--transition-ms) ease;
  will-change: transform;
}

.photo {
  flex: 0 0 100%;
  width: 100%;
  margin: 0; /* <figure> ha un margine di default del browser (~40px ai lati): lo azzeriamo */
  padding: 0 40px 72px;
}

/* Larghezza/altezza di ogni .photo-frame vengono impostate da JS leggendo
   LAYOUT.gallery.imageWidth/imageHeight, sovrascrivibili per singola foto
   (o trascinando l'angolo in modalità modifica). */
.photo-frame {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.photo figcaption {
  padding: 14px 0 0;
  font-family: ui-monospace, SFMono-Regular, "Courier New", monospace;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 700px) {
  .topbar { padding: 20px 20px; }
  .description { padding: 8px 20px 32px; }
  .photo { padding: 0 20px 48px; }
}

.gallerybar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper);
  padding: 20px 40px 28px;
}

.nav-arrow {
  font-size: 1rem;
  padding: 6px 10px;
  transition: opacity 0.2s ease;
}

.nav-arrow:hover {
  opacity: 0.5;
}

.nav-counter {
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 700px) {
  .gallerybar { padding: 16px 20px 24px; }
}

/* -------------------------------------------------------------------------
   SIMPLE PAGES (contacts / about / not found)
   ------------------------------------------------------------------------- */
.simple-page {
  padding-top: 24px;
}

.contact-line {
  font-family: ui-monospace, SFMono-Regular, "Courier New", monospace;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ==========================================================================
   LIGHTBOX — clic su una foto per ingrandirla. Mostra solo la foto (niente
   testo/topbar), su uno sfondo scuro identico al resto del sito, senza
   riempire tutto lo schermo: l'immagine resta contenuta con un margine.
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  cursor: zoom-out;
}

.lightbox img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
}

.lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 301;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--paper);
  opacity: 0.7;
}

.lightbox-close:hover {
  opacity: 1;
}

@media (max-width: 700px) {
  .lightbox { padding: 20px; }
}

/* ==========================================================================
   MODALITÀ MODIFICA — regolare dimensioni, ordine e posizione trascinando,
   non a numeri.
   ==========================================================================
   Il bottoncino "⇲" in basso a destra attiva/disattiva la modalità. Con la
   modalità attiva, ogni blocco mostra:
     - un'etichetta in alto a sinistra con le dimensioni attuali (lista
       home, testo, foto);
     - una maniglia rossa in basso a destra per ridimensionare (cursore a
       doppia freccia);
     - una maniglia blu con l'icona ⠿ per riordinarlo tra i suoi vicini
       (in alto a destra sulle foto, accanto al nome nella lista home);
     - sulle didascalie, una maniglia verde per spostarle liberamente
       (sopra, di lato, dove vuoi) — indipendente dalla foto: non riordina
       nulla, segue solo il trascinamento.
   Ogni modifica resta salvata nel browser (localStorage) e viene riproposta
   ad ogni visita. Quando sei soddisfatto, apri "Esporta modifiche" per
   avere il testo pronto da incollare in content.js e renderle permanenti
   sul sito pubblicato. In modalità modifica i link (voci della lista,
   frecce, hamburger) e il lightbox sono disattivati per non navigare/
   ingrandire per sbaglio mentre trascini.
   ------------------------------------------------------------------------- */
.edit-toggle,
.export-toggle {
  position: fixed;
  right: 16px;
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2b2b28;
  color: var(--paper);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.edit-toggle { bottom: 16px; }
.export-toggle { bottom: 68px; display: none; }

.edit-toggle:hover,
.export-toggle:hover {
  opacity: 1;
  transform: scale(1.05);
}

body.edit-mode .edit-toggle {
  opacity: 1;
  background: #8a3b2b;
}

body.edit-mode .export-toggle {
  display: flex;
}

body.edit-mode .home-list,
body.edit-mode .description {
  overflow: auto;
}

body.edit-mode .home-list,
body.edit-mode .description,
body.edit-mode .photo-frame {
  outline: 2px dashed #8a3b2b;
  outline-offset: 3px;
}

.resizable-label {
  position: absolute;
  top: 4px;
  left: 4px;
  font-family: ui-monospace, SFMono-Regular, "Courier New", monospace;
  font-size: 0.7rem;
  background: #8a3b2b;
  color: var(--paper);
  padding: 3px 7px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
  display: none;
  white-space: nowrap;
}

body.edit-mode .resizable-label {
  display: block;
}

/* Maniglia di resize disegnata da noi (non quella nativa del browser,
   troppo piccola/incoerente tra browser diversi): un quadratino ben
   visibile nell'angolo in basso a destra, trascinabile col mouse o col
   dito. Sta leggermente FUORI dal bordo dell'elemento (right/bottom
   negativi) così è sempre raggiungibile anche se il contenuto arriva
   fino al bordo. */
.resize-handle {
  display: none;
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #8a3b2b;
  border: 2px solid var(--paper);
  cursor: nwse-resize;
  z-index: 3;
  touch-action: none;
}

/* Maniglia di riordino: trascinala per cambiare la posizione di una foto
   dentro la galleria (orizzontale) o di un nome nella lista home
   (verticale). Colore diverso da quella di resize per non confonderle. */
.move-handle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #2b6e8a;
  border: 2px solid var(--paper);
  color: var(--paper);
  font-size: 12px;
  line-height: 1;
  cursor: grab;
  z-index: 3;
  touch-action: none;
  flex: 0 0 auto;
}

.move-handle::before {
  content: "⠿";
}

body.edit-mode .move-handle {
  display: inline-flex;
}

body.edit-mode .move-handle:hover,
.move-handle.is-dragging {
  background: #3a8ab0;
  cursor: grabbing;
}

/* dentro una foto: angolo in alto a destra (il resize resta in basso a
   destra, l'etichetta con le misure in alto a sinistra) */
.photo-frame .move-handle {
  position: absolute;
  top: 4px;
  right: 4px;
}

/* Maniglia verde: sposta liberamente la didascalia, indipendentemente
   dalla foto (non riordina, non ha vicini — semplice trascinamento libero
   in qualunque direzione). */
.move-handle.free-move {
  background: #2b7a4b;
  cursor: move;
}

.move-handle.free-move:hover,
.move-handle.free-move.is-dragging {
  background: #38995e;
  cursor: move;
}

.photo figcaption {
  position: relative;
}

.photo figcaption .move-handle {
  position: absolute;
  top: 0;
  right: 4px;
}

/* dentro la lista home: icona inline prima del nome, solo in modalità
   modifica (il resto del tempo la lista resta un elenco normale) */
body.edit-mode .home-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.is-dragging-item {
  opacity: 0.55;
  z-index: 20;
}

.resize-handle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
}

body.edit-mode .resize-handle {
  display: block;
}

body.edit-mode .resize-handle:hover,
.resize-handle.is-dragging {
  background: #b04d38;
}

body.edit-mode .home-list a,
body.edit-mode .hamburger,
body.edit-mode .nav-arrow,
body.edit-mode .footer-link,
body.edit-mode .photo-frame img {
  pointer-events: none;
}

.export-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.export-panel-inner {
  background: var(--paper);
  color: var(--ink);
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
  padding: 24px;
  border-radius: 6px;
}

.export-panel h2 {
  font-size: 1rem;
  margin: 0 0 8px;
}

.export-panel p {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 16px;
}

.export-panel textarea {
  width: 100%;
  height: 260px;
  font-family: ui-monospace, SFMono-Regular, "Courier New", monospace;
  font-size: 0.78rem;
  padding: 12px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--hairline);
}

.export-panel-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.export-panel-actions button {
  padding: 8px 14px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  font-size: 0.85rem;
}