/* bm/reviews — opinie ze zdjeciem (jedna opinia = jeden box/wiersz)
   Zmienne inline z render.php:
   box:   --rv-radius (zaokraglenie), --rv-border (kolor obramowania)
   media: --img-w (szerokosc % boxa), --img-ratio (proporcja zdjecia) */

.bm-reviews__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}
.bm-reviews__heading,
.bm-reviews__lead { margin-left: auto; margin-right: auto; }

.bm-reviews__list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Box pojedynczej opinii — bez paddingu (zdjecie ma byc flush do krawedzi). */
.bm-reviews__box {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: var(--rv-radius, 10px);
    background: var(--c-surface, #fff);
}
.bm-reviews__box--media-right { flex-direction: row-reverse; }

.bm-reviews--shadow { box-shadow: var(--rv-shadow, 0 22px 60px -26px rgba(0, 0, 0, 0.28)); }
.bm-reviews--border { border: 1px solid var(--rv-border, color-mix(in srgb, currentColor 16%, transparent)); }

/* Kolumna zdjecia — przyklejona do krawedzi (gora/dol/wybrana strona).
   aspect-ratio nadaje bazowa wysokosc; flex-stretch dociaga do wysokosci tekstu
   (gdy tekst wyzszy), object-fit: cover wypelnia bez deformacji. */
.bm-reviews__media {
    flex: 0 0 var(--img-w, 40%);
    max-width: var(--img-w, 40%);
    align-self: stretch;
    position: relative;
    aspect-ratio: var(--img-ratio, 4/5);
    background: var(--c-surface-alt, #eee);
}
.bm-reviews__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* Oryginalne proporcje — pelne zdjecie bez kadrowania (wysokosc naturalna). */
.bm-reviews__media--original { aspect-ratio: auto; }
.bm-reviews__media--original .bm-reviews__img { height: auto; }

/* Tresc — jedyna kolumna z paddingiem, wycentrowana w pionie. */
.bm-reviews__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: clamp(28px, 4vw, 52px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bm-reviews__quote {
    margin: 0 0 22px;
    font-family: var(--f-serif);
    font-size: var(--fs-lead, 1.2rem);
    line-height: 1.6;
    font-style: italic;
    color: inherit;
}
.bm-reviews__quote p { margin: 0 0 0.7em; }
.bm-reviews__quote p:last-child { margin-bottom: 0; }

.bm-reviews__sign {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bm-reviews__author {
    font-family: var(--f-sans);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.bm-reviews__role {
    font-family: var(--f-sans);
    font-size: 0.85rem;
    color: color-mix(in srgb, currentColor 65%, transparent);
}

/* Mobile — stack pionowo, zdjecie na gorze (z limitem wysokosci). */
@media (max-width: 700px) {
    .bm-reviews__box,
    .bm-reviews__box--media-right { flex-direction: column; }
    .bm-reviews__media {
        flex-basis: auto;
        max-width: none;
        width: 100%;
        max-height: 60vh;
    }
}