/* ============================================
   UNOAVENTI — progetto.css
   Stili per le pagine singole dei progetti
   ============================================ */

/* ---- BREADCRUMB ---- */
.progetto-breadcrumb {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--carta-mid);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.progetto-breadcrumb a {
  color: var(--inchiostro2);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.progetto-breadcrumb a:hover { opacity: 1; }

/* ---- TESTATA ---- */
.progetto-header {
  padding: 64px 32px 48px;
  border-bottom: 1.5px solid var(--inchiostro);
  max-width: 900px;
}

.progetto-header-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.progetto-anno {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--cmyk-c);
  letter-spacing: 0.05em;
}

.progetto-img-tipo {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inchiostro2);
  opacity: 0.5;
}

.progetto-titolo {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--inchiostro);
  margin-bottom: 16px;
}

.progetto-sottotitolo {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inchiostro2);
  opacity: 0.6;
}

/* ---- COVER ---- */
.progetto-cover {
  width: 100%;
  max-height: 620px;
  overflow: hidden;
  border-bottom: 1.5px solid var(--inchiostro);
  background: var(--carta-dark);
}

.progetto-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- CORPO: testo + scheda ---- */
.progetto-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  border-bottom: 1.5px solid var(--inchiostro);
}

.progetto-testo {
  padding: 56px 48px 56px 32px;
  border-right: 1px solid var(--carta-mid);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.progetto-testo p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--inchiostro2);
  max-width: 620px;
}

.progetto-testo em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--inchiostro);
}

.progetto-nota {
  margin-top: 12px;
  padding: 16px 20px;
  border-left: 3px solid var(--cmyk-c);
  background: var(--carta-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--inchiostro2);
  opacity: 0.8;
}

/* ---- SCHEDA TECNICA ---- */
.progetto-scheda {
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.scheda-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--carta-mid);
}

.scheda-row:last-child { border-bottom: none; }

.scheda-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--inchiostro2);
  opacity: 0.45;
}

.scheda-value {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--inchiostro);
  line-height: 1.4;
}

.scheda-sost-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--c-yel-dark);
  color: var(--inchiostro);
  padding: 4px 10px;
  display: inline-block;
  align-self: flex-start;
}

/* ============================================================
   GALLERIA IMMAGINI
   ============================================================

   COME SI USA — due informazioni sul div .progetto-galleria:

   1) QUANTE IMMAGINI hai (escludendo la cover):
      galleria-1  →  1 immagine  full width
      galleria-2  →  2 immagini
      galleria-3  →  3 immagini
      galleria-4  →  4 immagini
      galleria-5  →  5 immagini

   2) CHE FORMATO hanno le immagini:
      (niente)    →  tutte orizzontali  [default]
      mix-v       →  miste orizzontali e verticali
      tutte-v     →  tutte verticali (ritratto)

   Esempi combinati:
      class="progetto-galleria galleria-3"
        → 3 immagini tutte orizzontali

      class="progetto-galleria galleria-3 mix-v"
        → 3 immagini, alcune verticali

      class="progetto-galleria galleria-2 tutte-v"
        → 2 immagini verticali affiancate

   PROPORZIONI CONSIGLIATE per Squoosh:
      Orizzontale  →  1200 × 800 px  (3:2)
      Verticale    →  800 × 1100 px  (circa 3:4)
      Cover        →  1400 × 800 px  (16:9 o simile)
   ============================================================ */

.progetto-galleria {
  border-bottom: 1.5px solid var(--inchiostro);
  background: var(--carta-dark);
  display: grid;
  gap: 3px;
  padding: 0;
}

/* ---- BASE: tutte orizzontali ---- */

/* 1 immagine */
.progetto-galleria.galleria-1 {
  grid-template-columns: 1fr;
}
.progetto-galleria.galleria-1 .galleria-item {
  min-height: 520px;
}

/* 2 immagini — affiancate */
.progetto-galleria.galleria-2 {
  grid-template-columns: 1fr 1fr;
}

/* 3 immagini — prima wide, due sotto */
.progetto-galleria.galleria-3 {
  grid-template-columns: 1fr 1fr;
}
.progetto-galleria.galleria-3 .galleria-item:first-child {
  grid-column: 1 / -1;
}

/* 4 immagini — griglia 2×2 */
.progetto-galleria.galleria-4 {
  grid-template-columns: 1fr 1fr;
}

