/* ==========================================================================
   HL — Главная страница.

   ГЕОМЕТРИЯ, КОМПОЗИЦИЯ И ПРОПОРЦИИ — по утверждённому эскизу
   «страница_главная.png» (1536×1024). Значения ниже сняты с эскиза
   пипеткой и перенесены в относительные величины по горизонтали.

   ФУНКЦИОНАЛЬНЫЙ СОСТАВ И ПОВЕДЕНИЕ — по HL UI Specification v2.2
   (п.5 состав, п.6 последовательный подбор, п.37 адаптивность).

   Опорная система координат (эскиз, ширина 1536):
       контент-бокс         x 34…1501   ширина 1468, поля 34/34
       шапка                y 0…124     высота 125 (линия на y=124)
       карточка подбора     x 34…514    y 167…835   481×669
       зазор колонок        72
       правая колонка       x 586…1501  ширина 915
       фотография           x 586…1536  y 405…875   950×470 (за контент-бокс)
       футер                y 875…1024  высота 149

   Горизонталь выражена в % от контент-бокса (1468 px): 1 px = 0.068120 %.
   При ширине окна 1536 контент-бокс равен ровно 1468 px, поэтому проценты
   дают пиксели эскиза; при других ширинах пропорции сохраняются.
   Вертикаль задана в px — высоты эскиз фиксирует однозначно.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Токены
   -------------------------------------------------------------------------- */
.hl-page {
    --hl-bg: #000000;
    --hl-card: #080808;
    --hl-field: #101316;
    --hl-border: #292828;
    --hl-border-strong: #4a4f56;
    --hl-text: #ffffff;
    --hl-muted: #9aa0a6;
    --hl-placeholder: #767c84;

    /* Акцент снят с кнопки «ПОДОБРАТЬ» эскиза: rgb(200,3,10). */
    --hl-accent: #c8030a;
    --hl-accent-hover: #e2050f;
    --hl-accent-active: #a10208;

    --hl-font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

    --hl-content: 1468px;
    --hl-margin: 34px;
}

/* Сброс ограничен собственной областью главной: оформление Header и Footer
   приходит только из public_shell.css. */
.hl-main,
.hl-main *,
.hl-main *::before,
.hl-main *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

.hl-page {
    /* Оболочка (min-height 100vh + flex-column) и прижатый футер задаются
       единым каркасом в public_shell.css — здесь не дублируются. */
    background: var(--hl-bg);
    color: var(--hl-text);
    font-family: var(--hl-font);
    font-size: 16px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

.hl-page img { display: block; max-width: 100%; }

.hl-page :focus-visible {
    outline: 2px solid var(--hl-accent);
    outline-offset: 2px;
}

.hl-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--hl-accent);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.hl-skip:focus { left: 0; }

