/* ==========================================================================
   Услуги
   Опорный кадр 1920 × 1094:

     фон              #e9e9e9
     поля             97 слева и справа (как у фото в About)
     плитки           540 × 862, шаг 53, три в ряд: x 97 / 690 / 1283
     отступ сверху    136, снизу 96 — верхний по правке уменьшен до 78
     изображение      535 × 862 — на 5px уже плитки: справа выступает стрелка
     плашка           339 × 72, x 12, y 780 (Muller Light 24px)
     стрелка          78 × 78, чёрный круг, x 462 (=правый край), y 777

   Форма изображения повторяет приём из About: скруглённый прямоугольник с
   вырезом, только вырез здесь в правом нижнем углу — под круглую стрелку.
   Маска инлайном (data:URI), иначе она блокируется CORS при file://.
   ========================================================================== */

:root {
  /* Маска плитки: 535 × 862, радиус 37, вырез под стрелку снизу справа */
  --service-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 535 862' preserveAspectRatio='none'><path fill='%23fff' d='M498 0H37C16.5655 0 0 16.5655 0 37V825C0 845.435 16.5655 862 37 862H416.501C436.936 862 453.501 845.435 453.501 825V801.873C453.501 781.439 470.067 764.873 490.501 764.873H498C518.435 764.873 535 748.308 535 727.873V37C535 16.5655 518.435 0 498 0Z'/></svg>");
}

.services {
  background-color: var(--bg-muted);
  padding-block: 4.0833% 5%;
  padding-inline: clamp(1.25rem, 5.0521vw, 6.0625rem);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.7604vw, 3.3125rem);
}

/* --- Плитка --------------------------------------------------------------- */

.service {
  position: relative;
  display: block;
  aspect-ratio: 540 / 862;
  color: var(--text-primary);
}

/* Изображение на 5px уже плитки — справа под стрелку остаётся поле */
.service__media {
  position: absolute;
  inset: 0 0.9259% 0 0;
  display: block;
  overflow: hidden;
  mask-image: var(--service-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--service-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

.service__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service:hover .service__photo {
  transform: scale(1.04);
}

/* --- Третья плитка: генеративная графика ----------------------------------
   Три слоя: белая основа → размытое оранжевое свечение → решётка ромбов.

   Решётка — растр, выгруженный из макета (535 × 830). Ромбы в нём уже несут
   цвет свечения, между ними прозрачно, поэтому слой просто кладётся сверху:
   в полосе видны ромбы, вне её — плавное свечение. Смещение сверху 32px
   повторяет положение группы Pattern в макете (32 / 862 = 3.7123%).
   -------------------------------------------------------------------------- */

.service__media--graphic {
  background-color: var(--color-white);
}

/*
   Свечение и решётка лежат на отдельном слое, а не на самой .service__media:
   так их можно приблизить на наведении одним трансформом от центра плитки —
   ровно как фотографию в остальных двух. Белая основа при этом не двигается,
   двигать её и незачем.
*/
.service__art {
  position: absolute;
  inset: 0;
  transition: transform 0.5s ease;
}

.service:hover .service__art {
  transform: scale(1.04);
}

.service__art::before,
.service__art::after {
  content: "";
  position: absolute;
}

/* Свечение: ядро 857.204 в точке 98.51 / 215.79, плюс поля под размытие */
.service__art::before {
  left: -11.837%;
  top: 6.259%;
  width: 220.71%;
  aspect-ratio: 1;
  background-image: url("../../assets/images/service-graphic-glow.svg");
  background-size: 100% 100%;
}

.service__art::after {
  inset: 3.7123% 0 0 0;
  background-image: url("../../assets/images/service-graphic-pattern.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --- Плашка с названием ---------------------------------------------------
   Та же полупрозрачная кнопка, что в About: заливка 65% → 100% на наведении.
   -------------------------------------------------------------------------- */

.service__label {
  position: absolute;
  left: 2.2222%;
  bottom: 1.1601%;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 62.7778%;
  height: 8.3527%;

  font-size: clamp(0.875rem, 1.25vw, 1.5rem);
  font-weight: var(--fw-light);
  line-height: 1.12;
  white-space: nowrap;

  background-color: rgb(255 255 255 / 65%);
  border-radius: 999px;
  transition: background-color 0.25s ease;
}

.service:hover .service__label,
.service:focus-visible .service__label {
  background-color: rgb(255 255 255 / 100%);
}

/* --- Круглая стрелка ------------------------------------------------------ */

.service__arrow {
  position: absolute;
  right: 0;
  bottom: 0.812%;
  z-index: 2;

  display: grid;
  place-items: center;
  width: 14.4444%;
  aspect-ratio: 1;

  background-color: var(--color-black);
  border-radius: 50%;
}

.service__arrow svg {
  width: 71.795%;
  height: 71.795%;
  fill: var(--color-white);
}

/* --- Планшет: две колонки ------------------------------------------------- */

@media (max-width: 1100px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2.7604vw, 3.3125rem);
  }

  .service__label {
    font-size: clamp(0.9375rem, 1.9vw, 1.25rem);
  }
}

/* --- Мобильные: одна колонка ---------------------------------------------- */

@media (max-width: 700px) {
  .services {
    padding-block: 0 3.5rem;
    padding-inline: var(--container-pad);
  }

  .services__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .service {
    aspect-ratio: 540 / 700;
  }

  .service__label {
    height: 3.5rem;
    font-size: 1.0625rem;
    bottom: 1.5%;
  }

  /* Плитка на телефоне ниже макетной (540 × 700 вместо 540 × 862), и растяжка
     решётки на всю высоту сплющивала ромбы. Ширина задаётся, высота считается
     по пропорции картинки, лишнее снизу срезается рамкой плитки */
  .service__art::after {
    background-size: 100% auto;
  }

  /* Кружок садится плотнее в вырез: в одной колонке плитка шире, чем в
     макете, и от процентных полей зазор вокруг стрелки расходится */
  .service__arrow {
    right: 4px;
    bottom: 0.312%;
    width: 13%;
    max-width: 4.375rem;
  }
}