/* ── Service Page Specific Styles (Exact match to jathagam.html design pattern) ──────── */

.service-hero {
  background: linear-gradient(
    135deg,
    var(--color-sanctum-maroon) 0%,
    var(--color-maroon-deep) 60%,
    var(--color-night-indigo) 100%
  );
  color: var(--color-text-on-dark);
  padding-top: calc(var(--space-12));
  padding-bottom: var(--space-12);
  text-align: center;
}

.service-hero__icon {
  width: 72px;
  height: 72px;
  color: var(--color-temple-brass);
  margin-inline: auto;
  margin-bottom: var(--space-6);
  opacity: 0.8;
}

.service-hero__title {
  font-size: var(--text-3xl);
  color: var(--color-temple-brass);
  margin-bottom: var(--space-4);
}

.service-hero__subtitle {
  font-size: var(--text-lg);
  color: rgba(242, 232, 213, 0.75);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 0;
}

.service-content {
  padding-block: var(--space-12);
}

.service-content__body {
  max-width: 720px;
  margin-inline: auto;
}

.service-content__body h2 {
  color: var(--color-sanctum-maroon);
  font-size: var(--text-2xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border-light);
}

.service-content__body h2:first-child {
  margin-top: 0;
}

.service-content__body p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.service-content__body ul {
  margin-block: var(--space-4);
  padding-left: var(--space-6);
}

.service-content__body li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.service-content__body li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--color-temple-brass);
  font-size: var(--text-xs);
  top: 0.35em;
}

.service-cta-section {
  background: linear-gradient(
    135deg,
    rgba(201, 152, 46, 0.06) 0%,
    rgba(201, 152, 46, 0.02) 100%
  );
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  margin-top: var(--space-10);
}

.service-cta-section h3 {
  color: var(--color-sanctum-maroon);
  margin-bottom: var(--space-3);
}

.service-cta-section p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  font-size: var(--text-base);
}

.related-services {
  padding-block: var(--space-12);
  background-color: var(--color-ivory-cool);
}

.related-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .related-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
}

.breadcrumb__link {
  color: rgba(242, 232, 213, 0.6);
}

.breadcrumb__link:hover {
  color: var(--color-temple-brass);
}

.breadcrumb__separator {
  color: rgba(242, 232, 213, 0.3);
}

.breadcrumb__current {
  color: var(--color-temple-brass);
  font-weight: var(--weight-medium);
}