/*
 * Services — Figma desktop 13:345, mobile 44:2652.
 * Desktop: pt 100, pb 200, px 48; main → extras gap 120;
 *   heading (686) → cards gap 80; рядки карток gap 24, картки gap 16.
 *   Великі картки (2 кол.): p 8 (pb 0), фото 258 radius 12, gap 24;
 *   тіло px 16 pb 26, title 30/1.2, desc 20/1.2.
 *   Малі картки (3 кол.): p 24, title 30, desc 20, gap ≥ 24.
 *   Extras: title 20/1.1, чипси #f3f8fa px 20 py 16 radius 6 (18 Medium),
 *   gap 8; кнопка під ними gap 32.
 * Mobile: py 70, px 12, gap 64; усе в стовпчик; title 24, desc 16;
 *   бейдж «most popular» у лівому верхньому куті фото (44:2753).
 */
.services {
  padding: 100px var(--gutter) 200px;
  background: var(--color-white);
}

.services__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
  max-width: 1344px;
  margin: 0 auto;
}

.services__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}

.services__heading {
  gap: 32px;
  max-width: 686px;
}

.services__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.services__row {
  display: grid;
  gap: 16px;
}

.services__row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.services__row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Велика картка з фото ---------- */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px 8px 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  background: var(--color-surface);
}

/* Обгортка для зуму фото (img-zoom.css) */
.service-card__photo-wrap {
  flex-shrink: 0;
  width: 100%;
  border-radius: 12px;
}

.service-card__photo {
  display: block;
  width: 100%;
  height: 258px;
  border-radius: 12px;
  object-fit: cover;
}

.service-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 0 16px 26px;
}

.service-card__body > .btn {
  align-self: flex-start;
}

.service-card__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.service-card__title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
}

.service-card__text {
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-text-secondary);
}

.service-card__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-card__chip {
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--color-white-20);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}

.service-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-card__badge img {
  width: 18px;
  height: 18px;
}

/* Блик на бейджі, коли картка з'являється в полі зору — js/services-badge-shine.js.
   Бейдж білий, тому смуга — світло-бірюзова, а не біла. */
.service-card__badge {
  position: relative; /* на мобільному перевизначається на absolute */
  overflow: hidden;
  isolation: isolate;
}

.service-card__badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, rgba(198, 225, 232, 0) 0%, var(--color-primary-soft) 50%, rgba(198, 225, 232, 0) 100%);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}

.service-card__badge.is-shining::after {
  transform: translateX(260%) skewX(-20deg);
  transition: transform 0.9s ease-in-out;
}

/* Deep Cleaning: py 9, тіло pb 8 — 13:524 */
.service-card--deep {
  padding-bottom: 9px;
  padding-top: 9px;
}

.service-card--deep .service-card__body {
  padding-bottom: 8px;
}

/* Recurring: бірюзова, білий текст, розмиті плями — 13:461 */
.service-card--featured {
  background: var(--color-primary);
  color: var(--color-white);
}

.service-card--featured .service-card__text {
  color: var(--color-white);
}

/* Розмиті плями (Ellipse 1–3), координати відносно картки 13:461.
   z-index −1 усередині isolation: isolate — під контентом, над фоном картки. */
.service-card__glow {
  position: absolute;
  z-index: -1;
  max-width: none;
  pointer-events: none;
}

.service-card__glow--1 {
  left: -239.7px;
  top: 315.5px;
  width: 449.878px;
  height: 532.468px;
  transform: rotate(-18deg);
}

.service-card__glow--2 {
  left: 442.8px;
  top: 162.7px;
  width: 414.668px;
  height: 353.832px;
  transform: rotate(-46.68deg);
}

.service-card__glow--3 {
  left: -19.7px;
  top: 425.5px;
  width: 449.878px;
  height: 532.468px;
  transform: rotate(-90.78deg);
}

/* ---------- Мала картка ---------- */
.service-mini {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
  background: var(--color-surface);
}

.service-mini .service-card__title {
  max-width: 270px;
}

/* ---------- Додаткові послуги ---------- */
.services__extras {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.services__extras-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
}

.services__extras-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 540px;
}

.services__extra {
  padding: 16px 20px;
  border-radius: 6px;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .services__row--3 {
    grid-template-columns: 1fr;
  }

  .service-mini .service-card__title {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .services {
    padding: 70px var(--gutter);
  }

  .services__inner {
    gap: 64px;
  }

  /* Між заголовком/підзаголовком і картками — 48 (у макеті 44:2653 було 80) */
  .services__main {
    gap: 48px;
  }

  .services__heading {
    gap: 32px;
  }

  .services__cards {
    gap: 16px;
  }

  .services__row--2 {
    grid-template-columns: 1fr;
  }

  .service-card__body {
    gap: 32px;
    padding: 0 4px 12px;
  }

  .service-card--deep .service-card__body {
    padding-bottom: 12px;
  }

  .service-card__title {
    font-size: 24px;
  }

  .service-card__text {
    font-size: 16px;
  }

  .service-card__chip {
    font-size: 12px;
  }

  .service-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    border-radius: 8px 0 8px 0;
    font-size: 12px;
  }

  .service-card__badge img {
    width: 16px;
    height: 16px;
  }

  .service-card__glow--1 { left: -251.7px; }
  .service-card__glow--2 { left: 430.8px; }
  .service-card__glow--3 { left: -31.7px; }

  .service-mini {
    gap: 16px;
    padding: 12px;
  }

  .service-mini--tall {
    gap: 24px;
  }

  .services__extras-title {
    font-size: 16px;
  }

  .services__extras-list {
    max-width: 330px;
  }

  .services__extra {
    padding: 12px;
    font-size: 14px;
  }
}