/* ============================================================
   LIBERATION — "The Pathway" pillar page + homepage teaser.
   Grounded in the consent theory of power (Gene Sharp).
   Reuses tokens.css / layout.css / feed.css.
   ============================================================ */

/* ---------- Page hero ---------- */
.lib-hero { padding: var(--sp-8) 0 var(--sp-6); text-align: center; }
.lib-hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; margin: var(--sp-3) auto; max-width: 18ch; }
.lib-hero .lede { max-width: 60ch; margin: 0 auto; color: var(--text-soft); font-size: var(--fs-md); }
.lib-hero .lib-tags { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4); }
.lib-hero .lib-tags span { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .15em; color: var(--accent); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .4em 1em; }

/* ---------- Generic concept-card grid (sources, pillars, mechanisms) ---------- */
.concept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
.concept-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.concept-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.concept-card .cc-index { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); font-weight: 700; }
.concept-card h3 { font-size: var(--fs-md); margin: var(--sp-1) 0 var(--sp-2); }
.concept-card p { color: var(--text-soft); font-size: var(--fs-sm); margin: 0; line-height: 1.6; }

/* ---------- The Pathway (numbered stepper) ---------- */
.pathway { display: grid; gap: var(--sp-3); counter-reset: step; }
.path-step {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); position: relative;
}
.path-step .step-n {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-brand); color: #fff; font-family: var(--font-mono); font-weight: 800; font-size: var(--fs-md);
  flex-shrink: 0;
}
.path-step h3 { font-size: var(--fs-lg); margin: 0 0 4px; }
.path-step .step-aim { color: var(--accent); font-size: var(--fs-sm); font-weight: 600; margin: 0 0 var(--sp-2); }
.path-step ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.path-step li { color: var(--text-soft); font-size: var(--fs-sm); margin-bottom: 4px; }
.path-step li::marker { color: var(--gold); }

/* ---------- Z→A Liberation Roll-Call ---------- */
.rollcall-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-4); font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-soft); }
.rollcall-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot.free { background: #34d399; } .dot.partly-free { background: var(--gold); } .dot.struggle { background: var(--ember); }

.nations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-2); }
.nation-card {
  text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; color: inherit;
  border-left: 4px solid var(--border);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nation-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.nation-card.free { border-left-color: #34d399; } .nation-card.partly-free { border-left-color: var(--gold); } .nation-card.struggle { border-left-color: var(--ember); }
.nation-card .n-top { display: flex; align-items: center; gap: 8px; }
.nation-card .n-flag { font-size: 1.3rem; line-height: 1; }
.nation-card .n-rank { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-soft); margin-left: auto; }
.nation-card .n-name { font-weight: 700; font-size: var(--fs-sm); }
.nation-card .n-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; }
.nation-card .n-note { font-size: var(--fs-xs); color: var(--text-soft); margin-top: var(--sp-2); line-height: 1.5; display: none; }
.nation-card.open .n-note { display: block; }
.nation-card.first { border-left-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }

/* ---------- Attribution / resources ---------- */
.lib-attrib { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); margin-top: var(--sp-4); }
.lib-attrib h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
.lib-attrib p { color: var(--text-soft); font-size: var(--fs-sm); max-width: 65ch; margin: 0 0 var(--sp-3); line-height: 1.7; }
.lib-resources { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lib-resources a { font-size: var(--fs-sm); }

/* ---------- CTA row ---------- */
.lib-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* ---------- Homepage teaser (#liberation) ---------- */
.lib-teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.lib-teaser-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); }
.lib-teaser-card .lt-icon { font-size: 1.5rem; }
.lib-teaser-card h3 { font-size: var(--fs-md); margin: var(--sp-2) 0; }
.lib-teaser-card p { color: var(--text-soft); font-size: var(--fs-sm); margin: 0; line-height: 1.6; }