/* Archivio Bepi Ghiotti – ricalca l'impaginazione del sito Wix originale */
:root {
  --fs: 10px; /* dimensione del testo delle pagine (usata anche per le sottopagine del menu) */
  --text: #555;
  --nav: #4a4a4a;
  --muted: #a0a0a0;
  --line: #e6e6e6;
  --bg: #fff;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.5;
}
a { color: inherit; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Struttura: menu a sinistra, colonna di contenuto a destra ---- */
.layout {
  display: grid;
  grid-template-columns: 560px minmax(0, 600px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}
.side { position: relative; }
.site-nav {
  position: sticky; top: 0;
  padding-top: 140px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 20px;
  text-transform: uppercase;
  font-size: 9px; line-height: 1.5;
}
body.is-home .site-nav { padding-top: 140px; }
.nav-brand { color: var(--nav); cursor: default; }
body.is-home .nav-brand { color: var(--muted); }
.nav-top {
  font: inherit; text-transform: inherit; color: var(--nav);
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; text-decoration: none; text-align: left;
}
.nav-top:hover, .nav-group.is-active > .nav-top, .nav-contact.is-active { color: var(--muted); }

/* Sottomenu: si apre a destra della voce, come le "cartelle" di Wix */
.nav-group { position: relative; }
.nav-sub {
  display: none;
  position: absolute; left: 100%; top: -14.5px; z-index: 5; /* prima voce allineata alla voce del menu */
  margin: 0 0 0 56px; padding: 10px 0;
  list-style: none;
  background: var(--bg);
  min-width: 260px;
  text-transform: none;
  font-size: var(--fs); line-height: 1.4;
}
.nav-sub::before { /* ponte invisibile: il menu non si chiude passando col mouse */
  content: ""; position: absolute; left: -56px; top: 0; bottom: 0; width: 56px;
}
.nav-sub a {
  display: block; padding: 4px 0; text-decoration: none; color: var(--nav); white-space: nowrap;
}
.nav-sub a:hover, .nav-sub a[aria-current] { color: var(--muted); }
@media (hover: hover) {
  .nav-group:hover > .nav-sub { display: block; }
}
.nav-group.open > .nav-sub { display: block; }
.menu-btn { display: none; }

/* ---- Contenuto ---- */
main { padding: 140px 0 60px; min-height: 100vh; display: flex; flex-direction: column; }
article { flex: 1; }
h1, h2, h3 { font-weight: normal; font-size: inherit; margin: 0; color: var(--text); }
article h1 { margin-bottom: 0; }
article h2 { margin: 3.2em 0 0; }
article h3 { margin: 2em 0 0; }
.subtitle, .byline { margin: 0; }
article p { margin: 0 0 1em; }
article > p:first-of-type, .text-block:first-of-type { margin-top: 1.4em; }
.intro { margin-top: 1.4em; }
article.contact .intro p { margin: 0 0 5.5em; }
article.contact .intro + .small { margin-top: 2em; }
article hr { border: 0; margin: 3em 0 0; }
article ul, article ol { padding-left: 1.2em; }
.small, .note { font-size: 8px; }
.list p, .compact p { margin: 0; }
.list h3 { margin-top: 2.4em; margin-bottom: 1.4em; }

/* Immagini e video */
.gallery {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 2.4em 0;
  width: 50%; /* immagini a metà della larghezza della colonna */
}
.gallery.single { grid-template-columns: 1fr; }
.g-item { display: block; background: #f2f2f2; overflow: hidden; }
.g-item img { width: 100%; height: auto; display: block; transition: opacity .25s; }
.g-item:hover img { opacity: .85; }
.video { position: relative; aspect-ratio: 16 / 9; margin: 2em 0; background: #f2f2f2; width: 50%; } /* stessa larghezza delle foto */
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
article img.inline { max-width: 50%; height: auto; display: block; margin: 2em 0; }

/* Contatti */
form.contact { display: grid; gap: 12px; margin: 1.4em 0 2em; }
form.contact input, form.contact textarea {
  font: inherit; font-size: 10px; color: var(--text);
  padding: 8px 0; border: 0; border-bottom: 1px solid #bbb; background: transparent; width: 100%;
  border-radius: 0;
}
form.contact input:focus, form.contact textarea:focus { outline: none; border-bottom-color: var(--nav); }
form.contact button {
  font: inherit; font-size: 10px; justify-self: start; margin-top: 8px;
  padding: 6px 22px; border: 1px solid var(--nav); background: var(--bg); color: var(--nav); cursor: pointer;
}
form.contact button:hover { background: var(--nav); color: var(--bg); }
.privacy summary { cursor: pointer; }
.privacy { margin-top: 1em; }

footer { font-size: 8px; color: var(--muted); padding-top: 60px; }

/* ---- Lightbox ---- */
.lb {
  position: fixed; inset: 0; z-index: 20; background: rgba(255,255,255,.98);
  display: flex; align-items: center; justify-content: center; padding: 56px;
}
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb button {
  position: absolute; background: none; border: 0; cursor: pointer;
  font: 15px var(--font); color: var(--nav); padding: 16px;
}
.lb .close { top: 8px; right: 8px; }
.lb .prev { left: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; }
.lb .next { right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; }

/* ---- Schermi medi ---- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 280px minmax(0, 600px); }
  /* tablet: le sottopagine si aprono sotto la cartella, senza coprire il testo */
  .nav-sub {
    position: static; margin: 12px 0 4px; padding: 0 0 0 14px; min-width: 0;
    border-left: 1px solid var(--line);
  }
  .nav-sub::before { display: none; }
  .nav-sub a { white-space: normal; }
  @media (hover: hover) { .nav-group:hover > .nav-sub { display: none; } .nav-group.open > .nav-sub { display: block; } }
}

/* ---- Schermi molto grandi ---- */
@media (min-width: 1800px) {
  :root { --fs: 11px; } .site-nav { font-size: 9px; }
  .layout { grid-template-columns: 660px minmax(0, 720px); max-width: 1640px; }
  .site-nav, body.is-home .site-nav { padding-top: 170px; }
}

/* ---- Mobile: menu a scomparsa ---- */
@media (max-width: 760px) {
  :root { --fs: 10px; }
  .layout { display: block; padding: 0 20px; }
  .side {
    position: sticky; top: 0; z-index: 10; background: var(--bg);
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 0; border-bottom: 1px solid var(--line);
  }
  .side::before { content: "ARCHIVIO BEPI GHIOTTI"; font-size: 9px; color: var(--nav); }
  .side::before { position: relative; z-index: 2; }
  /* tasto hamburger, da aperto diventa una X */
  .menu-btn {
    display: block; position: relative; z-index: 2;
    width: 22px; height: 14px; margin: 0; padding: 0;
    background: none; border: 0; cursor: pointer;
  }
  .menu-btn span {
    position: absolute; left: 0; right: 0; height: 1.5px; background: var(--nav);
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
  }
  .menu-btn span:nth-child(1) { top: 0; }
  .menu-btn span:nth-child(2) { top: 6px; }
  .menu-btn span:nth-child(3) { top: 12px; }
  .side.open .menu-btn span:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .side.open .menu-btn span:nth-child(2) { opacity: 0; }
  .side.open .menu-btn span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
  /* menu aperto: occupa tutto lo schermo e copre la pagina */
  .site-nav {
    display: none; position: fixed; inset: 0; z-index: 1;
    background: var(--bg); padding: 90px 20px 48px; gap: 16px;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  html.menu-open, html.menu-open body { overflow: hidden; height: 100%; }
  .side.open .site-nav { display: flex; }
  .nav-brand { display: none; }
  .nav-sub {
    position: static; margin: 10px 0 0 0; padding: 0 0 0 14px; min-width: 0;
    border-left: 1px solid var(--line);
  }
  .nav-sub::before { display: none; }
  .nav-sub a { white-space: normal; }
  @media (hover: hover) { .nav-group:hover > .nav-sub { display: none; } .nav-group.open > .nav-sub { display: block; } }
  main { padding: 36px 0 40px; }
  body.is-home main { display: none; }
  body.is-home .site-nav { display: flex; position: static; margin: 0 -20px; border: 0; padding-top: 40px; }
  body.is-home .menu-btn { display: none; }
  .gallery { gap: 10px; }
}
body.is-home footer { display: none; }

/* Elenco mostre */
.list p { margin: 0 0 0.9em; }
.list .head { margin: 2.6em 0 1.2em; }
.list .head:first-child { margin-top: 0; }
article.list > .list { margin-top: 0; }
.compact p { margin: 0 0 1em; }
/* Segnaposto ancora da completare: ben visibile, da eliminare prima della pubblicazione */
.todo { display: none; } /* promemoria interni: non visibili sul sito */
.list p { margin: 0; }
.list .head { margin: 2.6em 0 1.4em; }
.list .head:first-child { margin-top: 0; }
.visually-hidden + .text-block { margin-top: 0; }
article h3 { margin: 2em 0 1em; }

/* Scheda opera: didascalia in alto, testo giustificato, come su Wix */
.caption p { margin: 0 0 1.3em; line-height: 1.3; }
.caption em { font-style: italic; }
.description { margin-top: 5.5em; text-align: justify; hyphens: auto; }
.description p { margin: 0 0 1em; }
.description + .gallery { margin-top: 5.5em; }
.description.interview { text-align: left; }
.description.interview p > em:only-child { display: block; }
.description img.inline { margin: 3em 0; width: 50%; }
.caption + .gallery { margin-top: 5.5em; }
.gallery + .essay { margin-top: 5em; }
.essay + .essay { margin-top: 6em; }
.essay h3:first-child { margin-top: 0; }
.signature { margin-top: 2em; }
article > .description:first-of-type { margin-top: 0; }
.description + .caption { margin-top: 2em; }
.caption.group { margin-top: 5.5em; }
.gallery + .video { margin-top: 0; }
.description.after-video { margin-top: 1.5em; }
.essay h4 { font-weight: normal; font-size: inherit; font-style: italic; margin: 2em 0 1em; }
article.text > .essay:first-of-type { margin-top: 0; }
.essay h3 + .byline { margin-top: -0.7em; margin-bottom: 1.6em; }
.gallery + .photo-caption { margin-top: -1.6em; font-size: 8px; }
.video + .photo-caption { margin-top: -1.2em; font-size: 8px; }
.photo-caption + .essay { margin-top: 5em; }

/* ---- Telefono: lettura più comoda ---- */
@media (max-width: 760px) {
  .description, .description p { text-align: left; hyphens: none; }
  .description, .description + .gallery { margin-top: 2.5em; }
  article.contact .intro p { margin-bottom: 2.5em; }
  .nav-sub a { padding: 7px 0; }
  .gallery + .photo-caption { margin-top: -0.8em; }
  footer { padding-top: 40px; }
  /* telefono: foto e video un po' più grandi */
  .gallery, .video { width: 75%; }
  .description img.inline { width: 75%; }
  article img.inline { max-width: 75%; }
  body.is-home .side { display: block; border-bottom: 0; padding-top: 28px; }
  body.is-home .side::before { display: block; }
  body.is-home .site-nav { margin: 0; padding: 36px 0 0; gap: 22px; font-size: 9px; }
}