/* =======================================================
   Front page – page-specific styles
   ======================================================= */




/* -------------------------------------------------------
   Broňa Plus section – text + testimonial carousel
------------------------------------------------------- */

/* Grid items default to min-width:auto, meaning a track won't shrink below its
   content's intrinsic size. A carousel track (many cards laid out unwrapped)
   has a huge intrinsic width, so without minmax(0, ...) the .item-reviews grid
   cell was expanding to fit it and dragging the whole page wider than the
   viewport. Desktop already used minmax(0, 1fr) below; the theme's own mobile
   rule (.vob-photo-left { grid-template-columns: 1fr }) didn't, so mobile hit
   this. Overriding it here (same breakpoint as that theme rule) fixes the
   actual leak, so .vob-review-viewport's own overflow:hidden can do its job
   without needing extra overflow-x:hidden elsewhere (which was clipping the
   card box-shadow's intentional bleed room). */
@media screen and (max-width: 960px) {
    .bplus.vob-basic.vob-photo-left {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (min-width: 961px) {
    .bplus.vob-basic.vob-photo-left {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .bronaplus-section {
        padding-top: 70px;
    }
}

.bplus.vob-basic.vob-photo-left .item-text-inner {
    max-width: none;
}

/* .bplus.vob-photo .item-text (style.css) sets display:flex + align-items:center,
   which vertically centers the text inside the grid row instead of aligning it
   to the top. The row's height is driven by the taller .item-reviews column, so
   centering pushed the text block down. Top-align it here instead, scoped to
   this section only (.bplus.vob-photo without -left is also used elsewhere). */
.bplus.vob-basic.vob-photo-left .item-text {
    display: block;
}

.item-text-face {
    float: right;
    width: 200px;
    max-width: 45%;
    height: auto;
    margin: -80px 0 1.5em 1.5em;
}

@media screen and (max-width: 768px) {
    .item-text-face {
        float: none;
        display: block;
        width: 140px;
        max-width: 40%;
        margin: 0 auto 1.5em;
    }
}

.item-reviews {
    display: flex;
    align-items: center;
}

/* The theme's own mobile rule (.vob-photo-left .item-text { order: 1 }, ≤960px)
   only pairs with .item-photo (order: 2) — .item-reviews never got an order,
   so it defaulted to 0 and sorted before the text column. Match it here. */
@media screen and (max-width: 960px) {
    .bplus.vob-basic.vob-photo-left .item-reviews {
        order: 2;
    }
}

.item-reviews .vob-review-slider {
    width: 100%;
    min-width: 0;
    /* let the flex item shrink below its content's width so overflow:hidden can clip it */
}

/* Fixed-px cards (.vob-review-slider--cards) assume a wide track; in this
   narrower 2-up column that overflows and clips cards mid-sentence. Size
   cards off the column's own width instead, so exactly 2 + the gap always fit. */
.item-reviews .vob-review-slider--cards .vob-review-item {
    flex: 0 0 calc((100% - 24px) / 2);
}

/* Matches the carousel JS's getResponsiveVisible(), which shows 1 card at a
   time below 460px instead of 2 — keep the card width in sync with that. */
@media screen and (max-width: 460px) {
    .item-reviews .vob-review-slider--cards .vob-review-item {
        flex: 0 0 100%;
    }
}

.item-reviews .vob-review-viewport {
    padding: 12px;
    margin: -12px;
    /* room for the card box-shadow to render on every side without being clipped by overflow:hidden.
       Kept smaller than the card's own text padding (1.8em) so the reveal never shows text, only
       blank corner/shadow. */
}

.item-reviews .vob-review-item-inner {
    border: none;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
}

.item-reviews .vob-course-rating {
    background: none;
    border: 2px solid #eef0f4;
}

.item-reviews .vob-review-nav {
    margin-top: 1em;
}

@media screen and (max-width: 768px) {
    .item-reviews {
        margin-top: 1em;
    }
}