/* =========================================================================
   assets/contacts.css
   Сторінка контактів — лише те, чого немає у спільному /assets/blocks.css:
   картки контактів, карта з фото офісу, кнопки маршруту й форма звернення.

   Секції, hero, картки переваг, FAQ і типографіка — спільні. Попередня
   версія сторінки тримала 1721 рядок CSS прямо в <style>, і будь-яка
   правка оформлення сайту її не зачіпала.

   Кольори — токени /assets/ui.css.
   ========================================================================= */

/* ── Hero ────────────────────────────────────────────────────────────
   Цей файл підключається лише на сторінці контактів, тож правило нижче
   нікуди більше не дістає.

   Лід тут дрібніший за загальний: на сторінках послуг він продає, а на
   контактах — лише пояснює, як ми працюємо. Головне ж на екрані нижче:
   статус менеджера, кнопки й факти. Чотири рядки великим кеглем
   відсували їх за межу першого екрана. */
.hero__lead {
    font-size: clamp(.88rem, 1vw, .95rem);
    line-height: 1.5;
    max-width: 52ch;
    margin-bottom: clamp(14px, 1.8vw, 20px);
}

/* Підзаголовок секції розтягувався на всю ширину контейнера — 95 знаків
   у рядку. Око на такій довжині губить початок наступного рядка, тому
   типографічна норма — 60–75. Обмежуємо й центруємо: підпис і так
   вирівняний по центру, тож вужча колонка лише збирає його акуратніше. */
.sec__lead {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
}

/* ── Статус підтримки в heroʼї ───────────────────────────────────────── */
.contacts-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.contacts-status__dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--g-400);
}
.contacts-status.is-open .contacts-status__dot {
    background: #37C978;
    box-shadow: 0 0 0 4px rgba(55, 201, 120, .22);
}
.contacts-status.is-closed .contacts-status__dot {
    background: var(--c-gold);
    box-shadow: 0 0 0 4px rgba(255, 200, 87, .22);
}

/* ── Картки контактів ────────────────────────────────────────────────── */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

/* Картка способу звʼязку.

   Кожна побудована однаково: іконка → назва → рядок «навіщо це» →
   головна дія → підпис про час унизу. Однакова структура дає однакову
   висоту в ряду й дозволяє порівнювати способи, а не вчитуватися в
   кожен. Раніше картки були різної довжини, і в месенджерів зяяла
   порожнеча посередині.

   Акцент задається змінною --card-accent на модифікаторі: він фарбує
   верхню смужку, іконку й головне значення. Це маркер способу, а не
   декор — тому кольори різні за змістом, а не за красою. */
.contact-card {
    --card-accent: var(--c-navy);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.4vw, 28px);
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

/* Смужка згори — тонка й у колір способу. Малюємо псевдоелементом,
   щоб не чіпати рамку картки: інакше на hover стрибав би контур. */
.contact-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--card-accent);
    opacity: .85;
}

.contact-card:hover {
    transform: translateY(-2px);
    border-color: var(--card-accent);
    box-shadow: var(--sh-lg);
}

/* Колір = пріоритет способу, а не прикраса. Форма на сайті зелена
   (те, чого ми хочемо), месенджери блакитні, пошта синя, телефон —
   нейтрально-сірий: він працює, але нічого не вирішує швидше. */
.contact-card--form  { --card-accent: var(--c-ok); }
.contact-card--msg   { --card-accent: #2AABEE; }
.contact-card--mail  { --card-accent: var(--c-navy); }
.contact-card--phone { --card-accent: var(--g-500); }

.contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--sp-3);
    border-radius: var(--r-md);
    /* Заливка — той самий акцент, лише ледь помітний. color-mix дає це
       однією формулою для всіх чотирьох карток; браузери без нього
       візьмуть запасний сірий рядком вище. */
    background: var(--g-100);
    background: color-mix(in srgb, var(--card-accent) 12%, transparent);
    color: var(--card-accent);
    font-size: 20px;
    transition: background var(--transition), color var(--transition);
}
.contact-card:hover .contact-card__icon {
    background: var(--card-accent);
    color: var(--g-0);
}
.contact-card__icon i { display: block; line-height: 1; }

