/* ==========================================================================
   Услуги графического дизайна — по 2 плитки в ряд
   Опорный кадр 1920:

     поля             91 слева, 95 справа → взяты симметричные 93
     отступ сверху    176 (от нижнего края блока тарифов), снизу 80
     плитки           840 × 372, шаг 54 по горизонтали и 80 по вертикали
     фон плитки       #d9d9d9, радиус 30, вырез под стрелку снизу справа
     название         Muller Light 50 / 1.12, ширина 552, по центру плитки
     стрелка          78 × 78, чёрный круг, x 750, y 294 — нижним краем
                      вровень с плиткой, как в тарифах «две плитки в ряд»

   Форма плитки — та же, что в «Тарифах»: скруглённый прямоугольник с
   вырезом в правом нижнем углу. Маска вшита data:URI: внешний файл
   блокируется CORS при открытии страницы через file://.
   Исходник формы: assets/images/offer-mask.svg
   ========================================================================== */

:root {
  --offer-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 840 372' preserveAspectRatio='none'><path fill='%23fff' d='M809.995 0H30.0045C13.4359 0 0 13.4315 0 30V342C0 358.569 13.4314 372 30 372H682.039C698.608 372 712.039 358.569 712.039 342V294C712.039 277.431 725.471 264 742.039 264H810C826.569 264 840 250.569 840 234V132V30C840 13.4315 826.564 0 809.995 0Z'/></svg>");
}

/* Фокус на секцию ставит браузер при переходе по #offers — рамка тут лишняя */
.offers:focus {
  outline: none;
}

/*
   z-index поднимает секцию над фоновой дугой, которая живёт в следующем
   блоке и заходит сюда снизу: в макете она проходит под плитками.
*/
.offers {
  position: relative;
  z-index: 1;

  /* Фигура «7» выходит за правый край кадра — режем, но не мешаем ей
     выходить вверх за секцию */
  overflow-x: clip;
  overflow-y: visible;

  padding-block: 9.1667% 4.1667%;
  padding-inline: clamp(1.25rem, 4.8438vw, 5.8125rem);
}

.offers__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(1rem, 2.8125vw, 3.375rem);
  row-gap: clamp(1.25rem, 4.1667vw, 5rem);
}

/* --- Фоновый элемент «7» ---------------------------------------------------
   Опорный кадр: x 1508, y −13 от верха секции, 481 × 824. Фигура выходит
   на 69px за правый край кадра и на 13px за верхний край секции — сверху её
   подрезает серая заливка тарифов (у неё z-index: 2), справа — overflow.

   В макете фигура развёрнута на 180°: без поворота «семёрка» встаёт вверх
   ногами — крючок наверху, а планка внизу.

   Лежит под плитками: z-index: 0 против авто у самих плиток.
   -------------------------------------------------------------------------- */

.offers__decor {
  position: absolute;
  z-index: 0;
  left: 78.5417%;
  top: -0.6771vw;
  width: 25.0521%;
  height: auto;
  transform: rotate(180deg);
  pointer-events: none;
}

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

.offer {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 840 / 372;
  text-align: center;
  color: var(--text-primary);
}

.offer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--bg-card);
  mask-image: var(--offer-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--offer-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

.offer__label {
  position: relative;
  z-index: 1;
  width: 65.7143%;
  font-size: clamp(1.25rem, 2.6042vw, 3.125rem);
  font-weight: var(--fw-light);
  line-height: 1.12;
}

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

.offer__arrow {
  position: absolute;
  right: 1.4286%;
  bottom: 0;
  z-index: 2;

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

  background-color: var(--color-black);
  border-radius: 50%;
  transition: background-color 0.25s ease;
}

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

.offer:hover .offer__arrow,
.offer:focus-visible .offer__arrow {
  background-color: var(--accent-hover);
}

/* Выбранная услуга: стрелка остаётся подсвеченной, пока форма заявки открыта.
   aria-current проставляет скрипт заявки (js/components/order.js) */
.offer[aria-current="true"] .offer__arrow {
  background-color: var(--accent-hover);
}

/* --- Планшет и мобильные: одна колонка -------------------------------------
   Ниже 900px две колонки становятся уже 400px: название в две строки
   перестаёт помещаться в отведённые ему 65.7% ширины плитки.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .offers {
    padding-block: 3rem;
    padding-inline: var(--container-pad);
  }

  .offers__grid {
    grid-template-columns: min(33.75rem, 100%);
    justify-content: center;
    row-gap: 1.25rem;
  }

  /* Фоновая графика на узком экране только мешает раскладке */
  .offers__decor {
    display: none;
  }

  .offer__label {
    width: 72%;
    font-size: clamp(1.125rem, 5vw, 1.875rem);
  }

  /*
     Вырез под стрелку — 15.2% ширины плитки; на узкой плитке кружок в
     9.3% теряется в нём, поэтому он немного крупнее.
  */
  .offer__arrow {
    width: 12%;
  }
}