/* pages.css — stiluri pentru paginile publice (hero, learn, recipes, stats,
   articles, about, error, soon). Mobile-first; responsive pe clasele de device
   (≤600 / 601–1024 / 1025–1920 / ≥1921), acoperind lățimile 375/768/1280/2560.
   Fără scroll orizontal: width 100%, max-width cu min(), overflow-x auto doar în cod. */

/* ============ HERO (Firewall Gate) ============ */
.hero { width: 100%; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: center; }
.hero-copy { min-width: 0; }
.hero-kicker { letter-spacing: var(--tracking-wide); color: var(--accent);
  margin: 0 0 var(--sp-2); text-transform: uppercase; font-size: var(--fs-sm); }
.hero-sub { color: var(--ink-dim); font-size: var(--fs-lg); max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.hero-viz { width: 100%; min-width: 0; }
.hero-canvas { width: 100%; height: clamp(220px, 40vh, 380px); display: block;
  background: #04060c; border-radius: var(--radius-sm); }
.term-title { color: var(--ink-faint); font-size: var(--fs-xs); margin-left: auto; }
.hero-log { list-style: none; margin: var(--sp-2) 0 0; padding: 0;
  max-height: 120px; overflow: hidden; font-size: var(--fs-xs); color: var(--ink-dim); }
.hero-log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-note { color: var(--ink-faint); margin-top: var(--sp-2); font-size: var(--fs-xs); }

/* ============ STATS (contoare) ============ */
.stats { width: 100%; }
.stat { text-align: left; }
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.stat-num { font-size: var(--fs-2xl); color: var(--accent); line-height: 1; }
.stat-label { color: var(--ink-dim); margin-top: var(--sp-2); font-size: var(--fs-sm); }

/* ============ LEARN (ghid + cuprins) ============ */
.learn-wrap { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.learn-toc { display: none; }
.toc-title { color: var(--ink-faint); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); font-size: var(--fs-xs); margin-bottom: var(--sp-2); }
.learn-toc ul { list-style: none; margin: 0; padding: 0; border-left: var(--border-soft); }
.learn-toc a { display: block; padding: var(--sp-1) var(--sp-2); color: var(--ink-dim);
  border-left: 2px solid transparent; margin-left: -1px; }
.learn-toc a:hover, .learn-toc a.active { color: var(--accent); border-left-color: var(--accent); }
.learn-body { min-width: 0; }
.learn-body pre { margin: 0; overflow-x: auto; }
/* Scrollspy: itemul activ e marcat din JS cu .active */

/* ============ RECIPES (rețete + filtre) ============ */
.recipes-head { width: 100%; }
.recipes-head h1 { margin-bottom: var(--sp-2); }
.recipes-filter { display: grid; grid-template-columns: 1fr; gap: var(--sp-2);
  margin: var(--sp-3) 0; }
.recipes-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.recipe { min-width: 0; display: flex; flex-direction: column; }
.recipe.is-hidden { display: none; }
.recipe-top { display: flex; align-items: center; gap: var(--sp-2);
  justify-content: space-between; flex-wrap: wrap; }
.recipe-top h3 { margin: 0; }
.recipe .codeblock { margin-top: auto; }
/* Descrierea rețetei are secțiuni separate prin linii noi (Scop / De ce în ordinea asta / Verificare / Anulare / Avertisment). */
.recipe p.muted { white-space: pre-line; }
.recipe pre, .recipe-cmds { max-height: 240px; overflow: auto; }
.badge-verified { color: var(--accent-2); }

/* ============ ARTICLE (markdown randat) ============ */
.article { max-width: 100%; }
.article-body.md { max-width: 70ch; }
.article-body.md pre { background: #04060c; border: var(--border-soft);
  border-radius: var(--radius-sm); padding: var(--sp-3); overflow-x: auto; }
.article-body.md code { background: var(--bg-3); padding: 1px 6px; border-radius: 6px; }
.article-body.md pre code { background: transparent; padding: 0; }
.article-body.md table { width: 100%; border-collapse: collapse; }
.article-body.md th, .article-body.md td { border: var(--border-soft);
  padding: var(--sp-2); text-align: left; }

/* ============ ARTICLES INDEX ============ */
.articles-grid { grid-template-columns: 1fr; }

/* ============ ABOUT ============ */
.about { width: 100%; max-width: 80ch; }
.footer-disclaimer { color: var(--ink-faint); font-style: italic; }
.sim { color: var(--mag); font-weight: 700; }

/* ============ ERROR (404/500) ============ */
.error-page { text-align: center; padding: var(--sp-6) 0; }
.error-page .terminal { text-align: left; max-width: 520px; margin: 0 auto var(--sp-4); }
.err-pre { margin: 0; overflow-x: auto; }
.err-msg { color: var(--ink-dim); }

/* ============ SOON (placeholder) ============ */
.soon { width: 100%; }
.soon .terminal { max-width: 520px; margin-bottom: var(--sp-4); }
.soon-pre { margin: 0; }
.soon-muted { color: var(--ink-dim); }

/* ============ RESPONSIVE (clase de device) ============ */
/* Telefon ≤600 (inclusiv 375): o coloană, densitate redusă. */
@media (max-width: 600px) {
  .hero-canvas { height: clamp(200px, 55vw, 260px); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tabletă 601–1024 (inclusiv 768): 2 coloane. */
@media (min-width: 601px) and (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .recipes-filter { grid-template-columns: 1fr 160px 160px; }
  .recipes-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Laptop/desktop 1025–1920 (inclusiv 1280): hero lat, sidebar cuprins, 3-4 coloane. */
@media (min-width: 1025px) and (max-width: 1920px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .learn-wrap { grid-template-columns: 240px 1fr; }
  .learn-toc { display: block; position: sticky; top: calc(var(--nav-h) + var(--sp-3)); align-self: start; }
  .recipes-grid { grid-template-columns: repeat(3, 1fr); }
  .articles-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Ecran lat ≥1921 (inclusiv 2560): lățime max. conținut, 4 coloane. */
@media (min-width: 1921px) {
  .hero-grid { grid-template-columns: 1fr 1.2fr; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .learn-wrap { grid-template-columns: 280px 1fr; }
  .learn-toc { display: block; position: sticky; top: calc(var(--nav-h) + var(--sp-3)); align-self: start; }
  .recipes-grid { grid-template-columns: repeat(4, 1fr); }
  .articles-grid { grid-template-columns: repeat(4, 1fr); }
}