/* ================================================================
   PAGE "ПРО НАС" — Moon Juice palette  (2026-09-27)
   page-about.php — редакційна історія (стат-смуга, цитата, цінності,
   каталог-список, чорний блок місії). Узгоджено з css/blog.css.
   ================================================================ */

.ab-hero,
.ab-stats,
.ab-story,
.ab-values,
.ab-catalog,
.ab-mission {
    background: #FAF8F3;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.ab-hero__inner {
    padding: 72px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    max-width: 760px;
    margin: 0 auto;
}
.ab-eyebrow {
    font: 600 12px/1 'Golos Text', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #2D7A4F;
}
.ab-hero__title {
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-weight: 300;
    font-size: 48px;
    line-height: 1.2;
    color: #1A1A1A;
}
.ab-hero__sub {
    margin: 0;
    font: 400 18px/1.7 'Golos Text', sans-serif;
    color: #3A3530;
    max-width: 620px;
}

/* ── Stat strip ───────────────────────────────────────────────── */
.ab-stats__grid {
    margin: 56px auto 0;
    max-width: 1040px;
    display: flex;
    gap: 1px;
    background: #E8E0D4;
    border-radius: 4px;
    overflow: hidden;
}
.ab-stat {
    flex: 1;
    background: #fff;
    padding: 28px 24px;
    text-align: center;
}
.ab-stat__num {
    font-family: 'Unbounded', sans-serif;
    font-size: 34px;
    font-weight: 600;
    color: #1A1A1A;
}
.ab-stat__label {
    font: 500 13px/1.4 'Golos Text', sans-serif;
    color: #6B6560;
    margin-top: 4px;
}

/* ── Story ────────────────────────────────────────────────────── */
.ab-story__col {
    max-width: 660px;
    margin: 64px auto 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.ab-story__p {
    margin: 0;
    font: 400 17px/1.8 'Golos Text', sans-serif;
    color: #3A3530;
}
.ab-quote {
    margin: 8px 0;
    padding: 28px 8px;
    border-top: 1px solid #E8E0D4;
    border-bottom: 1px solid #E8E0D4;
    text-align: center;
    font-family: 'Unbounded', sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 21px;
    line-height: 1.55;
    color: #1A1A1A;
}
.ab-origins {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.ab-origins__label {
    font: 600 11px/1 'Golos Text', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9B9589;
}
.ab-origins__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.ab-chip {
    padding: 7px 16px;
    background: #E6F0E9;
    color: #2D7A4F;
    border-radius: 999px;
    font: 600 13px/1 'Golos Text', sans-serif;
}
.ab-chip--muted { background: #F5F0E8; color: #6B6560; }

/* ── Values ───────────────────────────────────────────────────── */
.ab-values { padding-top: 72px; }
.ab-section-title {
    margin: 0 0 28px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 600;
    font-size: 28px;
    color: #1A1A1A;
    text-align: center;
}
.ab-values__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ab-value {
    background: #fff;
    border: 1px solid #E8E0D4;
    border-radius: 4px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #2D7A4F; /* іконка успадковує currentColor */
}
.ab-value__title {
    margin: 0;
    font-family: 'Golos Text', sans-serif;
    font-weight: 600;
    font-size: 19px;
    color: #1A1A1A;
}
.ab-value__text {
    margin: 0;
    font: 400 14px/1.65 'Golos Text', sans-serif;
    color: #6B6560;
}

/* ── What you'll find ────────────────────────────────────────── */
.ab-catalog { padding: 72px 0; }
.ab-catalog__col {
    max-width: 660px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}
.ab-catalog__list {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.ab-catalog__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #E8E0D4;
    font: 400 15px/1.4 'Golos Text', sans-serif;
    color: #3A3530;
}
.ab-catalog__item:last-child { border-bottom: none; }
.ab-catalog__item svg { flex-shrink: 0; }
.ab-catalog__note {
    margin: 0;
    font: 400 14px/1.7 'Golos Text', sans-serif;
    color: #9B9589;
}

/* ── Mission (dark band) ─────────────────────────────────────── */
.ab-mission { background: #FAF8F3; }
.ab-mission__inner {
    background: #1A1A1A;
    border-radius: 4px;
    padding: 72px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    margin: 0 0 72px;
}
.ab-mission__eyebrow {
    font: 600 12px/1 'Golos Text', sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8FBFA0;
}
.ab-mission__text {
    margin: 0;
    max-width: 720px;
    font-family: 'Unbounded', sans-serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 1.5;
    color: #fff;
}
.ab-mission__tagline {
    margin: 0;
    font: 500 15px/1.5 'Golos Text', sans-serif;
    color: rgba(255,255,255,.6);
}
.ab-mission__btn {
    margin-top: 8px;
    padding: 14px 32px;
    background: #fff;
    color: #1A1A1A;
    border-radius: 4px;
    font: 600 14px/1 'Golos Text', sans-serif;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
}
.ab-mission__btn:hover { background: #F5F0E8; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1000px) {
    .ab-values__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .ab-hero__inner { padding-top: 48px; }
    .ab-hero__title { font-size: 32px; }
    .ab-hero__sub { font-size: 16px; }
    .ab-stats__grid { flex-direction: column; margin-top: 40px; }
    .ab-story__col { margin-top: 48px; }
    .ab-values,
    .ab-catalog { padding-top: 48px; }
    .ab-catalog { padding-bottom: 48px; }
    .ab-mission__inner { padding: 48px 28px; margin-bottom: 48px; }
    .ab-mission__text { font-size: 22px; }
}

@media (max-width: 480px) {
    .ab-hero__title { font-size: 26px; }
    .ab-quote { font-size: 18px; padding: 22px 4px; }
    .ab-origins__list { gap: 6px; }
    .ab-chip { padding: 6px 12px; font-size: 12px; }
    .ab-catalog__item { text-align: left; justify-content: flex-start; align-items: flex-start; }
    .ab-catalog__item svg { margin-top: 3px; }
}