/* =========================================================================
   Pagine interne: Atelier, Chi siamo.
   ========================================================================= */

/* ---- Apertura a sangue delle pagine ------------------------------------- */

.capo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 72svh;
  overflow: hidden;
  isolation: isolate;
  background: #16110C;
}
.capo__sfondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.capo__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(14,10,7,0.82) 0%, rgba(14,10,7,0.3) 40%, rgba(14,10,7,0.05) 72%);
}
.capo__corpo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 var(--margine) clamp(2.5rem, 1rem + 4vw, 5rem);
  color: #fff;
}
.capo__occhiello { display: block; margin-bottom: var(--s-4); color: rgba(255,255,255,0.7); }
.capo__titolo {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 1rem + 7vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
}

/* ---- Attacco: una frase grande e una nota accanto ----------------------- */

.attacco { padding-block: var(--sezione); }
.attacco__griglia {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: start;
}
.attacco__testo {
  grid-column: 1 / span 7;
  font-size: var(--t-xl);
  line-height: 1.1;
}
.attacco__testo em { font-style: italic; }
.attacco__nota { grid-column: 9 / span 4; color: var(--c-ombra); }
@media (max-width: 61.99rem) {
  .attacco__testo { grid-column: 1 / -1; }
  .attacco__nota { grid-column: 1 / -1; margin-top: var(--s-6); }
}

/* ---- I momenti del lavoro ----------------------------------------------- */

.momenti { display: flex; flex-direction: column; }

.momento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: center;
  padding-block: var(--sezione-s);
}
.momento__foto { grid-column: 1 / span 6; margin: 0; overflow: hidden; }
.momento__foto img { width: 100%; height: auto; display: block; }
.momento__testo { grid-column: 8 / span 4; }

/* a righe alterne si scambiano i lati: la pagina non diventa una colonna */
.momento--rovescio .momento__foto { grid-column: 7 / span 6; grid-row: 1; }
.momento--rovescio .momento__testo { grid-column: 2 / span 4; grid-row: 1; }

.momento__numero { display: block; margin-bottom: var(--s-5); }
.momento__titolo { font-size: var(--t-l); line-height: 1.1; margin-bottom: var(--s-5); }
.momento__testo .testo { color: var(--c-ombra); }

@media (max-width: 61.99rem) {
  .momento,
  .momento--rovescio { grid-template-columns: 1fr; }
  .momento__foto,
  .momento--rovescio .momento__foto { grid-column: 1; grid-row: auto; }
  .momento__testo,
  .momento--rovescio .momento__testo { grid-column: 1; grid-row: auto; margin-top: var(--s-6); }
}

/* ---- Su misura ---------------------------------------------------------- */

.misura { padding-block: var(--sezione); }
.misura__griglia { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.misura__titolo { grid-column: 1 / span 4; font-size: var(--t-xl); line-height: var(--lh-media); }
.misura__corpo { grid-column: 6 / span 6; }
.misura__corpo .testo { color: var(--testo-2); margin-bottom: var(--s-6); }
.misura__azioni { display: flex; flex-wrap: wrap; gap: var(--s-4); }
@media (max-width: 61.99rem) {
  .misura__titolo, .misura__corpo { grid-column: 1 / -1; }
  .misura__corpo { margin-top: var(--s-5); }
}

/* ---- Firma -------------------------------------------------------------- */

.firma { padding-block: var(--sezione-s) var(--sezione); }
.firma__griglia {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-top: var(--s-6);
  border-top: 1px solid var(--filo);
}
.firma__ritratto { width: 5.5rem; height: 5.5rem; object-fit: cover; }
.firma__nome { font-size: var(--t-l); line-height: 1; margin-bottom: var(--s-2); }

/* ---- Chi siamo: ritratto grande ----------------------------------------- */

.ritratto-grande { padding-block: var(--sezione-s) var(--sezione); }
.ritratto-grande__griglia {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: center;
}
.ritratto-grande__foto { grid-column: 1 / span 5; margin: 0; overflow: hidden; }
.ritratto-grande__foto img { width: 100%; height: auto; display: block; }
.ritratto-grande__testo { grid-column: 7 / span 5; }
.ritratto-grande__titolo { font-size: var(--t-xxl); line-height: 1.02; margin-block: var(--s-4) var(--s-6); }
.ritratto-grande__titolo em { font-style: italic; }
.ritratto-grande__corpo { color: var(--c-ombra); }
@media (max-width: 61.99rem) {
  .ritratto-grande__foto, .ritratto-grande__testo { grid-column: 1 / -1; }
  .ritratto-grande__testo { margin-top: var(--s-7); }
}

/* ---- Tre colonne -------------------------------------------------------- */

.colonne { padding-block: var(--sezione-s); }
.colonne__griglia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7) var(--gutter);
  padding-top: var(--s-6);
  border-top: 1px solid var(--filo);
}
@media (max-width: 47.99rem) { .colonne__griglia { grid-template-columns: 1fr; } }
.colonna__testa {
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--filo);
}
.colonna__indirizzo { font-style: normal; color: var(--c-ombra); }
.colonna .testo { color: var(--c-ombra); }

/* ---- Blocco "da completare" --------------------------------------------
   Deve leggersi come una nota di cantiere, non come contenuto finito.      */

.attesa-blocco { padding-block: var(--sezione-s); }
.in-attesa {
  padding: var(--s-5);
  border: 1px dashed var(--c-pietra);
  background: var(--c-latte);
  font-size: var(--t-s);
  color: var(--c-ombra);
  max-width: 62ch;
}
.in-attesa strong { color: var(--c-inchiostro); }