/*
 * Макет: контейнер, секції, шапка секції.
 * Брейкпоінти (лише ці): 576px, 800px, 1024px, 1280px.
 */

/* ---------- Контейнер сходинками ----------
   екран < 576   → на всю ширину з полями 16px
   екран ≥ 576   → 540
   екран ≥ 800   → 768
   екран ≥ 1024  → 992   (наприклад, на екрані 1240 контейнер 992)
   екран ≥ 1280  → 1240 */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

@media (min-width: 576px) {
  .container { max-width: var(--container-sm); }
}
@media (min-width: 800px) {
  .container { max-width: var(--container-md); }
}
@media (min-width: 1024px) {
  .container { max-width: var(--container-lg); }
}
@media (min-width: 1280px) {
  .container { max-width: var(--container-xl); }
}

/* ---------- Секція ----------
   Відступ однаковий зверху й знизу. Між будь-якими двома секціями завжди
   2 × --section-space, тож прибрана секція не змінює пропорцій.
   Секціям не задаємо власних padding/margin — лише модифікатори фону. */
.section {
  position: relative;
  padding-block: var(--section-space);
}

.section--alt {
  background-color: var(--ds-surface);
}

.section--dark {
  --ds-bg: #0f0f0f;
  --ds-surface: #1b1b1b;
  --ds-text: #ededed;
  --ds-text-muted: #a2a2a2;
  --ds-heading: #ededed;
  --ds-border: #2c2c2c;
  --ds-border-strong: #505050;
  background-color: var(--ds-bg);
  color: var(--ds-text);
  color-scheme: dark;
}

/* ---------- Шапка секції: бейдж/надзаголовок + h2 + лід ----------
   <div class="section-head">
     <p class="eyebrow">Кейси</p>
     <h2 class="section-head__title">Реалізовані проєкти<span class="accent">.</span></h2>
     <p class="section-head__lead lead">…</p>
   </div> */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-6);
  max-width: 760px;
  margin-bottom: var(--section-head-space);
}

.section-head__lead {
  max-width: 640px;
}

/* по центру */
.section-head--center {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

/* заголовок ліворуч, лід/кнопка праворуч (на широких екранах) */
.section-head--split {
  max-width: none;
}

@media (min-width: 1024px) {
  .section-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--ds-space-13);
  }
  .section-head--split > .eyebrow,
  .section-head--split > .badge {
    grid-column: 1;
    justify-self: start;
  }
  .section-head--split > .section-head__title {
    grid-column: 1;
  }
  .section-head--split > :not(.eyebrow, .badge, .section-head__title) {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
  }
}