/* ============================================================
   PAGINA: BLOG (indice /blog/)
   Namespace: .blog-hero, .sec-blog (riusa css/sections/blog.css)
   ============================================================ */

body {
  padding-top: 104px;
}

/* ---- Banner di pagina ---- */
.blog-hero {
  padding-block: var(--sp-16) var(--sp-12);
  text-align: center;
}

.blog-hero__breadcrumb {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--c-text-sec);
  margin-bottom: var(--sp-6);
}

.blog-hero__breadcrumb a {
  color: var(--c-blue);
  font-weight: 500;
}

.blog-hero__breadcrumb a:hover {
  text-decoration: underline;
}

.blog-hero h1 {
  max-width: 720px;
  margin-inline: auto;
}

.blog-hero__lead {
  max-width: 640px;
  margin: var(--sp-4) auto 0;
  color: var(--c-text-sec);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.blog-hero .nastro {
  width: 80px;
  height: 4px;
  margin: var(--sp-6) auto 0;
  border-radius: 2px;
}

/* ---- Griglia blog (pagina indice, più respiro della teaser homepage) ---- */
.blog-index {
  padding-block: 0 var(--sp-24);
}

.blog-index .sec-blog__grid {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .blog-index .sec-blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-index .sec-blog__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}