/* ============================================================
   БЛОК УСЛУГ — Figma 902:2775 (секция 1440×1333) / 902:2612 (грид) /
   902:2613 (карточка) / 902:2629 (инфо-панель). Все значения из макета.
   Сетка: 12 колонок, margin 88, gutter 24 → контент 1264.
   ============================================================ */
.svc {
  position: relative; overflow: hidden;
  z-index: 2;                          /* накрывает поднятый блок STANDARD сверху */
  /* верхние углы (radius 32) были невидимы: за ними body #0f0f0f = цвет .svc.
     Наезжаем на 32px на блок 2 (#000) → углы открывают тёмный фон, скругление видно
     (симметрично нижним углам, что лежат на блоке 4). */
  margin-top: -32px;
  border-radius: 32px;
  /* фон блока — готовый bg 03.svg (воронка + rx32), Figma 903:2778 */
  background: #0f0f0f url('../../public/assets/services/bg-03.svg') center top / cover no-repeat;
  padding: 88px 0;                     /* заголовок y=88, нижний отступ 88 */
}

/* пунктирная линия у заголовка (Figma 902:2776: x=28, w=567, наклон ≈ −4.41°) */
.svc__line {
  position: absolute; left: calc(50% - 720px + 28px); top: 224px;
  width: 567px; height: 1px; z-index: 0; pointer-events: none;
  transform: rotate(-4.41deg);
}
.svc__line svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ── ГЛОБАЛЬНЫЙ blur-reveal: текст/карточки появляются из блюра при скролле на блок ── */
.reveal { opacity: 0; filter: blur(12px); transform: translateY(16px);
  transition: opacity .7s ease, filter .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible { opacity: 1; filter: blur(0); transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; filter: none; transform: none; transition: none; } }

.svc__inner { position: relative; z-index: 1; width: 1264px; max-width: calc(100% - 48px); margin: 0 auto; }

/* заголовок: Druk 72/72, слева, 474×144 (Figma 902:2755) */
.svc__head { margin: 0 0 64px; }       /* грид y=296: 88+144+64 */
.svc__title {
  margin: 0; max-width: 540px;
  font-family: var(--ff-display); font-weight: 700; font-style: italic;
  font-size: 72px; line-height: 72px; text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 38.834%, #787674 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: normal; }

/* грид карточек: 3×405, gutter 24 (Figma 902:2612) */
.svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; grid-auto-rows: 1fr; }

/* карточка 405×421: паддинг 8, радиус 12 (UI как в Brutalny Kalendarz) */
.svc-item {
  background: var(--dark-1000); border: 1px solid var(--light-40); border-radius: 12px;
  padding: 8px; display: flex; flex-direction: column; overflow: hidden;
  position: relative; transition: border-color .15s ease, transform .15s ease;
}
.svc-item:hover { transform: translateY(-4px); }
.svc-item:hover .svc-item__text,
.svc-item:hover .svc-item__arrow { background: #1b1b1b; }
.svc-item__media { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 389 / 223; background: #000; }
.svc-item__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.svc-item:hover .svc-item__media img { transform: scale(1.04); }

/* инфо-панель (Figma 902:2629): текст | стрелка, фоны #141414, вплотную к фото */
.svc-item__body { display: flex; align-items: stretch; flex: 1; margin-top: 0; border-radius: 8px; overflow: hidden; }
.svc-item__text {
  flex: 1; min-width: 0; background: #141414; padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid var(--light-40); transition: background .15s ease;
}
.svc-item__title {
  margin: 0; font-family: var(--ff-body); font-weight: 700;
  font-size: 24px; line-height: 35px; text-transform: uppercase; color: var(--light-1000); letter-spacing: normal; }
.svc-item__desc {
  margin: 0; font-family: var(--ff-body); font-weight: 400;
  font-size: 18px; line-height: 28px; letter-spacing: var(--ls-body); color: var(--light-600);
}
.svc-item__arrow {
  width: 48px; flex: none; background: #141414;
  display: flex; align-items: center; justify-content: center;
  color: var(--light-1000); transition: background .15s ease;
}
.svc-item__arrow .btn-arrow { width: 16px; height: 16px; }
/* морф стрелки » → ↗ на hover карточки (как на CTA-кнопке) */
.svc-item:hover .btn-arrow__chev { opacity: 0; transform: translate(3px, -3px) scale(.6); }
.svc-item:hover .btn-arrow__diag { opacity: 1; transform: translate(0, 0) scale(1); }

/* скрытые услуги — раскрываются по «Zobacz więcej» */
.svc-item--more { display: none; }
.svc.is-expanded .svc-item--more { display: flex; }

/* кнопка «Zobacz więcej» — Figma 205:249 1:1: контейнерная, bg dark/1000,
   border light/40, rounded 12, текст adineue Bold 14 UPPER + иконка »↧ (16px) */
.svc__more { margin-top: 24px; display: flex; justify-content: center; }
.svc__more-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 1248px; max-width: 100%;
  padding: 14px 20px; cursor: pointer;
  background: var(--dark-1000); border: 1px solid var(--light-40); border-radius: 12px;
  font-family: var(--ff-body); font-weight: 700; font-size: 14px; line-height: 24px;
  text-transform: uppercase; color: var(--light-1000);
  transition: background .15s ease;          /* анимируем только заливку */ letter-spacing: normal; }
.svc__more-btn:hover { background: #161616; }  /* подсвечиваем только фон, обводку не трогаем */
.svc__more-ico { width: 16px; height: 16px; display: block; transition: transform .3s ease; }
.svc.is-expanded .svc__more-ico { transform: rotate(180deg); }

/* ---- адаптив ---- */
@media (max-width: 1100px) {
  .svc__grid { grid-template-columns: repeat(2, 1fr); }
  .svc__title { font-size: 52px; line-height: 52px; max-width: 420px; }
  .svc__lines, .svc__line { display: none; }
}
@media (max-width: 768px) {
  /* мобайл pixel-perfect (Figma 477:1495): pad 48/16, header Druk 40, gap 12 */
  .svc { padding: 48px 0; border-radius: 32px; }
  .svc__inner { max-width: calc(100% - 32px); }
  .svc__head { margin-bottom: 32px; position: relative; text-align: center; }
  /* заголовок по центру (Figma 477:1059) */
  .svc__title { font-size: 40px; line-height: 40px; max-width: none; text-align: center; }
  /* dash под заголовком (Figma 477:1200) — вернуть на мобайле, по центру, лёгкий наклон,
     проходит по нижней строке заголовка */
  .svc__line {
    display: block; position: absolute; left: 50%; top: 131px;   /* поднята на 24px (была 155) */
    width: min(313px, calc(100% - 24px)); height: 1px; z-index: 1;
    transform: translateX(-50%) rotate(-2.4deg);
  }
  .svc__grid { grid-template-columns: 1fr; gap: 12px; max-width: none; margin: 0; }
  .svc-item { padding: 8px; }
  .svc-item__media { aspect-ratio: auto; height: 204px; }
  .svc-item__text { padding: 20px; gap: 8px; }
  .svc-item__title { font-size: 20px; line-height: 28px; letter-spacing: .02em; }   /* +трекинг: на мобилке жирный аплкейс налазил при −6% */
  .svc-item__desc { font-size: 16px; line-height: 24px; letter-spacing: var(--ls-body); }
  .svc-item__arrow { width: 48px; }
  .svc__more-btn { height: 56px; padding: 8px; }
}