/* =========================================================================
   Resources / Blog landing — page-specific styles
   =========================================================================
   Loaded after the shared /styles.css. This page is an intentional
   "coming soon" placeholder (no templating engine yet, no real content to
   publish) — see MEMORY.md in the branding project for why. Nothing here
   should read as broken or apologetic; it's a clean pending state, same as
   any real company would show for a section it hasn't launched yet.
   ========================================================================= */

/* ---- Empty-state card (the "nothing published yet" block) ---- */
.resources-empty-state {
  max-width: var(--content-narrow);
  margin: 0 auto;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}

.resources-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.resources-empty-icon svg { width: 26px; height: 26px; }

.resources-empty-state h2 { margin-bottom: var(--space-3); }
.resources-empty-state p {
  color: var(--fg-muted);
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}
.resources-empty-state .btn { margin-top: var(--space-2); }

.resources-empty-note {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin: var(--space-4) 0 0;
}

/* ---- "What's planned" card grid: icon + a small honest status badge ---- */
.resources-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.resources-card-top .card-icon { margin-bottom: 0; }

.badge-soon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
/* Inside .section-alt the card itself already sits on --bg-subtle (the
   dot-grid texture), so give the badge the raised surface instead to keep
   it legible as a distinct chip rather than blending into the card. */
.card .badge-soon { background: var(--bg-raised); }

@media (max-width: 760px) {
  .resources-empty-state { padding: var(--space-6) var(--space-5); }
}