/* IZZURAK — stile unico per tutte le pagine.
   Misure prese dal mockup 1920x1080 (Izzurak WebSite.pdf):
   margine 56px, sidebar 344px, logo 40px, nav 20px, giallo #ffbc00, grigio #4c4c4c. */

:root {
  --black: #000;
  --muted: #4c4c4c;
  --accent: #ffbc00;
  --white: #fff;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-logo: 40px;
  --fs-nav: 20px;
  --fs-small: 15px;
  --lh: 1.2;

  --margin: 56px;
  --sidebar: 344px;
  --nav-top: 140px;

  /* griglia: --g è lo spazio fra le foto, espresso in centesimi della larghezza di
     colonna (8 = 8%). Lo stesso valore è sommato allo span in scripts/build.mjs. */
  --grid-cols: 3;
  --grid-g: 8;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: var(--fs-nav);
  font-weight: 300;
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.muted { color: var(--muted); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--margin); top: -100px;
  background: var(--black); color: var(--white);
  padding: 8px 12px; z-index: 100;
}
.skip-link:focus { top: 8px; }

/* ---------- Sidebar (desktop) ---------- */

.site-header {
  position: fixed;
  top: var(--margin);
  left: var(--margin);
  z-index: 20;
}

.brand {
  font-size: var(--fs-logo);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.menu-toggle { display: none; }

.nav {
  position: fixed;
  top: var(--nav-top);
  left: var(--margin);
  width: calc(var(--sidebar) - var(--margin) - 16px);
  z-index: 20;
}

.nav__link {
  display: inline-block;
  font-weight: 300;
  transition: color .15s ease;
}
.nav__link--archive { font-weight: 500; }
.nav__link--item { font-weight: 400; }
.nav__link:hover,
.nav__link:focus-visible { color: var(--accent); }
.nav__link--active { color: var(--muted); }
.nav__link--active:hover { color: var(--accent); }

.nav__group--pages { margin-top: 24px; }
.nav__group--pages .nav__link { display: block; }

/* La lista dell'archivio è chiusa; si apre su hover, su click (JS) e nelle pagine progetto. */
.nav__list {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
.nav__items { min-height: 0; overflow: hidden; }
.nav__items li { padding-left: 20px; }
.nav__items li:first-child { padding-top: 8px; }
.nav__group--archive.is-open .nav__list,
.nav__group--archive:hover .nav__list,
.nav__group--archive:focus-within .nav__list {
  grid-template-rows: 1fr;
}
/* grid-template-rows: 0fr non è animabile ovunque: fallback con max-height. */
@supports not (grid-template-rows: 0fr) {
  .nav__list { display: block; max-height: 0; overflow: hidden; transition: max-height .25s ease; }
  .nav__group--archive.is-open .nav__list,
  .nav__group--archive:hover .nav__list,
  .nav__group--archive:focus-within .nav__list { max-height: 600px; }
}

/* ---------- Contenuto ---------- */

.main {
  margin-left: var(--sidebar);
  padding: var(--margin) var(--margin) var(--margin) 0;
  min-height: 100vh;
  container-type: inline-size;
}

/* Home: la foto riempie l'area contenuto (viewport meno i margini) */
.hero { height: calc(100vh - 2 * var(--margin)); height: calc(100svh - 2 * var(--margin)); }
.hero__img { width: 100%; height: 100%; object-fit: cover; }

/* Pagina progetto: masonry a 3 colonne senza JS.
   L'unità di riga --u è 1/100 della larghezza di colonna, ricavata dalla larghezza del
   contenitore (cqw). Ogni foto occupa (altezza/larghezza*100 + --grid-g) righe, con
   --grid-g righe di padding sotto che fanno da spazio verticale: così le proporzioni
   restano esatte e lo spazio fra le foto è uguale in orizzontale e verticale. */
.grid {
  --u: calc(100cqw / (100 * var(--grid-cols) + (var(--grid-cols) - 1) * var(--grid-g)));
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), calc(100 * var(--u)));
  column-gap: calc(var(--grid-g) * var(--u));
  row-gap: 0;
  grid-auto-rows: var(--u);
  margin-bottom: calc(-1 * var(--grid-g) * var(--u));
}
.grid__item {
  grid-row: span var(--span);
  padding-bottom: calc(var(--grid-g) * var(--u));
}
.grid__item img { width: 100%; height: 100%; object-fit: cover; }

