/* ==========================================================================
   DN Detector — Components layer
   Loads LAST: tailwind.min.css → site.css → tokens.css → base.css → premium.css → components.css

   tokens.css loads after the legacy files on purpose: it becomes the
   authoritative source for every --dd-* value. Its values are identical to the
   legacy definitions, so nothing shifts visually — but any future token edit
   now takes effect from one place.

   STRANGLER FIG MIGRATION
   Components move here one at a time, verbatim from the legacy layer, and are
   then deleted from their old home. Two rules:

     1. Never migrate a component in the same step as changing its appearance.
        Move first, verify, then improve.
     2. When site.css and premium.css both defined a selector, the value that
        ACTUALLY RENDERED is the canonical one. The losing definition is dead
        code — it is deleted, not preserved.

   Migrated so far
     ✓ Buttons          (.btn and variants)          from site.css + premium.css
     ✓ Section system   (.section-*)                 from site.css + premium.css
   ========================================================================== */

/* ==========================================================================
   BUTTONS
   Migrated verbatim from site.css. The three colour declarations keep their
   !important temporarily so this first step is a pure move with zero visual
   change; removing them is a separate, reviewed cleanup (see MIGRATION-NOTES).
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--dd-radius-btn, 10px);
  font-size: var(--dd-text-body-s);
  font-weight: var(--dd-weight-semi);
  line-height: 1.25;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--dd-dur-fast) ease,
    border-color var(--dd-dur-fast) ease,
    transform var(--dd-dur-fast) ease,
    box-shadow var(--dd-dur-fast) ease;
}

.btn:focus-visible {
  outline: 2px solid var(--dd-primary);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--dd-primary);
  color: var(--dd-on-primary) !important;
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--dd-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--dd-primary) 28%, transparent);
}

.btn-secondary {
  background: var(--dd-surface);
  color: var(--dd-foreground) !important;
  border-color: var(--dd-border);
}

.btn-secondary:hover {
  border-color: color-mix(in srgb, var(--dd-primary) 40%, transparent);
  background: var(--dd-surface-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--dd-link) !important;
  padding-inline: 0.75rem;
  min-height: 44px;
}

.btn-ghost:hover {
  color: var(--dd-accent-text) !important;
}

.btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
}

.btn:disabled,
.mkt-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn:active,
.mkt-btn:active,
.header-cta:active {
  transform: translateY(1px);
}

/* ==========================================================================
   SECTION SYSTEM
   Both legacy files defined these. premium.css won every conflict via
   !important, so its values are canonical — and site.css's competing
   definitions were dead code.

   The !important flags are GONE here, and that is safe: with both legacy
   definitions deleted, nothing competes any more, so the computed result is
   identical while the cascade is honest again.
   ========================================================================== */

.section-pad {
  padding-block: var(--dd-section-pad);
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 2rem;
}

.section-eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--dd-weight-medium);
  letter-spacing: var(--dd-track-label);
  text-transform: uppercase;
  color: var(--dd-text-secondary);
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: var(--dd-font-section);
  font-weight: var(--dd-weight-semi);
  letter-spacing: var(--dd-track-h2);
  line-height: 1.2;
  color: var(--dd-foreground);
}

.section-desc {
  font-size: var(--dd-text-body);
  line-height: 1.65;
  color: var(--dd-text-secondary);
  max-width: 36rem;
  margin-top: 0.5rem;
}

/* ==========================================================================
   HOMEPAGE INSIGHTS GRID  (Phase 3)
   New component — no legacy equivalent, so no cascade conflict.
   Reuses .blog-card output from public_article_card_html() and gives it a
   3-up grid on the homepage instead of the blog hub's own layout.
   ========================================================================== */

.home-insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dd-space-5);
  align-items: stretch;
}

@media (min-width: 768px) {
  .home-insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .home-insights-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.home-insights-grid > * {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.home-insights-grid .blog-card {
  height: 100%;
}

.home-insights-grid .blog-card h2,
.home-insights-grid .blog-card h3 {
  font-size: var(--dd-text-h4);
  line-height: var(--dd-lh-h3);
}

.home-insights-empty {
  font-size: var(--dd-text-body);
  color: var(--dd-text-secondary);
  margin: 0;
}

/* ==========================================================================
   HERO SEARCH CHIPS + LABELLED COUNT  (Phase 3)
   ========================================================================== */

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dd-space-2);
  margin-top: var(--dd-space-4);
  list-style: none;
  padding: 0;
}

.hero-chips-label {
  font-size: var(--dd-text-caption);
  color: var(--dd-text-secondary);
  margin-right: var(--dd-space-1);
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--dd-space-4);
  border-radius: var(--dd-radius-pill);
  border: 1px solid var(--dd-border);
  background: var(--dd-surface-2);
  color: var(--dd-text-secondary);
  font-size: var(--dd-text-caption);
  font-weight: var(--dd-weight-medium);
  text-decoration: none;
  transition: background var(--dd-dur-fast) ease, border-color var(--dd-dur-fast) ease, color var(--dd-dur-fast) ease;
}

.hero-chip:hover {
  background: var(--dd-primary-soft);
  border-color: color-mix(in srgb, var(--dd-primary) 40%, transparent);
  color: var(--dd-accent-text);
}

.hero-chip:focus-visible {
  outline: 2px solid var(--dd-primary);
  outline-offset: 2px;
}

/* Replaces the bare, unlabelled inventory number that used to float in the hero. */
.hero-proof {
  display: inline-flex;
  align-items: baseline;
  gap: var(--dd-space-2);
  margin: var(--dd-space-4) 0 0;
  font-size: var(--dd-text-caption);
  color: var(--dd-text-secondary);
}

.hero-proof-count {
  font-weight: var(--dd-weight-bold);
  color: var(--dd-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .hero-chip { transition: none; }
}

/* ==========================================================================
   MIGRATION-NOTES
   Follow-ups created by this step, to be resolved during Phase 3 (not now):

   1. `.btn-primary / .btn-secondary / .btn-ghost` still carry !important on
      their colour. Verified: with the legacy definitions deleted there is no
      competing rule of equal-or-higher specificity, so these can be dropped —
      but dropping them is an appearance-affecting change and belongs in its
      own review.
   2. `.section-eyebrow` uses 0.6875rem, which is below the 0.75rem floor set
      in the accessibility rules. Bump it to var(--dd-text-label) when the
      section system is visually revised in Phase 3.
   3. `.section-title` uses --dd-font-section. The new scale offers
      --dd-text-h2. Switching is a deliberate visual change — Phase 3 only.

   Next to migrate (one at a time, verbatim, then delete the source):
     → .header-cta / .header-icon-btn / .header-search   (header cluster)
     → .domain-card / .featured-minimal-*                (card cluster)
     → .intel-panel / .intel-list / .intel-item-*
     → .category-tile*
   ========================================================================== */