/* ==========================================================================
   HL — Публичная информационная страница «Дубликат ключа».

   Композиция — утверждённый эскиз «заказ_ключа.png».
   Назначение элементов — HL UI Specification v2.2, п.11.
   Header и Footer приходят из единого каркаса и здесь не оформляются.

   Страница только информационная: формы, полей ввода и кнопки отправки нет
   (в HL v1 заявка через сайт не подаётся). Место формы занимает контактный
   информационный блок.
   ========================================================================== */

.hl-kd {
    --hlq-bg: #000000;
    --hlq-panel: #0d0d0d;
    --hlq-border: #24262a;
    --hlq-line: #2f3236;
    --hlq-text: #ffffff;
    --hlq-muted: #9aa0a6;
    --hlq-accent: #c8030a;
    --hlq-font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

    background: var(--hlq-bg);
    color: var(--hlq-text);
    font-family: var(--hlq-font);
    padding: 30px 0 30px;
}
.hl-kd *, .hl-kd *::before, .hl-kd *::after { box-sizing: border-box; }
.hl-kd img { display: block; max-width: 100%; }
.hl-kd :focus-visible { outline: 2px solid var(--hlq-accent); outline-offset: 2px; }

.hl-kd__shell { max-width: 1536px; margin: 0 auto; padding: 0 26px 0 44px; }

/* Две колонки: изображение слева, информация справа — по эскизу. */
.hl-kd__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
}

/* Левая колонка: карточка с кодом + подпись */
.hl-kd__figure { margin: 0; }
/* Селектор усилен до .hl-kd img.hl-kd__img: базовое правило `.hl-kd img`
   специфичнее одиночного класса и иначе перебивает max-width. */
.hl-kd img.hl-kd__img {
    width: 100%;
    max-width: 252px;   /* 60% от прежних 420; пропорции не искажаются */
    height: auto;
    margin: 0 auto;
    border-radius: 4px;
}
.hl-kd__caption {
    margin: 18px auto 0;
    max-width: 460px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--hlq-text);
}

/* Правая колонка */
.hl-kd__title { margin: 0 0 12px; font-size: 30px; font-weight: 700; }
.hl-kd__lead { margin: 0 0 22px; font-size: 16px; line-height: 1.55; color: var(--hlq-muted); }

/* Три информационные плитки — по эскизу */
.hl-kd__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 24px;
    padding: 14px 0;
    border-top: 1px solid var(--hlq-line);
    border-bottom: 1px solid var(--hlq-line);
}
.hl-kd__fact { display: flex; align-items: center; gap: 14px; padding: 0 18px; }
.hl-kd__fact + .hl-kd__fact { border-left: 1px solid var(--hlq-line); }
.hl-kd__fact-icon { width: 26px; height: 26px; flex: none; }
.hl-kd__fact-label { margin: 0 0 3px; font-size: 12px; color: var(--hlq-muted); }
.hl-kd__fact-value { margin: 0; font-size: 16px; font-weight: 700; }

/* Пояснение к изображению */
.hl-kd__note { margin: 0 0 20px; font-size: 15px; line-height: 1.55; }

