/* =============================================
   BEAUTY BALM — сторінка «Про нас» (макет 4A)

   Підключається тільки на page-about.php.
   Значення — з tokens.css.
   ============================================= */

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


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

/* Ширину обмежуємо у дітей, а не в самому блоці: .bb-container
   центрує себе через margin:auto, і власний max-width відірвав би
   hero від лівої межі решти сторінки. */
.bb-about__hero {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 76px;
    padding-bottom: 64px;
}

.bb-about__hero > * {
    max-width: 760px;
}

.bb-about__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-about__title em {
    font-style: normal;
    font-weight: var(--bb-fw-regular);
    color: var(--bb-accent-italic);
}

.bb-about__lead {
    max-width: 600px;
    margin: 0;
    font-size: var(--bb-fs-lead);
    line-height: var(--bb-lh-lead);
    color: var(--bb-body);
}


/* ── Хто за цим стоїть ────────────────────────── */

.bb-about__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bb-gap-columns);
    align-items: center;
}

.bb-about__portrait {
    aspect-ratio: var(--bb-ratio-card);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-photo-bg);
    overflow: hidden;
}

.bb-about__portrait-img,
.bb-about__shot-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Поки фото немає — акварельна плашка, а не порожня діра */
.bb-about__portrait.is-empty,
.bb-about__shot.is-empty {
    background: linear-gradient(150deg, var(--bb-lavender), var(--bb-rose) 55%, var(--bb-mint));
}

.bb-about__story {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bb-about__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-about__h2--section {
    font-size: var(--bb-fs-h2);
    line-height: var(--bb-lh-h2);
}

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

.bb-about__sign {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bb-about__sign-name {
    font-family: var(--bb-font-display);
    font-size: 22px;
    letter-spacing: .04em;
    color: var(--bb-ink);
}

.bb-about__sign-role {
    font-size: 13.5px;
    color: var(--bb-secondary);
}


/* ── Плитки фактів ────────────────────────────── */

/* Розділювачі — це просвіт сітки на кольоровому фоні:
   одна лінія між плитками замість чотирьох рамок, які
   подвоювались би на стиках. */
.bb-about__facts {
    padding-top: 76px;
}

/* Фон і радіус — на внутрішньому блоці, а не на .bb-container:
   інакше колір розділювачів заливав би й бокові поля контейнера. */
.bb-about__facts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border-radius: var(--bb-radius-lg);
    background: var(--bb-line);
    overflow: hidden;
}

.bb-about__fact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px 26px;
    background: var(--bb-surface);
}

.bb-about__fact-value {
    font-family: var(--bb-font-display);
    font-size: 34px;
    line-height: 1;
    color: var(--bb-accent-italic);
}

.bb-about__fact-label {
    font-size: 14px;
    font-weight: var(--bb-fw-medium);
    color: var(--bb-ink);
}

.bb-about__fact-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--bb-secondary);
}


/* ── Як ми обираємо засоби ────────────────────── */

.bb-about__steps {
    padding-top: 80px;
}

.bb-about__steps .bb-about__h2 {
    margin-bottom: 32px;
}

.bb-about__steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.bb-about__step {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bb-about__step-num {
    font-size: 13px;
    letter-spacing: var(--bb-ls-eyebrow);
    color: var(--bb-periwinkle);
}

.bb-about__step-title {
    font-size: 17px;
    font-weight: var(--bb-fw-medium);
    color: var(--bb-ink);
}

.bb-about__step-text {
    font-size: var(--bb-fs-ui);
    line-height: 1.6;
    color: var(--bb-body);
}


/* ── Спільнота ────────────────────────────────── */

.bb-about__community {
    padding-top: 80px;
}

.bb-about__community-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-gap-columns);
    padding: 64px 52px;
    border-radius: var(--bb-radius-lg);
    background: var(--bb-photo-bg);
}

.bb-about__community-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 560px;
}

.bb-about__community-title {
    font-family: var(--bb-font-display);
    font-size: 38px;
    font-weight: var(--bb-fw-medium);
    line-height: 1.1;
    color: var(--bb-ink);
}

.bb-about__community-lead {
    font-size: var(--bb-fs-body);
    line-height: 1.6;
    color: var(--bb-body);
}

.bb-about__community .bb-btn {
    flex: 0 0 auto;
}


/* ── Контакти ─────────────────────────────────── */

.bb-about__contacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bb-gap-columns);
    align-items: start;
    padding-top: 80px;
}

.bb-about__contacts-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.bb-about__shot {
    aspect-ratio: var(--bb-ratio-product);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-lavender);
    overflow: hidden;
}


/* ── Планшет ──────────────────────────────────── */

@media (max-width: 1023.98px) {

    .bb-about__facts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bb-about__community-inner {
        padding: 48px 36px;
    }
}


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

@media (max-width: 767.98px) {

    .bb-about__hero {
        padding-top: 40px;
        padding-bottom: 40px;
        gap: 16px;
    }

    .bb-about__intro,
    .bb-about__contacts {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    /* Портрет над текстом, але не на весь екран заввишки */
    .bb-about__portrait {
        max-width: 320px;
    }

    .bb-about__facts {
        padding-top: var(--bb-section-m);
    }

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

    .bb-about__fact {
        padding: 20px;
    }

    .bb-about__steps,
    .bb-about__community,
    .bb-about__contacts {
        padding-top: var(--bb-section-m);
    }

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

    .bb-about__community-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 32px 22px;
    }

    .bb-about__community-title {
        font-size: 28px;
    }

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

    .bb-about__contacts-main .bb-btn {
        width: 100%;
    }

    /* Фото контактів на телефоні лише забирає екран перед підвалом */
    .bb-about__shot.is-empty {
        display: none;
    }
}