/* 1.1rem — рівно як у .advantage-card h3 зі спільних блоків. Різні
   кеглі в сусідніх сітках карток читалися як різна важливість, хоча
   рівень заголовка той самий. */
.contact-card__title {
    margin: 0 0 4px;
    font-size: 1.1rem;
    color: var(--c-navy);
}

.contact-card__lead {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--g-600);
    line-height: 1.45;
}

/* Тіло тягнеться, тож підпис завжди притиснутий до низу картки */
.contact-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-card__value {
    font-size: 1.22rem;
    font-weight: var(--fw-bold);
    color: var(--c-navy);
    text-decoration: none;
    line-height: 1.25;
    transition: color var(--transition);
}
.contact-card__value--sm { font-size: 1.02rem; }
a.contact-card__value:hover { color: var(--card-accent); }

.contact-card__cap {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--g-600);
    line-height: 1.4;
}
.contact-card__cap:last-child { margin-bottom: 0; }

.contact-card__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 4px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--card-accent);
    text-decoration: none;
}
.contact-card__link i { line-height: 0; transition: transform var(--transition); }
.contact-card__link:hover i { transform: translateX(3px); }

/* Підпис унизу — про час і умови. Відділений лінією, щоб не злипався
   з головним значенням. */
.contact-card__note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: var(--sp-3) 0 0;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--g-100);
    font-size: var(--fs-xs);
    color: var(--g-600);
    line-height: 1.45;
}
.contact-card__note i {
    flex-shrink: 0;
    position: relative;
    top: 2px;
    color: var(--g-500);
    line-height: 0;
}

.contact-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.msg-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 17px;
    border-radius: var(--r-btn);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--g-0);
    text-decoration: none;
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}
.msg-btn:hover { opacity: .92; transform: translateY(-1px); box-shadow: var(--sh-md); }
.msg-btn i { line-height: 0; }
.msg-btn--tg   { background: #2AABEE; }
.msg-btn--vb   { background: #7360F2; }
.msg-btn--form { background: var(--c-ok); }

/* Рядок про самовивіз під картками: адреса тут довідка, а не спосіб
   звʼязку, тож вона поза сіткою й дрібнішим кеглем. */
.contacts-pickup {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: clamp(16px, 2vw, 22px) 0 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--g-700);
}
.contacts-pickup i { flex-shrink: 0; position: relative; top: 3px; color: var(--g-500); line-height: 0; }

/* ── Ланцюг виробництва ──────────────────────────────────────────────
   Пронумерована послідовність, а не сітка карток: тут важливо, що етапи
   йдуть ОДИН ЗА ОДНИМ і на кожному свій спеціаліст. Сітка рівноправних
   карток цього не каже, а саме це й пояснює, чому замовлення не можна
   «домовити на словах». */
.chain {
    list-style: none;
    counter-reset: chain;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(14px, 2vw, 20px);
}
@media (min-width: 700px)  { .chain { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .chain { grid-template-columns: repeat(4, 1fr); } }

.chain__step {
    position: relative;
    padding: clamp(18px, 2vw, 24px);
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
}

/* Лінія між етапами — вона й перетворює чотири картки на послідовність.
   Лише на широкому екрані: у стовпчик етапи й так читаються згори вниз. */
@media (min-width: 1100px) {
    .chain__step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 40px;
        right: calc(clamp(14px, 2vw, 20px) * -1);
        width: clamp(14px, 2vw, 20px);
        height: 2px;
        background: var(--g-200);
    }
}

.chain__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: var(--sp-3);
    border-radius: 50%;
    background: var(--c-navy);
    color: var(--g-0);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

.chain__title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: var(--c-navy);
}

.chain__desc {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--g-800);
}

.chain__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: clamp(18px, 2.4vw, 26px) 0 0;
    padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 20px);
    border-radius: var(--r-lg);
    background: var(--g-50);
    border-left: 3px solid var(--c-accent);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--g-800);
}
.chain__note i { flex-shrink: 0; position: relative; top: 3px; color: var(--c-accent); line-height: 0; }

