/* ==========================================================================
   CTA — полупрозрачная кнопка «текст + круглая стрелка»
   Размеры по макету при ширине 1920 — блок 429 × 74:

     плашка   339 × 72, radius 43, rgba(255,255,255,.65), Muller Light 24px
     круг     74 × 74, тот же фон, стрелка вверх-вправо
     зазор    16px

   Заливка 65% в покое, 100% при наведении.

   Компонент вынесен отдельно: та же кнопка используется в плитках услуг.
   ========================================================================== */

.cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.625rem, 0.8333vw, 1rem);
  color: var(--text-primary);
}

/*
   Без backdrop-filter и без обводки: размытие делало фон под кнопкой
   однородным, и заливка 65% читалась как сплошная белая. Сейчас сквозь
   кнопку видна сама фотография. В макете blur был 0.771px, то есть
   практически нулевой — так что это ещё и ближе к оригиналу.
*/
.cta__label,
.cta__icon {
  background-color: rgb(255 255 255 / 65%);
  transition: background-color 0.25s ease;
}

.cta__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(3rem, 3.75vw, 4.5rem);
  padding-inline: clamp(1.5rem, 3.4375vw, 4.125rem);
  font-size: clamp(1rem, 1.25vw, 1.5rem);
  font-weight: var(--fw-light);
  line-height: 1.12;
  white-space: nowrap;
  border-radius: 999px;
}

.cta__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: clamp(3rem, 3.8542vw, 4.625rem);
  aspect-ratio: 1;
  border-radius: 50%;
}

.cta__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Наведение: заливка становится полностью непрозрачной, 0.65 → 1 */
.cta:hover .cta__label,
.cta:hover .cta__icon,
.cta:focus-visible .cta__label,
.cta:focus-visible .cta__icon {
  background-color: rgb(255 255 255 / 100%);
}

/* --- Тёмный вариант --------------------------------------------------------
   Кнопка на первом экране «Архитектурного проекта»: та же геометрия, но
   заливка чёрным 50% и белый текст — фотография под ней светлая.
   -------------------------------------------------------------------------- */

.cta--inverse {
  color: var(--text-inverse);
}

.cta--inverse .cta__label,
.cta--inverse .cta__icon {
  background-color: rgb(0 0 0 / 50%);
}

.cta--inverse:hover .cta__label,
.cta--inverse:hover .cta__icon,
.cta--inverse:focus-visible .cta__label,
.cta--inverse:focus-visible .cta__icon {
  background-color: rgb(0 0 0 / 80%);
}

/* --- Акцентный вариант -----------------------------------------------------
   Кнопка на первом экране «Графического дизайна»: та же геометрия, но
   заливка сплошная — под кнопкой белый фон, просвечивать нечему.
   -------------------------------------------------------------------------- */

.cta--accent {
  color: var(--text-inverse);
}

.cta--accent .cta__label,
.cta--accent .cta__icon {
  background-color: var(--accent-hover);
}

.cta--accent:hover .cta__label,
.cta--accent:hover .cta__icon,
.cta--accent:focus-visible .cta__label,
.cta--accent:focus-visible .cta__icon {
  background-color: var(--accent);
}