/* ============================================================
   NomotecnIA · insights.css
   Agente C · blocchi editoriali di Normativa + hub/articoli Insights.
   SOLO nuove classi. Riusa tokens.css / base.css / styles.css.
   Nessuna ridefinizione di variabili o di classi esistenti.
   Superfici, spaziatura e motion ereditati dai token (regola premium).
   ============================================================ */

/* ============================================================
   1 · BLOCCHI EDITORIALI DELLE SCHEDE (E-E-A-T)
   Approfondimenti · Changelog datato · Autore · Fonti ufficiali
   ============================================================ */

/* ---- Approfondimenti (la scheda elenca gli articoli che la citano) ---- */
.appro-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-top: auto;
}
.appro-date {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--grigio-testo);
}

/* ---- Changelog datato ---- */
.changelog__list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: 0; }
.changelog__list li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--sp-2) var(--sp-4);
  align-items: baseline; padding: var(--sp-4) 0; border-bottom: 1px solid var(--linea);
}
.changelog__list li:last-child { border-bottom: 0; }
.changelog__date {
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--smeraldo-scuro); white-space: nowrap; font-weight: 700;
}
.changelog__list p { margin: 0; font-size: var(--fs-small); color: var(--grigio-testo); }
.changelog__list b { color: var(--inchiostro); }

/* ---- Autore accreditato (ritratto tipografico, senza foto) ---- */
.autore {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  margin-top: var(--sp-4); padding: var(--sp-5);
  border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--superficie);
  box-shadow: var(--shadow-sm);
}
.autore__ritratto {
  flex: none; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: .01em;
  color: var(--nero-giuridico);
  background: color-mix(in srgb, var(--oro-sigillo) 24%, var(--carta));
  border: 1px solid color-mix(in srgb, var(--oro-sigillo) 48%, transparent);
}
.autore__body { display: grid; gap: .3rem; }
.autore__nome { font-weight: 700; font-size: 1.05rem; color: var(--inchiostro); }
.autore__ruolo { font-size: var(--fs-small); color: var(--grigio-testo); }
.autore__link { font-size: var(--fs-small); font-weight: 600; color: var(--smeraldo-scuro); }
.autore__nota { font-size: var(--fs-mono); font-family: var(--font-mono); letter-spacing: .06em; color: var(--grigio-tenue); }

/* ---- Fonti ufficiali (elenco citabile) ---- */
.fonti-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); }
.fonti-list li {
  font-size: var(--fs-small); color: var(--grigio-testo);
  padding-left: 1.4rem; position: relative; overflow-wrap: anywhere; line-height: var(--lh-body);
}
.fonti-list li::before { content: "§"; position: absolute; left: 0; top: 0; color: var(--bronzo-testo); font-weight: 700; }
.fonti-list a { color: var(--smeraldo-scuro); word-break: break-word; }
.fonti-list b { color: var(--inchiostro); }

/* ============================================================
   2 · CATEGORIA (pill editoriale)
   ============================================================ */
.cat-pill {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--smeraldo-scuro);
  background: color-mix(in srgb, var(--smeraldo) 8%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--smeraldo) 26%, var(--linea));
  border-radius: var(--r-pill); padding: .3em .8em; white-space: nowrap;
}
.section--scuro .cat-pill {
  color: var(--smeraldo-bright);
  background: color-mix(in srgb, var(--smeraldo-bright) 12%, transparent);
  border-color: color-mix(in srgb, var(--smeraldo-bright) 32%, transparent);
}

/* ============================================================
   3 · HUB INSIGHTS (destacado + feed cronologico)
   ============================================================ */

/* ---- Articolo in evidenza ---- */
.featured {
  position: relative; margin-top: var(--sp-6);
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  border: 1px solid var(--linea); border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fffefb, var(--superficie));
  box-shadow: 0 1px 2px rgba(14,28,22,.04), 0 14px 34px -18px rgba(14,28,22,.14);
  overflow: hidden;
}
.featured::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--filo-w);
  background: linear-gradient(90deg, transparent, var(--filo-oro-light) 18%, var(--filo-oro-light) 82%, transparent);
}
.featured__kicker {
  display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.featured__meta {
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--grigio-testo);
}
.featured__title {
  font-family: var(--font-display); font-weight: var(--display-w-medium);
  font-size: var(--fs-h1); line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight); max-width: 24ch;
}
.featured__title a { color: inherit; }
.featured__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.featured__estratto { color: var(--grigio-testo); max-width: 60ch; margin-top: var(--sp-3); font-size: 1.05rem; line-height: var(--lh-body); }
.featured__go { margin-top: var(--sp-4); font-weight: 600; color: var(--smeraldo-scuro); display: inline-flex; align-items: center; gap: .4em; }

