/*
 * services.css — Phase 4, Commit 1 + Commit 2.
 *
 * Stacked-cards (Commit 2): pure CSS, sticky + smart z-index + offset.
 *   - Каждая .service-card занимает slot высотой `--slot-h` (60vh default),
 *     внутри slot inner sticky'ится к фиксированному top.
 *   - z-index ascending по DOM-order (1..5) — следующая card перекрывает
 *     предыдущую при stack.
 *   - Каждая следующая card имеет вертикальный offset (--card-i * 8px)
 *     создаёт визуальный layered look "карточки чуть видны сверху".
 *   - Когда .services-stack полностью прошёл viewport — все sticky
 *     освобождаются и улетают вверх (нативное sticky behavior).
 *
 * Tilt-hover (rotateX/Y 8°) — Commit 3 через .service-card__inner.
 *
 * Anti-rule check:
 *   - Анимация только transform/opacity (sticky top — статичный, не анимируемый).
 *   - Нет overflow:hidden на body/html.
 *   - Нет animated background-gradient.
 *
 * Inner-element pattern (Q7=A):
 *   .service-card           — outer, sticky scope (position:sticky)
 *   .service-card__inner    — visible content, tilt scope (Commit 3 transform)
 *
 * Mobile (<768px) и reduce-motion: stacked-эффект отключается, обычный стек.
 */

/* ========== Layout базовый ========== */

.services-section {
  padding: 80px 0;
  /* Не overflow:hidden — нужен sticky-context на ancestor (body/html), который sticky-friendly */
}

.services-stack {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
  position: relative;
  /* gap НЕ используем — slot выставляется через .service-card min-height,
     gap бы добавил пустое пространство между sticky-карточками. */
}

/* ========== Карточка (outer = sticky slot) ========== */

.service-card {
  /* slot высотой определяет дистанцию scroll'а на одну карточку */
  min-height: 60vh;
  display: flex;
  align-items: flex-start;
  /* sticky к offset под header'ом + visual breath */
  position: sticky;
  top: calc(80px + var(--card-offset, 0px));
  perspective: 1200px;
  /* perspective задаём на outer — внутренний tilt в Commit 3 будет
     получать 3D-глубину от родителя, не нужно дублировать */
}

/* Smart z-index: следующая card перекрывает предыдущие.
 * Offset: каждая последующая sticky'ится на 8px ниже — визуальный layered look. */
.service-card:nth-child(1) { z-index: 1; --card-offset: 0px;  }
.service-card:nth-child(2) { z-index: 2; --card-offset: 8px;  }
.service-card:nth-child(3) { z-index: 3; --card-offset: 16px; }
.service-card:nth-child(4) { z-index: 4; --card-offset: 24px; }
.service-card:nth-child(5) { z-index: 5; --card-offset: 32px; }

/* ========== Карточка (inner: ВЕСЬ visible контент) ========== */

.service-card__inner {
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-deep) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-hover) var(--ease-brand),
              box-shadow   var(--dur-hover) var(--ease-brand);
  transform-style: preserve-3d;
  /* Commit 3: tilt rotateX/Y inline через JS */
}

.service-card__inner:hover {
  border-color: var(--accent-ring);
}

/* ========== Head: иконка + заголовок ========== */

.service-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.service-card__icon svg {
  width: 24px;
  height: 24px;
}

.service-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

/* ========== Teaser ========== */

.service-card__teaser {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 20px 0;
}

/* ========== Bullets ========== */

.service-card__bullets {
  list-style: none;
  margin: 0 0 24px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-card__bullets li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* Чекмарк-маркер (inline-SVG в ::before — нет иконок-шрифтов).
   Используем CSS mask — gradient через background, форма через mask path. */
.service-card__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* ========== Foot: метрика + ссылка ========== */

.service-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.service-card__metric {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-light);
  letter-spacing: 0.2px;
}