/* Заголовок картки-послуги — посилання, але виглядає як заголовок:
   підкреслення зʼявляється лише на наведенні. */
.advantage-card h3 a {
    color: inherit;
    text-decoration: none;
}
.advantage-card h3 a:hover {
    color: var(--c-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Офіс: карта + фото ──────────────────────────────────────────────── */
.office-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(18px, 2.2vw, 28px);
}
.office-map {
    /* Карта позиціонує iframe абсолютно, а власної висоти не має: на
       мобільному її задає aspect-ratio, на десктопі — розтягування в
       сітці. Через це вона не може «вилізти» за свою комірку.

       Так було не завжди: спершу тут стояв min-height: 100%, і в гріді
       він рахувався від висоти, якої ще немає, — карта розповзалася
       поверх сусідньої колонки. */
    position: relative;
    overflow: hidden;
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    background: var(--g-100);
    aspect-ratio: 4 / 3;
}
.office-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width: 900px) {
    /* stretch: обидві колонки закінчуються на одній лінії. Висоту рядка
       задає текстова колонка, карта підлаштовується. */
    .office-grid { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
    .office-map  { aspect-ratio: auto; }
}

.office-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-3);
}

/* Список адреси всередині картки офісу — без зайвої рамки:
   .order-terms__list зі спільних блоків малює її сам. */
.office-list { margin: 0 0 var(--sp-3); }

.office-routes { display: flex; flex-wrap: wrap; gap: 10px; }

.route-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1.5px solid transparent;
    border-radius: var(--r-btn);
    background: var(--c-navy);
    color: var(--g-0);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.route-btn:hover { background: #16294a; }
.route-btn i { line-height: 0; }

.route-btn--ghost {
    background: var(--g-0);
    border-color: var(--g-300);
    color: var(--c-navy);
}
.route-btn--ghost:hover { background: var(--g-50); border-color: var(--c-navy); color: var(--c-navy); }

/* ── Форма звернення ─────────────────────────────────────────────────
   Форма живе в білій картці на сірій секції: інакше поля висіли просто
   на фоні, і блок не читався як «місце, де заповнюють». */
.form-card {
    padding: clamp(22px, 3vw, 38px);
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-md);
}

.contact-form { display: flex; flex-direction: column; gap: var(--sp-4); }

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}
@media (min-width: 640px) {
    .contact-form__row { grid-template-columns: 1fr 1fr; }
}

.field { display: flex; flex-direction: column; }

.field__label {
    margin-bottom: 7px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--g-800);
}
/* Зірочка обовʼязкового поля — брендовим, але тонким: вона позначає,
   а не кричить. */
.field__label b { color: var(--c-brand); font-weight: var(--fw-semi); }

.field__hint {
    margin-top: 6px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    color: var(--g-600);
}
.field__label .field__hint { margin: 0; }

/* Іконка всередині поля: підказує тип даних швидше за підпис і не
   займає окремого рядка. */
.field__wrap { position: relative; display: block; }
.field__ico {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-400);
    font-size: 16px;
    line-height: 0;
    pointer-events: none;
    transition: color var(--transition);
}
.field__wrap:focus-within .field__ico { color: var(--c-accent); }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--g-200);
    border-radius: var(--r-md);
    background: var(--g-50);
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--g-900);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
/* Селектор із типом, а не просто `.field__wrap input`: правило вище
   задане як `.field input[type="text"]`, і без типу воно перемагало за
   специфічністю — текст залазив під іконку. */
.field__wrap input[type="text"],
.field__wrap input[type="tel"],
.field__wrap input[type="email"] { padding-left: 42px; }

.field input::placeholder,
.field textarea::placeholder { color: var(--g-400); }

.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

.field input:hover,
.field textarea:hover { border-color: var(--g-300); }

.field input:focus,
.field textarea:focus {
    outline: none;
    background: var(--g-0);
    border-color: var(--c-accent);
    box-shadow: var(--sh-focus);
}

