/*
 * Galera — About page
 */

.about-intro,
.production,
.brands,
.quality { padding: 64px 0; }

.about-intro__inner {
    display: flex;
    align-items: flex-start;
    gap: 64px;
}

.about-intro__content { flex: 1 1 560px; min-width: 0; }
.about-intro__numbers { flex: 1 1 340px; min-width: 0; }

.about-intro__title { margin: 0 0 20px; }

.about-intro__text {
    max-width: 62ch;
    color: var(--color-text);
}

/* Editor content — the paragraphs carry no classes. */
.about-intro__text p { margin: 0 0 14px; }

/* ── Production ─────────────────────────────────────────────────────────── */
.production { background: var(--color-bg-alt); }

.production__head {
    max-width: 70ch;
    margin-bottom: 40px;
}

.production__title { margin: 0 0 16px; }

.production__text { color: var(--color-muted); }
.production__text p { margin: 0 0 12px; }

.production__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.production__step {
    flex: 1 1 calc(25% - 18px);
    max-width: calc(25% - 18px);
    padding: 26px 24px;
    border-radius: var(--radius);
    background: #FFF;
    box-shadow: var(--shadow-soft);
}

.production__step-num {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: .08em;
}

.production__step-title {
    margin: 0 0 8px;
    font-size: 18px;
}

.production__step-text {
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
}

.production__media { margin: 40px 0 0; }

.production__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

/* ── Brands ─────────────────────────────────────────────────────────────── */
.brands__title { margin: 0 0 36px; }

.brands__list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.brand {
    flex: 1 1 calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
    padding: 28px 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.brand__logo {
    display: block;
    width: auto;
    max-height: 44px;
    margin-bottom: 18px;
}

.brand__name {
    margin: 0 0 10px;
    font-size: 20px;
    color: var(--color-primary);
}

.brand__text {
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
}

/* ── Quality ────────────────────────────────────────────────────────────── */
.quality { background: var(--color-bg-alt); }

.quality__inner {
    display: flex;
    align-items: flex-start;
    gap: 64px;
}

.quality__content { flex: 1 1 520px; min-width: 0; }

.quality__list {
    display: flex;
    flex: 1 1 380px;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quality__title { margin: 0 0 18px; }

.quality__text { color: var(--color-text); }
.quality__text p { margin: 0 0 14px; }

.quality__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--radius);
    background: #FFF;
    box-shadow: var(--shadow-soft);
}

.quality__icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--color-primary);
}

/* ── Adaptive ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .production__step { flex: 1 1 calc(50% - 12px); max-width: calc(50% - 12px); }
    .about-intro__inner,
    .quality__inner   { gap: 40px; }

    /* Brands stay in one row and scroll sideways: three cards squeezed into a
       narrow grid leave no room for the description. */
    .brands__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--gutter);
        margin-right: calc(-1 * var(--gutter));
        padding-right: var(--gutter);
        padding-bottom: 6px;
    }

    .brand {
        flex: 0 0 300px;
        max-width: 300px;
        scroll-snap-align: start;
    }
}

@media (max-width: 1023px) {
    .about-intro,
    .production,
    .brands,
    .quality          { padding: 48px 0; }
    .about-intro__inner,
    .quality__inner   { flex-direction: column; gap: 32px; }
    .about-intro__content,
    .about-intro__numbers,
    .quality__content,
    .quality__list    { flex: 0 1 auto; width: 100%; }
}

@media (max-width: 767px) {
    .about-intro,
    .production,
    .brands,
    .quality          { padding: 36px 0; }
    .production__step { flex: 1 1 100%; max-width: 100%; }
    .brand            { flex: 0 0 min(82vw, 300px); max-width: min(82vw, 300px); }
    .about-intro__text,
    .production__head { max-width: none; }
}