/* ============================================================
   AGORÀ — pulizia grafica della home (livello aggiuntivo, caricato per ultimo).
   Obiettivo: meno rumore, gerarchia chiara, testi valorizzati.
   Stessi colori, font e identità del sito; cambiano spazi, bordi e scale.
   Per tornare allo stile precedente basta togliere il <link> da index.html.
   Revisione 10/10/2026: hero a due colonne, articoli in layout editoriale,
   rassegna a colonna unica con pezzo principale, «In breve» (ex bollettino),
   mobile a schede.
   ============================================================ */

:root { --ritmo: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Navigazione: più respiro, meno urlato ---------- */
.nav-links { font-size: .78rem; letter-spacing: .06em; gap: .3rem 1.4rem; }
.nav-links a { padding: .35rem 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.nav-links a:hover { border-bottom-color: var(--cobalt); }
.badge-new { display: none; }

/* ---------- Bottoni ---------- */
.btn { letter-spacing: .08em; padding: .85rem 1.5rem; font-size: .8rem; border-radius: 10px; }

/* ---------- Hero: compatto, leggibile, subito chiaro cos'è il sito ---------- */
.hero { border-bottom: none; background: var(--paper); }
.hero-inner { border-left: none; border-right: none; padding: clamp(2.5rem, 6vw, 4.5rem) 2rem clamp(1.8rem, 4vw, 2.8rem); }
.hero .kicker { margin-bottom: 1rem; font-size: .75rem; letter-spacing: .1em; }
h1.display { font-size: clamp(2.2rem, 5.4vw, 3.8rem); line-height: 1.08; letter-spacing: -.02em; max-width: 18ch; margin-bottom: 1.2rem; }
.hero p.lead { font-size: 1.15rem; line-height: 1.65; max-width: 40rem; color: #4a4a4a; }
.hero-actions { margin-top: 1.8rem; gap: .8rem; }

/* ---------- Hero: due colonne su schermo largo (testo + ultimo articolo) ---------- */
.hero:not(.hero-con-ultimo) .meta-grid { display: none; }
.meta-grid { display: grid; grid-template-columns: minmax(0, 1fr); border: none; background: none; max-width: none; }
.meta-grid .meta-cell#metaFile, .meta-grid .meta-cell#metaEvento { display: none; }
.meta-cell#metaArticolo {
  display: flex; flex-direction: column; gap: .7rem; width: 100%; max-width: none; margin: 0;
  padding: 1.6rem 1.7rem; background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  border-right: 1px solid var(--line); cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.meta-cell#metaArticolo:hover { border-color: #cfcbc0; box-shadow: 0 8px 22px rgba(15,23,42,.07); }
.meta-cell#metaArticolo .tag { margin: 0; color: var(--cobalt); }
.meta-cell#metaArticolo h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; font-weight: 900; }
.meta-cell#metaArticolo::after { content: 'Leggi l\2019 articolo →'; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); }
@media (min-width: 1000px) {
  .hero.hero-con-ultimo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 3rem; align-items: end; max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
  .hero.hero-con-ultimo .hero-inner { padding-left: 0; padding-right: 0; margin: 0; max-width: none; }
  .hero.hero-con-ultimo .meta-grid { padding-bottom: clamp(1.8rem, 4vw, 2.8rem); }
}
@media (max-width: 999px) {
  .hero.hero-con-ultimo .meta-grid { padding: 0 1.2rem 1.6rem; max-width: 1240px; margin: 0 auto; }
}

/* ---------- Sezioni: niente rombi, niente righe e sfondi alternati ---------- */
section.block { padding: var(--ritmo) 0; border-bottom: none; background: var(--paper); }
section.block:nth-of-type(even) { background: var(--paper); }
section.block:not(:first-of-type)::before { display: none; }
section.block + section.block { border-top: 1px solid var(--line); }
section.block.pub-instream { padding: 1.5rem 0; border-top: none; }

.section-head { margin-bottom: 1.6rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); align-items: baseline; }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.01em; }
.section-head .meta { font-size: .72rem; letter-spacing: .08em; }

/* ---------- Allineamento: intestazioni e contenuti sulla stessa colonna ---------- */
section.block .wrap[style] { padding-left: 2rem !important; padding-right: 2rem !important; }

/* ---------- Filtro categorie: chip invece di radio button ---------- */
#homeFiltroCategorie { gap: .5rem; margin: 0 0 1.8rem; }
#homeFiltroCategorie label { padding: .45rem .95rem; background: var(--white); transition: background .15s, color .15s, border-color .15s; position: relative; }
#homeFiltroCategorie label:hover { border-color: var(--ink); }
#homeFiltroCategorie input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0 !important; pointer-events: none; }
#homeFiltroCategorie label:has(input:checked) { background: var(--ink); color: var(--white); border-color: var(--ink); }
#homeFiltroCategorie label:has(input:focus-visible) { outline: 2px solid var(--cobalt); outline-offset: 2px; }

/* ---------- Articoli: layout editoriale ----------
   Un pezzo in evidenza + due secondari a fianco, poi colonne "da giornale".
   Solo CSS: l'ordine è quello già dato dal sito (il più recente per primo). */
.articoli-grid { display: flex; flex-direction: column; gap: 0; border-top: none; }
.articoli-grid > .articolo-card {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: .45rem .8rem;
  padding: 1.5rem 0; min-height: 0; background: none; border: none; border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none; transform: none;
}
.articoli-grid > .articolo-card:hover { background: none; box-shadow: none; transform: none; }
.articoli-grid > .articolo-card:hover h3 { color: var(--cobalt); }
.articoli-grid > .articolo-card h3, .articoli-grid > .articolo-card .excerpt, .articoli-grid > .articolo-card .author { flex: 0 0 100%; }
.articolo-card h3 { font-size: 1.28rem; line-height: 1.25; letter-spacing: -.005em; transition: color .15s; }
.articolo-card .excerpt { font-size: .95rem; color: #555; line-height: 1.6; -webkit-line-clamp: 2; flex: 0 0 100%; }
.articolo-card .author { font-size: .8rem; margin-top: .1rem; padding: 0; border: none; }

/* il primo: scheda in evidenza */
.articoli-grid > .articolo-card:first-child {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1.7rem 1.5rem; margin-bottom: 1.2rem;
}
.articoli-grid > .articolo-card:first-child:hover { border-color: #cfcbc0; box-shadow: 0 8px 22px rgba(15,23,42,.07); }
.articoli-grid > .articolo-card:first-child::before {
  content: 'In evidenza'; flex: 0 0 100%; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt);
}
.articoli-grid > .articolo-card:first-child h3 { font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.15; font-weight: 900; margin: .2rem 0 .3rem; }
.articoli-grid > .articolo-card:first-child .excerpt { font-size: 1.02rem; -webkit-line-clamp: 5; }

@media (min-width: 900px) {
  .articoli-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2.4rem; }
  .articoli-grid > .articolo-card { grid-column: span 4; }
  .articoli-grid > .articolo-card:first-child { grid-column: 1 / span 7; grid-row: 1 / span 2; margin-bottom: 0; padding: 2.1rem 2rem; align-content: flex-start; }
  .articoli-grid > .articolo-card:nth-child(2), .articoli-grid > .articolo-card:nth-child(3) { grid-column: 8 / span 5; }
  .articoli-grid > .articolo-card:nth-child(2) { border-top-color: var(--ink); }
  .articoli-grid > .articolo-card:nth-child(3) { padding-bottom: 0; }
  .articoli-grid > .articolo-card:nth-child(n+4) { margin-top: 1.2rem; }
}

/* ---------- Rassegna: colonna unica, tutto allineato a sinistra ---------- */
.doppio-binario { max-width: none; }
.doppio-binario > *, .rassegna-riga, .rassegna-corpo { min-width: 0; }
.rassegna-corpo { overflow-wrap: anywhere; }
.rassegna { max-width: none; }
.rassegna-header { border-bottom: 2px solid var(--ink); padding-bottom: .5rem; }
.rassegna-header h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.rassegna-riga, .rassegna-riga:nth-child(even) { flex-direction: row; gap: 1.4rem; padding: 1.5rem 0; align-items: flex-start; }
.rassegna-riga:nth-child(even) .rassegna-corpo { text-align: left; }
.rassegna-timbro { width: 72px; height: 72px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.rassegna-corpo h3 { font-size: 1.28rem; }
.rassegna-corpo .excerpt { opacity: .78; max-width: 62ch; }
.rassegna-lead, .rassegna-lead:nth-child(even) { flex-direction: column; align-items: stretch; gap: 1.1rem; padding: 1.6rem 0 1.9rem; }
.rassegna-lead .rassegna-timbro { width: 100%; height: 150px; border-radius: 14px; }
.rassegna-lead .rassegna-timbro svg { width: 90px; height: 90px; }
.rassegna-lead .rassegna-corpo h3 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); line-height: 1.2; }
.rassegna-lead .rassegna-corpo .excerpt { font-size: 1.02rem; opacity: .85; }
.rassegna-riga:focus-visible, .bollettino-riga:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; border-radius: 8px; }

