/* wwwroot/css/services.css */

.services-hero {
  min-height: 50vh;
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border-bottom: 0.5px solid var(--border-color);
  padding-top: 64px;
}
.services-hero__inner { padding: var(--sp-16) 0; }
.services-hero__label { margin-bottom: var(--sp-4); }
.services-hero__heading { margin-bottom: var(--sp-4); }

.service-section {
  padding: var(--sp-24) 0;
  border-bottom: 0.5px solid var(--border-color);
}
.service-section--alt { background: var(--bg-card); }

.service-layout {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: var(--sp-16);
  align-items: center;
}
.service-layout--reverse { grid-template-columns: 45% 55%; }
.service-layout--reverse .service-content { order: 2; }
.service-layout--reverse .service-visual { order: 1; }

.service-num { margin-bottom: var(--sp-4); }
.service-heading { margin-bottom: var(--sp-4); }
.service-desc { margin-bottom: var(--sp-8); }

.service-caps { margin-bottom: var(--sp-6); }
.service-caps__title {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--c-storm-2);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.service-caps__list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.service-caps__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-base);
  color: var(--c-storm-2);
}
.service-tech { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }

.service-link {
  font-size: var(--text-sm);
  color: var(--c-core);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  transition: color var(--dur-fast) var(--ease);
}
.service-link:hover { color: var(--c-ice); }

.service-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  background: var(--bg-surface);
  border: 0.5px solid var(--border-color);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}
.service-visual__icon {
  width: 120px;
  height: 120px;
  color: var(--c-storm-1);
  opacity: 0.4;
}
.service-visual__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(91,127,166,0.06) 0%, transparent 70%);
}

.services-bottom-cta {
  text-align: center;
  padding: var(--sp-24) 0;
}
.services-bottom-cta__heading { margin-bottom: var(--sp-4); }
.services-bottom-cta__body { margin-bottom: var(--sp-8); max-width: 480px; margin-left: auto; margin-right: auto; }

@media (max-width: 1024px) {
  .service-layout,
  .service-layout--reverse { grid-template-columns: 1fr; gap: var(--sp-8); }
  .service-layout--reverse .service-content { order: 0; }
  .service-layout--reverse .service-visual { order: 0; }
  .service-visual { min-height: 220px; }
}