/* =====================================================================
   news.css — Stili specifici della pagina NEWS (concept outdoor)
   Riusa il design system di tokens.css + styles.css.
   Qui solo: barra filtri categoria e nota "Fase 2 CMS".
   NON modificare styles.css / tokens.css / main.js (condivisi).
   ===================================================================== */
@layer sections {

  /* ---- Barra filtri per categoria ---------------------------------- */
  .news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
  }
  .news-filters__label {
    font-size: var(--fs-300);
    font-weight: var(--fw-semi);
    color: var(--c-muted);
    margin-inline-end: var(--sp-2);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .news-filter {
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    color: var(--c-text-soft);
    font: inherit;
    font-size: var(--fs-300);
    font-weight: var(--fw-semi);
    line-height: 1;
    padding: 0.55rem 0.95rem;
    border-radius: var(--r-pill);
    box-shadow: var(--sh-sm);
    transition: background var(--t-med) var(--ease-out),
                color var(--t-med) var(--ease-out),
                border-color var(--t-med) var(--ease-out),
                transform var(--t-med) var(--ease-out);
  }
  .news-filter:hover {
    color: var(--c-ink);
    border-color: var(--c-green-400);
    transform: translateY(-1px);
  }
  .news-filter:focus-visible {
    outline: 3px solid var(--c-sky-400);
    outline-offset: 2px;
  }
  .news-filter[aria-pressed="true"] {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: #fff;
    box-shadow: var(--sh-brand);
  }

  /* Card nascosta dal filtro (no overflow / no salto di layout) */
  .card.is-hidden {
    display: none;
  }

  /* Messaggio "nessun risultato" (di norma mai visibile) */
  .news-empty {
    color: var(--c-text-soft);
    font-size: var(--fs-500);
    text-align: center;
    padding-block: var(--sp-6);
  }

  /* ---- Nota Fase 2 / CMS ------------------------------------------- */
  .news-note {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-sky-050, #eef6fc);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg, 16px);
    color: var(--c-text-soft);
    font-size: var(--fs-300);
  }
  .news-note svg {
    inline-size: 22px;
    block-size: 22px;
    flex: none;
    color: var(--c-sky-600, #1d6fa5);
    margin-top: 1px;
  }
  .news-note strong { color: var(--c-ink); }
}