/******************************************************
 * HUB — build pro (zero-CLS, accessibile, distintivo)
 ******************************************************/
:root{
  --hub-bg:#0f1724;
  --hub-surface:#121c2a;
  --hub-surface-2:#0e1a2a;
  --hub-text:#e9f0f7;
  --hub-muted:#a7b5c6;
  --hub-accent:#60a5fa;      /* blu vivo */
  --hub-accent-2:#c2f032;    /* lime acido controllato */
  --hub-border:#233246;
  --hub-glow:0 12px 32px rgba(96,165,250,.15);
  --hub-glow-2:0 16px 40px rgba(194,240,50,.10);
  --hub-radius:14px;
  --hub-pad-x:clamp(.9rem, 2.4vw, 1.4rem);
  --hub-pad-y:clamp(1rem, 2.4vw, 1.4rem);
  --hub-gap:.9rem;
  --hub-card-minheight:64px; /* per stabilizzare */
}

@media (prefers-color-scheme: light){
  :root{
    --hub-bg:#f7f9fc;
    --hub-surface:#ffffff;
    --hub-surface-2:#f4f7fb;
    --hub-text:#152739;
    --hub-muted:#5c6b7b;
    --hub-accent:#0b69d6;
    --hub-accent-2:#9ad90f;
    --hub-border:#dde6f2;
    --hub-glow:0 10px 28px rgba(11,105,214,.12);
    --hub-glow-2:0 14px 36px rgb(15 94 217 / 31%);
  }
}

/* Manteniamo il tuo layout; solo skin nel main */

.main-content{
  color: #fff;
}

/* ===== Header hub ===== */
.category-header{
  color: var(--hub-text);
  border: 0;
  padding-bottom: .3rem;
  margin-bottom:.25rem;
  letter-spacing:.2px;
  background:
    radial-gradient(1200px 200px at 0% 0%, rgba(96,165,250,.12), transparent 60%),
    radial-gradient(800px 160px at 90% 0%, rgb(210 232 255), transparent 70%);
}
.category-intro{
  color: var(--hub-muted);
  max-width: 70ch;
}

/* ===== Sezioni del main (nav/section) ===== */
.main-content > section,
.main-content > nav{
  background: #1f3c5b;
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  padding: var(--hub-pad-y) var(--hub-pad-x);
  box-shadow: var(--hub-glow);
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
  content-visibility:auto;
  contain-intrinsic-size: 600px;
}
.main-content h2.h4{
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:.75rem;
}

/* =====================================================
   1) Indice dei Pillar
===================================================== */
.pillars-nav .row{ row-gap: .9rem; }
.pillar-card{
  background: linear-gradient(180deg, var(--hub-surface), var(--hub-surface-2));
  border:1px solid var(--hub-border) !important;
  border-radius: var(--hub-radius);
  min-height: var(--hub-card-minheight);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  box-shadow: var(--hub-glow);
}
.pillar-card:hover,
.pillar-card:focus-within{
  transform: translateY(-2px);
  box-shadow: var(--hub-glow-2);
  border-color: color-mix(in srgb, var(--hub-border) 70%, var(--hub-accent));
}
.pillar-link{
  color: var(--hub-text);
  text-decoration:none;
}
.pillar-link::before{
  content:"↗";
  margin-right:.35rem;
  opacity:.8;
}
.pillar-link:hover,
.pillar-link:focus{
  color: var(--hub-accent);
}
.pillar-card p{
  min-height: 2.6em; /* 2 righe = stabilità card */
  color: var(--hub-muted);
}

