/* ============================================================
   Лендинг «Информационный киоск K-10»  (page-templates/kiosk.php)
   Свёрстан по макету «Услуги_Сборка компонентов.pdf».

   Геометрия снята из PDF в дизайн-пикселях (ширина макета 1406,
   контент 1300) и пересчитана под контейнер темы 1240 (контент 1192),
   коэффициент k = 1192/1300 ≈ 0.917.

   Шрифты макета: Roboto Mono — весь текст/подписи, Roboto 700 —
   заголовки. Geist Sans темы кириллицу не поддерживает, поэтому
   подключаем Roboto явно.

   Все селекторы под .kiosk — стили не протекают в остальной сайт.
   ============================================================ */

.kiosk {
    --k-blue: #214FEE;
    --k-blue-dark: #1a3fc0;
    --k-line: #c9d9f7;
    --k-card: #E6F2FE;
    --k-card-border: #d3e4fb;
    --k-text: #333333;
    --k-muted: #6b7280;
    --k-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --k-head: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    font-family: var(--k-mono);
    color: var(--k-text);
    /* Шапка темы position:fixed (высота ~89px) — иначе крошки уезжают под неё */
    padding-top: 89px;
}

.kiosk *,
.kiosk *::before,
.kiosk *::after { box-sizing: border-box; }

.kiosk__container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Заголовки секций — в макете H1 и H2 одного кегля (cap ≈ 29.5 → ~38px) */
.kiosk-h2 {
    font-family: var(--k-head);
    color: var(--k-blue);
    font-size: 38px;
    line-height: 1.15;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.4px;
    margin: 0 0 28px;
}

