/* Шапка секции: слева бейдж-подпись и заголовок, справа пояснение.
   Центрирование в проекте запрещено, поэтому колонки прижаты к краям,
   а на узких экранах просто складываются. Подтверждено макетом Figma
   (Marketplace, секция "What the Marketplace Will Include") 2026-08-28. */

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.section-head__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}

.section-head__aside {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* Вторая половина заголовка залита голубым градиентом: приём с главной,
   повторяется во всех секциях. */
.section-head__accent {
  background-image: linear-gradient(90deg, var(--action-sky-bg-hover), var(--sky-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Градиент заливает только строчный бокс шрифта, а точка над İ и седили
     ç, ş выходят за него и обрезались. Вертикальный отступ у строчного
     элемента расширяет заливку, но не сдвигает строки. */
  padding-block: 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (min-width: 768px) {
  .section-head { gap: var(--space-6); }

  .section-head__aside { font-size: var(--fs-lg); }
}

@media (min-width: 1024px) {
  .section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-14);
  }

  /* .link-arrow приходит с align-self: flex-start для карточек - здесь
     это перебивает выравнивание шапки по низу и держит ссылку у верха. */
  .section-head > .link-arrow { align-self: flex-end; }

  /* По низу блока ссылка вставала ниже букв заголовка: под последней строкой
     H2 запас высоты строки. Ссылка садится на базовую линию последней строки. */
  .section-head:has(> .link-arrow) { align-items: last baseline; }

  .section-head > .link-arrow { align-self: last baseline; }

  .section-head__aside {
    flex: 0 1 auto;
    max-width: 440px;
    /* Компенсируем оптическую разницу между line-height H2 и пояснения. */
    margin-bottom: 10px;
  }
}