@supports not (width: 1cqw) {
  .grid { display: block; columns: var(--grid-cols); column-gap: 40px; margin-bottom: 0; }
  .grid__item { break-inside: avoid; padding-bottom: 40px; }
  .grid__item img { height: auto; }
}

.grid-empty { color: var(--muted); }

/* About: ritratto a sinistra (piena altezza), testo a destra */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--margin);
  min-height: calc(100vh - 2 * var(--margin));
  min-height: calc(100svh - 2 * var(--margin));
}
.about__portrait { background: var(--black); min-height: 60vh; }
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }
.about__text {
  display: flex;
  flex-direction: column;
  max-width: 44ch;
}
.about__bio p + p { margin-top: 1.2em; }
.about__bio p:nth-child(n + 2) { color: var(--muted); }
.about__contact { margin-top: auto; padding-top: 2em; }
.about__contact p + p { margin-top: 1.2em; }
.about__credit { margin-top: auto; padding-top: 3em; font-size: var(--fs-small); }

/* Contact */
.contact__title {
  margin: 0 0 1.2em;
  font-size: var(--fs-logo);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}
.contact p + p { margin-top: 1.2em; }
.contact__note { margin-top: 2em; }
.contact a { text-decoration: underline; text-underline-offset: 3px; }
.contact a:hover,
.about__contact a:hover,
.about__credit a:hover { color: var(--accent); }

/* ---------- Schermi medi ---------- */

@media (max-width: 1199px) {
  :root { --sidebar: 280px; --margin: 40px; --nav-top: 118px; }
}

@media (max-width: 1099px) {
  :root { --grid-cols: 2; }
  .about { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  :root {
    --fs-logo: 28px;
    --fs-nav: 18px;
    --margin: 16px;
    --grid-cols: 1;
  }

  body.nav-open { overflow: hidden; }

  .site-header {
    position: sticky;
    top: 0; left: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px var(--margin);
    background: var(--white);
  }

  .menu-toggle {
    display: block;
    appearance: none;
    border: 0; padding: 4px 0;
    background: none;
    font: inherit;
    font-size: var(--fs-nav);
    color: var(--black);
    cursor: pointer;
  }
  .menu-toggle:hover { color: var(--accent); }

  .nav {
    position: fixed;
    inset: 0;
    width: auto;
    padding: 84px var(--margin) var(--margin); /* sotto l'header sticky */
    background: var(--white);
    overflow-y: auto;
    z-index: 15;
    display: none;
  }
  body.nav-open .nav { display: block; }

  .nav__list,
  .nav__group--archive .nav__list { display: block; max-height: none; }
  .nav__items li { padding: 4px 0 4px 20px; }
  .nav__items li:first-child { padding-top: 8px; }
  .nav__group--pages { margin-top: 28px; }
  .nav__group--pages .nav__link { padding: 4px 0; }

  .main {
    margin-left: 0;
    padding: 0 var(--margin) var(--margin);
    min-height: auto;
  }

  /* header sticky (74px) + margine sotto: la foto riempie il resto dello schermo */
  .hero { height: calc(100svh - 68px - var(--margin)); }

  .about { display: block; min-height: 0; }
  .about__portrait { aspect-ratio: 4 / 5; min-height: 0; margin-bottom: 24px; }
  .about__text { max-width: none; }
  .about__contact { margin-top: 2em; padding-top: 0; }
  .about__credit { margin-top: 3em; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}