/* Palette, font e componenti definiti in Claude Design per
   "paolocorvino architetto", con layout pagina progetto ispirato a mk27.com. */

:root {
  --bg: #f3f2f2;
  --surface: #eae9e9;
  --ink: #201e1d;
  --accent: #ec3013;
  --accent-dark: #ae1800;
  --linea: rgba(32, 30, 29, 0.4);
  --linea-chiara: rgba(32, 30, 29, 0.16);
  --meta: #605d5d;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.4rem;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.3rem; }

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

/* ---------- layout generale ---------- */

.pagina { display: flex; min-height: 100vh; }

.sidebar {
  width: 260px;
  flex-shrink: 0;
  padding: 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
  white-space: nowrap;
}

.sidebar-riga { border-top: 1px solid var(--ink); margin-bottom: 1rem; }

.sidebar-nav { display: flex; flex-direction: column; }
.sidebar-nav a {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--ink);
  font-size: 1rem;
}
.sidebar-nav a.active, .sidebar-nav a:hover { color: var(--accent); }

.sidebar-cerca { display: flex; }
.sidebar-cerca input {
  flex: 1;
  min-width: 0;
  border: 2px solid var(--linea-chiara);
  border-right: none;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--bg);
}
.sidebar-cerca input:focus { outline: none; border-color: var(--accent); }
.sidebar-cerca button {
  width: 40px;
  flex-shrink: 0;
  background: var(--ink);
  border: none;
  color: var(--bg);
  cursor: pointer;
  font-size: 1.1rem;
}

.sidebar-social { display: flex; gap: 0.5rem; margin-top: 1rem; }
.sidebar-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-testata { display: flex; align-items: center; justify-content: space-between; }
.sidebar-toggle { display: none; }
.progetto-card-didascalia { display: none; }
.galleria-mobile, .progetto-testata-mobile, .hero-scorri { display: none; }

.contenuto { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.contenuto main { flex: 1; }
.contenuto-piena main { display: flex; }

main { max-width: none; margin: 0; padding: 0; }

/* ---------- copertina (home) ---------- */

.hero-copertina { flex: 1; display: flex; }
.hero-copertina img, .hero-copertina video {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  object-fit: cover;
  display: block;
}

/* ---------- pagina progetti (griglia) ---------- */

.filtro-categorie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  padding: 1.5rem 1.5rem 1.25rem;
}

.filtro-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 0 4px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink);
  cursor: pointer;
}

.filtro-btn.attivo, .filtro-btn:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.griglia-progetti {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding-bottom: 3rem;
}

.progetto-card {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ink);
}

.progetto-card-immagine { display: block; width: 100%; height: 100%; }

.progetto-card-immagine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: filter 0.35s ease;
}

.progetto-card:hover .progetto-card-immagine img { filter: grayscale(0); }

.progetto-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
  text-align: center;
}

.progetto-card:hover .progetto-card-overlay { opacity: 1; }

.progetto-card-titolo {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
}

.progetto-card-meta {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.vuoto { color: var(--meta); padding: 0 1.5rem; }

/* ---------- pagina dettaglio progetto ---------- */

.progetto-dettaglio { padding-bottom: 3rem; }

.torna-indietro {
  display: inline-block;
  margin: 1.5rem 1.5rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--meta);
}
.torna-indietro:hover { color: var(--accent); }

/* Visualizzatore: una foto grande alla volta, mai tagliata né deformata
   (object-fit: contain), quasi a schermo pieno, con frecce e miniature. */
.progetto-visualizzatore {
  display: flex;
  gap: 2rem;
  height: 82vh;
  min-height: 420px;
  padding: 0 1.5rem;
}

.progetto-carosello {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  overflow: hidden;
}

/* L'immagine riempie sempre il riquadro, anche se ha pochi pixel:
   contain = proporzioni rispettate, mai tagliata, mai deformata. */
.carosello-immagine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.carosello-freccia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(243, 242, 242, 0.85);
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
}
.carosello-freccia:hover { background: var(--bg); color: var(--accent); }
.carosello-prev { left: 1rem; }
.carosello-next { right: 1rem; }

