/* ================================================================
   TrueTest Labs — Page-specific styles
   Sections unique to individual pages; keep minimal.
   ================================================================ */

/* ========== Service page: court-admissible content sections ========== */
.service-intro {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-gold-600);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
}
.service-intro h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--ink-900);
  font-weight: 500;
  line-height: var(--lh-snug);
  margin-bottom: var(--space-5);
}
.service-intro h2 em { color: var(--brand-gold-700); font-style: italic; font-weight: 500; }

/* ========== Blog article (shared for both blog posts) ========== */
.article {
  padding-block: var(--section-y);
}
.article-header {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--line);
}
.article-header .eyebrow { margin-bottom: var(--space-4); }
.article-header h1 {
  font-size: clamp(2rem, 3.5vw + 0.5rem, 3.25rem);
  line-height: var(--lh-tight);
  color: var(--ink-900);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
.article-header .lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  color: var(--ink-600);
  font-weight: 400;
}
.article-meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--ink-500);
}
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }

.prose {
  max-width: 68ch;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--ink-700);
}
.prose > * + * { margin-top: var(--space-5); }
.prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.5vw + 0.8rem, 2rem);
  color: var(--ink-900);
  font-weight: 500;
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  line-height: var(--lh-tight);
}
.prose h3 { font-size: var(--fs-h3); color: var(--ink-900); font-weight: 600; margin-top: var(--space-8); margin-bottom: var(--space-3); font-family: var(--font-body); }
.prose p { color: var(--ink-700); }
.prose a { color: var(--brand-navy-500); font-weight: 500; }
.prose strong { color: var(--ink-900); }
.prose blockquote {
  border-left: 3px solid var(--brand-gold-600);
  padding: var(--space-2) var(--space-5);
  margin-left: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  color: var(--ink-900);
}
.prose ul, .prose ol { padding-left: 1.5rem; color: var(--ink-700); }
.prose ul li { list-style: disc; margin-bottom: var(--space-2); }
.prose ol li { list-style: decimal; margin-bottom: var(--space-2); }

.callout {
  background: var(--brand-navy-100);
  border-left: 3px solid var(--brand-navy-700);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
}
.callout-warning { background: var(--warning-bg); border-left-color: #B8862F; }
.callout h4 {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.callout p { color: var(--ink-700); margin-top: 0; }

/* Comparison grid (blood-testing blog) */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-8);
}
@media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border-top: 3px solid var(--brand-gold-600);
}
.compare-card.recommended { border-top-color: var(--brand-navy-900); background: var(--brand-navy-100); }
.compare-card h3 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 700; color: var(--ink-900); margin-bottom: var(--space-3); }
.compare-card p { font-size: var(--fs-small); color: var(--ink-600); line-height: var(--lh-relaxed); }
.compare-card ul { margin-top: var(--space-3); }
.compare-card li { font-size: var(--fs-small); padding: 4px 0; color: var(--ink-600); }

/* ========== Order form page layout (Phase 2 will flesh this out) ========== */
.order-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--section-y);
}
@media (max-width: 1024px) { .order-layout { grid-template-columns: 1fr; } }

.order-form-shell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-xs);
}
.order-summary {
  position: sticky;
  top: 96px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
}
@media (max-width: 1024px) { .order-summary { position: static; } }

.form-section { padding-block: var(--space-6); border-top: 1px solid var(--line); }
.form-section:first-child { border-top: 0; padding-top: 0; }
.form-section-header { margin-bottom: var(--space-4); }
.form-section-header h2 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.form-section-header p { font-size: var(--fs-small); color: var(--ink-500); margin-top: 4px; }

/* ========== Breadcrumbs ========== */
.breadcrumbs {
  font-size: var(--fs-small);
  color: var(--ink-500);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before { content: '/'; color: var(--ink-400); }
.breadcrumbs a { color: var(--ink-500); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand-navy-700); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink-700); font-weight: 500; }