/* sections.css */

/* ==== HEADER (STRUCTURE.md §5.1) ==== */
header {
  border-block-end: 1px solid var(--color-line);
}

header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 4.5rem;
}

.wordmark {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  text-decoration: none;
}

/* Мобайл (<48em): nav скрыт полностью, бургеров нет.
   Порог поднят с 40em: с тремя кнопками переключателя строка шапки
   на 640px больше не вмещает wordmark + nav + toggle. */
header nav { display: none; }

@media (min-width: 40em) {
  /* с 40em wordmark помещается в одну строку рядом с toggle */
  .wordmark { white-space: nowrap; }
}

@media (min-width: 48em) {
  header nav { display: flex; }
}

/* ==== HERO (STRUCTURE.md §5.2) ==== */
/* Карточка A — исключение из стандартного паддинга карточки */
#hero .bento > .card:first-child { padding: var(--space-6); }

.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

/* Значение «следующее свободное окно» в карточке B */
.hero__avail {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

@media (min-width: 60em) {
  /* Боковые карточки делят высоту большой поровну */
  #hero .bento { grid-auto-rows: minmax(10rem, auto); }

  #hero .bento > .card:first-child { padding: var(--space-8); }
}

/* ==== TEKIJÄ (STRUCTURE.md §5.6) ==== */
/* Исключение из §2: в секции всего две карточки, и на планшете вторая
   иначе оставила бы полряда пустым. */
@media (min-width: 40em) and (max-width: 59.99em) {
  #tekija .bento > .col-1 { grid-column: span 2; }
}

/* ==== HINTA (STRUCTURE.md §5.5) ==== */
/* Сумма и примечание — на одной строке, по базовой линии */
.price__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.price__value {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

.price__note {
  font-size: var(--text-small);
  color: var(--color-ink-soft);
}

.price__care {
  font-family: var(--font-body);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h2);
  color: var(--color-ink);
}

/* ==== FOOTER (STRUCTURE.md §5.9) ==== */
footer {
  border-block-start: 1px solid var(--color-line);
  padding-block: var(--space-6);
}

footer .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

footer p {
  font-size: var(--text-small);
  color: var(--color-ink-soft);
}