/* ==========================================================================
   Service topic pages — shared layout
   (hybrid-ev-collision-repair, i-car-gold-class-certified, insurance-estimates)
   Built 2026-06-12 as topic landing pages targeting long-tail AI/SEO queries.
   ========================================================================== */

.svc-hero {
  background: var(--c-fog);
  padding-block: var(--s-12) var(--s-10);
  border-bottom: 1px solid var(--c-mist);
}

.svc-hero__title {
  font-size: var(--fs-h1);
  margin-bottom: var(--s-4);
  max-width: 22ch;
}

.svc-hero__lede {
  font-size: 1.25rem;
  color: var(--c-charcoal);
  max-width: 60ch;
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s-6);
}

.svc-hero__ctas {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-4);
}

/* Body sections */
.svc-section {
  padding-block: var(--s-12);
}

.svc-section + .svc-section {
  border-top: 1px solid var(--c-mist);
}

.svc-section--alt {
  background: var(--c-fog);
}

.svc-section__title {
  font-size: var(--fs-h2);
  max-width: 22ch;
  margin-bottom: var(--s-6);
}

.svc-prose {
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: var(--lh-relaxed);
}

.svc-prose p {
  margin-bottom: var(--s-4);
}

.svc-prose strong {
  font-weight: var(--fw-bold);
}

.svc-prose a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Bullet lists used for things like "brands we work on" or "insurance carriers" */
.svc-list {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0;
  display: grid;
  gap: var(--s-2);
}

.svc-list li {
  position: relative;
  padding-left: var(--s-6);
  font-size: 1.0625rem;
}

.svc-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-accent, var(--c-blue, #0B5FFF));
  font-weight: var(--fw-bold);
}

/* Two-column callout grids — used for things like "vehicles we've worked on" */
.svc-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  margin-top: var(--s-6);
}

@media (min-width: 700px) {
  .svc-grid--2 { grid-template-columns: 1fr 1fr; }
  .svc-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}

.svc-card {
  background: var(--c-paper);
  border: 1px solid var(--c-mist);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--shadow-subtle);
}

.svc-card__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--s-3);
}

.svc-card__desc {
  font-size: 0.9375rem;
  line-height: var(--lh-relaxed);
  color: var(--c-charcoal);
}

/* Inline mini-FAQ — for the page-specific question/answer block */
.svc-faq__item {
  border-top: 1px solid var(--c-mist);
  padding-block: var(--s-5);
}

.svc-faq__item:last-child {
  border-bottom: 1px solid var(--c-mist);
}

.svc-faq__q {
  font-weight: var(--fw-bold);
  font-size: 1.0625rem;
  margin-bottom: var(--s-2);
}

.svc-faq__a {
  font-size: 1rem;
  line-height: var(--lh-relaxed);
  color: var(--c-charcoal);
}

.svc-faq__a p + p {
  margin-top: var(--s-3);
}

/* Cross-link footer — links to the other two service pages */
.svc-related {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-top: var(--s-6);
}

@media (min-width: 700px) {
  .svc-related { grid-template-columns: 1fr 1fr; }
}

.svc-related__link {
  display: block;
  padding: var(--s-5);
  background: var(--c-paper);
  border: 1px solid var(--c-mist);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}

.svc-related__link:hover {
  border-color: var(--c-accent, var(--c-blue, #0B5FFF));
  transform: translateY(-2px);
}

.svc-related__label {
  font-size: 0.875rem;
  color: var(--c-charcoal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--fw-bold);
}

.svc-related__title {
  font-size: 1.125rem;
  margin: var(--s-2) 0 0;
  color: var(--c-ink);
}

/* Homepage "Specialties" strip — appears below the existing services grid */
.specialties-section {
  padding-block: var(--s-10);
  background: var(--c-fog);
  border-top: 1px solid var(--c-mist);
}

.specialties-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  margin-top: var(--s-6);
}

@media (min-width: 700px) {
  .specialties-grid { grid-template-columns: repeat(3, 1fr); }
}

.specialty-card {
  background: var(--c-paper);
  border: 1px solid var(--c-mist);
  border-radius: var(--radius);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-subtle);
}

.specialty-card:hover {
  border-color: var(--c-accent, var(--c-blue, #0B5FFF));
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.07);
}

.specialty-card__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--c-accent, var(--c-blue, #0B5FFF));
  margin-bottom: var(--s-2);
}

.specialty-card__title {
  font-size: 1.25rem;
  margin-bottom: var(--s-3);
  color: var(--c-ink);
}

.specialty-card__desc {
  font-size: 0.9375rem;
  line-height: var(--lh-relaxed);
  color: var(--c-charcoal);
  margin-bottom: var(--s-4);
  flex: 1;
}

.specialty-card__cta {
  margin-top: auto;
}

.specialty-card__cta {
  font-weight: var(--fw-bold);
  font-size: 0.9375rem;
  color: var(--c-accent, var(--c-blue, #0B5FFF));
  text-decoration: none;
}

.specialty-card:hover .specialty-card__cta {
  text-decoration: underline;
}