/**
 * ELBIN Redesign 2 — Контакти
 *
 * Фінальний дизайн: elbin-final-v1/page-contacts.jsx
 * Шаблон: page-templates/contacts.php. Усі змінні з tokens.css.
 */

.elbin-r2-contacts {
    background: var(--elbin-r2-surface);
    font-family: var(--elbin-r2-font-ui);
}

/* === ХЛІБНІ КРИХТИ === */

.elbin-r2-contacts__breadcrumbs-band {
    border-bottom: 1px solid var(--elbin-r2-line);
    padding: 14px 0;
}

.elbin-r2-contacts__breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--elbin-r2-s-8);
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--elbin-r2-text-3);
}

.elbin-r2-contacts__breadcrumbs a {
    color: var(--elbin-r2-text-3);
    text-decoration: none;
}

.elbin-r2-contacts__breadcrumbs a:hover {
    color: var(--elbin-r2-text);
}

.elbin-r2-contacts__breadcrumbs-current {
    color: var(--elbin-r2-text);
    font-weight: var(--elbin-r2-fw-medium);
}

/* === ЗАГОЛОВОК === */

.elbin-r2-contacts__body {
    padding-top: var(--elbin-r2-s-48);
    padding-bottom: 80px;
}

.elbin-r2-contacts__title {
    margin: 0;
    /* Плавний clamp замість сходинок 40/30 */
    font-size: var(--elbin-r2-fs-page-title);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--elbin-r2-text);
}

.elbin-r2-contacts__title-dot {
    color: var(--elbin-r2-accent);
}

.elbin-r2-contacts__lead {
    margin: 14px 0 0;
    max-width: 760px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--elbin-r2-text-2);
}

/* === КАРТКИ КОНТАКТІВ === */

.elbin-r2-contacts__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--elbin-r2-s-16);
    margin-top: 40px;
}

.elbin-r2-contacts__card {
    background: var(--elbin-r2-surface);
    border: 1px solid var(--elbin-r2-line);
    border-radius: var(--elbin-r2-r-card);
    padding: var(--elbin-r2-s-24);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.elbin-r2-contacts__card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--elbin-r2-r-pill);
    background: var(--elbin-r2-accent-50);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--elbin-r2-accent-700);
}

.elbin-r2-contacts__card-eyebrow {
    font-size: 11px;
    color: var(--elbin-r2-text-3);
}

.elbin-r2-contacts__card-main {
    display: block;
    overflow-wrap: break-word;
    margin-top: 6px;
    font-family: var(--elbin-r2-font-mono);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--elbin-r2-text);
    text-decoration: none;
}

a.elbin-r2-contacts__card-main:hover {
    color: var(--elbin-r2-accent-700);
}

.elbin-r2-contacts__card-sub {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--elbin-r2-text-3);
}

/* === ЛЕЙАУТ: ФОРМА + МАПА/РЕКВІЗИТИ === */

.elbin-r2-contacts__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--elbin-r2-s-48);
    align-items: stretch;
    margin-top: var(--elbin-r2-s-48);
}

/* Форма */
.elbin-r2-contacts__form-card {
    background: var(--elbin-r2-surface);
    border: 1px solid var(--elbin-r2-line);
    border-radius: 10px;
    padding: 28px;
}

.elbin-r2-contacts__form-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--elbin-r2-text);
}

.elbin-r2-contacts__form-sub {
    margin: 8px 0 var(--elbin-r2-s-20);
    font-size: 13px;
    line-height: 1.5;
    color: var(--elbin-r2-text-2);
}

.elbin-r2-contacts__form-fallback {
    margin: 0;
    font-size: var(--elbin-r2-fs-small);
    line-height: 1.5;
    color: var(--elbin-r2-text-2);
}

.elbin-r2-contacts__form-fallback a {
    color: var(--elbin-r2-accent-700);
}

/* Поля форми всередині контенту (CF7 тощо) — за дизайн-системою */
.elbin-r2-contacts__form-content input[type="text"],
.elbin-r2-contacts__form-content input[type="email"],
.elbin-r2-contacts__form-content input[type="tel"],
.elbin-r2-contacts__form-content textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--elbin-r2-line);
    border-radius: var(--elbin-r2-r-control);
    background: var(--elbin-r2-surface);
    font-family: var(--elbin-r2-font-ui);
    font-size: 14px;
    color: var(--elbin-r2-text);
    transition: border-color var(--elbin-r2-transition-fast),
                box-shadow var(--elbin-r2-transition-fast);
}

.elbin-r2-contacts__form-content input:focus,
.elbin-r2-contacts__form-content textarea:focus {
    outline: none;
    border-color: var(--elbin-r2-accent);
    box-shadow: 0 0 0 3px rgba(26, 208, 202, 0.18);
}

.elbin-r2-contacts__form-content textarea {
    min-height: 96px;
    height: 96px;
    resize: vertical;
}

.elbin-r2-contacts__form-content input[type="submit"],
.elbin-r2-contacts__form-content button[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: var(--elbin-r2-accent);
    color: var(--elbin-r2-ink-on-accent);
    border: none;
    border-radius: var(--elbin-r2-r-control);
    font-family: var(--elbin-r2-font-ui);
    font-size: var(--elbin-r2-fs-small);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--elbin-r2-transition-fast);
}

.elbin-r2-contacts__form-content input[type="submit"]:hover,
.elbin-r2-contacts__form-content button[type="submit"]:hover {
    background: var(--elbin-r2-accent-hover);
}

/* === CF7-форма «Напишіть нам» — згладжування стандартної розмітки === */

