/* =========================================================
   AG BODY SHOP — CUSTOMER REVIEWS PAGE
========================================================= */


/* =========================================================
   01 — FOUNDATION
========================================================= */

.reviews-page {
    --reviews-yellow:
        var(--color-yellow, #e7b900);

    --reviews-yellow-dark:
        #9b7a00;

    --reviews-ink:
        #17191c;

    --reviews-text:
        #555b5f;

    --reviews-muted:
        #777d81;

    --reviews-line:
        rgba(20, 23, 25, .13);

    --reviews-line-soft:
        rgba(20, 23, 25, .08);

    --reviews-warm:
        #f4f2ed;

    --reviews-page-padding:
        clamp(28px, 5vw, 92px);

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    color:
        var(--reviews-ink);

    background:
        #ffffff;

    font-family:
        var(
            --font-body,
            "AvenirWeb",
            "Avenir",
            Arial,
            sans-serif
        );
}


.reviews-page,
.reviews-page *,
.reviews-page *::before,
.reviews-page *::after {
    box-sizing:
        border-box;
}


.reviews-page h1,
.reviews-page h2,
.reviews-page h3,
.reviews-page p,
.reviews-page blockquote {
    margin:
        0;

    padding:
        0;
}


.reviews-page a {
    color:
        inherit;

    text-decoration:
        none;
}


.reviews-page__richtext > *:first-child {
    margin-top:
        0;
}


.reviews-page__richtext > *:last-child {
    margin-bottom:
        0;
}


.reviews-page__richtext p + p {
    margin-top:
        15px;
}


/* =========================================================
   02 — HERO
========================================================= */

.reviews-page__hero {
    position:
        relative;

    min-height:
        clamp(300px, 27vw, 370px);

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        radial-gradient(
            circle at 82% 65%,
            rgba(231, 185, 0, .11),
            transparent 31%
        ),
        radial-gradient(
            circle at 13% 6%,
            rgba(255, 255, 255, .045),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #15191d 0%,
            #090c0f 61%,
            #050709 100%
        );

    isolation:
        isolate;
}


.reviews-page__hero::after {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(4, 6, 8, .28),
            transparent 70%
        );

    box-shadow:
        inset 0 -58px 80px
        rgba(0, 0, 0, .18);
}


.reviews-page__hero-shell {
    position:
        relative;

    z-index:
        2;

    width:
        min(1480px, 100%);

    min-height:
        inherit;

    margin:
        0 auto;

    padding:
        30px
        var(--reviews-page-padding)
        46px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, .42fr);

    align-items:
        stretch;

    gap:
        clamp(30px, 5vw, 86px);
}


.reviews-page__hero-copy {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        flex-start;
}


/* =========================================================
   03 — BREADCRUMB
========================================================= */

.reviews-page__breadcrumb {
    margin-bottom:
        18px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    color:
        rgba(255, 255, 255, .50);

    font-size:
        9.5px;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}


.reviews-page__breadcrumb a {
    transition:
        color .2s ease;
}


.reviews-page__breadcrumb a:hover {
    color:
        var(--reviews-yellow);
}


.reviews-page__breadcrumb
[aria-current="page"] {
    color:
        rgba(255, 255, 255, .80);
}


/* =========================================================
   04 — HERO COPY
========================================================= */

.reviews-page__eyebrow {
    display:
        block;

    margin-bottom:
        14px;

    color:
        rgba(255, 255, 255, .55);

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;
}


.reviews-page__title {
    width:
        min(900px, 100%);

    color:
        var(--reviews-yellow);

    font-family:
        var(--font-title);

    font-size:
        var(
            --type-page-title,
            clamp(36px, 2.75vw, 48px)
        );

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.35px;
}


.reviews-page__hero-description {
    width:
        min(720px, 100%);

    margin-top:
        17px;

    color:
        rgba(255, 255, 255, .72);

    font-size:
        clamp(13.5px, .9vw, 15.5px);

    font-weight:
        300;

    line-height:
        1.66;
}


/* =========================================================
   05 — HERO DECORATION
========================================================= */

.reviews-page__hero-decoration {
    position:
        relative;

    min-width:
        0;

    min-height:
        inherit;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    color:
        rgba(255, 255, 255, .045);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(220px, 21vw, 340px);

    font-weight:
        400;

    line-height:
        .8;

    pointer-events:
        none;

    user-select:
        none;

    transform:
        translateY(18px);
}


.reviews-page__hero-decoration::after {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -40%;

    width:
        110%;

    height:
        74%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(231, 185, 0, .12),
            transparent 68%
        );
}


/* =========================================================
   06 — CONTENT
========================================================= */

.reviews-page__content {
    width:
        100%;

    padding:
        clamp(64px, 7vw, 96px)
        var(--reviews-page-padding)
        clamp(76px, 8vw, 110px);

    background:
        #ffffff;
}


.reviews-page__shell {
    width:
        min(1480px, 100%);

    margin:
        0 auto;
}


