/* ============================================================
 * reviews-page.css — страница /otzyvy
 * Namespace: .reviews-page__*
 * ============================================================ */

.reviews-page__title {
    color: var(--bs-dark, #00221C);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0;
}

.reviews-page__lead {
    color: var(--bs-secondary, #51596C);
    font-size: 1.125rem;
    max-width: 38rem;
}

.reviews-page__meta {
    color: var(--bs-secondary, #51596C);
    font-size: 0.9375rem;
}

/* Список отзывов: каждый отзыв — строка «фото | цитата», разделённая рулеткой */
.reviews-page__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.reviews-page__item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
        "photo head"
        "body  body"
        "foot  foot";
    column-gap: 1rem;
    row-gap: 0.75rem;
    padding: 2rem 0;
    border-top: 1px solid var(--bs-gray-300, #E7EAF3);
}

.reviews-page__item:first-child {
    border-top: 0;
    padding-top: 0;
}

.reviews-page__photo-wrap {
    grid-area: photo;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bs-gray-100, #F9FAFC);
    align-self: center;
}

.reviews-page__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reviews-page__head {
    grid-area: head;
    align-self: center;
    min-width: 0;
}

.reviews-page__pseudo {
    color: var(--bs-primary, #008060);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.reviews-page__who {
    color: var(--bs-secondary, #51596C);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

.reviews-page__who strong {
    color: var(--bs-dark, #00221C);
    font-weight: 500;
}

.reviews-page__body {
    grid-area: body;
    color: var(--bs-body-color, #51596C);
    max-width: 44rem;
}

.reviews-page__body p:last-child {
    margin-bottom: 0;
}

.reviews-page__foot {
    grid-area: foot;
}

/* Десктоп: фото крупнее, в своей колонке слева от цитаты */
@media (min-width: 768px) {
    .reviews-page__item {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        grid-template-areas:
            "photo head"
            "photo body"
            "photo foot";
        column-gap: 2.5rem;
        row-gap: 1rem;
        padding: 3rem 0;
    }

    .reviews-page__photo-wrap {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 0.75rem;
        align-self: start;
    }

    .reviews-page__head {
        align-self: start;
    }

    .reviews-page__pseudo {
        font-size: 1.5rem;
    }
}

/* Карточки историй авторов — те же, что на главной */
.reviews-page__story-card {
    border-color: var(--bs-gray-300, #E7EAF3);
    border-radius: 0.75rem;
    transition: box-shadow 0.2s ease;
}

.reviews-page__story-card:hover,
.reviews-page__story-card:focus-visible {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 34, 28, 0.08);
}

.reviews-page__story-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .reviews-page__story-card {
        transition: none;
    }
}