/* CF7 загортає все в <p> і розділяє поля через <br>. Прибираємо <br> і
   керуємо версткою через block + margin, щоб був рівний вертикальний ритм. */
.elbin-r2-contacts__form-content .wpcf7-form p { margin: 0; }
.elbin-r2-contacts__form-content .wpcf7-form br { display: none; }

/* Підпис поля (текстовий вузол усередині <label>) */
.elbin-r2-contacts__form-content .wpcf7-form label {
    display: block;
    margin: 0 0 16px;
    font-family: var(--elbin-r2-font-ui);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    color: var(--elbin-r2-text-2);
}

/* Обгортка контролу CF7 — кладемо інпут під підписом */
.elbin-r2-contacts__form-content .wpcf7-form-control-wrap {
    display: block;
    margin-top: 7px;
}

.elbin-r2-contacts__form-content input::placeholder,
.elbin-r2-contacts__form-content textarea::placeholder {
    color: var(--elbin-r2-text-3);
    opacity: 1;
}

/* Кнопка «Відправити» — на всю ширину картки */
.elbin-r2-contacts__form-content input[type="submit"] {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
    font-size: 14px;
}

.elbin-r2-contacts__form-content .wpcf7-spinner { margin-left: 10px; }

/* Валідація: червона рамка на невалідному полі */
.elbin-r2-contacts__form-content .wpcf7-not-valid {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14) !important;
}

.elbin-r2-contacts__form-content .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #EF4444;
}

/* Повідомлення-результат (успіх / помилка) — як нотатка під формою */
.elbin-r2-contacts__form-content .wpcf7-response-output {
    margin: 18px 0 0 !important;
    padding: 12px 14px !important;
    border: 1px solid var(--elbin-r2-line) !important;
    border-radius: var(--elbin-r2-r-control);
    font-size: 13px;
    line-height: 1.5;
    background: var(--elbin-r2-surface);
    color: var(--elbin-r2-text-2);
}

.elbin-r2-contacts__form-content .wpcf7-form.sent .wpcf7-response-output {
    border-color: #22C55E !important;
    background: rgba(34, 197, 94, 0.08) !important;
    color: #15803D;
}

.elbin-r2-contacts__form-content .wpcf7-form.invalid .wpcf7-response-output,
.elbin-r2-contacts__form-content .wpcf7-form.unaccepted .wpcf7-response-output,
.elbin-r2-contacts__form-content .wpcf7-form.failed .wpcf7-response-output,
.elbin-r2-contacts__form-content .wpcf7-form.spam .wpcf7-response-output {
    border-color: #EF4444 !important;
    background: rgba(239, 68, 68, 0.07) !important;
    color: #B91C1C;
}

/* Права колонка */
.elbin-r2-contacts__side {
    display: flex;
    flex-direction: column;
    gap: var(--elbin-r2-s-16);
}

/* Мапа */
.elbin-r2-contacts__map {
    height: 240px;
    border: 1px solid var(--elbin-r2-line);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: repeating-linear-gradient(
        45deg,
        var(--elbin-r2-surface-3),
        var(--elbin-r2-surface-3) 12px,
        var(--elbin-r2-surface-2) 12px,
        var(--elbin-r2-surface-2) 24px
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.elbin-r2-contacts__map iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.elbin-r2-contacts__map-placeholder {
    font-family: var(--elbin-r2-font-mono);
    font-size: 12px;
    line-height: 1.4;
    color: var(--elbin-r2-text-3);
    background: var(--elbin-r2-surface);
    border: 1px solid var(--elbin-r2-line);
    border-radius: 6px;
    padding: 8px 12px;
}

/* Реквізити */
.elbin-r2-contacts__requisites {
    background: var(--elbin-r2-surface);
    border: 1px solid var(--elbin-r2-line);
    border-radius: 10px;
    padding: var(--elbin-r2-s-24);
}

.elbin-r2-contacts__requisites-eyebrow {
    font-size: 11px;
    color: var(--elbin-r2-text-3);
    margin-bottom: var(--elbin-r2-s-12);
}

.elbin-r2-contacts__requisites-row {
    display: flex;
    justify-content: space-between;
    gap: var(--elbin-r2-s-12);
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid var(--elbin-r2-line);
}

.elbin-r2-contacts__requisites-key {
    font-size: 13px;
    line-height: 1.4;
    color: var(--elbin-r2-text-3);
}

.elbin-r2-contacts__requisites-val {
    font-family: var(--elbin-r2-font-mono);
    font-size: 12px;
    font-weight: var(--elbin-r2-fw-medium);
    line-height: 1.4;
    color: var(--elbin-r2-text);
}

/* === АДАПТИВ === */

/* Десктоп: мапа тягнеться на висоту форми — однаковий розмір карти й форми.
   Сітка вже stretch, тож права колонка (side) = висоті форми; мапа її заповнює. */
@media (min-width: 769px) {
    .elbin-r2-contacts__side {
        height: 100%;
    }

    .elbin-r2-contacts__map {
        flex: 1 1 auto;
        height: auto;
        min-height: 240px;
    }
}

@media (max-width: 768px) {
    .elbin-r2-contacts__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .elbin-r2-contacts__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--elbin-r2-s-24);
    }
}

@media (max-width: 600px) {
    .elbin-r2-contacts__body {
        padding-top: var(--elbin-r2-s-32);
        padding-bottom: var(--elbin-r2-s-48);
    }

    .elbin-r2-contacts__form-card {
        padding: var(--elbin-r2-s-20);
    }
}