/* =========================================================================
   Home — la fotografia E la pagina.

   Cambio di rotta: niente immagini dentro un riquadro su fondo bianco con
   margini larghi. Le fotografie vanno a sangue, occupano il viewport, e il
   testo ci sta sopra in bianco.
   ========================================================================= */

.eroe {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: #16110C;
}
.eroe__sfondo { position: absolute; inset: 0; z-index: 0; }
/* <picture> e inline e con altezza automatica: senza questo, height:100%
   sull immagine si risolve contro un contenitore alto quanto la foto e
   l eroe resta mezzo vuoto. */
.eroe__sfondo picture { display: block; width: 100%; height: 100%; }
.eroe__sfondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 34%;
  will-change: transform;
}
.eroe__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(14,10,7,0.84) 0%, rgba(14,10,7,0.36) 34%, rgba(14,10,7,0) 64%),
    linear-gradient(to right, rgba(14,10,7,0.52) 0%, rgba(14,10,7,0) 56%);
}
.eroe__corpo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0 var(--margine) clamp(3rem, 1rem + 6vw, 7rem);
  color: #fff;
}
.eroe__occhiello { display: block; margin-bottom: var(--s-5); color: rgba(255,255,255,0.72); }
.eroe__titolo {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 0.9rem + 8.2vw, 8.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 16ch;
  margin: 0;
}
.eroe__titolo em { font-style: italic; }
.eroe__coda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) var(--s-7);
  margin-top: clamp(1.5rem, 3vw, 3rem);
}
.eroe__nota { max-width: 34ch; font-size: var(--t-s); line-height: 1.55; color: rgba(255,255,255,0.78); }

.pillola {
  display: inline-flex;
  align-items: center;
  min-height: 2.875rem;
  padding: 0 var(--s-6);
  border-radius: 999px;
  background: #fff;
  color: var(--c-inchiostro);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: background var(--d-corta) var(--e-out), color var(--d-corta) var(--e-out);
}
.pillola:hover { background: var(--c-inchiostro); color: #fff; }
.pillola--vuota { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.55); }
.pillola--vuota:hover { background: #fff; color: var(--c-inchiostro); }

.pannelli { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; }
@media (max-width: 47.99rem) { .pannelli { grid-template-columns: 1fr; } }

.pannello {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 62svh;
  isolation: isolate;
  background: #16110C;
}
.pannello img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1600ms var(--e-out);
}
.pannello:hover img { transform: scale(1.045); }
.pannello::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(14,10,7,0.8) 0%, rgba(14,10,7,0.16) 46%, rgba(14,10,7,0) 72%);
}
.pannello__corpo { position: relative; z-index: 2; padding: clamp(1.75rem, 3vw, 3.5rem); color: #fff; }
.pannello__titolo {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3.5rem);
  line-height: 1.02;
  margin-bottom: var(--s-5);
}
.pannello__titolo em { font-style: italic; }

/* ---- Catalogo: fondo appena caldo, non bianco clinico ------------------- */

.vetrina { background: var(--c-latte); padding-block: var(--sezione); }
.vetrina__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  margin-bottom: var(--sezione-s);
  border-bottom: 1px solid var(--filo);
}
.vetrina__titolo { font-size: var(--t-xl); line-height: var(--lh-media); }
.vetrina__griglia { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-8) var(--gutter); }
@media (max-width: 74.99rem) { .vetrina__griglia { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 47.99rem)  { .vetrina__griglia { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-7) var(--gutter); } }

.scheda__riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-4);
  margin-top: var(--s-4);
  border-top: 1px solid var(--filo);
}
.scheda__prezzo { font-size: var(--t-s); color: var(--c-ombra); font-variant-numeric: tabular-nums; }
.scheda__prezzo del { display: none; }

/* ---- Fascia a sangue ---------------------------------------------------- */

.fascia {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 84svh;
  overflow: hidden;
  isolation: isolate;
  background: #16110C;
}
.fascia > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.fascia::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(14,10,7,0.78) 0%, rgba(14,10,7,0.3) 54%, rgba(14,10,7,0.05) 100%);
}
.fascia__corpo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--margine);
  color: #fff;
}
.fascia__titolo {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1rem + 4.4vw, 5rem);
  line-height: 1;
  max-width: 15ch;
  margin-block: var(--s-4) var(--s-5);
}
.fascia__titolo em { font-style: italic; }
.fascia__testo { max-width: 38ch; color: rgba(255,255,255,0.8); margin-bottom: var(--s-6); }

