/* =====================================================================
   Salinero — Google Reviews component
   Modern, premium look. Vanilla CSS, no framework dependency beyond the
   Bootstrap grid the page already ships (we don't rely on it here).
   Theme via the custom properties on .sal-reviews.
   ===================================================================== */

.sal-reviews {
    /* Brand */
    --sal-accent: #afc164;          /* Salinero green */
    --sal-accent-dark: #545747;     /* Salinero brown */
    --sal-on-accent: #2f3128;       /* text on the green — 6.69:1; the brown is only 3.76:1 */
    --sal-star: #fbbc04;            /* Google gold (recognisable as Google) */
    --sal-star-empty: #dcdfd0;

    /* Surfaces */
    --sal-card-bg: #ffffff;
    --sal-page-fg: #2b2c25;
    --sal-muted: #6c7063;
    --sal-radius: 16px;
    --sal-shadow: 0 6px 24px rgba(84, 87, 71, 0.10);
    --sal-shadow-hover: 0 14px 36px rgba(84, 87, 71, 0.18);

    color: var(--sal-page-fg);
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    padding: 2.5rem 0;
}

.sal-reviews__inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ---- Reveal-on-scroll (only active once JS opts in, so no-JS shows all) ---- */
.sal-reviews.sal-reviews--js {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    will-change: opacity, transform;
}
.sal-reviews.sal-reviews--js.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .sal-reviews.sal-reviews--js {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------------------------- Header ---------------------------- */
.sal-reviews__header {
    text-align: center;
    margin-bottom: 2rem;
}
.sal-reviews__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.sal-reviews__glogo {
    width: 26px;
    height: 26px;
}
.sal-reviews__title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--sal-accent-dark);
}
.sal-reviews__aggregate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.sal-reviews__score {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sal-accent-dark);
}
.sal-reviews__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--sal-star);            /* drives the half-star gradient too */
}
.sal-reviews__stars .sal-star {
    width: 26px;
    height: 26px;
}
.sal-reviews__count {
    font-size: 0.9rem;
    color: var(--sal-muted);
}

/* ---- Star primitives ---- */
.sal-star { display: inline-block; }
.sal-star--full { fill: var(--sal-star); }
.sal-star--empty { fill: var(--sal-star-empty); }
.sal-star--half { color: var(--sal-star); }         /* currentColor feeds #sal-half */
.sal-star--half path { stroke: none; }

/* ---------------------------- Track / grid ---------------------------- */
.sal-reviews__track {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0.5rem;                    /* room for hover lift + focus ring */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    outline: none;
}
.sal-reviews__track:focus-visible {
    box-shadow: 0 0 0 3px rgba(175, 193, 100, 0.5);
    border-radius: var(--sal-radius);
}
.sal-reviews__item {
    display: flex;                      /* stretch card to equal height */
}

/* ---------------------------- Card ---------------------------- */
.sal-review {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--sal-card-bg);
    border: 1px solid rgba(84, 87, 71, 0.08);
    border-radius: var(--sal-radius);
    box-shadow: var(--sal-shadow);
    padding: 1.4rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sal-review:hover,
.sal-review:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--sal-shadow-hover);
}

.sal-review__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.sal-review__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.sal-review__avatar--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sal-accent);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}
.sal-review__id {
    display: flex;
    flex-direction: column;
    min-width: 0;                       /* allow ellipsis */
    margin-right: auto;
}
.sal-review__author {
    font-weight: 600;
    color: var(--sal-page-fg);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.sal-review__author:hover { color: var(--sal-accent-dark); text-decoration: underline; }
.sal-review__date {
    font-size: 0.8rem;
    color: var(--sal-muted);
}
.sal-review__source {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    align-self: flex-start;
}

.sal-review__stars {
    display: inline-flex;
    gap: 1px;
    color: var(--sal-star);
    margin-bottom: 0.6rem;
}
.sal-review__stars .sal-star { width: 18px; height: 18px; }

.sal-review__body { flex: 1 1 auto; }
.sal-review__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #43453b;
    white-space: pre-line; /* preserve paragraph breaks in longer reviews */
}
.sal-review__readmore {
    margin-top: 0.5rem;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sal-accent-dark);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sal-review__readmore:hover { color: var(--sal-accent); }
.sal-review__readmore:focus-visible {
    outline: 2px solid var(--sal-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---- Owner reply (visually distinct) ---- */
.sal-review__reply {
    margin-top: 1rem;
    padding: 0.8rem 0.9rem;
    background: #f4f6ee;
    border-left: 3px solid var(--sal-accent);
    border-radius: 8px;
}
.sal-review__reply-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--sal-accent-dark);
    margin-bottom: 0.25rem;
}
.sal-review__reply-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #55584c;
}

/* ---------------------------- CTA ---------------------------- */
.sal-reviews__cta { text-align: center; }
.sal-reviews__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.6rem;
    /* Same three signals as the .btn-accent buttons in style.css: pill, weight
       600, near-black on the green. The glow and hover lift this button used
       to have were the only thing setting it apart from them, so they are
       gone — one button family, not two. */
    background: var(--sal-accent);
    color: var(--sal-on-accent);
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.sal-reviews__btn:hover {
    background: #9fb352;
    color: var(--sal-on-accent);
}
.sal-reviews__btn:focus-visible {
    outline: 3px solid var(--sal-accent-dark);
    outline-offset: 2px;
}
.sal-reviews__btn-arrow { width: 18px; height: 18px; transition: transform 0.2s ease; }
.sal-reviews__btn:hover .sal-reviews__btn-arrow { transform: translateX(3px); }

/* ---------------------------- Mobile carousel ---------------------------- */
@media (max-width: 767.98px) {
    .sal-reviews__track {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 85%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
        scroll-behavior: smooth;
        scroll-padding: 0.5rem;
        /* hide scrollbar but keep scrollable */
        scrollbar-width: none;
    }
    .sal-reviews__track::-webkit-scrollbar { display: none; }
    .sal-reviews__item { scroll-snap-align: center; }
    .sal-reviews__score { font-size: 2rem; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sal-reviews__track { grid-template-columns: repeat(2, 1fr); }
}