/* ---------- «In breve» (ex Bollettino rapido) ---------- */
#bollettinoWrap:empty { display: none; }
.bollettino { max-width: none; margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem .3rem; }
.bollettino-header { border-bottom: 2px solid var(--ink); padding-bottom: .5rem; margin-bottom: 0; flex-wrap: wrap; }
.bollettino-header h2 { font-size: 1.5rem; }
.bollettino-lista { display: block; }
.bollettino-riga { display: block; padding: 1.1rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.bollettino-riga:last-child { border-bottom: none; }
.bollettino-meta { display: flex; align-items: center; gap: .5rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .35rem; }
.bollettino-punto { margin-top: 0; width: 7px; height: 7px; }
.bollettino-titolo { font-size: 1rem; line-height: 1.35; margin: 0; }
.bollettino-riga .perche-riguarda { margin-top: .6rem; padding: .1rem 0 .1rem .8rem; font-size: .84rem; line-height: 1.5; }
.bollettino-riga .perche-riguarda b { display: block; margin-bottom: .15rem; }
.bollettino-riga .perche-riguarda, .inbreve-estratto { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.inbreve-estratto { margin-top: .5rem; font-size: .85rem; color: var(--muted); line-height: 1.5; -webkit-line-clamp: 3; }
.inbreve-apri { display: inline-block; margin-top: .6rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cobalt); }
.bollettino-riga:hover .inbreve-apri { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 919px) {
  /* carosello orizzontale a schede */
  .bollettino { background: none; border: none; border-radius: 0; padding: 0; }
  .bollettino-header { padding-bottom: .5rem; }
  .bollettino-lista {
    display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: .9rem -1.2rem 0; padding: .1rem 1.2rem 1rem; scroll-padding-left: 1.2rem; scrollbar-width: none;
  }
  .bollettino-lista::-webkit-scrollbar { display: none; }
  .bollettino-riga, .bollettino-riga:last-child {
    flex: 0 0 78%; max-width: 330px; scroll-snap-align: start; background: var(--white);
    border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem; display: flex; flex-direction: column;
  }
  .inbreve-apri { margin-top: auto; padding-top: .7rem; }
}

.section-head + .indice-categorie, #storieBarWrap { margin-bottom: 1.4rem; }

/* ---------- Blocchi secondari più discreti ---------- */
#newsletter { padding: 2.2rem 0; }
#instagram { padding: 2rem 0; }
#instagram .section-head { display: none; }
#sondaggio .poll-card, #newsletter .wrap > * { max-width: 760px; }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  :root { --ritmo: 2.4rem; }
  section.block .wrap[style] { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
  .hero-inner { padding: 2rem 1.2rem 1.6rem; }
  h1.display { max-width: none; font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .hero p.lead { font-size: 1.05rem; }
  .hero-actions { gap: .6rem; }
  .hero-actions .btn { flex: 1 1 auto; min-height: 46px; }
  .meta-cell#metaArticolo { padding: 1.2rem; }
  .section-head { margin-bottom: 1.1rem; }
  #homeFiltroCategorie { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1.2rem 1.4rem; padding: 0 1.2rem .3rem; scrollbar-width: none; }
  #homeFiltroCategorie::-webkit-scrollbar { display: none; }
  #homeFiltroCategorie label { flex-shrink: 0; min-height: 40px; }
  .articoli-grid > .articolo-card:first-child { padding: 1.4rem 1.2rem; }
  .rassegna-riga, .rassegna-riga:nth-child(even) { flex-direction: row; gap: 1rem; }
  .rassegna-lead, .rassegna-lead:nth-child(even) { flex-direction: column; gap: 1rem; }
  .rassegna-timbro { width: 56px; height: 56px; }
  .rassegna-lead .rassegna-timbro { width: 100%; height: 110px; }
  .rassegna-lead .rassegna-timbro svg { width: 64px; height: 64px; }
  #notizie .hint { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .nav-links a, .meta-cell#metaArticolo, #homeFiltroCategorie label { transition: none; } }


/* data della rassegna: sempre a capo sotto il testo, mai oltre la colonna */
.rassegna-data { display: block; margin-top: .2rem; }
.rassegna-corpo { max-width: 100%; }

/* contenimento: nessuno scorrimento orizzontale della pagina (clip, non hidden: lo sticky di «In breve» resta valido) */
#notizie { overflow-x: clip; }
