/*
 * About page
 */

/* ── Story ──────────────────────────────────────────────────────────────── */
.story {
    padding: var(--space-section-sm) 0 var(--space-section);
}

.story__wrp {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.story__aside {
    flex: none;
    width: min(var(--aside-width), 40%);
    padding-left: var(--content-indent);
}

.story__photo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
}

.story__image {
    width: 100%;
    height: auto;
    filter: grayscale(1);
}

.story__caption {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

.story__photo--empty {
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    background: var(--color-primary-10);
    border: 1px solid var(--color-primary-50);
}

.story__monogram {
    font-family: var(--font-heading);
    font-size: 96px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-primary);
}

.story__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.story__text {
    max-width: 640px;
    font-size: var(--fs-h4);
    line-height: 1.5;
}

.story__text p + p { margin-top: 16px; }

/* ── Values ─────────────────────────────────────────────────────────────── */
.values {
    padding: var(--space-section-lg) 0;
}

.values__wrp {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.values__title { margin-left: var(--content-indent); }

.values__list {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-line);
    border-left: 1px solid var(--color-line);
}

.values__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 25%;
    padding: 40px 32px;
    background: var(--color-bg);
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    transition: background-color var(--transition);
}

.values__item:hover { background: var(--color-primary-10); }

.values__number {
    font-family: var(--font-heading);
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--color-primary);
}

.values__text {
    font-size: var(--fs-small);
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* ── Terms ──────────────────────────────────────────────────────────────── */
.terms {
    padding: var(--space-section) 0;
}

.terms__wrp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 48px 48px 48px var(--content-indent);
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--color-primary);
}

.terms__text {
    max-width: 640px;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.terms__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}

/* ═══ Tablet (< 1024px) ═════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .story__wrp { gap: 32px; }
    .story__aside { width: 300px; padding-left: 0; }
    .story__text { font-size: var(--fs-body); }

    .values__wrp { gap: 40px; }
    .values__title { margin-left: 0; }
    .values__item { width: 50%; padding: 32px 24px; }

    .terms__wrp { padding: 40px 32px; }
}

/* ═══ Phone (< 768px) ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Text first; the placeholder square adds nothing on a phone */
    .story__wrp { flex-direction: column-reverse; gap: 24px; }
    .story__aside:has(.story__photo--empty) { display: none; }
    .story__aside { width: 100%; }
    .story__photo { max-width: 240px; }
    .story__monogram { font-size: 64px; }
    .story__body { gap: 20px; }

    .values__wrp { gap: 32px; }
    .values__item { width: 100%; padding: 24px 20px; }

    .terms__wrp { padding: 28px 20px; }
    .terms__actions { flex-direction: column; align-items: stretch; width: 100%; }
    .terms__actions .btn { width: 100%; }
}

.story + .metrics { padding-top: 0; }