/* ============================================================
   BLOG — griglia articoli
   Namespace: .sec-blog
   NOTA sviluppatori: per aggiungere articoli, duplicare il
   blocco .sec-blog__card nella sezione blog.html o direttamente
   in index.html e aggiornare titolo, data, estratto, href.
   ============================================================ */

.sec-blog {
  background: var(--c-bg-alt);
}

.sec-blog__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

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

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

/* ---- Card articolo ---- */
.sec-blog__card {
  background: var(--c-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.sec-blog__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ---- Immagine articolo ---- */
.sec-blog__card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--c-bg-alt);
  position: relative;
}

.sec-blog__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.sec-blog__card:hover .sec-blog__card-img img {
  transform: scale(1.04);
}

/* Placeholder colore se non c'è immagine */
.sec-blog__card-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--placeholder-color, var(--c-blue)) 0%, color-mix(in srgb, var(--placeholder-color, var(--c-blue)) 60%, #000) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec-blog__card-img-placeholder svg {
  width: 48px;
  height: 48px;
  color: rgba(255, 255, 255, .35);
}

/* ---- Contenuto card ---- */
.sec-blog__card-body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}

.sec-blog__card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.sec-blog__card-cat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cat-color, var(--c-blue));
  padding: 2px 8px;
  background: color-mix(in srgb, var(--cat-color, var(--c-blue)) 12%, transparent);
  border-radius: 100px;
}

.sec-blog__card-date {
  font-size: 0.8rem;
  color: var(--c-text-sec);
}

.sec-blog__card-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
  transition: color var(--t-fast);
}

.sec-blog__card:hover .sec-blog__card-title {
  color: var(--c-blue);
}

.sec-blog__card-excerpt {
  font-size: 0.875rem;
  color: var(--c-text-sec);
  line-height: 1.65;
  flex: 1;
}

.sec-blog__card-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-blue);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  transition: gap var(--t-fast);
  margin-top: var(--sp-2);
}

.sec-blog__card-link:hover {
  gap: var(--sp-2);
}

/* ---- CTA vedi tutti ---- */
.sec-blog__footer {
  margin-top: var(--sp-10);
  text-align: center;
}