/* =========================================================
   Scale 101 — Growth Wizards brand system
   This file now only holds the components that are UNIQUE to Scale 101
   (article cards, pills, filters, reading paths, byline card, recap list,
   etc). Everything shared with the rest of the site — reset, fonts, colors,
   dot-grid background, header/nav, footer, headings, body copy, buttons,
   eyebrow tag, hero shell, sticky LinkedIn button — comes from the site's
   own /styles.css, which every Scale 101 page now loads first. Don't
   redeclare shared-chrome rules here; add them to /styles.css instead so
   the homepage stays the single source of truth for the whole site.
   ========================================================= */

/* ---------- Tag pills (unique to Scale 101 article cards) ---------- */
.pill {
  display: inline-block;
  border: 1.5px solid currentColor;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
}
.pill--cyan { color: var(--cyan); }
.pill--green { color: var(--green); }
.pill--purple { color: var(--purple); }
.pill--pink { color: var(--pink); }

/* ---------- Hero additions (box model/glow now inherited from styles.css's .hero) ---------- */
.hero h1 { max-width: 16ch; }
.hero .accent { color: var(--green); }
.hero p.lede { font-size: 1.15rem; max-width: 62ch; color: #E4E4E4; }

/* ---------- Byline card ---------- */
.byline-card {
  border: 1px solid rgba(255,255,255,0.14);
  border-left: 3px solid var(--green);
  padding: 24px 28px;
  margin-top: 36px;
  max-width: 78ch;
  background: rgba(255,255,255,0.02);
}
.byline-card p { margin: 0; color: #DADADA; font-size: 0.98rem; }
.byline-card strong { color: var(--text); }

/* ---------- Category filters ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 40px 0 8px;
}
.filter-btn {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 9px 16px;
  cursor: pointer;
  border-radius: 999px;
}
.filter-btn[aria-pressed="true"], .filter-btn:hover {
  border-color: var(--green); color: var(--green);
}

/* ---------- Article grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

.card {
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 22px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--cyan); text-decoration: none; transform: translateY(-2px); }
.card[data-cat] { display: none; }
.card.is-visible { display: flex; }

.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card-format {
  font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 700;
}
.card h3 {
  color: var(--text); font-family: 'Bebas Neue', sans-serif;
  text-transform: none; letter-spacing: 0.01em;
  font-size: 1.32rem; margin: 0; line-height: 1.15;
}
.card p { font-size: 0.92rem; color: #C9C9C9; margin: 0; max-width: none; }
.card-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.78rem; color: var(--text-faint);
}
.card-tags { display: flex; gap: 6px; }

/* ---------- Reading paths ---------- */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
@media (max-width: 900px) { .paths { grid-template-columns: 1fr; } }
.path-card {
  border: 1px solid rgba(255,255,255,0.12);
  border-top: 3px solid var(--purple);
  padding: 22px;
}
.path-card:nth-child(2) { border-top-color: var(--pink); }
.path-card:nth-child(3) { border-top-color: var(--cyan); }
.path-card h3 { color: var(--text); font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.2rem; }
.path-card .path-desc { color: #C9C9C9; font-size: 0.9rem; margin: -8px 0 14px; }
.path-card ol { padding-left: 1.1em; margin: 0; }
.path-card li { font-size: 0.92rem; margin-bottom: 8px; }
.path-card li a { color: var(--text); }
.path-card li a:hover { color: var(--green); }
.path-cta { margin-top: 16px; display: inline-block; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; }

/* ---------- Article page ---------- */
.article-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.article-meta .format { color: var(--text-faint); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.article-body { max-width: 68ch; margin-top: 28px; }
.article-body h2 { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }
.article-tags { display: flex; gap: 8px; margin-top: 10px; }
.article-cta {
  margin-top: 56px; padding: 28px; border: 1px dashed rgba(18,247,97,0.5);
  max-width: 68ch;
}
.article-cta p { margin: 0; }
.breadcrumb { font-size: 0.85rem; color: var(--text-faint); margin-bottom: 22px; }
.breadcrumb a { color: var(--text-faint); }
.breadcrumb a:hover { color: var(--green); }

.recap {
  list-style: none; padding: 0; margin-top: 20px; max-width: 68ch;
}
.recap li {
  position: relative; padding-left: 28px; margin-bottom: 14px;
}
.recap li::before {
  content: "→";
  position: absolute; left: 0; color: var(--green); font-weight: 700;
}