// ─────────────────────────────────────────────────────────────────────────────
// PAGE STYLES
// Interior pages have their own stylesheet for styles that only exist on
// that page. Any styles shared between pages, including repeated sections,
// should go into root.scss
// ─────────────────────────────────────────────────────────────────────────────

/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #reviews-67 {
        padding: var(--sectionPadding);

        .cs-container {
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: center;
            width: 100%;
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: center;
        }

        .cs-card-group {
            padding: 0;
            margin: 0;
            display: grid;
            column-gap: calc(20 / 16 * 1rem);
            row-gap: calc(64 / 16 * 1rem);
            width: 100%;
            grid-template-columns: repeat(12, 1fr);
        }

        .cs-item {
            grid-column: span 12;
            text-align: left;
            list-style: none;
            width: 100%;
            /* pushes up the same amount the cs-item-img overlaps the card */
            margin: calc(40 / 16 * 1rem) 0 0 0;
            /* Padding L & R - 16px - 32px */
            padding: calc(60 / 16 * 1rem) clamp(1rem, 3.2vw, 2rem) 0;
            /* 32px - 40px */
            padding-bottom: clamp(2rem, 5.4vw, 2.5rem);
            box-shadow: 0px 20px 39px 0px rgba(0, 0, 0, 0.05);
            border-radius: calc(4 / 16 * 1rem);
            background: #fff;
            position: relative;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            /* Prevents padding from affecting height & width */
            box-sizing: border-box;

            &:last-of-type {
                margin-bottom: 0;
            }
        }

        .cs-item-img {
            width: calc(80 / 16 * 1rem);
            height: calc(80 / 16 * 1rem);
            position: absolute;
            top: calc(-40 / 16 * 1rem);
        }

        .cs-item-text {
            font-size: calc(16 / 16 * 1rem);
            line-height: 1.5em;
            margin: 0 0 calc(20 / 16 * 1rem);
            padding-bottom: calc(20 / 16 * 1rem);
            color: var(--bodyTextColor);
            border-bottom: 1px solid #e8e9ec;
        }

        .cs-info {
            width: 100%;
            /* margin-top auto pushes up against the rest of the card, that way when one card has more text than the other, the reviewer info is always pushed to the bottom and lined up with the rest of them.  This ensures better responsiveness for changing content */
            margin: auto 0 0 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .cs-flex-group {
            width: 100%;
            margin: 0;
        }

        .cs-name {
            font-size: calc(16 / 16 * 1rem);
            line-height: 1.5em;
            font-weight: 700;
            width: 40%;
            margin: 0;
            display: block;
            color: var(--headerColor);
        }

        .cs-desc {
            font-size: calc(14 / 16 * 1rem);
            font-weight: 400;
            color: #7d799c;
            display: block;
        }

        .cs-item-stars {
            width: calc(96 / 16 * 1rem);
            height: calc(16 / 16 * 1rem);
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #reviews-67 {
        .cs-item {
            grid-column: span 6;
        }
    }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #reviews-67 {
        .cs-item {
            grid-column: span 4;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #reviews-67 {
            .cs-title,
            .cs-text,
            .cs-item-text,
            .cs-name {
                color: var(--bodyTextColorWhite);
            }

            .cs-item {
                background: rgba(0, 0, 0, 0.2);
            }

            .cs-desc {
                color: var(--primaryLight);
            }
        }
    }
}