/* =========================================================
   07 — SECTION HEADER
========================================================= */

.reviews-page__section-header {
    width:
        100%;

    padding-bottom:
        clamp(28px, 3.5vw, 44px);

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .72fr);

    gap:
        clamp(28px, 5vw, 78px);

    align-items:
        end;

    border-bottom:
        1px solid
        var(--reviews-line);
}


.reviews-page__section-heading {
    min-width:
        0;
}


.reviews-page__section-index {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--reviews-yellow-dark);

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        1.4px;
}


.reviews-page__section-title {
    color:
        var(--reviews-ink);

    font-family:
        var(--font-title);

    font-size:
        var(
            --type-section-title,
            clamp(34px, 2.6vw, 46px)
        );

    font-weight:
        400;

    line-height:
        1.05;

    letter-spacing:
        -.3px;
}


.reviews-page__section-description {
    max-width:
        570px;

    justify-self:
        end;

    color:
        var(--reviews-muted);

    font-size:
        clamp(13px, .84vw, 14.5px);

    font-weight:
        300;

    line-height:
        1.68;
}


/* =========================================================
   08 — REVIEWS GRID
========================================================= */

.reviews-page__grid {
    width:
        100%;

    margin-top:
        clamp(34px, 4vw, 54px);

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid
        var(--reviews-line);

    border-left:
        1px solid
        var(--reviews-line);
}


/* =========================================================
   09 — REVIEW CARD
========================================================= */

.reviews-page__card {
    position:
        relative;

    min-width:
        0;

    min-height:
        clamp(330px, 28vw, 410px);

    overflow:
        hidden;

    padding:
        clamp(30px, 3vw, 44px);

    display:
        flex;

    flex-direction:
        column;

    background:
        #ffffff;

    border-right:
        1px solid
        var(--reviews-line);

    border-bottom:
        1px solid
        var(--reviews-line);

    transition:
        background-color .25s ease,
        transform .25s ease;
}


.reviews-page__card:nth-child(4n + 2),
.reviews-page__card:nth-child(4n + 3) {
    background:
        #f7f5f1;
}


.reviews-page__card:hover {
    z-index:
        2;

    background:
        #f2f0ea;

    transform:
        translateY(-3px);
}


.reviews-page__card::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        0;

    height:
        2px;

    background:
        var(--reviews-yellow);

    transition:
        width .35s ease;
}


.reviews-page__card:hover::before {
    width:
        100%;
}


/* =========================================================
   10 — CARD DECORATION
========================================================= */

.reviews-page__card-decoration {
    position:
        absolute;

    z-index:
        0;

    top:
        -46px;

    right:
        15px;

    color:
        rgba(20, 23, 25, .035);

    font-family:
        Georgia,
        serif;

    font-size:
        190px;

    line-height:
        1;

    pointer-events:
        none;
}


/* =========================================================
   11 — CARD HEADER
========================================================= */

