/* ==========================================================================
   «Узнать больше о нас»
   Фон карточки — фирменная линейная графика (гайд 6.2): вложенные контуры
   со смещением. Их последовательное масштабирование — штатная анимация бренда (6.3).
   ========================================================================== */

.cta {
  padding-block: 6.6875rem 12.5rem;
  background: var(--c-white);
}

.cta__wrap { position: relative; }

.cta__card {
  position: relative;
  aspect-ratio: 1445 / 426;
  min-height: 22.5rem;
  border-radius: var(--r-panel);
  background: var(--c-spruce-deep);
  overflow: hidden;
  isolation: isolate;
}

/* --- Световые пятна --- */

.cta__glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.cta__glow img { width: 100%; height: 100%; }

.cta__glow--a { left: 4.8%;  top: -76.5%; width: 36.1%; aspect-ratio: 1; }
.cta__glow--b { left: 21.1%; top: 72.8%;  width: 36.1%; aspect-ratio: 1; }
.cta__glow--c { left: 56.3%; top: 19.2%;  width: 47.1%; aspect-ratio: 1; }

/* --- Линейная графика --- */

.cta__lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.cta__line {
  position: absolute;
  border: 0.375rem solid var(--c-line);
  border-radius: var(--r-outline);
  transform-origin: 0% 0%;
}

.cta__line:nth-child(1) { left: 46.78%; top: 16.67%; width: 54.81%; height: 134.04%; }
.cta__line:nth-child(2) { left: 51.21%; top: 30.05%; width: 53.56%; height: 131.46%; }
.cta__line:nth-child(3) { left: 56.33%; top: 45.31%; width: 53.56%; height: 131.46%; }
.cta__line:nth-child(4) { left: 62.49%; top: 64.32%; width: 53.56%; height: 131.46%; }

/* --- Контент --- */

.cta__body {
  position: relative;
  z-index: 3;
  max-width: 35rem;
  padding: 3.0625rem 0 0 3.0625rem;
}

.cta__title { color: var(--c-white); }

.cta__text {
  max-width: 29.8125rem;
  margin-top: 2rem;
  color: var(--t-white-80);
}

.cta__actions {
  display: flex;
  align-items: center;
  gap: 1.5625rem;
  margin-top: 3.5rem;
}

/* Цвет — как у кнопки в шапке (btn--mint); высота — в рост значков соцсетей */
.cta__btn { height: 3.125rem; }

.cta__socials { display: flex; gap: 0.5rem; }

.cta__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: var(--r-social);
  background: var(--c-teal);
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.cta__social:hover { background: #00a3af; transform: translateY(-0.1875rem); }

.cta__social img { width: 1.5625rem; height: 1.5625rem; }
.cta__social--vk img { width: 1.5rem; height: 1.5rem; }

/* --- Портрет --- */

/* Портрет лежит внутри карточки и обрезается её скруглённой рамкой:
   в макете он выступал за верхний и правый край, но людей просили убрать внутрь. */
.cta__portrait {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 53.22%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.cta__portrait img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
}

/* Ниже 1180px карточка перестраивается: текст сверху, портрет снизу.
   Всё, что ниже, относится к этой раскладке, а не только к телефону. */
@media (max-width: 1180px) {
  .cta { padding-block: 4.5rem 6rem; }
  .cta__card { aspect-ratio: auto; }

  /* Фирменная «цепная реакция» — и контуры, и свечения — нарисована под широкую
     карточку макета. В перестроенной раскладке от неё остаются обрывки дуг
     поперёк текста и под касками, поэтому здесь её не показываем. */
  .cta__glow,
  .cta__lines { display: none; }

  /* Нижнее поле больше высоты портрета — на этот зазор значки соцсетей
     отходят от касок. Раньше поле равнялось высоте, и значки лежали на них. */
  .cta__body { max-width: none; padding: 2.5rem 2.5rem 21.75rem; }
  .cta__portrait { width: 72%; right: 0; height: 20.25rem; }
  .cta__actions { flex-wrap: wrap; gap: 1rem; }
}

@media (max-width: 680px) {
  .cta { padding-block: 3.5rem 4rem; }

  .cta__body { padding: 1.75rem 1.5rem 16.75rem; }
  .cta__text { margin-top: 1.25rem; }
  .cta__actions { margin-top: 2rem; }

  /* Портрет опущен: раньше значки соцсетей упирались в каски. */
  .cta__portrait { width: 100%; right: 0; height: 15.5rem; }
  .cta__social { width: 2.75rem; height: 2.75rem; }
}