/*
 * Shop reviews (Tts\Ui\ShopReviews\ShopReviewsComponent): what customers say
 * about the shop, from Trusted Shops. A compact score line (beside a purchase)
 * and a section - its heading names the shop, a line says whose reviews these
 * are, the rating, and a few recent reviews as cards (a scroller on a phone,
 * a row from 640px). Never presented as a product's reviews. Decision 23.
 */

.shop-reviews-stars {
    display: inline-flex;
    flex: none;
    gap: 1px;
}

/* Each star filled to its share of the rating: a grey star with the gold one
   clipped over it. */
.shop-reviews-stars {
    vertical-align: -3px;
}

.shop-reviews-stars__star {
    position: relative;
    display: inline-grid;
    width: 16px;
    height: 16px;
    color: var(--shop-border);
}

.shop-reviews-stars__star svg {
    width: 16px;
    height: 16px;
}

.shop-reviews-stars__star::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--shop-brand-orange);
    clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0);
    mask: url("/layouts/tts/images/icons/star-fill.svg") center / contain no-repeat;
}

/* The stars read with the words, not as a row of their own above them: a
   star row alone inside the buying area could be taken for the product's. */
.shop-reviews-score {
    display: flex;
    align-items: center;
    min-height: var(--shop-tap);
    color: var(--shop-text);
    font-size: var(--shop-text-md);
    line-height: var(--shop-leading-snug);
    text-decoration: none;
}

.shop-reviews-score:hover span {
    color: var(--shop-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.shop-reviews {
    display: grid;
    gap: var(--shop-space-5);
    min-width: 0;
}

.shop-reviews__header {
    display: grid;
    gap: var(--shop-space-2);
}

.shop-reviews__header p {
    margin: 0;
}

.shop-reviews__heading {
    margin: 0;
    color: var(--shop-ink);
    font-size: var(--shop-text-xl);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-tight);
}

.shop-reviews__intro {
    color: var(--shop-text-soft);
    font-size: var(--shop-text-md);
    line-height: var(--shop-leading-snug);
}

.shop-reviews__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--shop-space-2);
    color: var(--shop-text);
    font-size: var(--shop-text-md);
}

.shop-reviews__summary strong {
    color: var(--shop-ink);
    font-size: var(--shop-text-lg);
}

.shop-reviews__list {
    /* The containing block of the cards' visually hidden text, which would
       otherwise escape the scroller and widen the page. */
    position: relative;
    display: grid;
    grid-auto-columns: minmax(15rem, 80%);
    grid-auto-flow: column;
    gap: var(--shop-space-3);
    margin: 0;
    padding: 0 0 var(--shop-space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* proximity, as the product rail: a mandatory snap can refuse the small
       scroll a focused card needs to come into view. */
    scroll-snap-type: x proximity;
    list-style: none;
}

.shop-reviews__list:focus-visible {
    outline: 2px solid var(--shop-accent);
    outline-offset: 2px;
}

.shop-reviews__review {
    display: grid;
    scroll-snap-align: start;
}

.shop-reviews__review article {
    display: grid;
    align-content: start;
    gap: var(--shop-space-2);
    padding: var(--shop-space-4);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-lg);
    background: var(--shop-surface);
}

.shop-reviews__review p {
    margin: 0;
}

.shop-reviews__title {
    margin: 0;
    color: var(--shop-ink);
    font-size: var(--shop-text-base);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-snug);
}

.shop-reviews__comment {
    color: var(--shop-text);
    font-size: var(--shop-text-md);
    line-height: var(--shop-leading-normal);
    overflow-wrap: anywhere;
}

.shop-reviews__meta {
    margin-block-start: auto;
    color: var(--shop-text-soft);
    font-size: var(--shop-text-sm);
}

.shop-reviews__more {
    margin: 0;
    font-size: var(--shop-text-md);
}

@media (min-width: 640px) {
    /* auto-fit, not auto-fill: three reviews share the section's whole width
       rather than sitting in the first three of five tracks. */
    .shop-reviews__list {
        grid-auto-columns: auto;
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        overflow: visible;
    }
}

@media (forced-colors: active) {
    .shop-reviews-stars__star::after {
        background: CanvasText;
    }
}