.reviews-page__card-header {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.reviews-page__card-number {
    color:
        rgba(23, 25, 28, .36);

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        1.5px;
}


.reviews-page__stars {
    color:
        var(--reviews-yellow-dark);

    font-size:
        13px;

    line-height:
        1;

    letter-spacing:
        4px;
}


/* =========================================================
   12 — REVIEW QUOTE
========================================================= */

.reviews-page__quote {
    position:
        relative;

    z-index:
        2;

    width:
        min(610px, 100%);

    margin-top:
        clamp(32px, 4vw, 50px);

    color:
        #303438;

    font-family:
        var(--font-title);

    font-size:
        clamp(20px, 1.45vw, 26px);

    font-weight:
        400;

    line-height:
        1.48;
}


/* =========================================================
   13 — CUSTOMER
========================================================= */

.reviews-page__customer {
    position:
        relative;

    z-index:
        2;

    margin-top:
        auto;

    padding-top:
        clamp(28px, 3vw, 40px);

    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


.reviews-page__customer-mark {
    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #111416;

    background:
        var(--reviews-yellow);

    border-radius:
        50%;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;
}


.reviews-page__customer-meta {
    min-width:
        0;

    display:
        grid;

    gap:
        5px;
}


.reviews-page__customer-meta strong {
    color:
        var(--reviews-ink);

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.35;
}


.reviews-page__customer-meta span {
    color:
        var(--reviews-muted);

    font-size:
        11.5px;

    line-height:
        1.4;
}


/* =========================================================
   14 — EMPTY STATE
========================================================= */

.reviews-page__empty {
    margin-top:
        40px;

    padding:
        50px 24px;

    color:
        var(--reviews-text);

    background:
        var(--reviews-warm);

    border:
        1px solid
        var(--reviews-line);

    text-align:
        center;
}


.reviews-page__empty h2 {
    color:
        var(--reviews-ink);

    font-family:
        var(--font-title);

    font-size:
        28px;

    font-weight:
        400;
}


.reviews-page__empty p {
    margin-top:
        12px;

    font-size:
        14px;
}



/* =========================================================
   16 — TABLET
========================================================= */

@media(max-width:980px) {

    .reviews-page__hero-shell {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(180px, .32fr);

        gap:
            22px;
    }


    .reviews-page__section-header {
        grid-template-columns:
            1fr;

        gap:
            17px;
    }


    .reviews-page__section-description {
        justify-self:
            start;
    }


    .reviews-page__card {
        min-height:
            370px;
    }

}


/* =========================================================
   17 — MOBILE
========================================================= */

@media(max-width:720px) {

    .reviews-page {
        --reviews-page-padding:
            18px;
    }


    .reviews-page__hero {
        min-height:
            auto;
    }


    .reviews-page__hero-shell {
        min-height:
            350px;

        padding:
            30px
            18px
            42px;

        grid-template-columns:
            1fr;
    }


    .reviews-page__hero-decoration {
        position:
            absolute;

        right:
            -10px;

        bottom:
            -26px;

        min-height:
            0;

        font-size:
            215px;

        opacity:
            .75;
    }


    .reviews-page__hero-copy {
        position:
            relative;

        z-index:
            3;
    }


    .reviews-page__title {
        font-size:
            var(
                --type-page-title,
                clamp(33px, 10vw, 43px)
            );
    }


    .reviews-page__hero-description {
        width:
            min(560px, 88%);

        font-size:
            14px;
    }


    .reviews-page__content {
        padding:
            54px
            18px
            72px;
    }


    .reviews-page__section-title {
        font-size:
            var(
                --type-section-title,
                clamp(31px, 9vw, 40px)
            );
    }


    .reviews-page__section-description {
        font-size:
            14px;
    }


    .reviews-page__grid {
        grid-template-columns:
            1fr;

        border-left:
            0;
    }


    .reviews-page__card {
        min-height:
            350px;

        padding:
            29px 22px;

        border-left:
            1px solid
            var(--reviews-line);
    }


    .reviews-page__card:nth-child(4n + 2),
    .reviews-page__card:nth-child(4n + 3) {
        background:
            #ffffff;
    }


    .reviews-page__card:nth-child(even) {
        background:
            #f7f5f1;
    }


    .reviews-page__quote {
        margin-top:
            34px;

        font-size:
            clamp(20px, 6vw, 25px);
    }


    .reviews-page__cta-shell {
        min-height:
            0;

        padding:
            52px
            18px
            58px;

        grid-template-columns:
            1fr;

        gap:
            30px;
    }


    .reviews-page__cta-title {
        font-size:
            clamp(30px, 9vw, 39px);
    }


    .reviews-page__cta-description {
        font-size:
            14px;
    }


    .reviews-page__cta-button {
        width:
            100%;

        min-height:
            54px;
    }

}


/* =========================================================
   18 — FOCUS
========================================================= */

.reviews-page a:focus-visible {
    outline:
        2px solid
        var(--reviews-yellow);

    outline-offset:
        4px;
}


/* =========================================================
   19 — REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {

    .reviews-page__card,
    .reviews-page__card::before,
    .reviews-page__cta-button,
    .reviews-page__cta-button svg {
        transition:
            none !important;
    }

}


/* =========================================================
   20 — PRINT
========================================================= */

@media print {

    .site-header,
    .reviews-page__cta,
    #vehicle-assessment,
    .s6-contact,
    .mobile-bottom-nav {
        display:
            none !important;
    }


    .reviews-page__hero {
        min-height:
            auto;

        color:
            #000000;

        background:
            #ffffff;
    }


    .reviews-page__hero::after,
    .reviews-page__hero-decoration {
        display:
            none;
    }


    .reviews-page__hero-shell {
        min-height:
            auto;

        padding:
            0 0 32px;

        display:
            block;
    }


    .reviews-page__title {
        color:
            #000000;
    }


    .reviews-page__hero-description,
    .reviews-page__breadcrumb,
    .reviews-page__eyebrow {
        color:
            #444444;
    }


    .reviews-page__content {
        padding:
            0;
    }


    .reviews-page__card {
        break-inside:
            avoid;

        min-height:
            auto;
    }

}
/* =========================================================
   FINAL — COMPACT CUSTOMER REVIEWS HERO
========================================================= */

@media (min-width: 721px) {

    .reviews-page__hero {
        min-height:
            190px;
    }


    .reviews-page__hero-shell {
        min-height:
            190px;

        padding-top:
            22px;

        padding-bottom:
            22px;
    }


    .reviews-page__breadcrumb {
        margin-bottom:
            11px;
    }


    .reviews-page__eyebrow {
        margin-bottom:
            9px;
    }


    .reviews-page__hero-description {
        margin-top:
            11px;
    }


    .reviews-page__hero-decoration {
        min-height:
            210px;

        font-size:
            clamp(150px, 14vw, 215px);

        transform:
            translateY(7px);
    }

}