@import "index.vars.css";
@import "../blocks/header.vars.css";
@import "../blocks/header.css";

/* === HERO ================================================================= */

.services-hero__inner {
  text-align: center;
}

.services-hero__title {
  max-width: 660px;
  margin-inline: auto;
}

/* === STICKY NAV =========================================================== */

.services-nav {
  position: sticky;
  top: var(--svc-nav-top);
  z-index: var(--svc-nav-z);
  background: rgba(8, 8, 10, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.services-nav__list {
  display: flex;
  justify-content: center;
  gap: 6px;
  overflow-x: auto;
  padding: 12px var(--container-padding);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.services-nav__list::-webkit-scrollbar { display: none; }

.services-nav__pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 7px 14px;
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.services-nav__pill:hover {
  color: var(--color-white);
  background: var(--color-surface-hover);
  border-color: rgba(255, 255, 255, 0.15);
}

.services-nav__pill.is-active {
  color: var(--color-white);
  background: var(--color-accent-bg);
  border-color: var(--color-accent-border);
}

/* === CATEGORY SECTIONS ==================================================== */

.services-cat {
  padding-block: 48px var(--svc-cat-gap);
}

.services-cat__title {
  font-size: var(--font-h3);
  font-weight: 500;
  color: var(--color-white);
  margin-bottom: 28px;
}

/* === SERVICE CARDS GRID =================================================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--svc-card-min), 1fr));
  gap: var(--svc-card-gap);
}

/* === SERVICE CARD ========================================================= */

.svc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svc-card__title {
  font-size: var(--font-h4);
  font-weight: 500;
  color: var(--color-white);
  line-height: var(--lh-card);
  margin: 0;
}

.svc-card__desc {
  font-size: var(--font-small);
  color: var(--color-text);
  line-height: var(--lh-faq);
  margin: 0;
}

.svc-card--link {
  transition: background var(--transition), border-color var(--transition);
}

.svc-card--link:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-accent-border);
}

.svc-card__arrow {
  margin-top: auto;
  padding-top: 12px;
  font-size: var(--font-small);
  font-weight: 500;
  color: var(--color-accent);
}

/* === CTA SECTION ========================================================== */

.services-cta__form {
  max-width: var(--svc-cta-max);
  margin-inline: auto;
}

.services-cta__agree {
  font-size: var(--font-xs);
  color: var(--color-text-faint);
  text-align: center;
}

.services-cta__agree a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* === LEAD STEPS (inline form multi-step) ================================== */

.btn--full { width: 100%; }

.lead-step { display: none; }

[data-lead-wrap][data-step="form"]    .lead-step[data-step="form"],
[data-lead-wrap][data-step="success"] .lead-step[data-step="success"],
[data-lead-wrap][data-step="error"]   .lead-step[data-step="error"] { display: block; }

.lead-step__title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 12px;
}

[data-lead-wrap][data-step="success"] .lead-step__title { color: var(--color-success); }
[data-lead-wrap][data-step="error"]   .lead-step__title { color: var(--color-error); }

[data-lead-wrap][data-step="success"] .lead-step,
[data-lead-wrap][data-step="error"]   .lead-step { text-align: center; }

.lead-step__text {
  font-size: var(--font-small);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 20px;
}

.lead-step__phone { color: var(--color-white); }
.lead-step__phone:hover { color: var(--color-accent); }