/* ============================================================
   База: reset, типографика, каркас приложения
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-base);
  font-size: var(--fz-14);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; }
input, select, textarea { font: inherit; color: inherit; }

/* --- Каркас приложения: header сверху, sidebar + content под ним --- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.app__body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  align-items: stretch;
}

.app__content {
  min-width: 0;            /* чтобы grid-колонка могла сжиматься */
  padding: var(--sp-8) var(--gutter);
}

.content-inner { max-width: var(--content-max); }

/* --- Хлебные крошки --- */
.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  color: var(--c-muted); font-size: var(--fz-13);
  margin-bottom: var(--sp-3);
}
.breadcrumbs a { color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-link); }
.breadcrumbs__sep { color: var(--c-border-strong); }

/* --- Заголовки страниц --- */
.page-title { font-size: var(--fz-28); font-weight: var(--fw-bold); margin-bottom: var(--sp-6); }

/* --- Утилиты --- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================
   Адаптив: брейкпоинты 1280 / 768 / 360
   ============================================================ */

/* Десктоп/ноутбук: чуть у́же сайдбар */
@media (max-width: 1280px) {
  :root { --sidebar-w: 260px; --gutter: 24px; }
}

/* Планшет: сайдбар уезжает в off-canvas, контент на всю ширину */
@media (max-width: 768px) {
  .app__body { grid-template-columns: 1fr; }
  .app__content { padding: var(--sp-5) var(--sp-4); }
}

/* Мобильный */
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .page-title { font-size: var(--fz-24); }
}