.progetto-visualizzatore-senza-foto .progetto-carosello { background: none; }

/* Scheda: colonna a destra, titolo + TUTTI i campi di info.json. */
.progetto-scheda {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
}
.progetto-scheda h1 { margin-bottom: 1.5rem; }

.scheda-dati { font-size: 0.85rem; margin: 0; }
.scheda-riga { padding: 0.55rem 0; border-bottom: 1px solid var(--linea-chiara); }
.scheda-riga dt {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--meta);
  margin: 0;
}
.scheda-riga dd { margin: 2px 0 0; }

/* Miniature: sempre visibili sotto il visualizzatore. */
.progetto-miniature {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  overflow-x: auto;
}

.miniatura {
  width: 76px;
  height: 54px;
  flex-shrink: 0;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura.attiva { border-color: var(--accent); }

.progetto-descrizione-blocco { padding: 2rem 1.5rem 0; max-width: 760px; }
.progetto-descrizione { font-size: 1rem; line-height: 1.75; }
.progetto-descrizione p { margin: 0 0 1.2rem; }
.progetto-descrizione p:last-child { margin-bottom: 0; }

.disegni-tecnici { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--linea-chiara); }
.disegni-tecnici ul { padding-left: 1.2rem; margin: 1rem 0 0; }

.disegni-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.disegno-anteprima { display: flex; flex-direction: column; gap: 0.4rem; }
.disegno-anteprima img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--linea-chiara);
  display: block;
}
.disegno-anteprima span { font-size: 0.75rem; color: var(--meta); word-break: break-word; }

/* ---------- pagine di testo (chi sono, servizi, contatti) ---------- */

.pagina-testo { padding: 2.5rem 1.5rem 3rem; max-width: 720px; }

.chi-siamo-ritratto {
  width: 220px;
  height: 280px;
  margin-bottom: 1.5rem;
}
.chi-siamo-ritratto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.08);
}

.elenco-servizi { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.servizio h2 { font-size: 1.05rem; }
.servizio p { margin: 0; }

.contatti-lista { margin-top: 1.5rem; }
.contatti-riga {
  display: flex;
  gap: 1.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linea-chiara);
}
.contatti-campo {
  width: 160px;
  flex-shrink: 0;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--meta);
}
.contatti-valore a:hover { color: var(--accent); }

.site-footer {
  text-align: center;
  color: var(--meta);
  font-size: 0.8rem;
  padding: 2rem;
}

/* =====================================================================
   MOBILE (<= 800px) — architettura dedicata ai telefoni
   ===================================================================== */

