/* Reviews — fig 7135:25348. The slider itself is the site-wide lp-section-12
   component (parts/lp-section-12.php, styled in css/main.css) and matches the
   mock card for card; only the head above it is corporate. */

/* parts/lp-section-12.php also carries .delivery-section-7, which is the
   delivery page's own treatment: grey bordered cards, a 760px head and 46px
   arrows. The corporate mock wants the component's base look, so those are
   undone here (equal specificity, and this sheet loads after main.css). */
.corp-reviews .lp-section-12 {
    padding: 0;
}

.corp-reviews .lp-section-12-wrap-top-left {
    max-width: none;
}

.corp-reviews .lp-section-12-wrap-bottom {
    padding-bottom: 20px;
}

.corp-reviews .lp-section-12-wrap-bottom-item {
    border: 0;
    background: #fff;
    box-shadow: var(--corp-panel-shadow);
}

.corp-reviews .lp-section-12-wrap-bottom-next,
.corp-reviews .lp-section-12-wrap-bottom-prev {
    top: -88px;
    width: 65px;
    height: 65px;
    border-radius: 10px;
    background-size: auto;
}

/* Every frame down to 768 keeps the component's full-size card — 457 wide, 480
   tall, 100px avatar — and lets the row run past the panel's right edge rather
   than fitting two cards in. The shared sheet shrinks all of it below 1436, so
   the desktop values are restored here down to the phone frame. The slide width
   itself is a swiper measurement, set from tpl-corporate.php. */
@media (min-width: 768px) {
    /* swiper reads this because tpl-corporate.php puts the slider on
       slidesPerView: auto */
    .corp-reviews .lp-section-12-wrap-bottom-items .swiper-slide {
        width: 457px;
    }

    .corp-reviews .lp-section-12-wrap-bottom-item {
        padding: 45px 55px;
        min-height: 480px;
    }

    .corp-reviews .lp-section-12-wrap-bottom-item-image img {
        max-width: 100px;
    }

    .corp-reviews .lp-section-12-wrap-bottom-item-rating img {
        max-width: 150px;
    }

    .corp-reviews .lp-section-12-wrap-bottom-item-rating-title {
        font-size: 32px;
        line-height: 39px;
    }

    .corp-reviews .lp-section-12-wrap-bottom-item-rating-text {
        font-size: 16px;
    }

    .corp-reviews .lp-section-12-wrap-bottom-item-rating-social {
        font-size: 22px;
        line-height: 27px;
    }

    .corp-reviews .lp-section-12-wrap-bottom-item-rating-social span,
    .corp-reviews .lp-section-12-wrap-bottom-item-rating-social span svg {
        width: 27px;
        height: 27px;
    }

    /* the card's shadow needs the room the shared sheet gives it at full size */
    .corp-reviews .lp-section-12-wrap-bottom-items {
        margin: -20px;
    }

    .corp-reviews .lp-section-12-wrap-bottom-items .swiper {
        padding: 20px;
    }
}

.corp-reviews .lp-section-12-wrap-bottom-prev {
    right: 70px;
}

.corp-reviews .lp-section-12-wrap-top-left-title-1 {
    font-family: "Unbounded", sans-serif;
    font-size: 32px;
    font-weight: 400;
    /* Figma's auto leading for Unbounded Regular is 1.25; the browser's normal
       for that face is 1.2, which loses 2px a line against the frame */
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--corp-ink);
    padding-bottom: 20px;
}

/* Both narrow mocks wrap this title over two lines: at 768 because the arrows
   take the rest of the row, at 1440 because the frame holds the text at 610. */
@media (max-width: 1470px) {
    .corp-reviews .lp-section-12-wrap-top-left {
        max-width: 610px;
    }
}

.corp-reviews .lp-section-12-wrap-top-left-title-2 {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    text-transform: none;
    color: var(--corp-muted);
}

.corp-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.corp-rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.corp-rating-stars img {
    width: 20px;
    height: 20px;
}

.corp-rating-num {
    font-size: 14px;
    font-weight: 700;
    line-height: 22.5px;
    color: var(--corp-ink);
}

/* the tablet mock starts the cards 25 under the head where the shared slider
   leaves 45, and closes the panel straight under them */
@media (max-width: 1199px) and (min-width: 768px) {
    .corp-reviews .lp-section-12-wrap-bottom {
        padding-top: 25px;
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    /* the shared slider drops its heading on phones and centres what is left;
       both narrow mocks keep the heading and run the whole head off the left */
    .corp-reviews .lp-section-12-wrap-top {
        text-align: left;
    }

    .corp-reviews .lp-section-12-wrap-top-left-title-1 {
        display: block;
    }

    /* the phone mock drops the panel and moves the arrows under the cards,
       where there is room for them beside a one-line head */
    .corp-reviews .lp-section-12-wrap-bottom {
        position: relative;
        /* the arrows sit 20 under the cards and are 65 tall */
        padding-bottom: 85px;
    }

    .corp-reviews .lp-section-12-wrap-bottom-next,
    .corp-reviews .lp-section-12-wrap-bottom-prev {
        top: auto;
        bottom: 0;
        right: auto;
        left: 50%;
    }

    .corp-reviews .lp-section-12-wrap-bottom-next {
        transform: translateX(5px);
    }

    .corp-reviews .lp-section-12-wrap-bottom-prev {
        transform: translateX(-70px) rotate(180deg);
    }

    .corp-reviews .corp-panel {
        background: transparent;
        padding: 0;
        border-radius: 0;
    }

    .corp-reviews .lp-section-12-wrap-top-left-title-1 {
        font-size: 18px;
        line-height: 22px;
        padding-bottom: 10px;
    }

    .corp-reviews .lp-section-12-wrap-top-left-title-2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        font-size: 14px;
    }

    /* the shared sheet leaves 62 above the cards for arrows the phone mock
       puts underneath instead */
    .corp-reviews .lp-section-12-wrap-bottom {
        padding-top: 20px;
    }

    /* the delivery treatment rounds the card tighter and cuts it short */
    .corp-reviews .lp-section-12-wrap-bottom-item {
        border-radius: 16px;
        min-height: 420px;
    }

    .corp-reviews .lp-section-12-wrap-bottom-item-rating-title {
        font-size: 22px;
        line-height: 27px;
    }

    .corp-reviews .lp-section-12-wrap-bottom-item-rating-social {
        font-size: 15px;
    }

    .corp-reviews .lp-section-12-wrap-bottom-item-rating-social span,
    .corp-reviews .lp-section-12-wrap-bottom-item-rating-social span svg {
        width: 22px;
        height: 22px;
    }
}