/* ========================================
   FILE: article.css
   DESCRIZIONE: Questo file gestisce lo stile della vista del singolo articolo.
   Include l'hero section (titolo, metadati, immagine di copertina), 
   la formattazione del contenuto testuale (h2, p, pre, code) e i 
   divisori visivi.
   ======================================== */

/* --- ARTICLE HERO SECTION --- */
/* Contenitore principale della testata dell'articolo */
.article-hero {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 100px 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* Mantiene l'immagine centrata */
  gap: 1.5rem;
  margin-top: 0rem;
}

/* --- LINK BACK TO BLOG --- */
.back-to-blog-wrapper {
  width: 100%;
  margin-top: 10%;
  margin-bottom: 1rem;
}

.back-to-blog-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none; /* Rimuove la linea sotto il testo */
  transition: color 0.2s ease, transform 0.2s ease;
}

.back-to-blog-link:hover {
  color: var(--text-primary);
}

.back-to-blog-link:active {
  transform: translateX(-4px); /* Feedback visivo al click */
}

/* Barra superiore sopra il titolo con categoria e bottoni azione */
.article-top-bar {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  width: 100%;
  margin-bottom: 1.25rem;
}

/* Blocco di testo allineato a sinistra, largo quanto l'immagine */
.article-header-block {
  max-width: 943px;
  width: 45vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.article-category {
  color: var(--text-muted); 
  font-size: 1.1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.article-category:hover {
  color: var(--text-primary);
}

.article-title {
  font-size: 2.8rem;
  font-weight: 650;
  color: var(--text-primary);
  text-align: left;
  line-height: 1.15;
  margin: 0 0 1.5rem 0;
  text-wrap: balance;
}

/* --- ARTICLE METADATA --- */
.article-sub-meta {
  display: flex;
  align-items: center;
  gap: 1rem; /* Distanza fissa e uguale tra il blocco Data, Tempo e Autore */
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 2rem;
  flex-wrap: wrap; /* Permette di andare a capo su schermi molto stretti */
}

/* Contenitore per allineare perfettamente sull'asse orizzontale icona e testo */
.meta-item {
  display: flex;
  align-items: center;
  gap: 0.8rem; /* Spazio esatto tra l'icona SVG e il testo */
}

/* Icone SVG: 24x24 e colore primario */
.meta-item svg {
  width: 20px;
  height: 20px;
  color: var(--text-primary);
}

.article-date, 
.article-read-time {
  color: var(--text-primary);
  font-weight: 650;
}

/* Contenitore Autore */
.article-author {
  display: flex;
  align-items: center;
  gap: 0.8rem; /* Uguale al gap di .meta-item per perfetta simmetria visiva */
}

/* Immagine profilo dell'autore: 24x24 come gli SVG */
.author-pfp {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-light);
}

.author-name {
  font-weight: 650;
  color: var(--text-primary);
}

/* Sottotitolo / Riassunto dell'articolo */
.article-summary {
  font-size: 1.2rem;
  color: var(--text-secondary);
  text-align: left;
  line-height: 1.7;
  margin: 0 0 0 0;
  font-weight: 500;
}

/* --- DIVIDER --- */
/* Linea divisoria tra l'header e il contenuto vero e proprio */
.article-divider-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem auto 0;
}

.article-divider {
  width: 10%;
  max-width: 900px;
  height: 1px;
  background: var(--border-light);
}

.article-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* --- ARTICLE CONTENT (BODY) --- */
/* Stili applicati ai tag generati dentro l'articolo */
.article-content {
  max-width: 1000px;
  width: 48.5vw;
  margin: 2rem auto 0rem;
  padding: 0 2rem;
  text-align: left;
}

/* Nasconde eventuali H1 nel corpo del testo (per SEO è già nell'header) */
.article-content h1 {
  display: none;
}

.article-content h2 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
  text-align: left;
}

.article-content p {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  text-align: left;
  font-weight: 500;
}

.article-content img {
  max-width: 100%;
  border-radius: 0;
  margin: 2rem auto;
  display: block;
}

/* Stile per il codice in linea */
.article-content code {
  background: var(--code-bg);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  color: var(--checkbox-accent);
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
}

/* Stile per i blocchi di codice grandi */
.article-content pre {
  background: var(--code-bg);
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 2rem 0;
  border: 1px solid var(--border-color);
}

/* --- AUTHOR FOOTER LINKS --- */
.article-footer-links {
  max-width: 1000px;
  width: 48.5vw;
  margin: 2rem auto 0.5rem; 
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.footer-link-item {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--text-light);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  width: fit-content; /* L'hover si attiva solo sulla scritta, non su tutta la riga vuota */
  transition: transform 0.2s ease, color 0.2s ease;
}

.footer-link-item svg {
  width: 20px;
  height: 20px;
  color: var(--text-light); /* Icona grigina di default */
  transition: color 0.2s ease;
}

/* Effetto scorrimento a destra al passaggio del mouse */
.footer-link-item:hover {
  color: var(--text-primary);
  transform: translateX(6px); 
}

.footer-link-item:hover svg {
  color: var(--text-primary);
}

/* ========================================
   RESPONSIVE (MOBILE)
   Adattamenti per schermi più piccoli (sotto i 768px)
   ======================================== */
@media (max-width: 768px) {
  
  .article-hero {
    padding-top: 3rem;
    gap: 1.5rem;
  }

  /* Diamo un po' meno margine al tasto back su mobile per risparmiare spazio */
  .back-to-blog-wrapper {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
  }

  .back-to-blog-link {
    font-size: 0.9rem;
  }

  .article-header-block {
    width: 90vw;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .article-category {
    font-size: 0.85rem;
    font-weight: 600;
  }

  .article-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1rem;
  }

  /* --- METADATI MOBILE --- */
  .article-sub-meta {
    gap: 1rem; /* Distanza tra i blocchi data, tempo, autore */
    font-size: 0.75rem;
    margin-bottom: 1rem;
  }

  /* Riduciamo leggermente lo spazio interno e le icone per schermi piccoli */
  .meta-item {
    gap: 0.4rem; 
  }

  .meta-item svg {
    width: 15px;
    height: 15px;
  }

  .article-author {
    gap: 0.4rem;
  }

  .author-pfp {
    width: 19px;
    height: 19px;
  }

  .article-summary {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 0;
  }

  /* --- DIVIDER E CONTENUTO --- */
  .article-divider-section {
    gap: 1rem;
    margin-top: 1.5rem; 
    margin-bottom: 1.5rem;
  }

  .article-divider {
    width: 50%; 
  }

  .article-content {
    max-width: 100%;
    width: 90vw; /* Allineiamo perfettamente il testo alla larghezza dell'header */
    margin: 0rem auto 1rem;
    padding: 0; /* Togliamo il padding laterale perché stiamo usando 90vw */
  }

  .article-content h2 {
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
  }

  .article-content p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.2rem;
  }

  .article-content code {
    font-size: 0.85rem;
  }

  .article-content pre {
    padding: 1rem;
    margin: 1.5rem 0;
    font-size: 0.85rem;
  }

  /* --- AUTHOR FOOTER LINKS MOBILE --- */
  .article-footer-links {
    max-width: 100%;
    width: 90vw;
    margin: 1.5rem auto 0rem;
    padding: 0;
    gap: 1rem;
    margin-left: 2rem;
  }

  .footer-link-item {
    font-size: 0.95rem;
    color: var(--text-primary);
  }

  .footer-link-item svg {
    width: 18px;
    height: 18px;
    color: var(--text-primary);
  }
}