/* ============================================================
   AItilldone — Showcase hub + detail styles (extends styles.css)
   Per Design Guide v1.2 §7-B
   ============================================================ */

/* ---------- Status badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
/* Badge foregrounds are darker than the base accent/success so the 12px
   text passes WCAG AA on the tinted pills (5.78:1 and 4.54:1). */
.badge-shipped { color: #146B41; background: #E7F4EC; }
.badge-blueprint { color: var(--btn-fill); background: var(--accent-tint); }
.badge-own { color: var(--ink); background: var(--bg-alt); border: 1px solid var(--border); }

/* ---------- Hub hero (compact) ---------- */
.hub-hero { padding: clamp(56px, 5vw + 32px, 96px) 0 0; }
.hub-hero h1 {
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.hub-hero .section-intro { margin-bottom: 0; margin-top: 16px; }

/* ---------- Filters ---------- */
.sc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 40px 0 32px;
  padding: 0;
  list-style: none;
}
.sc-filters button {
  appearance: none;
  font-family: var(--font-body);
  font-size: var(--small);
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 38px;
  cursor: pointer;
  transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}
.sc-filters button:hover { border-color: var(--ink); }
.sc-filters button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------- Showcase cards ---------- */
.sc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) { .sc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sc-grid { grid-template-columns: 1fr 1fr 1fr; } }

.sc-card { display: flex; flex-direction: column; gap: 12px; }
.sc-card[hidden] { display: none; }
/* Draft rule (§7-B): belt-and-suspenders — JS removes these from the DOM,
   CSS guarantees they never paint even before/without JS. */
[data-draft] { display: none !important; }
.sc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sc-tag {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sc-card h3 { font-size: var(--h3); font-weight: 700; line-height: 1.3; margin: 0; }
.sc-card h3 a {
  color: var(--ink);
  text-decoration: none;
}
.sc-card h3 a:hover { color: var(--accent); }
.sc-outcome { color: var(--ink-soft); }
.sc-outcome .projected { color: var(--ink-muted); }
.sc-meta {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--small);
  color: var(--ink-muted);
}
.sc-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.sc-meta a {
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 150ms ease-out;
}
.sc-meta a:hover { border-bottom-color: var(--accent); }

/* Compact variant (related builds) — title only, sized to content */
.sc-card-compact { gap: 14px; padding: 24px; }
.sc-card-compact .sc-outcome, .sc-card-compact .sc-meta { display: none; }
.sc-card-compact h3 { font-size: var(--body-lg); }

/* ---------- Detail article ---------- */
.dt-article {
  max-width: var(--maxw-text);
  margin: 0 auto;
  padding: clamp(64px, 6vw + 32px, 96px) 24px var(--section-pad);
}
.dt-breadcrumb {
  font-size: var(--small);
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 600;
}
.dt-breadcrumb:hover { color: var(--accent); }
.dt-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}
.dt-article h1 {
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: 20px;
}
.dt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 20px;
  font-size: var(--small);
  color: var(--ink-muted);
}
.dt-article h3 {
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.3;
  margin: 48px 0 12px;
}
.dt-article p { max-width: 65ch; }

/* Vertical numbered steps (reuses .step-chip from styles.css) */
.dt-steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 24px;
  position: relative;
  padding-left: 0;
}
.dt-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
}
.dt-step .step-chip { margin-bottom: 0; outline: none; }
.dt-step .dt-step-title {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

/* Landing-page teaser row */
.teaser-grid { margin-top: 40px; }
.teaser-more { margin-top: 32px; }

/* Related builds */
.dt-related { margin-top: 16px; }
.dt-related .sc-grid { margin-top: 24px; align-items: start; }
@media (min-width: 768px) {
  .dt-related .sc-grid { grid-template-columns: 1fr 1fr; }
}