/* ============================================================
   BODY
============================================================ */
body {
  padding-top: 10rem; /* 160px → 10rem */
  background-color: var(--white);
  font-family: var(--font-family);
  min-height: 100vh;
  line-height: var(--line-height-default);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   WRAPPER PRINCIPALE — allineato all’header
============================================================ */

/* === IMMAGINE PRINCIPALE (HERO) === */ 
.hero { 
  display: block; /* rimuove spazi indesiderati */ 
  width: 100%; /* immagine sempre responsive */ 
  max-width: 600px; /* limite estetico */ 
  margin: 1.5rem auto 1.5rem; /* centra + margine sopra e sotto */ 
  border-radius: var(--radius-m); /* angoli morbidi */ 
  object-fit: cover; 
}

.title {
  font-size: var(--fs-lg);
  text-align: center;
  color: var(--darkslategray);
  margin-bottom: 1.5rem; /* spazio tra titolo e immagine */
}

/* ============================================================
   NUMERI SEPARATORI
============================================================ */
.number-01,
.number-02,
.number-03 {
  width: 3.125rem;   /* 50px */
  height: 3.125rem;
  border-radius: 50%;
  color: var(--grey-300);
  border: 0.125rem solid var(--grey-300);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-regular);
  position: relative;
  margin: 5rem auto 3.5rem;
}

.number-01::before,
.number-02::before,
.number-03::before {
  content: "";
  width: 0.125rem; /* 2px */
  height: 3.75rem; /* 60px */
  background: var(--grey-300);
  position: absolute;
  top: -3.75rem;
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================================
   LAYOUT PRINCIPALE (DESKTOP)
   - 4 colonne uguali
   - 3 colonne per il mosaico
   - 1 colonna per l’article
   ============================================================ */
.project-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colonne identiche */
  gap: 2rem;
  max-width: 70.625rem; /* 1130px */
  margin: 0 auto;
  padding: 1rem;
}

/* ============================================================
   MOSAICO FOTO (Pinterest vero)
   - column-count mantiene la disposizione originale
   - NON usare display:grid qui, altrimenti cambia il mosaico
   ============================================================ */
.project-gallery {
  grid-column: 1 / 4; /* occupa le prime 3 colonne */
  column-count: 3;    /* 🔥 mosaico originale */
  column-gap: 1.5rem;
}

.project-gallery img {
  width: 100%;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  display: block;
  break-inside: avoid; /* 🔥 impedisce spezzature */
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* ombra leggera */
}

/* ============================================================
   ARTICLE (colonna 4)
   - NON deve allungarsi come le foto
   - deve distribuire titolo + testo verticalmente
   ============================================================ */
.storytelling {
  grid-column: 4 / 5;          /* 4ª colonna */
  align-self: start;           /* resta allineato in alto */
  height: auto;                /* NON si allunga come il mosaico */
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--white);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);

  /* distribuisce titolo + testo su tutta l’altezza disponibile */
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  max-width: clamp(18rem, 22vw, 22rem);
}

.storytelling h3 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--font-weight-medium);
  color: var(--darkslategray);
  margin-bottom: clamp(0.25rem, 0.5vw, 0.5rem);
}

.storytelling p {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-light);
  color: var(--darkslategray);
  text-align: justify;
}

/* ============================================================
   RESPONSIVE TABLET (max 1100px)
   - layout a 1 colonna
   - l’article va sopra
   - il mosaico passa a 2 colonne
   ============================================================ */
@media (max-width: 68.75rem) {  /* 1100px */

  .project-layout {
    grid-template-columns: 1fr; /* una sola colonna */
  }

  .storytelling {
    grid-column: 1 / 2;
    order: 1; /* article sopra */
    max-width: 100%;
  }

  .project-gallery {
    grid-column: 1 / 2;
    order: 2; /* foto sotto */
    column-count: 2; /* mosaico a 2 colonne */
  }
}

/* ============================================================
   RESPONSIVE MOBILE (max 700px)
   - le foto in una sola colonna
   ============================================================ */
@media (max-width: 43.75rem) { /* 700px */

  .project-gallery {
    column-count: 1; /* tutte le foto una sotto l’altra */
  }

  .storytelling {
    grid-template-columns: 1fr; /* sezione e dettaglio impilati */
    max-width: 100%; 
  }
  
}

/* ============================================================
   TRE ELEMENTI: FORNELLO - CEMENTINA - ALIMENTATORE (SU TUTTI I DISPOSITIVI)
   - tre colonne con foto, misure e descrizione
   ============================================================ */

.project-layout--furniture {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonne */
  gap: var(--space-xl);
  max-width: 900px;
  margin: 0 auto;
}

.burner,
.cementina,
.feeder {
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--white);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

/* Immagini interne */
.burner figure,
.cementina figure,
.feeder figure {
  width: 100%;                 /* Immagini responsive */
}

.burner figcaption,
.cementina figcaption,
.feeder figcaption {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-light);
  text-align: justify;
}

.burner figcaption {
  color: var(--orange);
}

.cementina figcaption {
  color: var(--wakatake-iro);
}

.feeder figcaption {
  color: var(--darkslategray);
}

.burner p,
.cementina p,
.feeder p {
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-light);
  color: var(--darkslategray);
  text-align: justify;
}

@media (max-width: 43.75rem) { /* 700px */
  .project-layout--furniture {
    grid-template-columns: 1fr;
    max-width: 300px; /* o qualsiasi larghezza ti piaccia */
    margin: 0 auto;
  }
}


/* ============================================================
   STEEL + TYLES (due box affiancati)
============================================================ */

.project-layout--steel-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonne uguali */
  max-width: 68.75rem;
  gap: var(--space-xl);
  margin: 0 auto;
  justify-content: center;
  align-items: start;
  margin-bottom: var(--space-xxl);
}

.project-steel,
.project-tiles {
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--white);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Immagini interne */
.project-steel img,
.project-tiles img {
  width: 100%;                 /* Immagini responsive */
}

.project-steel figcaption,
.project-tiles figcaption {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-light);
  text-align: justify;
}

.project-steel p,
.project-tiles p {
  font-size: var(--fs-xs);
  font-weight: var(--font-weight-light);
  color: var(--darkslategray);
  text-align: justify;
}

/* Responsive mobile: impilati */
@media (max-width: 43.75rem) { /* 700px */
  .project-layout--steel-tiles {
    grid-template-columns: 1fr; /* una colonna */
  }
}