/* ---- Autrice ------------------------------------------------------------ */

.autrice { padding-block: var(--sezione); }
.autrice__griglia { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; }
.autrice__ritratto { grid-column: 1 / span 5; margin: 0; }
.autrice__ritratto img { width: 100%; height: auto; }
.autrice__testo { grid-column: 7 / span 5; }
.autrice__nome { font-size: var(--t-xxl); line-height: 1.02; margin-block: var(--s-4) var(--s-5); }
.autrice__nome em { font-style: italic; }
.autrice__testo .testo { color: var(--c-ombra); margin-bottom: var(--s-6); }

/* Segnaposto dichiarato: non si finge una fotografia che non abbiamo. */
.ritratto-mancante {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: var(--s-6);
  background: var(--c-nebbia);
  border: 1px dashed var(--c-pietra);
  text-align: center;
  color: var(--c-ombra);
  font-size: var(--t-s);
}

@media (max-width: 61.99rem) {
  .autrice__ritratto { grid-column: 1 / -1; }
  .autrice__testo { grid-column: 1 / -1; margin-top: var(--s-7); }
}

/* ---- Contatto ----------------------------------------------------------- */

.contatto { padding-block: var(--sezione); }
.contatto__griglia { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.contatto__griglia > h2 { grid-column: 1 / span 5; }
.contatto__dati { grid-column: 7 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.contatto__dati .testo { color: var(--testo-2); }
.contatto__grande { padding-bottom: var(--s-2); border-bottom: 1px solid var(--filo); transition: border-color var(--d-corta) var(--e-out); }
.contatto__grande:hover { border-bottom-color: currentColor; }
@media (max-width: 61.99rem) {
  .contatto__griglia > h2 { grid-column: 1 / -1; }
  .contatto__dati { grid-column: 1 / -1; margin-top: var(--s-6); }
}

/* ---- Testa di blocco, comune a famiglie e vetrina ----------------------- */

.blocco__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  margin-bottom: var(--sezione-s);
  border-bottom: 1px solid var(--filo);
}
.blocco__titolo { font-size: var(--t-xl); line-height: var(--lh-media); }

/* ---- Famiglie: ingresso diretto al catalogo ----------------------------- */

.famiglie { padding-block: var(--sezione) var(--sezione-s); }
.famiglie__griglia {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}
@media (max-width: 47.99rem) { .famiglie__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.famiglia { display: block; }
.famiglia__cornice {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-nebbia);
}
.famiglia__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--e-out);
}
.famiglia:hover .famiglia__foto { transform: scale(1.045); }
.famiglia__riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-4);
  margin-top: var(--s-4);
  border-top: 1px solid var(--filo);
}
.famiglia__nome {
  font-family: var(--f-display);
  font-size: var(--t-l);
  line-height: 1;
}
.famiglia__conto {
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ombra);
  white-space: nowrap;
}

/* ---- Coda della vetrina ------------------------------------------------- */

.vetrina__coda {
  display: flex;
  justify-content: center;
  margin-top: var(--sezione-s);
}
.pillola--scura { background: var(--c-inchiostro); color: #fff; }
.pillola--scura:hover { background: transparent; color: var(--c-inchiostro); box-shadow: inset 0 0 0 1px var(--c-inchiostro); }

.fascia__occhiello { color: rgba(255, 255, 255, 0.65); }

/* ---- Fascia con testo a destra ------------------------------------------
   La fotografia dell'atelier ha Silvia al centro-sinistra e non si puo
   spostare: l'originale e 4:3, e un ritaglio 16:9 taglia solo in altezza.
   Quindi si sposta il testo, non la foto. Alterna anche il ritmo della
   pagina rispetto alle altre fasce.                                        */

.fascia--destra::after {
  background: linear-gradient(to left, rgba(14,10,7,0.8) 0%, rgba(14,10,7,0.34) 50%, rgba(14,10,7,0.04) 100%);
}
.fascia--destra .fascia__corpo {
  display: flex;
  justify-content: flex-end;
}
.fascia--destra .fascia__interno { max-width: 42ch; text-align: right; }
.fascia--destra .fascia__titolo { margin-left: auto; }
.fascia--destra .fascia__testo { margin-left: auto; }

@media (max-width: 47.99rem) {
  .fascia--destra .fascia__corpo { justify-content: flex-start; }
  .fascia--destra .fascia__interno { text-align: left; }
  .fascia--destra .fascia__titolo,
  .fascia--destra .fascia__testo { margin-left: 0; }
}