/* ============================================================
   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: 400px; /* limite estetico */ 
  margin: 1.5rem auto 7.5rem; /* centra + margine sopra e sotto */ 
  border-radius: var(--radius-xl); /* angoli morbidi */ 
  object-fit: cover; 
}

/* ============================================================
   NUMERI SEPARATORI
============================================================ */
.number-01,
.number-02 {
  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: 2rem auto 1.5rem;
}

.number-01::before,
.number-02::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;
}

/* ============================================================
   TRE ELEMENTI: i love architecture (DESKTOP)
   - 3 colonne uguali
============================================================ */

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

.project-love {
  grid-column: 1 / 4; /* occupa le prime 3 colonne */
  column-count: 3;    /* 🔥 mosaico originale */
  column-gap: var(--space-4xl);
  max-width: 900px;
  margin: 0 auto;
}

.project-love figcaption {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-xxl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: var(--color-cotto);
  text-align: center;
}

@media (max-width: 68.75rem) { /* 1100px */
  .project-layout--love {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 43.75rem) { /* 700px */
  .project-layout--love {
    grid-template-columns: 1fr;
  }

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

/* ============================================================
   TRE ELEMENTI: LOGO PAINTING, LOGO SKETCHING, LOGO DRAWING (DESKTOP)
   - 3 colonne uguali
============================================================ */

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

.project-lamps {
  grid-column: 1 / 4; /* occupa le prime 3 colonne */
  column-count: 3;    /* 🔥 mosaico originale */
  column-gap: var(--space-md);
  max-width: 1130px;
  margin: 0 auto;
}

.project-lamps img {
  width: 100%;
  margin-bottom: var(--space-xs);
  display: block;
  break-inside: avoid; /* 🔥 impedisce spezzature */
  object-fit: cover;
  border-radius: var(--radius-m);
}

.project-lamps figure {
  width: 100%; 
}

.project-lamps figcaption {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-light);
  text-align: right;
}

@media (max-width: 68.75rem) { /* 1100px */
  .project-layout--lamp {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 43.75rem) { /* 700px */
  .project-layout--lamp {
    grid-template-columns: 1fr;
  }

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