/* SERVICOS.CSS */

.service-detail {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
  padding:80px 0;
  border-bottom:1px solid var(--color-border);
}

.service-detail:last-of-type { border-bottom:none; }

.service-detail--reverse { direction:rtl; }
.service-detail--reverse > * { direction:ltr; }

.service-detail__image {
  border-radius:var(--radius-xl);
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:var(--shadow-card-hover);
}
.service-detail__image img { width:100%; height:100%; object-fit:cover; }

/* Placeholder quando não há imagem cadastrada */
.service-detail__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-surface) 0%, rgba(62,109,174,.1) 100%);
}
.service-detail__image--placeholder [data-lucide] {
  width: 80px;
  height: 80px;
  color: var(--color-primary);
  opacity: .35;
}

.service-detail__icon {
  width:64px; height:64px;
  border-radius:var(--radius-md);
  background-color:var(--color-surface);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.service-detail__icon [data-lucide] {
  width: 32px; height: 32px;
  color: var(--color-primary);
}

.service-detail__tag {
  display:inline-block;
  font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-secondary);
  margin-bottom:12px;
}

.service-detail__title { margin-bottom:16px; }

.service-detail__text {
  color:var(--color-text-muted);
  font-size:16px; line-height:1.75;
  margin-bottom:24px;
}

.service-detail__list {
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:32px;
}

.service-detail__list li {
  display:flex; align-items:center; gap:10px;
  font-size:15px; color:var(--color-text);
}

.service-detail__list li::before {
  content:'→';
  color:var(--color-primary);
  font-weight:700;
  flex-shrink:0;
}

@media(max-width:900px){
  .service-detail { grid-template-columns:1fr; gap:36px; direction:ltr; }
  .service-detail--reverse { direction:ltr; }
  .service-detail { padding:56px 0; }
}