/* ==========================================================================
   04 · Секции: раскладка и вертикальный ритм
   Здесь только сетка, отступы и порядок блоков. Компоненты не переписываются
   заново — они живут в components.css и используются как есть.
   ========================================================================== */

@layer sections {
  /* Вертикальный отступ секции: --section-y растёт с шириной экрана (spec/01 §3) */
  .section {
    padding-block: var(--section-y);
  }

  /* Между секциями должен быть ОДИН ритм, а не два подряд:
     низ предыдущей секции уже дал отступ, своему верху он больше не нужен.
     Иначе на стыке получается двойной зазор (у фиксированного верхнего отступа нет сворачивания). */
  .section + .section {
    padding-top: 0;
  }

  /* Текстовый блок секции: отступ от заголовка и ритм между абзацами */
  .section__text {
    margin-top: var(--sp-5);
  }

  .section__text > * + * {
    margin-top: var(--sp-4);
  }

  /* Второй смысловой блок внутри одной секции (#fit: «кому не подойдёт»).
     Отбивка больше, чем между абзацами, — читается как новая тема. */
  .section__sub {
    margin-top: var(--sp-12);
  }

  /* --- #location: карта ------------------------------------------------ */
  /* Кадр 1:1 во всю ширину экрана — квадрат. На широких экранах такой же
     кадр ограничен шириной контентной колонки, поэтому по высоте он выходит
     умеренным: 700 × 700 px вместо занятых почти во всю высоту экрана. */

  .map {
    position: relative;
    margin: var(--sp-10) 0 0;
    aspect-ratio: 1 / 1;
    min-height: 300px;
    overflow: hidden;
  }

  #location.section {
    padding-bottom: 0;
  }

  .map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* На десктопе карта — как карусели: ширина контентной колонки 700 px */
  @media (min-width: 768px) {
    .map {
      max-width: var(--w-content);
      margin-inline: auto;
    }
  }

  /* --- #cta: чёрный финальный блок ------------------------------------ */

  .cta {
    background: var(--c-bg-dark);
    color: var(--c-on-dark);
    --focus-ring: var(--c-on-dark); /* на чёрном кольцо фокуса белое */
  }

  /* --- подвал --------------------------------------------------------- */

  .footer {
    padding-block: var(--sp-8);
    background: var(--c-bg-dark);
    color: var(--c-on-dark-2); /* 8,33:1 на чёрном */
    --focus-ring: var(--c-on-dark);
  }

  /* У подвала те же поля контейнера, что у шапки — чтобы логотип
     и текст начинались на одной вертикали с шапкой. */
  .footer .container {
    padding-inline: calc(var(--pad-x) / 2);
  }

  /* В шапке грид-логотип сжат flex-родителем и колонки стоят у эмблемы;
     в футере grid-контейнер растягивает колонку с текстом, создавая зазор.
     Фиксируем: текст прижат к эмблеме ровно как в шапке. */
  .footer .logo {
    grid-template-columns: auto auto;
    column-gap: var(--sp-2); /* то же, что в components.css */
    justify-content: start;
  }

  /* Ссылки белые: брендовый тёмно-красный (#A80000) на чёрном даёт 2,2:1.
     Только внутри списков: эмблема в подвале — тоже ссылка, и белый цвет
     от неё сделал бы символ белым кругом (он красится через currentColor). */
  .footer li a {
    color: var(--c-on-dark);
  }

  /* Списки подвала — колонка с шагом 8 px: тот же приём, что у .checklist */
  .footer ul {
    display: grid;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 0;
    padding: 0;
    list-style: none;
  }

  /* Строчная ссылка 16 px — 20 px по высоте, меньше комфортных 24 для пальца.
     Внутренние поля делают её нормальной целью, вид при этом не меняется. */
  .footer li a {
    display: inline-block;
    padding-block: var(--sp-1);
  }

  .footer__bottom {
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-line-dark);
    font-size: var(--fs-xs);
  }
}