/*
 * Перший екран (.hero) — однаковий на всіх сторінках.
 * Колонка тексту: бейдж, h1, лід, кнопки, підпис.
 * Колонки сітки (.hero__grid) і візуал праворуч задає CSS конкретної сторінки.
 *
 * <section class="section hero">
 *   <div class="container">
 *     <div class="hero__grid">
 *       <div class="hero__content">
 *         <span class="badge hero__badge"><span class="badge__dot" aria-hidden="true"></span>…</span>
 *         <h1 class="hero__title">…<span class="accent">.</span></h1>
 *         <p class="lead hero__lead">…</p>
 *         <div class="hero__actions"><a class="btn btn--accent">…</a><a class="btn btn--dark">…</a></div>
 *         <ul class="hero__meta"><li class="hero__meta-item">…</li></ul>
 *       </div>
 *       …візуал сторінки…
 *     </div>
 *   </div>
 * </section>
 */
.hero {
  padding-top: 0;
}

.hero__grid {
  display: grid;
  align-items: start;
  gap: var(--ds-space-11);
  padding-top: var(--ds-space-11);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-space);
  max-width: 600px;
  min-width: 0;
}

.hero__lead {
  max-width: 560px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-5);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3) var(--ds-space-7);
  color: var(--ds-neutral-600);
  font-size: var(--ds-text-caption-size);
  line-height: 1.5;
}

.hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-3);
}

.hero__meta svg {
  width: 16px;
  height: 16px;
  color: var(--ds-primary);
}

@media (min-width: 1024px) {
  .hero__grid {
    padding-top: var(--ds-space-13);
  }
}

@media (max-width: 799px) {
  .hero__lead {
    font-size: var(--ds-text-body-size);
  }
}

@media (max-width: 575px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
  }
  .hero__actions > * {
    width: 100%;
  }
  .hero__actions > :has(.btn__icon) {
    justify-content: space-between;
  }
}