/* Контент-бокс: ровно 1468 px при окне 1536 (поля по 34). */
.hl-shell {
    width: calc(100% - var(--hl-margin) * 2);
    max-width: var(--hl-content);
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   3. Основная область
   -------------------------------------------------------------------------- */
.hl-main {
    flex: 1 0 auto;
    /* Уменьшенный каркас: шапка 68, футер 43 → при 1024 на main остаётся 913.
       Содержимое (42 + карточка 669 = 711) короче, поэтому main растягивает
       flex каркаса, а футер прижимается к низу окна. Нижний отступ не задан
       намеренно: он создавал бы вертикальную прокрутку. */
    padding: 42px 0 0;
}

.hl-layout {
    position: relative;
    display: grid;
    /* Пропорция 30 / 70 с учётом внешнего контейнера (1468) и зазора (72):
       на колонки остаётся 1396 → форма 419, правая область 977.
       Правая область начинается на x = 34 + 419 + 72 = 525. */
    grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
    column-gap: 4.9046%;    /* 72 / 1468 */
    align-items: start;
}

/* --------------------------------------------------------------------------
   4. Карточка подбора — эскиз x 34…514, y 167…835 (481×669)
   -------------------------------------------------------------------------- */
.hl-finder {
    position: relative;
    height: 669px;
    padding: 0 7.4844% 0 7.6923%;   /* 36 / 481 и 37 / 481; с рамкой 1px
                                       поле начинается на x=72, ширина 406 */
    background: var(--hl-card);
    border: 1px solid var(--hl-border);
    border-radius: 4px;
}

.hl-finder__title {
    margin: 0;
    padding-top: 44px;
    font-size: 33px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.005em;
    white-space: nowrap;
}
.hl-finder__title-sub {
    display: block;
    padding-top: 6px;
    font-size: 27px;
    font-weight: 400;
}

/* Разделитель карточки — эскиз y 321 */
.hl-finder__rule {
    height: 1px;
    margin: 36px 0 0;
    background: var(--hl-border-strong);
    border: 0;
}

/* Подписи полей — тушь эскиза: «Марка» y 350…367, «Модель» y 474…490,
   «Год выпуска» y 603…621; левый край совпадает с полем. */
.hl-field { margin: 0; }
.hl-field--1 { padding-top: 20px; }
.hl-field--2 { padding-top: 23px; }
.hl-field--3 { padding-top: 27px; }

.hl-field__label {
    display: block;
    margin-bottom: 9px;
    font-size: 18px;
    font-weight: 700;
    color: var(--hl-text);
}

/* Поля — эскиз x 72…478, высота 68 */
.hl-select {
    display: block;
    width: 100%;
    height: 68px;
    padding: 0 52px 0 18px;
    border: 1px solid var(--hl-border-strong);
    border-radius: 4px;
    background-color: var(--hl-field);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    color: var(--hl-text);
    font-family: inherit;
    font-size: 19px;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease;
}
.hl-select:disabled { opacity: 0.5; cursor: not-allowed; }
.hl-select[data-empty="true"] { color: var(--hl-placeholder); }
.hl-select option { background: var(--hl-field); color: var(--hl-text); }

/* Кнопка «ПОДОБРАТЬ» — эскиз x 72…477, y 726…798 (406×73) */
.hl-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
    height: 73px;
    margin-top: 28px;
    border: 0;
    border-radius: 4px;
    background: var(--hl-accent);
    color: #ffffff;
    font-family: inherit;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.hl-submit:hover:not(:disabled) { background: var(--hl-accent-hover); }
.hl-submit:active:not(:disabled) { background: var(--hl-accent-active); }
.hl-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.hl-submit__arrow { font-size: 24px; line-height: 1; font-weight: 400; }

.hl-finder__error {
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--hl-accent);
    border-radius: 4px;
    background: rgba(200, 3, 10, 0.1);
    font-size: 14px;
}
.hl-finder__error[hidden] { display: none; }

/* --------------------------------------------------------------------------
   5. Правая область — оформление (эскиз)

   UI Specification v2.2, п.5 требует отсутствия дополнительных
   информационных блоков; владелец допустил этот блок как элемент
   оформления. Органов управления он не несёт.
   -------------------------------------------------------------------------- */
.hl-showcase { min-width: 0; }

.hl-showcase__title {
    margin: 0;
    padding-top: 30px;
    font-size: 45.75px;
    font-style: italic;
    font-weight: 800;
    line-height: 1.36;
    letter-spacing: 0.005em;
    white-space: nowrap;
}
.hl-showcase__accent { color: var(--hl-accent); }
.hl-showcase__title-sub { display: block; font-size: 51.2px; }

/* Красная черта — эскиз x 586…682, y 345…348 (97×4) */
.hl-showcase__rule {
    width: 97px;
    height: 4px;
    margin: 20px 0 0;
    background: var(--hl-accent);
    border: 0;
}

/* Подпись — тушь эскиза x 586…1083 */
.hl-showcase__note {
    margin: 14px 0 0;
    font-size: 23.3px;   /* подобран по ширине туши эскиза: 498 px */
    font-style: italic;
    color: var(--hl-muted);
    white-space: nowrap;
}

/*
   Фотография товара — эскиз x 586…1536, y 405…875 (950×470).

   Контейнер НЕВИДИМ: без рамки, обводки, фона и подписи. Изображение
   намеренно выходит за правую границу контент-бокса до края окна —
   правые границы у шапки (1501), текста (~1299) и фотографии (1536)
   по эскизу РАЗНЫЕ и выравниванию не подлежат (решение владельца, E).
*/
.hl-photo {
    position: absolute;
    left: 33.4469%;    /* 491 / 1468 → x = 34 + 491 = 525 (правая колонка) */
    top: 238px;        /* от верха карточки (110) → y = 348 */
    width: 68.8692%;   /* 1011 / 1468 → правый край = 1536 */
    /* Нижняя граница доходит до Footer: 981 − 348 = 633. */
    height: 633px;
    overflow: hidden;
    background: transparent;
    border: 0;
    outline: 0;
    pointer-events: none;
}
.hl-photo__img {
    /* Натуральный масштаб эскиза: снимок занимает 950×470 и прижат к верху
       контейнера, поэтому его масштаб и положение совпадают с эталоном
       один в один (object-fit: cover растянул бы его до 522 и обрезал бока).
       Нижние 52 px контейнера остаются фоном: снимок и так растворяется в
       чёрном (яркость нижней строки — 22 из 255), поэтому стык не виден. */
    width: 100%;
    height: auto;
    display: block;
    border: 0;
}