/*
   Контактный информационный блок. Заменяет форму и кнопку отправки,
   которых в HL v1 нет. Собственный телефон здесь не создаётся — блок
   отсылает к контактам утверждённого футера.
*/
.hl-kd__contact {
    max-width: 520px;   /* умеренная ширина на desktop */
    padding: 16px 18px;
    background: var(--hlq-panel);
    border: 1px solid var(--hlq-border);
    border-left: 3px solid var(--hlq-accent);
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.5;
}
.hl-kd__contact-lead { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.hl-kd__contact-icon { width: 22px; height: 22px; flex: none; }

.hl-kd__ok { margin: 0 0 12px; padding: 10px 12px; border-radius: 4px;
    background: rgba(47, 191, 78, 0.12); color: #68e940; font-size: 14px; }
.hl-kd__err { margin: 0 0 12px; padding: 10px 12px; border-radius: 4px;
    background: rgba(200, 3, 10, 0.12); color: #ff6b73; font-size: 14px; }

/* Простой прямоугольный блок: поле сверху, кнопка ниже. Не анкета. */
.hl-kd__form { margin: 0; }
.hl-kd__label { display: block; margin-bottom: 7px; font-size: 13px; }
/* Заметный разрыв между блоком контактов и блоком сообщения. */
.hl-kd__label--separated { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hlq-line); }
.hl-kd__textarea {
    display: block;
    width: 100%;
    min-height: 92px;
    padding: 11px 14px;
    border: 1px solid var(--hlq-line);
    border-radius: 4px;
    background: #121417;
    color: var(--hlq-text);
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}
.hl-kd__textarea::placeholder { color: #6b7178; }
.hl-kd__field-error { margin: 7px 0 0; color: #ff6b73; font-size: 13px; }
.hl-kd__submit {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 12px;
    border: 0;
    border-radius: 4px;
    background: var(--hlq-accent);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.hl-kd__submit:hover { background: #e2050f; }

/* Контактные данные — то же оформление, что и у поля сообщения. */
.hl-kd__input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    margin-bottom: 14px;
    border: 1px solid var(--hlq-line);
    border-radius: 4px;
    background: #121417;
    color: var(--hlq-text);
    font: inherit;
    font-size: 14px;
}
.hl-kd__input::placeholder { color: #6b7178; }

/* Прикрепление фотографий. Настоящий <input type="file"> скрыт визуально,
   но остаётся доступным с клавиатуры и для screen reader — щелчок по
   подписи-кнопке открывает штатный диалог выбора файлов, в том числе на
   телефоне. Ctrl+V и вставка в текстовое поле не требуются. */
.hl-kd__files { margin-top: 14px; }
.hl-kd__file-input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}
.hl-kd__file-button {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 18px;
    border: 1px solid var(--hlq-line); border-radius: 4px;
    background: #121417; color: var(--hlq-text);
    font-size: 14px; cursor: pointer;
}
.hl-kd__file-button:hover { border-color: #6b7178; }
.hl-kd__file-input:focus-visible + .hl-kd__file-button { outline: 2px solid var(--hlq-accent); outline-offset: 2px; }
.hl-kd__file-counter { margin-left: 12px; font-size: 13px; color: #9aa1a8; }
.hl-kd__file-list { margin: 10px 0 0; padding: 0; list-style: none; }
.hl-kd__file-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 7px 10px; margin-bottom: 6px;
    border: 1px solid var(--hlq-line); border-radius: 4px;
    font-size: 13px;
}
.hl-kd__file-name { overflow-wrap: anywhere; }
.hl-kd__file-remove {
    flex: none; width: 26px; height: 26px;
    border: 0; border-radius: 4px;
    background: transparent; color: #ff6b73;
    font-size: 18px; line-height: 1; cursor: pointer;
}
.hl-kd__file-remove:hover { background: rgba(255, 107, 115, 0.12); }
.hl-kd__file-hint { margin: 8px 0 0; font-size: 10px; color: #9aa1a8; }
.hl-kd__submit:disabled { opacity: .6; cursor: not-allowed; }

/* Адаптивность (UI Specification v2.2, п.37) */
@media (max-width: 1023px) {
    .hl-kd__shell { padding: 0 20px; }
    .hl-kd__layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .hl-kd__figure { order: 2; }
}
@media (max-width: 767px) {
    .hl-kd__file-button { width: 100%; }
    .hl-kd__file-counter { display: block; margin: 8px 0 0; }
    .hl-kd { padding: 20px 0; }
    .hl-kd__shell { padding: 0 16px; }
    .hl-kd__title { font-size: 22px; }
    .hl-kd__lead, .hl-kd__note, .hl-kd__caption { font-size: 14px; }
    /* Плитки в одну колонку — не выходят за экран. */
    .hl-kd__facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .hl-kd__fact { padding: 0; }
    .hl-kd__fact + .hl-kd__fact { border-left: 0; border-top: 1px solid var(--hlq-line); padding-top: 12px; }
    .hl-kd img.hl-kd__img { max-width: 100%; }
    /* Блок занимает доступную ширину, прокрутки не создаёт. */
    .hl-kd__contact { max-width: 100%; }
}