/* Contenitore principale (Stessi margini dell'About) */
.works-page {
  padding: 12rem 10% 0rem;
  max-width: 1800px;
  margin: 0 auto;
}

/* 1. Stile Hero (Replicato da About) */
.works-hero {
  text-align: center;
  margin-top: 10rem;
  margin-bottom: 5rem;
  display: flex;
  justify-content: center;
}

.works-hero h1 {
  /* Peso leggero e dimensione proporzionata all'About[cite: 2] */
  font-weight: 200;
  font-size: clamp(1.5rem, 4vw + 1rem, 3.5rem);
  max-width: 30ch;
  margin: 0;
}

/* 2. Griglia Progetti */
.works-section {
  margin-bottom: 10rem;
}

.works-grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 colonna */
  gap: 1rem; /* Gap verticale su mobile */
}

@media (min-width: 768px) {
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    /* Row-gap ampio per il testo, Column-gap stretto (0.5rem) come la nav-bar */
    gap: 1rem 0.5rem;
  }
}

/* 3. Immagini formato 3:4 */
.work-item {
  text-decoration: none;
  display: block;
}

.work-image-wrapper {
  width: 100%;
  aspect-ratio: 3 / 4; /* Formato rettangolare verticale */
  background-color: #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
}

.work-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* .work-item:hover .work-image-wrapper img {
  transform: scale(1.04);
} */

/* 4. Testi Progetto (Regole delle Skill) */
.work-info {
  margin-top: 1rem; /* Stacca il blocco dall'immagine */
}

.work-info h4 {
  color: #111;
}

.work-info p {
  line-height: 1rem; /* Regola line-height delle skill[cite: 2] */
  color: #111;
  margin: 0;
}

/* RESPONSIVE */
/* TABLET & MOBILE */
@media (max-width: 1024px) {
  /* Kills the section margin entirely so it cannot interfere */
  .works-section {
    margin-bottom: 0 !important;
  }

  /* Forces the exact same tablet bottom padding as the About page */
  .works-page {
    padding-bottom: 8rem !important;
  }
}

/* STRICTLY MOBILE */
@media (max-width: 767px) {
  /* Forces the exact 4rem bottom padding and 6rem top padding we set on the About page */
  .works-page {
    padding-top: 6rem !important;
    padding-bottom: 4rem !important;
  }

  /* Mirrors the exact About page hero spacing */
  .about-hero {
    margin-top: 10rem !important;
    margin-bottom: 10rem !important;
  }
}