/* Chip Route House — guide pages (responsible play, facts) */

.guide { padding: var(--s-8) 0; }

.guide__intro { max-width: 70ch; margin-bottom: var(--s-7); }
.guide__intro p { color: var(--ink-soft); font-size: 1.06rem; }

.guide__block { padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.guide__block:first-of-type { border-top: 0; padding-top: 0; }
.guide__block > p,
.guide__block > ul li { color: var(--ink-soft); max-width: 72ch; }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
  list-style: none;
  padding: 0;
}
.tile-grid > li { margin: 0; }

.fact-tile {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--s-5);
}
.fact-tile b {
  display: block;
  font-size: 0.74rem;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.11em;
  color: var(--accent);
  margin-bottom: var(--s-2);
}
.fact-tile h3 { font-size: 1.06rem; margin-bottom: var(--s-2); }
.fact-tile p { font-size: 0.93rem; color: var(--ink-soft); margin-bottom: 0; }

.step-list {
  counter-reset: step;
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  max-width: 74ch;
}
.step-list li {
  counter-increment: step;
  position: relative;
  padding: var(--s-4) 0 var(--s-4) 52px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
.step-list li:last-child { border-bottom: 0; }
.step-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--s-4);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.step-list strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

.signs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 var(--s-6);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}
.signs li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
}

.guide-figure {
  margin: var(--s-6) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.guide-figure img { width: 100%; }
.guide-figure figcaption {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  color: var(--ink-quiet);
}

.figure-wide { max-width: 900px; }

.pull {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  font-size: 1.1rem;
  color: var(--ink);
  max-width: 62ch;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
  list-style: none;
  padding: 0;
}
.support-grid li { margin: 0; }

@media (max-width: 720px) {
  .guide { padding: var(--s-7) 0; }
  .signs { grid-template-columns: 1fr; gap: 0; }
}