/* =========================================================================
   base.css — фундамент: сброс, переменные дизайн-системы, типографика,
   контейнер, кнопки. Всё, что описано в analysis/01-common.md.

   Сборщика нет: это обычный CSS, который браузер читает как есть.
   Переменные (--имя) — единственное место, где живут цвета и размеры;
   меняешь здесь — меняется на всём сайте.
   ========================================================================= */

/* ---------- 1. Переменные ------------------------------------------------ */

:root {
    /* Палитра снята с эталона. Фирменного красного в интерфейсе почти нет —
       он живёт только в логотипе, поэтому и переменная одна. */
    --c-bg: #ffffff;
    --c-text: #000000;
    --c-heading: #1b2533;          /* тёмно-синий графит заголовков лендингов */
    /* Второстепенный текст: подписи, счётчики. Был #6b7280 — на подложке
       карточек #f5f5f7 это контраст 4,44 при норме WCAG AA 4,5 (замер этапа 8).
       #5f6672 даёт 5,3 на подложке и 4,7 даже на самой тёмной (#e8e8ed),
       а на глаз почти не отличается. */
    --c-muted: #5f6672;
    --c-surface: #f5f5f7;          /* подложка карточек */
    --c-border: rgba(0, 0, 0, 0.12);
    --c-inverse: #ffffff;
    --c-brand: #cf0a2c;            /* только логотип и акценты-исключения */

    /* Типографика. Базовый размер 16px, rem считается от него. */
    --font-body: "Manrope", Arial, "Helvetica Neue", Helvetica, sans-serif;
    --fs-nav: 14px;
    --lh-nav: 24px;

    /* Сетка: высота шапки и горизонтальные поля контейнера по брейкпоинтам. */
    --header-h: 56px;
    --gutter: 16px;
    --grid-gap: 8px;               /* шаг сеток товаров, как у эталона */

    /* Общая кривая анимаций эталона — чтобы движение везде выглядело одинаково. */
    --ease: cubic-bezier(0.65, 0.05, 0.36, 1);

    --z-header: 151;
    --z-cookie: 208;
}

/* Брейкпоинты проекта: 768 — телефон/планшет, 1080 — планшет/десктоп,
   1440 — широкий десктоп. Больше порогов не заводим (см. analysis/01-common). */
@media (min-width: 768px) {
    :root { --gutter: 24px; }
}

@media (min-width: 1080px) {
    :root { --gutter: 40px; }
}

/* ---------- 2. Шрифт ----------------------------------------------------- */

/* @font-face для Manrope живёт в fonts.css, и layout подключает его, только
   если файл шрифта лежит в wwwroot/fonts. Пока файла нет, браузер берёт
   следующий шрифт из списка --font-body, вёрстка от этого не ломается.

   До этапа 8 правило стояло здесь всегда, и каждая страница запрашивала
   несуществующий файл: 404 на каждый просмотр. */

/* ---------- 3. Сброс ----------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;        /* padding и border входят в ширину */
}

/*
   scrollbar-gutter: stable — место под полосу прокрутки занято всегда.
   На компьютере с Windows полоса прокрутки отнимает у страницы ~15px.
   Короткие страницы («О нас», 404) без неё были шире длинных, и при переходе
   с главной на «О нас» шапка и весь текст прыгали вбок на 8px (проверка
   07.10 на мониторе владельца). На телефонах полоса поверх страницы и места
   не занимает — там правило ничего не меняет.
*/
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    /* См. блок ниже про scroll-padding-top. */
    scroll-padding-top: var(--header-h);
}

/*
   scroll-padding-top — сколько места сверху браузер считает занятым, когда
   сам прокручивает страницу: переход по якорю, фокус с клавиатуры (Tab),
   поиск по странице. Шапка фиксирована, а на страницах модели и категории
   под ней ещё липкая панель, — без этого отступа элемент с фокусом
   прятался под ними (WCAG 2.4.11, проверка 07.10 в Chrome владельца).
   До 07.10 отступ стоял только у якорей (scroll-margin-top у секций) и на
   обход клавиатурой не действовал. :has() — «на странице есть такая панель».
*/
html:has([data-product-nav]) {
    scroll-padding-top: calc(var(--header-h) + 57px);
}

html:has([data-series-nav]) {
    scroll-padding-top: calc(var(--header-h) + 56px);
}

/*
   Колонка во всю высоту окна, main забирает свободное место: на короткой
   странице футер стоит внизу экрана, а не посередине с белой пустотой под
   ним (страницы-заглушки, 404 на большом мониторе — проверка 07.10).
*/
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body > main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, p, ul, ol, figure {
    margin: 0;
}

