/* =========================================================
   Блок: content-split — "Кто мы/что делаем" и "В чём идея проекта"
   Один блок, модификатор --reverse меняет сторону картинки.
   ========================================================= */

.content-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-7);
}

.content-split--reverse {
  direction: rtl;
}

.content-split--reverse > * {
  direction: ltr;
}

.content-split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--color-border);
}

.content-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-split__dots {
  position: absolute;
  top: -28px;
  right: -28px;
  width: 96px;
  height: 96px;
  z-index: -1;
  background-image: radial-gradient(var(--color-accent) 3px, transparent 3.5px);
  background-size: 18px 18px;
  opacity: 0.55;
}

.content-split--reverse .content-split__dots {
  right: auto;
  left: -28px;
}

.content-split__body .eyebrow {
  margin-bottom: var(--space-3);
}

.content-split__body h2 {
  margin-bottom: var(--space-4);
}

.content-split__body p + p {
  margin-top: var(--space-3);
}

.content-split__note {
  position: relative;
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  font-weight: 600;
}

/* Постоянная бегущая подсветка бордера (см. glow-border в base.css) */
.content-split__note::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--glow-angle),
    #ffffff 0deg,
    var(--color-accent) 22deg,
    rgba(206, 93, 37, 0) 120deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: glow-border-travel 5s linear infinite;
}

@media (max-width: 860px) {
  .content-split,
  .content-split--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: var(--space-5);
  }

  .content-split__media {
    aspect-ratio: 16 / 10;
  }
}