/* ============================================
   Services Page Styles
   ============================================ */

/* ---- Service Sections ---- */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-xl);
  align-items: center;
}

.service-block.reverse {
  direction: rtl;
}

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

.service-content h2 {
  margin-bottom: 1rem;
}

.service-content p {
  margin-bottom: 1rem;
  color: var(--color-muted-text);
}

.service-content ul {
  margin-bottom: 1.5rem;
}

.service-content li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-muted-text);
  font-size: var(--text-body-sm);
}

.service-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--color-orange);
  border-radius: 50%;
}

/* ---- Lead Service (AI) - Full Width ---- */
.service-lead {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.service-lead-icon {
  width: 80px;
  height: 80px;
  color: var(--color-orange);
  margin: 0 auto;
  display: block;
}

.service-lead h2 {
  margin-bottom: 1rem;
}

.service-lead p {
  color: var(--color-muted-text);
  margin-bottom: 1rem;
}

.service-lead .service-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-md);
  text-align: left;
  margin: var(--gap-lg) 0;
}

.service-feature-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.service-feature-item .feature-dot {
  width: 10px;
  height: 10px;
  background: var(--color-orange);
  border-radius: 50%;
  margin-top: 0.4em;
  flex-shrink: 0;
}

.service-feature-item p {
  margin: 0;
  font-size: var(--text-body-sm);
}

/* ---- Service Visual Placeholder ---- */
.service-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  background: var(--color-light-gray);
  border-radius: var(--radius-lg);
  padding: var(--gap-lg);
}

.service-visual svg {
  width: 120px;
  height: 120px;
  color: var(--color-silver);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .service-block,
  .service-block.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .service-visual {
    min-height: 200px;
    order: -1;
  }

  .service-lead .service-features {
    grid-template-columns: 1fr;
  }
}