/* ============================================================
   Il Caffettino — breaking.css
   Pagina "Breaking news" (Figma 835:2429 · 912:1500 mobile).
   ============================================================ */

/* ---------- Hero ---------- */
.b-hero {
  position: relative;
  padding: 48px var(--container-pad) 56px;
  background: var(--color-bg-inverse);
  overflow: hidden;
}
.b-hero__texture {
  position: absolute;
  inset: 0;
  background: url('../img/archivio-hero-texture.jpg') center / cover no-repeat;
  opacity: 0.43;
  pointer-events: none;
}
.b-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}
.b-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-accent);
}
/* Pallino che pulsa: è "in tempo reale" */
.b-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  animation: b-pulse 1.8s ease-in-out infinite;
}
@keyframes b-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
  .b-hero__dot { animation: none; }
}
.b-hero__title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
}
.b-hero__lead {
  max-width: 640px;
  font-size: 1rem;
  line-height: 1.6;
  color: #bdbfc7;
}

/* ---------- Chips per argomento ---------- */
.b-filtri {
  padding: 32px var(--container-pad) 0;
  background: var(--color-bg-canvas);
}
.b-filtri__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ---------- Articoli ---------- */
.b-articoli {
  padding: 32px var(--container-pad) 56px;
  background: var(--color-bg-canvas);
}
.b-articoli__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Articolo in evidenza */
.b-featured {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.b-featured__media {
  position: relative;
  display: block;
  height: 220px;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  overflow: hidden;
}
.b-featured__media img,
.b-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease-out);
}
.b-featured:hover .b-featured__media img,
.b-card:hover .b-card__media img { transform: scale(1.03); }
.b-featured__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.b-featured__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.b-featured__cat { color: var(--color-text-secondary); }
.b-featured__title {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.b-featured__title a:hover,
.b-card__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.b-featured__lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.b-featured__meta,
.b-card__meta {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.b-featured__cta {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.b-featured__cta:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Griglia delle altre */
.b-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.b-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.b-card__media {
  position: relative;
  display: block;
  height: 197px;
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  overflow: hidden;
}
.b-card__cat { color: var(--color-text-secondary); }
.b-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.24;
  color: var(--color-text-primary);
}
.b-card__lead {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ============================================================
   DESKTOP (≥1024) — frame 835:2429
   ============================================================ */
@media (min-width: 1024px) {
  .b-hero { padding: 190px var(--container-pad) 120px; }
  .b-hero__title { font-size: 4rem; }
  .b-hero__lead { font-size: 1.25rem; }

  .b-filtri { padding: 40px var(--container-pad) 8px; }
  .b-articoli { padding: 48px var(--container-pad) 88px; }
  .b-articoli__inner { gap: 56px; }

  /* In evidenza: media a sinistra, testo a destra */
  .b-featured {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
  .b-featured__media {
    width: 640px;
    height: 400px;
    flex-shrink: 0;
  }
  .b-featured__body { flex: 1; min-width: 0; gap: 14px; }
  .b-featured__title { font-size: 2.5rem; }

  .b-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
  .b-card__media { height: 228px; }
}

/* ===========================================================================
   Caffettino weekend — l'archivio della rubrica video (Simone 01/09).
   Riusa hero, card in evidenza e griglia di questa pagina: cambia solo il
   badge play, che qui ci vuole perché i recap sono video.
   ======================================================================== */
.pagina-weekend .b-featured__media,
.pagina-weekend .b-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagina-weekend .b-hero__eyebrow .dot {
  width: 8px;
  height: 8px;
}