/* --------------------------------------------------------------------------
   7. Адаптивность (UI Specification v2.2, п.37)

   Точная геометрия эскиза действует на настольной контрольной точке.
   Ниже — перестроение для планшетов и мобильных устройств.
   -------------------------------------------------------------------------- */
@media (max-width: 1399px) {
    .hl-page { --hl-margin: 24px; }

    .hl-layout {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 40px;
    }

    .hl-finder { height: auto; padding: 32px; }
    .hl-finder__title { padding-top: 0; font-size: 34px; }
    .hl-finder__title-sub { font-size: 30px; }
    .hl-field--1, .hl-field--2, .hl-field--3 { padding-top: 20px; }
    .hl-select { height: 58px; font-size: 16px; }
    .hl-submit { height: 62px; font-size: 18px; margin-top: 24px; }

    .hl-showcase__title {
        white-space: normal;
        padding-top: 0;
        font-size: 34px;
        line-height: 1.2;
    }
    .hl-showcase__title-sub { font-size: 30px; }
    .hl-showcase__note { white-space: normal; font-size: 17px; }

    /* Фотография возвращается в поток и не выходит за край. */
    .hl-photo {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        margin-top: 24px;
    }
    .hl-photo__img { height: auto; }

}

@media (max-width: 767px) {
    .hl-page { --hl-margin: 16px; }

    .hl-main { padding: 28px 0; }
    .hl-finder { padding: 22px 18px; }
    .hl-finder__title { font-size: 26px; }
    .hl-finder__title-sub { font-size: 23px; }

    .hl-showcase__title { font-size: 26px; }
    .hl-showcase__title-sub { font-size: 23px; }

}

@media (prefers-reduced-motion: reduce) {
    .hl-page *, .hl-page *::before, .hl-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* === HL TASK 11: HOME PAGE FITS VIEWPORT — START ===
   Компактная вертикальная компоновка главной страницы для обычных
   настольных экранов с небольшой высотой окна браузера.
   Не применяется к мобильной версии. */
@media (min-width: 901px) and (max-height: 900px) {
    .hl-main {
        padding-top: 18px;
        min-height: 0;
    }

    .hl-layout {
        min-height: 0;
    }

    .hl-finder {
        height: 530px;
        padding-left: 7.6923%;
        padding-right: 7.4844%;
    }

    .hl-finder__title {
        padding-top: 24px;
        font-size: 28px;
        line-height: 1;
    }

    .hl-finder__title-sub {
        padding-top: 4px;
        font-size: 23px;
    }

    .hl-finder__rule {
        margin-top: 20px;
    }

    .hl-field--1 {
        padding-top: 12px;
    }

    .hl-field--2,
    .hl-field--3 {
        padding-top: 14px;
    }

    .hl-field__label {
        margin-bottom: 5px;
        font-size: 16px;
    }

    .hl-select {
        height: 52px;
        font-size: 17px;
    }

    .hl-submit {
        height: 58px;
        margin-top: 18px;
        font-size: 19px;
    }

    .hl-showcase__title {
        padding-top: 16px;
        font-size: 38px;
        line-height: 1.2;
    }

    .hl-showcase__title-sub {
        font-size: 42px;
    }

    .hl-showcase__rule {
        margin-top: 12px;
    }
}
/* === HL TASK 11: HOME PAGE FITS VIEWPORT — END === */

/* === HL TASK 12: HOME ARTICLE SEARCH START === */
.hl-article-search{position:absolute;top:82px;right:34px;z-index:20;width:330px}
.hl-article-search form{margin:0}
.hl-article-search label{display:block;margin:0 0 6px;color:#fff;font-size:13px;font-weight:700;text-transform:uppercase}
.hl-article-search__row{display:flex;gap:6px}
.hl-article-search input{min-width:0;flex:1;height:38px;padding:0 12px;border:1px solid #4a4f56;border-radius:4px;background:#101316;color:#fff;font:inherit}
.hl-article-search button{height:38px;padding:0 16px;border:0;border-radius:4px;background:#d71920;color:#fff;font:inherit;font-weight:800;text-transform:uppercase;cursor:pointer}
.hl-article-search__error{margin:5px 0 0;color:#ff3b42;font-size:13px;font-weight:700}
@media(max-width:1100px){.hl-article-search{position:static;width:calc(100% - 68px);max-width:520px;margin:14px auto 0}}
@media(max-width:600px){.hl-article-search{width:calc(100% - 32px)}.hl-article-search__row{flex-direction:column}.hl-article-search button{width:100%}}
/* === HL TASK 12: HOME ARTICLE SEARCH END === */