/* 5 immagini — prima wide, poi 2×2 */
.progetto-galleria.galleria-5 {
  grid-template-columns: 1fr 1fr;
}
.progetto-galleria.galleria-5 .galleria-item:first-child {
  grid-column: 1 / -1;
}

/* ---- VARIANTE: miste orizzontali + verticali (mix-v) ----
   Le verticali occupano 1 colonna stretta (2fr vs 3fr).
   Metti la/e verticale/i per ultima/e nel markup HTML.      */

.progetto-galleria.galleria-2.mix-v {
  grid-template-columns: 3fr 2fr;
}

.progetto-galleria.galleria-3.mix-v {
  grid-template-columns: 3fr 2fr;
}
.progetto-galleria.galleria-3.mix-v .galleria-item:first-child {
  grid-column: 1 / -1;
}

.progetto-galleria.galleria-4.mix-v {
  grid-template-columns: 3fr 2fr;
}
/* prima riga: orizzontale wide + verticale */
.progetto-galleria.galleria-4.mix-v .galleria-item:nth-child(1) { grid-column: 1; }
.progetto-galleria.galleria-4.mix-v .galleria-item:nth-child(2) { grid-row: 1 / 3; grid-column: 2; }
/* seconda riga: due orizzontali sotto */
.progetto-galleria.galleria-4.mix-v .galleria-item:nth-child(3) { grid-column: 1; }
.progetto-galleria.galleria-4.mix-v .galleria-item:nth-child(4) { grid-column: 1; }

.progetto-galleria.galleria-5.mix-v {
  grid-template-columns: 3fr 2fr;
}
.progetto-galleria.galleria-5.mix-v .galleria-item:first-child {
  grid-column: 1 / -1;
}

/* ---- VARIANTE: tutte verticali (tutte-v) ----
   3 colonne strette per non avere barre altissime         */

.progetto-galleria.galleria-2.tutte-v  { grid-template-columns: 1fr 1fr; }
.progetto-galleria.galleria-3.tutte-v  { grid-template-columns: repeat(3, 1fr); }
.progetto-galleria.galleria-3.tutte-v .galleria-item:first-child { grid-column: auto; }
.progetto-galleria.galleria-4.tutte-v  { grid-template-columns: repeat(4, 1fr); }
.progetto-galleria.galleria-5.tutte-v  { grid-template-columns: repeat(3, 1fr); }
.progetto-galleria.galleria-5.tutte-v .galleria-item:first-child { grid-column: auto; }

/* ---- ITEM BASE ---- */
.galleria-item {
  overflow: hidden;
  background: var(--carta);
  position: relative;
  min-height: 260px;
}

/* Le verticali devono essere più alte per mostrare il soggetto */
.tutte-v .galleria-item,
.mix-v .galleria-item.v {
  min-height: 400px;
}

.galleria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.4s ease;
  min-height: inherit;
}

.galleria-item:hover img { transform: scale(1.02); }

.galleria-item figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--carta);
  background: linear-gradient(to top, rgba(26,22,18,0.65) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s;
}

.galleria-item:hover figcaption { opacity: 1; }

/* ---- NAVIGAZIONE PROGETTI ---- */
.progetto-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1.5px solid var(--inchiostro);
}

.progetto-nav-prev,
.progetto-nav-next {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 32px;
  text-decoration: none;
  color: var(--inchiostro);
  transition: background 0.2s;
  border-right: 1px solid var(--carta-mid);
}

.progetto-nav-next {
  border-right: none;
  align-items: flex-end;
  text-align: right;
}

.progetto-nav-prev:hover,
.progetto-nav-next:hover { background: var(--carta-dark); }

.progetto-nav .mono {
  font-size: 10px;
  opacity: 0.5;
}

.progetto-nav-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .progetto-body {
    grid-template-columns: 1fr;
  }
  .progetto-testo {
    border-right: none;
    border-bottom: 1px solid var(--carta-mid);
    padding: 40px 24px;
  }
  .progetto-scheda { padding: 32px 24px; }
  .progetto-header { padding: 40px 24px 32px; }
  .progetto-breadcrumb { padding: 14px 24px; }
  .progetto-galleria {
    grid-template-columns: 1fr;
    padding: 3px;
  }
  .galleria-item--wide { grid-column: 1; }
  .progetto-nav { grid-template-columns: 1fr; }
  .progetto-nav-prev { border-right: none; border-bottom: 1px solid var(--carta-mid); }
  .progetto-nav-next { align-items: flex-start; text-align: left; }
}