/* =============================================
   BEAUTY BALM — сторінка «Контакти»

   Підключається тільки на page-contact.php.
   Рядки контактів — спільний компонент .bb-rows
   з components.css, тут лише форма й обгортки.
   ============================================= */

.bb-contact {
    padding-bottom: var(--bb-section);
}


/* ── Hero ─────────────────────────────────────── */

.bb-contact__hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 76px;
    padding-bottom: 56px;
}

.bb-contact__hero > * {
    max-width: 680px;
}

.bb-contact__title {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-h1);
    font-weight: var(--bb-fw-medium);
    line-height: var(--bb-lh-h1);
    letter-spacing: var(--bb-ls-h1);
    color: var(--bb-ink);
}

.bb-contact__lead {
    margin: 0;
    font-size: var(--bb-fs-lead);
    line-height: var(--bb-lh-lead);
    color: var(--bb-body);
}


/* ── Дві колонки ──────────────────────────────── */

/* Контакти вужчі за форму: у них короткі рядки, а формі
   потрібне місце під два поля в ряд. */
.bb-contact__body {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: var(--bb-gap-columns);
    align-items: start;
}

.bb-contact__side,
.bb-contact__main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bb-contact__h2 {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-h3);
    font-weight: var(--bb-fw-medium);
    line-height: var(--bb-lh-h3);
    color: var(--bb-ink);
}

.bb-contact__p {
    margin: 0;
    font-size: var(--bb-fs-body);
    line-height: 1.7;
    color: var(--bb-body);
}

.bb-contact__note {
    margin: 0;
    font-size: var(--bb-fs-caption);
    color: var(--bb-muted);
}

.bb-contact__note a {
    color: var(--bb-indigo);
    text-decoration: none;
    border-bottom: 1px solid var(--bb-line-button);
}

.bb-contact__error {
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--bb-line);
    border-left: 3px solid var(--bb-sale);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
    font-size: var(--bb-fs-body);
    color: var(--bb-body);
}


/* ── Форма ────────────────────────────────────── */

.bb-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

.bb-form__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.bb-form__row--wide {
    grid-column: 1 / -1;
}

.bb-form__label {
    font-size: var(--bb-fs-caption);
    color: var(--bb-secondary);
}

.bb-form__input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--bb-line-input);
    border-radius: var(--bb-radius-md);
    background: var(--bb-surface);
    font-family: var(--bb-font-ui);
    font-size: var(--bb-fs-body);
    color: var(--bb-ink);
    transition: border-color .2s;
}

.bb-form__input::placeholder {
    color: var(--bb-muted);
}

.bb-form__input:focus {
    outline: none;
    border-color: var(--bb-periwinkle);
}

.bb-form__textarea {
    height: auto;
    min-height: 150px;
    padding: 14px 16px;
    line-height: 1.6;
    resize: vertical;
}

.bb-form__actions {
    align-items: flex-start;
    margin-top: 4px;
}

/* Пастка для ботів: приховуємо так, щоб автозаповнювачі теж не бачили */
.bb-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ── Успішна відправка ────────────────────────── */

.bb-contact__done {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
}

.bb-contact__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bb-mint);
    color: var(--bb-success);
}


/* ── Мобільна ─────────────────────────────────── */

@media (max-width: 1023.98px) {

    .bb-contact__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
}

@media (max-width: 767.98px) {

    .bb-contact__hero {
        padding-top: 40px;
        padding-bottom: 32px;
    }

    .bb-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .bb-contact__done {
        padding: 24px 20px;
    }

    .bb-form__actions .bb-btn {
        width: 100%;
    }
}


/* =============================================
   Запасний шаблон index.php

   Блогу немає, але index.php лишається останнім
   запасним шаблоном WordPress — хай виглядає
   пристойно, якщо на нього колись потрапить.
   Стилі тут, а не окремим файлом: сторінка рідкісна,
   заводити під неї ще один запит не варто.
   ============================================= */

.bb-plain {
    padding-top: 64px;
    padding-bottom: var(--bb-section);
}

.bb-plain__head {
    margin-bottom: 32px;
}

.bb-plain__title {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-h2);
    font-weight: var(--bb-fw-medium);
    line-height: var(--bb-lh-h2);
    color: var(--bb-ink);
}

.bb-plain__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px;
}

.bb-plain__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 520px;
    padding: 48px 0;
}

.bb-plain__text {
    margin: 0;
    font-size: var(--bb-fs-lead);
    line-height: var(--bb-lh-lead);
    color: var(--bb-body);
}