.service-card__case-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  transition: background var(--dur-hover) var(--ease-brand),
              border-color var(--dur-hover) var(--ease-brand),
              transform var(--dur-fast) var(--ease-brand);
  /* magnetic CTA из Phase 2: --mx/--my переменные пишутся initMagnetic */
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  display: inline-block;
}

.service-card__case-link:hover {
  background: var(--accent-soft);
  border-color: var(--accent-ring);
}

/* ========== Mobile (<768px): отключаем sticky, обычный вертикальный стек ========== */

@media (max-width: 767px) {
  .services-section {
    padding: 56px 0;
  }
  .services-stack {
    gap: 20px;
    margin-top: 32px;
  }
  /* Sticky off — карточки в обычном flow, без stack-эффекта.
     min-height/top/perspective сбрасываем, чтобы не оставлять "дырку" в layout. */
  .service-card {
    position: static;
    min-height: auto;
    top: auto;
    --card-offset: 0px;
    perspective: none;
  }
  .service-card__inner {
    padding: 24px;
  }
  .service-card__head {
    gap: 12px;
    margin-bottom: 12px;
  }
  .service-card__icon {
    width: 40px;
    height: 40px;
  }
  .service-card__icon svg {
    width: 20px;
    height: 20px;
  }
  .service-card__title {
    font-size: 18px;
  }
  .service-card__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ========== Reduce motion: stacked-эффект отключён, обычный стек ==========
 * Тот же поведенческий fallback, что mobile — sticky off + plain flow.
 * Высота слотов и offset больше не применяются. */
@media (prefers-reduced-motion: reduce) {
  .services-stack {
    gap: 24px;
  }
  .service-card {
    position: static;
    min-height: auto;
    top: auto;
    --card-offset: 0px;
    perspective: none;
  }
}

/* ==========================================================================
 * Process section — Phase 4, Commit 4.
 *
 * Mobile-first vertical stack of 4 .process-step articles.
 * Desktop pinned-horizontal scroll added in Commit 5 via process-pin.js
 * (gsap.matchMedia guard: pointer:fine + ≥768px + !reduce-motion).
 *
 * .process-step--accent marks the "Demo 24 h" step (USP).
 * .process-step__badge is the "Kiirendus" pill (position:absolute top).
 * ========================================================================== */

/* ---------- Section shell ---------- */

.process-section {
  padding: 80px 0;
}

.process-section__header {
  text-align: center;
  margin-bottom: 48px;
  padding: 0 24px;
}

.process-section__header h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 12px;
}

.process-section__header p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}

/* ---------- Steps wrapper ---------- */

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 24px;
  max-width: 760px;
  margin: 0 auto;
}

/* ---------- Step card ---------- */

.process-step {
  position: relative;
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-deep) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
}

/* ---------- Accent variant (Demo 24 h) ---------- */

.process-step--accent {
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 32px rgba(108, 92, 231, 0.2);
}

.process-step--accent .process-step__icon {
  background: rgba(108, 92, 231, 0.15);
  color: var(--accent);
}

/* ---------- Badge ("Kiirendus") ---------- */

.process-step__badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-family: var(--font-body);
  line-height: 1.4;
}

/* ---------- Icon ---------- */

.process-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
  margin-bottom: 20px;
}

.process-step__icon svg {
  width: 24px;
  height: 24px;
}

/* ---------- Header (title + duration) ---------- */

.process-step__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.process-step__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.process-step__duration {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-light);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* ---------- Bullets ---------- */

.process-step__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.process-step__bullets li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* Checkmark marker via CSS mask — no icon fonts (anti-rule §5) */
.process-step__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* ---------- Mobile (<768px): already vertical stack, just tighten padding ---------- */

@media (max-width: 767px) {
  .process-section {
    padding: 56px 0;
  }
  .process-section__header {
    margin-bottom: 32px;
    padding: 0 16px;
  }
  .process-steps {
    padding: 0 16px;
    gap: 20px;
  }
  .process-step {
    padding: 24px;
  }
  .process-step__title {
    font-size: 17px;
  }
  .process-step__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
  }
  .process-step__icon svg {
    width: 20px;
    height: 20px;
  }
}