/* =====================================================
   2) Percorsi (journeys) — stepper numerato
===================================================== */
.journey-steps{
  counter-reset: step;
  list-style:none;
  padding-left:0;
  color: #1f3c5b;
}
.journey-steps > li{
  counter-increment:step;
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  padding:.6rem .7rem;
  background:var(--hub-surface-2);
  border:1px dashed var(--hub-border);
  border-radius:12px;
  margin-bottom:.6rem;
  min-height:56px; /* stabilizza */
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.journey-steps > li::before{
  content: counter(step);
  flex:0 0 28px; height:28px; line-height:28px;
  border-radius:8px;
  background: color-mix(in srgb, var(--hub-accent) 35%, transparent);
  color: var(--hub-text);
  text-align:center;
  font-weight:700;
  border:1px solid var(--hub-border);
}
.journey-steps > li:hover{ transform: translateY(-1px); box-shadow: var(--hub-glow); }
.journey-steps a, .glossary-def a{
  color: var(--hub-accent);
  text-decoration:none;
  border-bottom:1px dashed transparent;
}
.journey-steps a:hover, .glossary-def a:hover{ border-bottom-color: currentColor; }

/* =====================================================
   3) Guide essenziali — griglia con CTA pulita
===================================================== */
.essentials{
  display:grid;
  grid-template-columns: 1fr;
  gap:.9rem;
}
@media (min-width: 768px){
  .essentials{ grid-template-columns: 1fr 1fr; }
}
.essentials li article{
  background: linear-gradient(180deg, var(--hub-surface), var(--hub-surface-2));
  border:1px solid var(--hub-border);
  border-radius:12px;
  padding:.95rem 1.05rem;
  min-height:72px; /* stabilità */
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  box-shadow: var(--hub-glow);
}
.essentials li article:hover,
.essentials li article:focus-within{
  transform: translateY(-1px);
  box-shadow: var(--hub-glow-2);
  border-color: color-mix(in srgb, var(--hub-border) 70%, var(--hub-accent));
}
.essentials h3 a , .essentials h4 a , .cluster-card h3 a{ color: var(--hub-text); text-decoration:none; }
.essentials h3 a:hover , .essentials h4 a:hover , .cluster-card h3 a:hover{ color: var(--hub-accent); }
.essentials p{ color: var(--hub-muted); margin:0; }

/* =====================================================
   4) Aggiornamenti recenti — micro-timeline
===================================================== */
.updates-list{
  list-style:none;
  padding-left:0;
  margin:0;
  border-left:2px solid var(--hub-border);
  padding-left:1rem;
}
.updates-list > li{
  position:relative;
  margin-bottom:.8rem;
}
.updates-list > li::before{
  content:"";
  position:absolute; left:-12px; top:.6rem;
  width:10px; height:10px; border-radius:50%;
  background: var(--hub-accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub-accent-2) 25%, transparent);
}
#updates li article{
  background: var(--hub-surface);
  border:1px solid var(--hub-border);
  border-radius:12px;
  padding:.9rem 1rem;
  box-shadow: var(--hub-glow);
}
#updates h3 a{ color: var(--hub-text); text-decoration:none; }
#updates h3 a:hover{ color: var(--hub-accent); }
#updates time{
  font-size:.92rem;
  color: var(--hub-muted);
  white-space:nowrap;
}

/* =====================================================
   5) FAQ — disclosure premium
===================================================== */
.faq-item{
  background: var(--hub-surface);
  border:1px solid var(--hub-border);
  border-radius:12px;
  box-shadow: var(--hub-glow);
  padding:.55rem .75rem;
}
.faq-summary{
  display:flex; align-items:center; gap:.6rem;
  cursor:pointer; list-style:none; outline:0;
}
.faq-summary::before{
  content:"";
  flex:0 0 16px; width:16px; height:16px;
  border:2px solid color-mix(in srgb, var(--hub-muted) 75%, transparent);
  border-left:0; border-top:0;
  transform: rotate(45deg);
  transition: transform .14s ease, border-color .14s ease;
}
.faq-item[open] .faq-summary::before{
  transform: rotate(225deg);
  border-color: var(--hub-accent);
}
.faq-title{
  font-weight:700; color: var(--hub-text);
}
.faq-content{ color: var(--hub-text); line-height:1.65; }

