/* GRID DELLE CARD */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

/* CARD */
.project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* WRAPPER IMMAGINE */
.project-image {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
}

/* IMMAGINE */
.project-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* immagine intera, proporzionata */
}

/* TITOLO ELEGANTE, STAMPATELLO, CENTRATO */
.project-card h3 {
  margin: 0 0 0.5rem 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  text-align: center;
  text-transform: uppercase;
  color: #1a1a1a;
  line-height: 1.2;

  /* Altezza minima per forzare due righe */
  min-height: 4.3rem;  /* line-height * font-size * 2 righe */
  overflow: hidden;     /* taglia il testo se troppo lungo */
}

.project-card h3:hover {
  color: #3a3a3a;   /* leggero scurimento al passaggio */
  transform: scale(1.03);
}

/* TESTO PROGETTO (CLAMP SICURO) */
.project-description {
  flex-grow: 1;
  overflow: hidden;
  max-height: 4.5em; /* ~3 righe */
  text-align: justify;

  color: #4a4a4a; /* grigio medio elegante */
  font-family: 'Poppins', 'Helvetica Neue', sans-serif;
  font-size: 0.95rem;
  
  margin-top: 0.5rem;  /* separazione dal titolo */
}



/* CTA / LINK SEMPRE IN BASSO, CENTRATO */
.project-card a {
  margin-top: auto;           /* mantiene il link in basso */
  align-self: right;         /* 🔑 centra orizzontalmente */
  text-decoration: none;
  font-weight: 600;
  color: #0d6efd;             /* blu elegante, sobrio */
  transition: color 0.3s ease;
}

.project-card a:hover {
  color: #084298; /* blu più scuro al passaggio */
}

/* SOLO immagine Costa Poetica */
.costapoetica-image img {
  max-height: 600px; /* più grande delle altre card */
  object-fit: contain;
}