/* ---- Feed cronologico ---- */
.feed { list-style: none; padding: 0; margin: var(--sp-8) 0 0; display: grid; gap: 0; }
.feed__item {
  display: grid; gap: var(--sp-3); padding: var(--sp-6) 0;
  border-top: 1px solid var(--linea);
}
.feed__item:first-child { border-top: 0; }
.feed__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--grigio-testo);
}
.feed__title {
  position: relative; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--tracking-tight);
  max-width: 30ch;
}
.feed__title a { color: inherit; }
.feed__title a::after { content: ""; position: absolute; inset: -.4rem -.4rem; }
.feed__estratto { color: var(--grigio-testo); max-width: 65ch; font-size: var(--fs-small); line-height: var(--lh-body); }
.feed__go { font-weight: 600; color: var(--smeraldo-scuro); font-size: var(--fs-small); display: inline-flex; align-items: center; gap: .4em; }
.feed__item:hover .feed__title { color: var(--smeraldo-scuro); }
.feed__title, .feed__title a { transition: color var(--dur-fast) var(--ease-ui); }

/* ============================================================
   4 · ARTICOLO INSIGHTS (misura di lettura 65ch)
   ============================================================ */
.post__meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-2) var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--su-scuro-tenue);
}
.post__meta a { color: var(--carta); }
.post__lede {
  font-size: clamp(1.1rem, 1rem + .6vw, 1.3rem); color: var(--su-scuro-tenue);
  max-width: var(--measure-lede); line-height: 1.5;
}

.post__body { max-width: var(--measure); margin-inline: auto; }
.post__body > * + * { margin-top: var(--sp-5); }
.post__body p { color: var(--inchiostro); font-size: var(--fs-body); line-height: var(--lh-body); }
.post__body b, .post__body strong { color: var(--inchiostro); font-weight: 700; }
.post__body h2 {
  font-family: var(--font-display); font-weight: var(--display-w-medium);
  font-size: var(--fs-h2); line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight); max-width: 34ch; margin-top: var(--sp-8);
}
.post__body h2:first-child { margin-top: 0; }
.post__body a {
  color: var(--smeraldo-scuro); text-decoration: underline;
  text-underline-offset: .16em; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--smeraldo-scuro) 42%, transparent);
}
.post__body a:hover { text-decoration-color: currentColor; }
.post__body ul, .post__body ol {
  padding-left: 1.35rem; display: grid; gap: var(--sp-3);
  color: var(--inchiostro); font-size: var(--fs-body); line-height: var(--lh-body);
}
.post__body li { padding-left: .2rem; }
.post__body blockquote {
  margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--bronzo);
  background: color-mix(in srgb, var(--oro-sigillo) 7%, var(--superficie));
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.post__body blockquote p { margin: 0; font-size: var(--fs-small); color: var(--inchiostro); }
.post__body blockquote p + p { margin-top: var(--sp-2); }
.post__body hr { border: 0; border-top: 1px solid var(--linea); margin: var(--sp-8) 0; }

/* ---- Callout "Norme citate" (cross-link obbligatorio → scheda) ---- */
.norme-citate {
  max-width: var(--measure); margin: var(--sp-8) auto 0; padding: var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--smeraldo) 30%, var(--linea));
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--smeraldo) 5%, var(--superficie));
}
.norme-citate__title {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-size: var(--fs-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--smeraldo-scuro); font-weight: 700;
}
.norme-citate__title::before { content: "⚖"; font-size: 1.05em; }
.norme-citate ul { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-2); }
.norme-citate li { font-size: var(--fs-small); }
.norme-citate a { color: var(--smeraldo-scuro); font-weight: 600; }

/* ---- Disclaimer editoriale + coda articolo ---- */
.post__coda { max-width: var(--measure); margin: var(--sp-8) auto 0; }
.post__disclaimer {
  font-size: var(--fs-small); color: var(--grigio-testo); font-style: italic;
  padding: var(--sp-4) 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}

/* ============================================================
   5 · RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .changelog__list li { grid-template-columns: 1fr; gap: .25rem; }
  .autore { flex-direction: column; }
  .feed__title a::after { inset: 0; }
}