/* ==========================================================
   Kasi Mattress
   Product Reviews
   File: assets/css/components/product-reviews.css
   Version: 2.0.0
   ========================================================== */


/* ==========================================================
   SECTION
========================================================== */

.km-product-reviews{

    padding:5rem 0;

    background:var(--white);

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

}


/* ==========================================================
   HEADER
========================================================== */

.km-product-reviews .km-section-heading{

    text-align:center;

    margin-bottom:3rem;

}

.km-product-reviews .km-section-heading h2{

    color:var(--primary);

    margin-bottom:.75rem;

}

.km-product-reviews .km-section-heading p{

    max-width:680px;

    margin:0 auto;

    color:var(--text-light);

    line-height:1.8;

}


/* ==========================================================
   SUMMARY
========================================================== */

.km-review-summary{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:3rem;

    margin-bottom:3rem;

    padding:2rem;

    background:var(--background);

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

    border-radius:20px;

}

.km-review-score{

    text-align:center;

    min-width:180px;

}

.km-review-score h3{

    font-size:3.5rem;

    color:var(--primary);

    line-height:1;

    margin-bottom:.5rem;

}

.km-review-stars{

    color:var(--accent);

    font-size:1.1rem;

    letter-spacing:2px;

    margin-bottom:.5rem;

}

.km-review-score span{

    color:var(--text-light);

}


/* ==========================================================
   REVIEW GRID
========================================================== */

.km-review-list{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

}


/* ==========================================================
   CARD
========================================================== */

.km-review-card{

    display:flex;

    flex-direction:column;

    height:100%;

    padding:1.75rem;

    background:var(--background);

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

    border-radius:20px;

    transition:.3s ease;

}

.km-review-card:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.km-review-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:1rem;

}

.km-review-author{

    display:flex;

    align-items:center;

    gap:1rem;

}

.km-review-avatar{

    width:52px;

    height:52px;

    border-radius:50%;

    background:var(--primary);

    color:var(--white);

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:1rem;

    flex-shrink:0;

}

.km-review-author h4{

    margin:0 0 .25rem;

    font-size:1rem;

    color:var(--text);

}

.km-review-author small{

    color:var(--text-muted);

}

.km-review-rating{

    color:var(--accent);

    white-space:nowrap;

}

.km-review-card h5{

    margin:0 0 .75rem;

    color:var(--primary);

    font-size:1rem;

}

.km-review-card p{

    flex:1;

    color:var(--text-light);

    line-height:1.8;

    margin-bottom:1.5rem;

}

.km-review-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:1rem;

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

    font-size:.9rem;

    color:var(--text-muted);

}

.km-review-verified{

    display:flex;

    align-items:center;

    gap:.5rem;

    color:var(--success);

    font-weight:600;

}

.km-review-verified i{

    color:var(--success);

}


/* ==========================================================
   CTA
========================================================== */

.km-review-actions{

    margin-top:3rem;

    text-align:center;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .km-review-summary{

        flex-direction:column;

        text-align:center;

    }

    .km-review-list{

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

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .km-product-reviews{

        padding:4rem 0;

    }

    .km-review-list{

        grid-template-columns:1fr;

    }

    .km-review-card{

        padding:1.5rem;

    }

    .km-review-header{

        flex-direction:column;

        gap:1rem;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:576px){

    .km-product-reviews{

        padding:3rem 0;

    }

    .km-review-summary{

        padding:1.5rem;

    }

    .km-review-score h3{

        font-size:3rem;

    }

}