/* ═══════════════════════════════════════════════════════════════
   servico-detalhe.css
   Estilos exclusivos das páginas individuais de serviço
   (consulta-clinica.html, vacinas.html, etc. dentro de /servicos)
   Carregado JUNTO com style.css — não duplica nada, só complementa.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   TRILHA (BREADCRUMB)
   ─────────────────────────────────────────── */
.servico-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  flex-wrap: wrap;
}
.servico-breadcrumb a {
  color: var(--clr-text-muted);
}
.servico-breadcrumb a:hover {
  color: var(--clr-primary);
}
.servico-breadcrumb span[aria-current="page"] {
  color: var(--clr-primary);
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   GRADE DO SERVIÇO (FOTO + TEXTO)
   ─────────────────────────────────────────── */
.servico-detalhe {
  padding-top: var(--sp-8);
}

.servico-detalhe-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-16);
  align-items: center;
}

.servico-detalhe-img img,
.servico-detalhe-img .img-placeholder {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.servico-detalhe-img .img-placeholder {
  min-height: 420px;
}

.servico-detalhe-texto h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--sp-6);
}

.servico-detalhe-texto p {
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-4);
}

.servico-detalhe-texto .btn {
  margin-top: var(--sp-4);
}

/* ─────────────────────────────────────────────
   RESPONSIVO
   ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .servico-detalhe-grid {
    grid-template-columns: 1fr;
  }
  .servico-detalhe-img .img-placeholder {
    min-height: 280px;
  }
}