/* ========================================
   FILE: feed.css
   DESCRIZIONE: Questo file gestisce il layout principale della pagina blog
   (la lista degli articoli) e lo stile delle singole "card" dei post, 
   incluse le immagini di copertina, i titoli, i metadati (data, categoria)
   e gli effetti al passaggio del mouse (hover).
   ======================================== */

/* --- FEED CONTAINER --- */
/* Il contenitore principale che centra e distanzia la lista dei post */
.feed-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

/* --- POST CARDS --- */
/* La singola scheda dell'articolo */
.post-card {
  background: var(--bg-color);
  border-radius: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Effetti di Hover: schiarisce/scurisce testo e immagine al passaggio del mouse */
.post-card:hover .post-image {
  opacity: 1;
}

.post-card:hover .post-title {
  color: var(--text-primary);
}

/* Immagine di anteprima del post */
.post-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 5px;
  transition: none;
}

/* Contenitore per il testo sotto l'immagine (titolo e metadati) */
.post-content {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Titolo dell'anteprima */
.post-title {
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  transition: color 0.3s ease;
}

/* Riga dei metadati (Categoria, Data, Tempo di lettura) */
.post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.post-category {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.9rem;
}

.post-date {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 700;
}

.post-read-time {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 700;
}

/* Allineamento interno tra icona e testo per le card */
.post-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 0.6rem; 
}

/* Stile e dimensione per gli SVG del feed */
.post-meta .meta-item svg {
  width: 16px;  
  height: 16px; 
  color: var(--text-primary);
}

/* ========================================
   RESPONSIVE (MOBILE)
   Adattamenti per schermi più piccoli (sotto i 768px)
   ======================================== */
@media (max-width: 768px) {
  
  /* Riduce la dimensione del titolo per schermi piccoli */
  .post-title {
    font-size: 0.9rem;
    font-weight: 650;
  }

  /* Riduce lo spazio tra titolo e metadati */
  .post-content {
    gap: 0.6rem;
  }

  /* Rimpicciolisce il testo dei metadati */
  .post-category,
  .post-date,
  .post-read-time {
    font-size: 0.7rem;
  }

  .post-meta {
    gap: 0.85rem;
  }

  /* Allineamento interno tra icona e testo per le card */
  .post-meta .meta-item {
    gap: 0.6rem; 
  }

  /* Stile e dimensione per gli SVG del feed */
  .post-meta .meta-item svg {
    width: 13px;  
    height: 13px; 
  }
}