/* =============================================================================
   LAYOUT — общая сетка .page-grid + шапка header.site-header
   =============================================================================
   Единый источник правды для mobile-first раскладки страниц сайта
   (<768px — 1 колонка, 768–1023.98px — 2 колонки, >=1024px — 12 колонок).

   Подключается ПОСЛЕ /elements/elements.css и ДО постраничного стиля:
     <link rel="stylesheet" href="/elements/elements.css">
     <link rel="stylesheet" href="/elements/layout.css">
     <link rel="stylesheet" href="...page.css">

   Используется страницами с <main class="page-grid">: landing (index,
   domains), edu, games/truthmachine. Раньше этот блок дублировался в
   landing/styles.css, edu/edu-styles.css и truthmachine.css — теперь он один.

   Раскладка-«монитор» (.top-grid + span 11, брейкпоинт 900px) в scanner и
   books/1 — это ДРУГОЙ паттерн со своими шапками, сюда не входит.

   Литеральные цвета/тени (без var()) — намеренно, как в elements.css: шапка
   должна выглядеть одинаково независимо от цветовой схемы конкретной страницы.

   Специфичность `.page-grid > .logo-card` (0,2,0) перекрывает elements.css
   (`.logo-card` 0,1,0) без !important — поэтому селекторы слотов даны в форме
   `.page-grid > …`.
   ============================================================================= */

/* ---- Page grid: база (телефон) ---- */
.page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px;
  /* Полноэкранная оболочка: страница не короче вьюпорта, чтобы подвал был
     прижат к низу даже при коротком контенте. Свободную высоту забирают
     растягивающиеся ряды контента — у страниц с карточками это .feature-card
     с minmax(_, 1fr), у страниц с одним слотом — модификатор .page-grid--single.
     align-content: start не даёт авто-рядам «расползтись» по высоте там, где
     гибкого ряда нет (контент просто прижат к верху). */
  min-block-size: 100dvh;
  align-content: start;
}

/* Страницы с единственным контентным слотом между шапкой и подвалом
   (логотип · шапка · контент · подвал): контентный слот тянется и прижимает
   подвал к низу. <1024px логотип и шапка — отдельные ряды (контент 3-й ряд),
   >=1024px они делят один ряд (контент 2-й ряд) — отсюда два набора треков. */
.page-grid--single {
  grid-template-rows: auto auto 1fr auto;
}

@media (min-width: 1024px) {
  .page-grid--single {
    grid-template-rows: auto 1fr auto;
  }
}

/* Полноширинные слоты по умолчанию (логотип, шапка, подвал). */
.page-grid > #logo-slot,
.page-grid > .logo-card,
.page-grid > header.site-header,
.page-grid > #footer-slot,
.page-grid > .footer-card {
  grid-column: 1 / -1;
}

/* В сетке вертикальный зазор между всеми блоками задаёт gap, поэтому
   собственный margin-top подвала (.footer-card из elements.css, нужный во
   flow-контекстах — главы книги, сканер) здесь обнуляем. Иначе он
   складывается с gap и зазор до подвала оказывается шире, чем между
   остальными карточками. */
.page-grid > #footer-slot,
.page-grid > .footer-card {
  margin-block-start: 0;
}

/* ---- Site header: база (телефон) ---- */
header.site-header {
  padding: 14px 18px;
  border: 1px solid #dde1e8;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

header.site-header .hcontent {
  flex: 1;
  min-width: 0;
}

header.site-header .hrow {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

header.site-header .title {
  font-size: 19px;
  font-weight: 700;
  color: #0c1222;
  text-align: center;
  line-height: 1.25;
}

/* ---- Маленькие телефоны (<=380px) ---- */
@media (max-width: 380px) {
  .page-grid {
    padding: 10px;
    gap: 10px;
  }
}

/* ---- Планшет (>=768px): 2 колонки ---- */
@media (min-width: 768px) {
  .page-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 18px;
  }
  header.site-header {
    padding: 16px 22px;
    gap: 18px;
  }
  header.site-header .title {
    font-size: 22px;
  }
}

/* ---- Десктоп (>=1024px): 12-колоночная сетка ---- */
@media (min-width: 1024px) {
  .page-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 5px;
    padding: 18px;
  }
  .page-grid > #logo-slot,
  .page-grid > .logo-card {
    grid-column: span 1;
  }
  .page-grid > header.site-header {
    grid-column: span 11;
  }
  .page-grid > #footer-slot,
  .page-grid > .footer-card {
    grid-column: span 12;
  }
  header.site-header .hrow {
    grid-template-columns: 1fr auto 1fr;
    justify-items: stretch;
    gap: 14px;
    text-align: initial;
  }
  header.site-header .title {
    font-size: 24px;
  }
}