/*
   Длинное слово не должно распирать страницу. «Несовершеннолетние» —
   заголовок политики — крупным шрифтом шире экрана 320px, и у страницы
   появлялась горизонтальная прокрутка (проверка этапа 8). overflow-wrap
   рвёт слово, только если оно одно не помещается в строку, — остальные
   заголовки не меняются. В текстах страниц вместо разрыва — перенос по
   слогам (браузер знает правила по lang страницы); на маркетинговых
   заголовках лендинга он не включается: «взгля-да» там ни к чему.
*/
h1, h2, h3, h4 {
    overflow-wrap: break-word;
}

.content h1,
.content h2,
.content h3 {
    hyphens: auto;
}

p, li, dd, td {
    overflow-wrap: break-word;
}

ul, ol {
    padding: 0;
    list-style: none;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/*
   display: contents убирает саму коробку <picture> из раскладки — в дереве
   остаются только её source и img.

   Зачем: picture по умолчанию строчный элемент и собственной высоты не имеет.
   Пока коробка существует, height: 100% у вложенной картинки не к чему
   привязать, и браузер молча считает высоту по пропорции файла — картинка
   вылезает за пределы карточки или баннера, а object-fit не срабатывает.
   С display: contents img становится прямым ребёнком блока с заданной высотой,
   и всё встаёт на место.
*/
picture {
    display: contents;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Номер телефона не рвётся на две строки: «+998» отдельно от остатка
   на узком экране читается как два разных числа. */
a[href^="tel:"] {
    white-space: nowrap;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Видимый фокус обязателен: без него сайт непроходим с клавиатуры.
   :focus-visible показывает рамку только при управлении с клавиатуры,
   не мешая тем, кто кликает мышью. */
:focus-visible {
    outline: 2px solid var(--c-heading);
    outline-offset: 2px;
    /* Белый ободок в зазоре между элементом и рамкой. Тёмная рамка
       сама по себе пропадала на тёмных секциях лендинга и на баннерах,
       белый ободок — на светлом фоне. Вместе одна из двух видна всегда
       (двухцветный индикатор, техника WCAG C40; этап 8). */
    box-shadow: 0 0 0 2px #fff;
}

/* Уважение к системной настройке «меньше движения»: анимации выключаются
   у тех, кому от них плохо. Это не опция, а требование доступности. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- 4. Контейнер и служебные классы ------------------------------ */

/* Контейнер тянется на всю ширину окна, ограничены только поля по бокам —
   ровно как у эталона, где max-width не задан. */
.container {
    width: 100%;
    padding-inline: var(--gutter);
    margin-inline: auto;
}

@media (min-width: 1440px) {
    .container { max-width: 1440px; }
}

/* Ссылка «перейти к содержимому»: спрятана за пределами экрана, пока на неё
   не встал фокус с клавиатуры. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 12px 16px;
    background: var(--c-heading);
    color: var(--c-inverse);
}

.skip-link:focus {
    left: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 5. Типографика страниц --------------------------------------- */

.page-title {
    color: var(--c-heading);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .page-title { font-size: 40px; }
}

.section-title {
    color: var(--c-heading);
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 16px;
}

.page-lead {
    margin-top: 12px;
    font-size: 18px;
    color: var(--c-muted);
}

.page-note {
    margin-top: 24px;
    color: var(--c-muted);
}

/* ---------- 6. Кнопки ---------------------------------------------------- */

/* У эталона размер кнопки задаётся отдельным классом на каждый брейкпоинт
   (btn-black-md, btn-black-xs). Мы делаем один класс и медиазапросы —
   меньше классов в разметке, тот же результат. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.btn:hover {
    text-decoration: none;
}

.btn--solid {
    background: var(--c-heading);
    color: var(--c-inverse);
}

.btn--solid:hover {
    background: #000000;
}

.btn--text {
    color: var(--c-heading);
}

.btn--text:hover {
    text-decoration: underline;
}

/* Вторичная кнопка — рамка вместо заливки. Для действия, которое стоит
   отдельно и без рамки выглядело бы потерянной строчкой текста («Все
   характеристики» под лендингом), но не главнее «Оставить заявку». */
.btn--outline {
    border: 1px solid var(--c-heading);
    color: var(--c-heading);
}

.btn--outline:hover {
    background: var(--c-heading);
    color: var(--c-inverse);
}

@media (min-width: 768px) {
    .btn {
        min-height: 44px;
        padding: 10px 24px;
        font-size: 16px;
    }
}

/*
   Текстовая кнопка — без полей по бокам на любой ширине: она стоит в строке
   с текстом и должна начинаться ровно с его края. Правило ниже медиазапроса
   нарочно: тот задаёт .btn поля 24px и иначе перекрыл бы их и здесь —
   «Вернуться к модели» и «Подробнее» стояли со сдвигом вправо (проверка 07.10).
*/
.btn--text {
    padding-inline: 0;
}