/* ── Зона файлів ─────────────────────────────────────────────────────
   Замінює системний <input type="file">: він показував кнопку мовою
   браузера й не давав ані перетягування, ані переліку обраного. */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: clamp(20px, 3vw, 28px);
    border: 2px dashed var(--g-300);
    border-radius: var(--r-lg);
    background: var(--g-50);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.dropzone:hover { border-color: var(--c-accent); background: rgba(58, 175, 217, .05); }
.dropzone.is-over {
    border-color: var(--c-accent);
    background: rgba(58, 175, 217, .1);
}
.dropzone.has-files { padding-block: clamp(14px, 2vw, 18px); }

/* Сам input лишається у формі (без JS усе працює), але його не видно */
.dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dropzone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--g-0);
    border: 1px solid var(--g-200);
    color: var(--c-accent);
    font-size: 20px;
}
.dropzone__icon i { line-height: 0; }

.dropzone__text { display: flex; flex-direction: column; gap: 2px; }
.dropzone__text strong { font-size: var(--fs-base); color: var(--c-navy); }
.dropzone__text span { font-size: var(--fs-sm); color: var(--g-600); }

/* --g-600, а не --g-500: у шкалі ui.css g-500 має 3.0:1 і призначений
   для рамок та декору, а це текст — йому потрібні щонайменше 4.5:1. */
.dropzone__hint { font-size: var(--fs-xs); color: var(--g-600); }

.dropzone__files {
    list-style: none;
    margin: var(--sp-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dropzone__file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--g-200);
    border-radius: var(--r-md);
    background: var(--g-0);
    font-size: var(--fs-sm);
}
.dropzone__file > i { color: var(--c-accent); line-height: 0; flex-shrink: 0; }
.dropzone__file.is-bad { border-color: var(--c-danger-line); background: var(--c-danger-bg); }
.dropzone__file.is-bad > i,
.dropzone__file.is-bad .dropzone__file-size { color: var(--c-danger); }

.dropzone__file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--g-900);
}
.dropzone__file-size { flex-shrink: 0; font-size: var(--fs-xs); color: var(--g-600); }

.dropzone__file-del {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--g-100);
    color: var(--g-600);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.dropzone__file-del:hover { background: var(--c-brand-soft); color: var(--c-brand); }

/* Пастка для ботів. Саме off-screen, а не display:none: частина ботів
   ігнорує сховані поля, але заповнює ті, що є в потоці документа. */
.field-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Підвал форми ───────────────────────────────────────────────────── */
.contact-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--g-100);
}

.contact-form__submit {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 34px;
    border: none;
    border-radius: var(--r-btn);
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
    color: var(--g-0);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}
.contact-form__submit:hover { transform: translateY(-1px); box-shadow: var(--sh-brand); }
.contact-form__submit i { line-height: 0; }

.contact-form__note {
    flex: 1;
    min-width: 220px;
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--g-600);
    line-height: 1.5;
}

@media (max-width: 560px) {
    .contact-form__submit { width: 100%; justify-content: center; }
}
.form-error-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 var(--sp-3);
    padding: 12px 16px;
    border: 1px solid var(--c-danger-line);
    border-radius: var(--r-md);
    background: var(--c-danger-bg);
    color: var(--c-danger);
    font-size: var(--fs-sm);
}

.form-result {
    padding: clamp(22px, 3vw, 34px);
    background: var(--g-0);
    border: 1px solid var(--c-ok-line);
    border-radius: var(--r-lg);
    text-align: center;
}
.form-result__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: var(--sp-3);
    border-radius: 50%;
    background: var(--c-ok-bg);
    color: var(--c-ok);
    font-size: 24px;
}
.form-result h3 { margin: 0 0 var(--sp-2); color: var(--c-navy); font-size: var(--fs-lg); }
.form-result p { margin: 0 0 var(--sp-2); color: var(--g-800); line-height: var(--lh-base); }
.form-result .route-btn { margin-top: var(--sp-2); }