/* Кнопки */
.kiosk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--k-mono);
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    border-radius: 8px;
    min-height: 60px;
    padding: 0 44px;
    transition: background .18s, color .18s, transform .1s;
}
.kiosk-btn--primary { background: var(--k-blue); color: #fff; min-width: 216px; }
.kiosk-btn--primary:hover { background: var(--k-blue-dark); color: #fff; }
.kiosk-btn--white { background: #fff; color: var(--k-blue); }
.kiosk-btn--white:hover { background: #eef2ff; color: var(--k-blue); }
.kiosk-btn:active { transform: translateY(1px); }

/* Хлебные крошки — 40px под шапкой */
.kiosk__breadcrumbs { padding: 40px 0 0; font-size: 13px; }
.kiosk__breadcrumbs a { color: #7F7F7F; text-decoration: none; }
.kiosk__breadcrumbs a:hover { color: var(--k-blue); }
.kiosk__bc-sep { color: #b7bcc5; margin: 0 10px; }
.kiosk__bc-current { color: #000; }

/* ---------- Hero ---------- */
.kiosk-hero { padding: 14px 0 60px; }
.kiosk-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 49%) 1fr;   /* 584/1192 — колонка текста уже */
    gap: 40px;
    align-items: end;                            /* текст прижат к низу, как в макете */
}
.kiosk-hero__title {
    font-family: var(--k-head);
    color: var(--k-blue);
    font-size: 38px;
    line-height: 1.28;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.4px;
    margin: 0 0 26px;
}
.kiosk-hero__desc {
    font-size: 14px;
    line-height: 1.42;
    color: #333333;
    margin: 0 0 45px;
}
.kiosk-hero__media {
    align-self: start;
    display: flex;
    justify-content: center;
}
.kiosk-hero__media img {
    width: auto;
    height: 500px;                                /* макет: 547 → ×0.917 */
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 24px 40px rgba(20,40,90,.16));
}

/* ---------- Назначение ---------- */
.kiosk-purpose { padding: 50px 0 30px; }
.kiosk-purpose__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.kiosk-purpose__card {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--k-card-border);
    border-radius: 12px;
    padding: 30px 22px 24px 123px;              /* слева место под иконку */
    min-height: 134px;
    transition: box-shadow .2s, transform .2s;
}
.kiosk-purpose__card:hover {
    box-shadow: 0 14px 34px rgba(33,79,238,.12);
    transform: translateY(-3px);
}
/* Иконка — 2×3 колечка слева, на уровне описания */
.kiosk-purpose__icon {
    position: absolute;
    left: 45px;
    top: 52px;
    display: grid;
    grid-template-columns: repeat(3, 8px);
    gap: 10px 14px;
}
.kiosk-purpose__icon i {
    width: 8px; height: 8px;
    border: 1.6px solid var(--k-blue);
    border-radius: 50%;
    display: block;
}
.kiosk-purpose__title {
    font-family: var(--k-mono);
    color: var(--k-blue);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 14px;
}
.kiosk-purpose__text {
    font-size: 13px;
    line-height: 16.8px;
    color: var(--k-blue);
    margin: 0;
}

/* ---------- Характеристики ---------- */
.kiosk-specs { padding: 40px 0 10px; }
.kiosk-specs__grid {
    display: grid;
    grid-template-columns: 460px minmax(0, 500px);
    gap: 0;
    justify-content: center;
    align-items: start;
}
.kiosk-specs__media { display: flex; justify-content: center; align-items: flex-start; }
.kiosk-specs__media img { max-width: 100%; height: 685px; object-fit: contain; }

.kiosk-specs__list { list-style: none; margin: 0; padding: 0; }
.kiosk-specs__item {
    position: relative;
    padding: 0 0 30px 108px;                  /* текст с отступом, линия — во всю ширину */
    margin-bottom: 26px;
    border-bottom: 1px solid var(--k-line);
}
/* Диагональный «подъём» слева у линии-разделителя (как в макете) */
.kiosk-specs__item::after {
    content: "";
    position: absolute;
    right: 100%;
    bottom: -1px;
    width: 31px;
    height: 1px;
    background: var(--k-line);
    transform: rotate(-40deg);
    transform-origin: 100% 50%;
}
.kiosk-specs__item:last-child { margin-bottom: 0; }
.kiosk-specs__bullet {
    position: absolute;
    left: 68px;
    top: 4px;
    width: 14px; height: 14px;
    background: var(--k-blue);
}
.kiosk-specs__value {
    display: block;
    color: var(--k-blue);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1.3;
    margin-bottom: 22px;
}
.kiosk-specs__label {
    display: block;
    color: var(--k-blue);
    font-size: 13px;
}

/* ---------- CTA баннер ---------- */
.kiosk-cta { padding: 14px 0 40px; }
.kiosk-cta__banner {
    background: var(--k-blue);
    border-radius: 14px;
    min-height: 161px;
    padding: 43px 100px 43px 93px;   /* макет: кнопка не прижата к краю */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.kiosk-cta__title {
    font-family: var(--k-head);
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    margin: 0 0 14px;
}
.kiosk-cta__sub { color: rgba(255,255,255,.92); font-size: 15px; margin: 0; line-height: 18px; text-transform: uppercase; }
.kiosk-cta__banner .kiosk-btn--white { flex-shrink: 0; }

/* ---------- Комплектация — одна узкая колонка, как в макете ----------
   Ритм макета: шаг строки 18.7–19.2 дизайн-px (≈17.3px), отбивка
   вокруг подзаголовков ≈ 38 дизайн-px (≈17px сверх строки).          */
.kiosk-package { padding: 40px 0 20px; }
.kiosk-package__list { max-width: 505px; }
.kiosk-package__block { padding: 0 0 17px; }
.kiosk-package__block:last-child { padding-bottom: 0; }
.kiosk-package__subtitle {
    font-family: var(--k-mono);
    font-size: 14px;
    line-height: 17.3px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 17px;
}
.kiosk-package__items { list-style: none; margin: 0; padding: 0; }
.kiosk-package__items li {
    position: relative;
    padding: 0 0 0 14px;
    font-size: 14px;
    line-height: 17.3px;
    color: #333333;
}
.kiosk-package__items li::before {
    content: "•";
    position: absolute;
    left: 0; top: 0;
    color: #333333;
}

/* ---------- Похожие решения ---------- */
.kiosk-similar { padding: 20px 0 40px; }
.kiosk-similar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.kiosk-similar__card {
    position: relative;
    background: var(--k-card);
    border-radius: 12px;
    padding: 19px;
    min-height: 393px;                          /* макет: 428.6 → ×0.917 */
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}
/* Вырез в правом нижнем углу — «хвостик», как в макете и у формы темы */
.kiosk-similar__card::after {
    content: "";
    position: absolute;
    right: 0; bottom: 0;
    width: 67px; height: 50px;
    background: #fff;
    border-top-left-radius: 12px;
}
a.kiosk-similar__card:hover {
    box-shadow: 0 16px 36px rgba(33,79,238,.16);
    transform: translateY(-3px);
}
.kiosk-similar__media {
    background: #fff;
    border-radius: 10px;
    height: 240px;                              /* макет: 261.5 → ×0.917 */
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    margin-bottom: 27px;
}
.kiosk-similar__media img { max-height: 100%; max-width: 76%; height: auto; }
.kiosk-similar__title {
    color: var(--k-blue);
    font-weight: 600;
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: .2px;
    line-height: 1.35;
}
/* Стрелка — отдельной строкой под заголовком, слева от выреза */
.kiosk-similar__arrow {
    color: var(--k-blue);
    line-height: 0;
    margin-top: auto;
    align-self: flex-end;
    padding-right: 72px;
}

/* ============ Адаптив ============ */
@media (max-width: 1100px) {
    .kiosk-specs__grid { grid-template-columns: 380px minmax(0, 1fr); }
    .kiosk-specs__media img { height: 540px; }
    .kiosk-specs__item { padding-left: 76px; }
    .kiosk-specs__bullet { left: 40px; }
}

@media (max-width: 992px) {
    .kiosk-h2 { font-size: 28px; margin-bottom: 26px; }
    .kiosk-hero__grid { grid-template-columns: 1fr; gap: 26px; align-items: stretch; }
    .kiosk-hero__media { order: -1; }
    .kiosk-hero__media img { height: 380px; }
    .kiosk-hero__title { font-size: 30px; }
    .kiosk-similar__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .kiosk-cta__title { font-size: 24px; }
}

@media (max-width: 680px) {
    .kiosk { padding-top: 76px; }
    .kiosk__container { padding: 0 16px; }
    .kiosk-purpose__grid { grid-template-columns: 1fr; }
    .kiosk-purpose__card { padding-left: 92px; }
    .kiosk-purpose__icon { left: 24px; }
    .kiosk-cta__banner { padding: 28px 24px; }
    .kiosk-specs__grid { grid-template-columns: 1fr; gap: 24px; }
    .kiosk-specs__media img { height: 420px; }
    .kiosk-specs__item { padding-left: 34px; }
    .kiosk-specs__bullet { left: 0; }
    .kiosk-specs__item::after { display: none; }
    .kiosk-similar__card::after { width: 54px; height: 42px; }
    .kiosk-similar__arrow { padding-right: 58px; }
    .kiosk-similar__grid { grid-template-columns: 1fr; }
    .kiosk-similar__card { min-height: 340px; }
    .kiosk-cta__banner { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
    .kiosk-hero__title { font-size: 26px; }
    .kiosk-hero__media img { height: 320px; }
    .kiosk-btn { width: 100%; }
}

/* ============================================================
   ФОРМА ЗАЯВКИ — штатный блок темы contact-form, приведённый
   к макету. Селекторы привязаны к body.page-template-kiosk,
   поэтому форма на остальных страницах сайта не затрагивается.

   Замеры макета (design → live, k=0.917):
   поле 59.5→55, зазор 11.6→11, textarea 79.2→73, кнопка 64.3→59,
   колонка формы 420→385, заголовок cap 28.8 → ~37px/40.5px,
   телефон:e-mail = 180:230 (в макете НЕ поровну).
   ============================================================ */
.page-template-kiosk .contact__inner {
    grid-template-columns: 1.85fr 1fr;    /* в макете колонка заголовка шире */
    gap: 48px;
}
.page-template-kiosk .contact__title {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 37px;
    font-weight: 700;
    line-height: 1.09;
    letter-spacing: -0.3px;
    margin-bottom: 52px;
}
.page-template-kiosk .contact__text {
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    line-height: 18px;
    color: rgba(255,255,255,.92);
    max-width: 560px;
}
.page-template-kiosk .contact__form-wrap { gap: 11px; }
.page-template-kiosk .contact__row {
    grid-template-columns: 180fr 230fr;   /* макет: телефон уже, e-mail шире */
    gap: 11px;
}
.page-template-kiosk .contact__input {
    min-height: 55px;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 14px;
}
.page-template-kiosk .contact__textarea { min-height: 73px; }
.page-template-kiosk .contact__agree {
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255,255,255,.9);
    margin-top: 6px;
}
.page-template-kiosk .contact__agree a { color: #fff; }
.page-template-kiosk .contact__submit {
    min-height: 59px;
    background: #000;
    border-radius: 8px;
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 500;
    letter-spacing: .08em;
    margin-top: 12px;
}
.page-template-kiosk .contact__submit:hover { background: #111; }
/* В макете загрузки файла нет */
.page-template-kiosk .file-upload { display: none; }

@media (max-width: 992px) {
    .page-template-kiosk .contact__inner { grid-template-columns: 1fr; gap: 24px; }
    .page-template-kiosk .contact__row { grid-template-columns: 1fr; }
    .page-template-kiosk .contact__title { font-size: 24px; margin-bottom: 22px; }
}