/* =====================================================
   6) Glossario — chips-card a griglia
===================================================== */
.glossary{
  display:grid;
  grid-template-columns: 1fr;
  gap:.8rem;
}
@media (min-width: 768px){
  .glossary{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px){
  .glossary{ grid-template-columns: repeat(3, 1fr); }
}
.glossary-item{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  background: linear-gradient(180deg, var(--hub-surface), var(--hub-surface-2));
  border:1px solid var(--hub-border);
  border-radius:12px;
  padding: .85rem .95rem;
  min-height:84px; /* stabile */
  box-shadow: var(--hub-glow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.glossary-item:hover{ transform: translateY(-1px); box-shadow: var(--hub-glow-2); }
.glossary-term{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:800; color: var(--hub-text);
}
.glossary-term::after{
  content:"";
  height:8px; width:8px; border-radius:50%;
  background: var(--hub-accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub-accent-2) 20%, transparent);
}
.glossary-def{
  color: var(--hub-muted);
}

/* ===== Focus visibile coerente ===== */
.main-content a:focus-visible,
.main-content button:focus-visible,
.main-content summary:focus-visible{
  outline: 2px solid var(--hub-accent-2);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ===== Responsive padding fine-tuning ===== */
@media (max-width: 992px){
  .main-content > section,
  .main-content > nav{ padding: 1rem; }
}

/* ===== Motion-safe ===== */
@media (prefers-reduced-motion: reduce){
  .pillar-card,.journey-steps>li,.essentials li article,
  .glossary-item,.faq-summary::before{ transition:none !important; }
}


/* ====== Pillar page: Cluster index (card) ====== */

.cluster-card{
  background: linear-gradient(180deg, var(--hub-surface), var(--hub-surface-2));
  border:1px solid var(--hub-border) !important;
  border-radius: var(--hub-radius);
  min-height: var(--hub-card-minheight);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  box-shadow: var(--hub-glow);
}
.cluster-card:hover,
.cluster-card:focus-within{
  transform: translateY(-2px);
  box-shadow: var(--hub-glow-2);
  border-color: color-mix(in srgb, var(--hub-border) 70%, var(--hub-accent));
}
.cluster-card .card-body p{
  min-height: 2.6em;    /* stabilità come hub */
  color: var(--hub-muted);
}
/* =====================================================
   FEATURED (In evidenza) — look dedicato, sobrio
   ===================================================== */
.featured-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}
@media (min-width: 768px){
  .featured-list{
    grid-template-columns: repeat(2, 1fr); /* max 2 elementi → perfetto */
  }
}

.feature-card{
  position: relative;
  background:
    radial-gradient(800px 180px at 0% 0%, color-mix(in srgb, var(--hub-accent) 12%, transparent), transparent 60%),
    linear-gradient(180deg, var(--hub-surface), var(--hub-surface-2));
  border: 1px solid var(--hub-border);
  border-radius: calc(var(--hub-radius) + 2px);
  padding: 1.05rem 1.1rem 1.05rem 1.2rem;
  min-height: 78px; /* stabilità → zero CLS */
  box-shadow: 0 10px 28px rgba(0,0,0,.04), var(--hub-glow);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

/* Barra accent a sinistra (identitaria ma discreta) */
.feature-card::before{
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--hub-accent-2), var(--hub-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub-accent-2) 18%, transparent);
  opacity: .95;
}

/* Hover/focus: micro-lift + accento leggero */
.feature-card:hover,
.feature-card:focus-within{
  
  box-shadow: var(--hub-glow-2);
  border-color: color-mix(in srgb, var(--hub-border) 60%, var(--hub-accent));
}

/* Tipografia coerente, appena più autorevole del resto */
.feature-title a{
  color: var(--hub-text);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(1rem, .98rem + .25vw, 1.125rem);
}
.feature-title a:hover,
.feature-title a:focus{
  color: var(--hub-accent);
}

.feature-blurb{
  color: var(--hub-muted);
  margin-top: .2rem;
}

/* Motion-safe */
@media (prefers-reduced-motion: reduce){
  .feature-card{ transition: none !important; }
}


/* Header intro del pillar (semplice) */
.main-content > header.mb-4{
  background: var(--hub-surface);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius);
  box-shadow: var(--hub-glow);
  padding: var(--hub-pad-y) var(--hub-pad-x);
  color: var(--hub-text);
  margin-bottom: clamp(1rem, 2vw, 1.4rem) !important;
}

/* Titolo H1 */
.main-content > header.mb-4 .category-header{
  margin: 0 0 .5rem 0;
  color: var(--hub-text);
  font-weight: 800;
  line-height: 1.2;
  font-size: clamp(1.5rem, 1.2rem + .5vw, 1.9rem);
  letter-spacing: .2px;
  background: none;   /* toglie il background radiale che avevi prima */
  border: 0;
  padding: 0;
}

/* Payoff sotto al titolo */
.main-content > header.mb-4 .category-intro{
  margin: 0;
  color: var(--hub-muted);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 70ch;
}

/* Se in futuro riattivi il <time> */
.main-content > header.mb-4 time{
  display: inline-block;
  margin-top: .75rem;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--hub-muted);
}

/* Responsive: stringi padding su schermi piccoli */
@media (max-width: 576px){
  .main-content > header.mb-4{
    padding: 1rem;
  }
}
.pillars-nav .row {
  display: block;
}
.pillars-nav .row > li {
  width: 100%;
  max-width: 100%;
  margin-bottom: .75rem;
}
.pillars-nav .card.pillar-card {
  width: 100%;
}
/* pillar.php → Sotto-temi (cluster) in verticale */
.clusters-nav .row > li {
  width: 100%;
  max-width: 100%;
  margin-bottom: .75rem;
}
.clusters-nav .card.cluster-card {
  width: 100%;
}