/* ==========================================================================
   SML - Services Page
   Файл: /wp-content/themes/sml/src/css/pages/services.css
   Версия: 1.0.0
   Author: NUVREN (https://nuvren.com)

   Назначение:
   - Премиальная подача страницы /services/;
   - Сдержанный ритм, компактные карточки, предсказуемая сетка;
   - Важно: правила ниже намеренно более специфичны, чтобы перебивать .grid / базовые card стили.
   ========================================================================== */

.page-services .services-hub {
  background: transparent;
}

/* ------------------------------------------------------------
   Hero split
------------------------------------------------------------ */
.page-services .services-hub__split {
  align-items: start;
  gap: var(--space-8);
}

.page-services .services-hub__intro-actions {
  margin-top: var(--space-6);
}

/* Правая CTA карточка: спокойнее, "дороже" по материалам */
.page-services .services-hub__cta-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

/* Небольшая "липкость" CTA на десктопе: выглядит премиально и удобно */
@media (min-width: 992px) {
  .page-services .services-hub__cta {
    position: sticky;
    top: 110px;
  }
}

/* ------------------------------------------------------------
   Groups rhythm
------------------------------------------------------------ */
.page-services .services-hub__group .section-head {
  margin-bottom: var(--space-6);
}

.page-services .services-hub__group.mt-12 {
  margin-top: var(--space-9);
}

/* ------------------------------------------------------------
   Premium grid override
   Проблема: .grid--3 растягивает 1-2 карточки на всю ширину.
   Решение: фиксируем "дорогой" диапазон ширины карточек и центрируем сетку.
------------------------------------------------------------ */
.page-services .services-hub__grid.grid,
.page-services .services-hub__grid.grid.grid--3 {
  display: grid !important;
  gap: var(--space-6) !important;

  /* Карточки не растягиваются до бесконечности */
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px)) !important;

  /* При 1-2 карточках сетка выглядит собранно */
  justify-content: center !important;
  align-items: stretch;
}

/* ------------------------------------------------------------
   Service card - compact premium
   Цели:
   - Убрать "огромность" (особенно медиа);
   - Сделать форму и материалы спокойнее;
   - Аккуратный hover.
------------------------------------------------------------ */
.page-services .card--service {
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.75) inset;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.page-services .card--service:hover {
  transform: translateY(-2px);
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.09),
    0 1px 0 rgba(255, 255, 255, 0.78) inset;
}

/* Ссылка - на всю карточку */
.page-services .card--service > .card__link,
.page-services .card--service .card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Медиа - главный источник "огромности". Фиксируем высоту жестко, чтобы не зависеть от базовых стилей. */
.page-services .card--service .card__media {
  position: relative;
  height: 210px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* Легкий градиент поверх - помогает премиальности и читабельности pill */
.page-services .card--service .card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 260px at 18% 18%, rgba(31, 122, 58, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), transparent 36%, rgba(0, 0, 0, 0.10));
  pointer-events: none;
}

.page-services .card--service .card__media-img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: 58% 50%;
  display: block;
  filter: saturate(0.96) contrast(1.03) brightness(1.02);
}

/* Fallback медиа - мягкий градиент, без "серого блока" */
.page-services .card--service .card__media-fallback {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(680px 360px at 22% 18%, rgba(31, 122, 58, 0.12), transparent 60%),
    radial-gradient(680px 420px at 82% 44%, rgba(0, 0, 0, 0.05), transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 246, 0.98));
}

/* Pill - меньше и аккуратнее */
.page-services .card--service .card__pill {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;

  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
}

/* Контент - компактнее */
.page-services .card--service .card__body {
  padding: 16px 18px 18px;
}

.page-services .card--service .card__title {
  margin: 0;
  line-height: 1.18;
  letter-spacing: -0.012em;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-services .card--service .card__text {
  margin: 10px 0 0;
  line-height: 1.55;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Learn more" - сдержаннее */
.page-services .card--service .card__more {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--font-weight-semibold);
}

/* ------------------------------------------------------------
   Final card - чтобы не выглядело как "второй хиро"
------------------------------------------------------------ */
.page-services .services-hub__final-card {
  border-radius: var(--radius-lg);
}

.page-services .services-hub__final-card .card__body {
  padding: clamp(18px, 2.2vw, 28px);
}

/* ------------------------------------------------------------
   Mobile tuning
------------------------------------------------------------ */
@media (max-width: 768px) {
  .page-services .services-hub__split {
    gap: var(--space-6);
  }

  .page-services .services-hub__group.mt-12 {
    margin-top: var(--space-8);
  }

  .page-services .services-hub__group .section-head {
    margin-bottom: var(--space-5);
  }

  .page-services .card--service .card__media {
    height: 190px !important;
  }
}

@media (max-width: 520px) {
  .page-services .services-hub__grid.grid,
  .page-services .services-hub__grid.grid.grid--3 {
    grid-template-columns: 1fr !important;
  }

  .page-services .card--service .card__body {
    padding: 14px 16px 16px;
  }
}