/* ============================================================
   MutuoClick — Blog (listing, articolo, commenti)
   Stili adattati al DS (css/tokens.css). Nessuna dipendenza esterna.
   ============================================================ */

/* -------------------------------------------------- Intestazione listing */
.blog-head { max-width: var(--container-md); margin: 0 auto 40px; text-align: center; }
.blog-head__title { font-size: var(--text-2xl); color: var(--color-primary); letter-spacing: var(--tracking-tight); }
.blog-head__intro { margin-top: 12px; color: var(--text-muted); }

/* -------------------------------------------------- Griglia articoli */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blog-card__media { display: block; }
.blog-card__media img { width: 100%; height: auto; display: block; }
.blog-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; }
.blog-card__title { font-size: var(--text-md); line-height: var(--leading-snug); }
.blog-card__title a { color: var(--text-strong); }
.blog-card__title a:hover { color: var(--color-primary); text-decoration: none; }
.blog-card__excerpt { font-size: var(--text-sm); color: var(--text-muted); }
.blog-card__more { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-link); margin-top: 2px; }

/* -------------------------------------------------- Meta (data) */
.blog-meta__date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.blog-meta__date svg { color: var(--color-accent-hover); }

/* -------------------------------------------------- Tag */
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.blog-tag {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* -------------------------------------------------- Articolo singolo */
.blog-post__inner { max-width: var(--container-md); margin: 0 auto; }
.blog-post__head { text-align: center; margin-bottom: 28px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.blog-post__title { font-size: var(--text-2xl); color: var(--color-primary); letter-spacing: var(--tracking-tight); }
.blog-post__subtitle { font-size: var(--text-md); color: var(--text-muted); }
.blog-post__cover { margin: 0 0 28px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.blog-post__cover img { width: 100%; height: auto; display: block; }
.blog-post__content { font-size: var(--text-base); }

.blog-post__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}

/* -------------------------------------------------- Commenti */
.post-comments { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border-subtle); }
.post-comments__title { font-size: var(--text-lg); color: var(--text-strong); margin-bottom: 12px; }
.post-comments__note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--surface-sunken);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

/* -------------------------------------------------- Responsive */
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-post__nav { flex-direction: column; }
}