/* ================================================================
   layout.css — page structure, container, section base
   ================================================================ */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* ─── Section base ─── */
.sec {
  padding: var(--section-pad-y) var(--page-padding-x);
  position: relative;
  overflow: hidden;
  container-type: inline-size;   /* enables cqw для number-band grid */
}
.sec + .sec { border-top: 1px solid var(--c-border); }
.sec.sec--secondary { background: var(--c-secondary); }
.sec.sec--fg { background: var(--c-fg); color: var(--c-bg); }
.sec.sec--fg h1, .sec.sec--fg h2, .sec.sec--fg h3 { color: var(--c-bg); }
.sec.sec--flush { padding: 0; }              /* для marquee full-width */
.sec.sec--flush-y { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.container {
  max-width: var(--content-max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ─── Section header (eyebrow + h) ─── */
.sec-head { margin-bottom: var(--space-6); }
.sec-head .eyebrow { display: block; margin-bottom: var(--space-3); }
.sec-head .h2 + .sub,
.sec-head h2 + .sub { margin-top: var(--space-4); }

/* ─── Eyebrow (uppercase tracked meta label) ─── */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-fg-muted);
}

/* ─── Sub (body-lg — используется под H1/H2) ─── */
.sub {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--c-fg);
  max-width: 44ch;
}

/* ─── Closing line (тонкий completion текст в конце секции) ─── */
.closing-line {
  margin-top: var(--space-6);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-fg-muted);
  max-width: 60ch;
}

/* ─── Two-column layout (text-columns arch) ─── */
.cols-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@container (min-width: 720px) {
  .cols-2 { grid-template-columns: 1fr 1fr; gap: var(--gutter); }
}

/* ─── Header of two-col with eyebrow+H2 сверху, columns снизу ─── */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@container (min-width: 720px) {
  .split { grid-template-columns: minmax(280px, 1fr) 2fr; align-items: start; gap: var(--gutter); }
}

/* ─── H-headline (используется когда H1/H2 больше 20ch в контенте) ─── */
.h-headline { max-width: 20ch; }
@container (max-width: 720px) {
  .h-headline { max-width: none; }
}

/* Mobile-only <br> утилита для управляемого переноса длинных заголовков */
.only-mobile { display: none; }
@media (max-width: 640px) {
  .only-mobile { display: inline; }
  /* h-headline--team: длинный заголовок «Research and operating pressure, in one program»
     на мобилке ужимаем + принудительно ломаем на 2 строки */
  .h-headline--team {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    line-height: 1.1;
  }
}