@media (max-width: 800px) {
  :root { --testata-h: 56px; }

  body { font-size: 16px; }
  h1 { font-size: 1.7rem; }

  .pagina { display: block; }

  /* ---- testata fissa + menu a schermo intero ---- */
  .sidebar {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: var(--testata-h);
    padding: 0 1.25rem;
    gap: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--bg);
    border-bottom: 1px solid var(--linea-chiara);
    z-index: 100;
    overflow: hidden;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.aperta { height: 100dvh; border-bottom-color: transparent; overflow-y: auto; }

  .sidebar-top { display: flex; flex-direction: column; flex: 1; }
  .sidebar-testata { height: var(--testata-h); flex-shrink: 0; }
  .sidebar-logo { margin: 0; font-size: 1.05rem; }
  .sidebar-riga { display: none; }

  .sidebar-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0 10px;
    background: none;
    border: none;
    cursor: pointer;
  }
  .sidebar-toggle span {
    display: block;
    height: 2px;
    background: var(--ink);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .sidebar.aperta .sidebar-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
  .sidebar.aperta .sidebar-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .sidebar-nav { margin-top: 2.5rem; opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s; }
  .sidebar.aperta .sidebar-nav { opacity: 1; transform: none; }
  .sidebar-nav a {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.4rem;
    letter-spacing: -0.02em;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--linea-chiara);
  }

  .sidebar-bottom { padding: 2rem 0 2.5rem; opacity: 0; transition: opacity 0.3s ease 0.25s; }
  .sidebar.aperta .sidebar-bottom { opacity: 1; }
  .sidebar-cerca input { font-size: 1rem; padding: 0.7rem 0.8rem; }
  .sidebar-cerca button { width: 48px; }
  .sidebar-social a { width: 40px; height: 40px; }

  body.menu-aperto { overflow: hidden; }

  .contenuto { min-height: 100dvh; padding-top: var(--testata-h); }
  .contenuto-piena main { display: block; }

  /* ---- home: copertina verticale a tutto schermo ---- */
  .hero-copertina { position: relative; display: block; height: calc(100dvh - var(--testata-h)); }
  .hero-copertina picture { display: block; width: 100%; height: 100%; }
  .hero-copertina img, .hero-copertina video { min-height: 0; height: 100%; object-position: center; }
  .hero-scorri {
    display: block;
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    padding: 0.55rem 0.9rem;
    background: var(--bg);
    color: var(--ink);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: lowercase;
  }

  /* ---- progetti: filtri scorrevoli + feed a una colonna ---- */
  .filtro-categorie {
    position: sticky;
    top: var(--testata-h);
    z-index: 50;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0 1.4rem;
    padding: 0.9rem 1.25rem 0;
    background: var(--bg);
    border-bottom: 1px solid var(--linea-chiara);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filtro-categorie::-webkit-scrollbar { display: none; }
  .filtro-btn { flex-shrink: 0; font-size: 0.9rem; padding-bottom: 0.8rem; border-bottom-width: 2px; }

  .griglia-progetti { grid-template-columns: 1fr; gap: 2.25rem; padding: 1.5rem 0 3rem; }

  .progetto-card { aspect-ratio: auto; height: auto; align-self: start; background: none; overflow: visible; }
  .progetto-card-immagine { height: auto; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
  .progetto-card-immagine img { filter: grayscale(1); }
  .progetto-card:active .progetto-card-immagine img { filter: grayscale(0); }
  .progetto-card-overlay { display: none; }
  .progetto-card-didascalia {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 1.25rem 0;
  }
  .progetto-card-didascalia .progetto-card-titolo { color: var(--ink); font-size: 1.25rem; }
  .progetto-card-didascalia .progetto-card-meta { color: var(--meta); font-size: 0.75rem; }

  .vuoto { padding: 0 1.25rem; }

  /* ---- pagina progetto: galleria a scorrimento + testata ---- */
  .torna-indietro {
    position: sticky;
    top: var(--testata-h);
    z-index: 50;
    display: block;
    margin: 0;
    padding: 0.75rem 1.25rem;
    background: var(--bg);
    border-bottom: 1px solid var(--linea-chiara);
  }

  .progetto-visualizzatore, .progetto-miniature { display: none; }

  .galleria-mobile { display: block; position: relative; background: var(--surface); }
  .galleria-mobile-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .galleria-mobile-strip::-webkit-scrollbar { display: none; }
  .galleria-mobile-item {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
    height: min(75vw, 62dvh);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .galleria-mobile-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .galleria-mobile-contatore {
    position: absolute;
    right: 0.9rem;
    bottom: 0.9rem;
    padding: 0.25rem 0.6rem;
    background: rgba(32, 30, 29, 0.75);
    color: var(--bg);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
  }

  .progetto-testata-mobile { display: block; padding: 1.5rem 1.25rem 0; }
  .progetto-testata-mobile h1 { margin-bottom: 1rem; }
  .scheda-dati { font-size: 0.95rem; }

  .progetto-descrizione-blocco { padding: 1.5rem 1.25rem 0; }
  .progetto-descrizione { font-size: 1.05rem; }
  .disegni-griglia { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

  /* ---- pagine di testo ---- */
  .pagina-testo { padding: 2rem 1.25rem 3rem; }
  .pagina-testo p { font-size: 1.05rem; line-height: 1.7; }
  .chi-siamo-ritratto { width: 100%; height: auto; aspect-ratio: 4 / 5; max-width: 360px; }

  .contatti-riga { flex-direction: column; gap: 0.2rem; padding: 0.9rem 0; }
  .contatti-campo { width: auto; }
  .contatti-valore { font-size: 1.05rem; word-break: break-word; }

  .site-footer { padding: 2rem 1.25rem; }
}