/* ==========================================================================
   Chuk Yip Company — Service page layout (the 8 service routes)
   Shared components (header, footer, buttons, steps, FAQ, CTA band,
   breadcrumbs, placeholder block, sticky CTA) live in components.css and
   are NOT redefined here. This file carries only service-template layout:
   hero variants, direct-answer block, inputs panel + checklist, prose
   measure and final-CTA spacing.
   Requires tokens.css → base.css → components.css loaded first.
   ========================================================================== */

/* --- Service hero: copy (+ optional placeholder media); text-only variant --- */
.service-hero {
  padding-block: clamp(2.5rem, 2rem + 4vw, 5rem) var(--space-section);
}

.service-hero__inner {
  display: grid;
  gap: var(--space-4);
}

/* Routes whose image-evidence fallback is text-only (sourcing, lab-grown,
   colored gemstone, matching bands). */
.service-hero__inner--text {
  max-width: 52rem;
}

.service-hero__lead {
  font-size: var(--text-lg);
}

.service-hero__actions {
  margin-block-start: var(--space-3);
}

.service-hero__media {
  align-self: start;
}

@media (min-width: 64em) {
  .service-hero__inner--split {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-6);
    align-items: center;
  }
}

/* --- Direct answer (GEO extraction block; first paragraph = 40–80-word
        standalone extract; keep commercial qualifiers in the text) --- */
.service-answer__inner {
  max-width: var(--measure);
}

.service-answer__lead {
  font-size: var(--text-lg);
}

/* --- Prose sections (audience, capabilities, considerations, related) --- */
.service-prose {
  max-width: var(--measure);
}

/* --- Required information: heading + checklist panel, split on desktop --- */
.service-inputs__grid {
  display: grid;
  gap: var(--space-3) var(--space-4);
}

@media (min-width: 64em) {
  .service-inputs__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
  }
}

.service-inputs__note {
  margin-top: var(--space-3);
}

.service-panel {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.section--alt .service-panel {
  background: var(--color-bg);
}

/* "What to send" checklist (same visual pattern as the home .spec-list). */
.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--color-border);
}

.check-list li:last-child {
  border-bottom: 0;
}

.check-list li::before {
  content: "—";
  color: var(--color-accent);
}

.service-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Prominent commercial qualifier (e.g. stone availability on sourcing). */
.service-qualifier {
  font-weight: 600;
  color: var(--color-text);
}

/* --- FAQ --- */
.service-faq__inner {
  max-width: 52rem;
}

/* --- Final CTA band (follows the related-links section) --- */
.service-final {
  padding-top: 0;
}