/*
  style.css — struttura e componenti (convenzione BEM).
  Nessun valore di design scritto qui: tutto viene da tokens.css.
  Layout iPhone sotto i 768 px (max-width: 767px).
*/

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-bg);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Hover: il testo cliccabile diventa giallo, mai sottolineato. */
@media (hover: hover) {
  a:hover { color: var(--color-accent); }
}

/* Tastiera: anello nero ben visibile (il giallo da solo non basta). */
a:focus-visible,
button:focus-visible {
  outline: var(--focus-ring) solid var(--color-text);
  outline-offset: var(--focus-offset);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  z-index: 10;
  top: var(--header-top);
  left: var(--grid-margin);
  background: var(--color-bg);
  font-size: var(--fs-ui);
}
/* Visibile solo quando si arriva con il tasto Tab. */
.skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Intestazione ---------- */

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--header-top) var(--grid-margin) 0;
  font-size: var(--fs-ui);
  letter-spacing: var(--tracking-ui);
  white-space: nowrap;
}

.site-header__name { justify-self: start; }

.site-header__logo { color: var(--color-text); }
.site-header__logo svg {
  width: var(--logo-size);
  height: var(--logo-size);
}

.site-nav {
  justify-self: end;
  display: flex;
  gap: var(--nav-gap);
}

@media (max-width: 767px) {
  .site-header { line-height: var(--tap); }
}

/* ---------- Home ---------- */

.page--home .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
}

.home {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 var(--grid-margin);
}

.home__phrase {
  font-size: var(--fs-home);
  letter-spacing: var(--tracking-ui);
}

/* ---------- Elenco categorie (Foto, Video) ---------- */

.index {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  padding: var(--space-top-list) var(--grid-margin) var(--space-bottom);
}

.index__label {
  grid-column: 1 / span 3;
  /* allinea l'etichetta alla prima riga dell'elenco */
  padding-top: calc(var(--fs-list) * 0.22);
  font-size: var(--fs-ui);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-ui);
  line-height: var(--lh-ui);
}

.index__list {
  grid-column: 4 / span 9;
  font-size: var(--fs-list);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-list);
}

@media (max-width: 767px) {
  .index {
    display: flex;
    flex-direction: column;
    gap: var(--space-index);
  }
  .index__label { padding-top: 0; }
  .index__list { line-height: var(--lh-list-phone); }
}

/* ---------- Pagina categoria ---------- */

.category {
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
  padding: var(--space-top-page) var(--grid-margin) var(--space-bottom);
}

.category__title {
  font-size: var(--fs-title);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-list);
}

.chapter {
  display: flex;
  flex-direction: column;
  gap: var(--space-chapter);
}

.chapter__title {
  font-size: var(--fs-ui);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-ui);
  line-height: var(--lh-ui);
}

.chapter__subtitle {
  display: block;
  font-weight: var(--weight-regular);
}

/* ---------- Galleria foto ----------
   Righe da una foto (orizzontale a tutta larghezza) o da due foto affiancate.
   Nelle coppie la larghezza di ogni foto è proporzionale al suo formato (--ratio),
   così le due foto hanno la stessa altezza senza tagli. */

.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

.gallery__row {
  display: flex;
  gap: var(--grid-gap);
  align-items: flex-start;
}

.gallery__item {
  flex: var(--ratio) 1 0%;
  min-width: 0;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  background: var(--tone, var(--color-placeholder));
}

.gallery__row--single .gallery__item { flex: 1 1 100%; }

/* Foto verticale rimasta sola: 6 colonne, al centro. */
.gallery__row--portrait .gallery__item {
  flex: 0 0 calc((100% - var(--grid-gap)) / 2);
  margin-inline: auto;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .gallery__row { flex-direction: column; }
  .gallery__item,
  .gallery__row--portrait .gallery__item {
    flex: none;
    width: 100%;
  }
}

/* ---------- Segnaposto (categorie ancora vuote) ---------- */

.placeholder {
  display: grid;
  place-items: center;
  background: var(--color-placeholder);
  color: var(--color-placeholder-text);
  font-size: var(--fs-placeholder);
  font-weight: var(--weight-regular);
}

/* ---------- Video ---------- */

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-placeholder);
  --icon: var(--play-size-small);
}

/* Il primo video del capitolo occupa tutta la larghezza. */
.video:first-child {
  grid-column: 1 / -1;
  --icon: var(--play-size);
}

.video__link,
.video__inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-bg);
}

.video__link img,
.video__link picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-veil);
}

.video__icon {
  position: relative;
  z-index: 1;
  width: var(--icon);
  height: var(--icon);
}

.video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Segnaposto video: triangolo nero su grigio, come nelle tavole. */
.video__inner {
  grid-auto-flow: row;
  align-content: center;
  gap: var(--grid-gap);
  color: var(--color-text);
}
.video__label {
  order: 1;
  color: var(--color-placeholder-text);
  font-size: var(--fs-placeholder);
  font-weight: var(--weight-regular);
}

@media (max-width: 767px) {
  .video-grid { grid-template-columns: 1fr; }
  .video, .video:first-child { --icon: var(--play-size); }
}

/* ---------- Categoria successiva (fine pagina) ---------- */

.next {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.next__label {
  grid-column: 1 / span 3;
  padding-top: calc(var(--fs-list) * 0.22);
  font-size: var(--fs-ui);
  letter-spacing: var(--tracking-ui);
  line-height: var(--lh-ui);
}

.next__link {
  grid-column: 4 / span 9;
  justify-self: start;
  font-size: var(--fs-list);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-list);
}

@media (max-width: 767px) {
  .next {
    display: flex;
    flex-direction: column;
    gap: var(--space-index);
  }
  .next__label { padding-top: 0; }
}

/* ---------- Info ---------- */

.page--info {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.info {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--grid-gap);
  row-gap: var(--space-chapter);
  padding: var(--space-top-page) var(--grid-margin) var(--grid-margin);
}

.info__bio {
  grid-column: 1 / span 9;
  font-size: var(--fs-info);
  letter-spacing: var(--tracking-info);
  line-height: var(--lh-info);
  text-wrap: pretty;
}

.info__contacts {
  grid-column: 1 / span 7;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--contact-gap);
  font-size: var(--fs-ui);
  letter-spacing: var(--tracking-ui);
}

.info__portrait {
  grid-column: 10 / span 3;
  grid-row: 1 / span 2;
  align-self: end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--tone, var(--color-placeholder));
}

.info__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .info {
    display: flex;
    flex-direction: column;
  }
  .info__bio { line-height: var(--lh-info-phone); }
  .info__portrait {
    align-self: flex-end;
    width: var(--portrait-phone);
  }
  .info__contacts {
    align-self: flex-start;
    margin-top: auto;
    flex-direction: column;
    line-height: var(--tap);
  }
}

/* ---------- 404 ---------- */

.missing {
  min-height: 70vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-index);
  padding: 0 var(--grid-margin);
  font-size: var(--fs-home);
  text-align: center;
}