/*
 * Google reviews section (views/partials/testimonials.php + js/google-reviews.js).
 * Plain CSS like the other showcase pieces, so no Tailwind rebuild, and no
 * dependency on the wow layer (which never loads on phones).
 *
 * Card heights are worked out from the card width (--gr-w), never from the
 * text, so every card in the row is the same height whatever the review says:
 * a site card is its screenshot + a fixed quote box, and a quote card (a
 * review with no website) gives the screenshot's height to its quote instead.
 */
.gr {
    --gr-gold: #fbbc04;
    --gr-navy: #224685;
    --gr-w: min(84vw, 380px);
    --gr-gap: 16px;
    --gr-bar: 28px;
    --gr-shot-h: calc(var(--gr-w) * .625 + var(--gr-bar));
    --gr-lines: 9.6rem;               /* six lines at 1.6rem */
}
@media (min-width: 1024px) {
    .gr { --gr-w: clamp(280px, calc((100vw - 64px - 40px) / 3), 392px); --gr-gap: 20px; }
}

/* ---- heading ---- */
.gr-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 40px; margin-bottom: 36px; }
.gr-head__text { flex: 1 1 520px; min-width: 0; }
.gr-title {
    font-size: clamp(2.55rem, 5.2vw, 3.9rem); line-height: 1.05; font-weight: 800;
    letter-spacing: -.03em; color: #0f172a; margin: 14px 0 0; text-wrap: balance;
}
.gr-score {
    display: inline-block; font-variant-numeric: tabular-nums; min-width: 2.05ch;
    background: linear-gradient(95deg, #d6157d 0%, #5b2bd6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding: 0 .04em .06em; margin: 0 -.04em -.06em;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .gr-score { color: var(--gr-navy); background: none; }
}

/* The five stars: each gold layer is clipped to its share of the rating, so
   4.9 leaves the last star 90% full. They fill left to right on arrival. */
.gr-stars { display: inline-flex; gap: 6px; }
.gr-star { position: relative; display: block; width: 34px; height: 34px; }
.gr-star svg { display: block; width: 34px; height: 34px; }
.gr-star__base { color: #e2e8f0; }
.gr-star__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--f, 1) * 100%); overflow: hidden; color: var(--gr-gold); }
.gr-anim .gr-star__fill { width: 0; transition: width .45s cubic-bezier(.3, .7, .3, 1); transition-delay: calc(var(--i) * .14s + .1s); }
.gr-anim .gr-head.is-in .gr-star__fill { width: calc(var(--f, 1) * 100%); }
.gr-anim .gr-head.is-in .gr-star { animation: gr-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * .14s + .1s); }
@keyframes gr-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* The "read them on Google" link, styled as a Google badge. */
.gr-google {
    display: inline-flex; align-items: center; gap: 14px; flex: 0 0 auto;
    padding: 14px 20px 14px 16px; border-radius: 18px; background: #fff;
    border: 1px solid #e2e8f0; box-shadow: 0 10px 30px -14px rgba(15, 23, 42, .28);
    color: #0f172a; text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.gr-google:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(15, 23, 42, .35); }
.gr-google:focus-visible { outline: 3px solid #4a6eaa; outline-offset: 3px; }
.gr-google__g { width: 38px; height: 38px; flex: 0 0 auto; }
.gr-google__txt { display: flex; flex-direction: column; line-height: 1.2; }
.gr-google__txt strong { font-size: 1rem; font-weight: 700; }
.gr-google__txt span { font-size: .875rem; color: #64748b; display: inline-flex; align-items: center; gap: 4px; }
.gr-google__txt svg { width: 14px; height: 14px; }

/* ---- the track: runs off the right edge of the page so the next card peeks ---- */
.gr-track {
    display: flex; gap: var(--gr-gap); align-items: stretch;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-right: calc(50% - 50vw); padding: 10px 24px 34px 2px; margin-top: -10px; margin-left: -2px;
    scroll-padding-left: 2px;
}
.gr-track::-webkit-scrollbar { display: none; }
.gr-track:focus-visible { outline: 3px solid #4a6eaa; outline-offset: 2px; border-radius: 22px; }

.gr-card {
    flex: 0 0 var(--gr-w); width: var(--gr-w); scroll-snap-align: start;
    display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
    background: #fff; border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px -26px rgba(15, 23, 42, .35);
}
.gr-anim .gr-card { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * .09s); }
.gr-anim .gr-track.is-in .gr-card { opacity: 1; transform: none; }

/* The reviewer's website, in a browser frame. The whole frame is the link. */
.gr-shot { display: block; position: relative; text-decoration: none; color: inherit; background: #f1f5f9; flex: 0 0 auto; }
.gr-shot:focus-visible { outline: 3px solid #4a6eaa; outline-offset: -3px; }
.gr-shot__bar { display: flex; align-items: center; gap: 6px; height: var(--gr-bar); padding: 0 12px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.gr-shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; flex: 0 0 auto; }
.gr-shot__url {
    margin-left: 8px; flex: 1 1 auto; min-width: 0; height: 18px; border-radius: 9px; background: #fff;
    font-size: 11px; line-height: 18px; color: #475569; padding: 0 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gr-shot__frame { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; background: #e2e8f0; }
.gr-shot__img, .gr-shot__tall { display: block; width: 100%; }
.gr-shot__img { height: 100%; object-fit: cover; object-position: top; }
/* The top two screens of their site, fetched on first hover, pan down slowly. */
.gr-shot__tall { position: absolute; inset: 0 0 auto 0; height: auto; opacity: 0; transition: transform 7s cubic-bezier(.45, 0, .4, 1), opacity .3s; }
.gr-shot__visit {
    position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 10px); opacity: 0;
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px;
    background: rgba(15, 23, 42, .88); color: #fff; font-size: .875rem; font-weight: 700; white-space: nowrap;
    transition: opacity .25s, transform .25s; pointer-events: none;
}
.gr-shot__visit svg { width: 14px; height: 14px; }
.gr-shot:focus-visible .gr-shot__visit { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine) {
    .gr-shot:hover .gr-shot__visit { opacity: 1; transform: translate(-50%, 0); }
    .gr-shot:hover .gr-shot__tall.is-ready { opacity: 1; transform: translateY(calc(-100% + 62.5cqw)); }
}
/* Touch screens never hover, so the visit label sits there from the start. */
@media (hover: none) {
    .gr-shot__visit { opacity: 1; transform: translate(-50%, 0); padding: 7px 13px; font-size: .8125rem; }
}

.gr-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 22px 20px; }
.gr-meta { display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: #64748b; }
.gr-meta__stars { display: inline-flex; gap: 2px; color: var(--gr-gold); }
.gr-meta__stars svg { width: 17px; height: 17px; }
.gr-meta__g { margin-left: auto; width: 18px; height: 18px; flex: 0 0 auto; }

/* The quote box is a fixed height; the longer reviews fade out at the
   bottom and get a "Read the full review" button. Short ones set bigger. */
.gr-quote { margin: 12px 0 0; height: var(--gr-lines); overflow: hidden; color: #334155; font-size: 1rem; line-height: 1.6rem; }
.gr-quote p { margin: 0 0 .7em; }
.gr-quote p:last-child { margin-bottom: 0; }
.gr-quote--lg { font-size: 1.125rem; line-height: 1.6rem; }
.gr-quote--xl { font-size: 1.4rem; line-height: 1.95rem; font-weight: 600; color: #0f172a; letter-spacing: -.01em; }
.gr-quote.is-clamped { -webkit-mask-image: linear-gradient(#000 68%, transparent); mask-image: linear-gradient(#000 68%, transparent); }
.gr-more {
    align-self: flex-start; margin-top: 6px; padding: 4px 0; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: .875rem; font-weight: 700; color: var(--gr-navy);
    text-decoration: underline; text-underline-offset: 3px; visibility: hidden;
}
.gr-more.is-shown { visibility: visible; }
.gr-more:focus-visible { outline: 3px solid #4a6eaa; outline-offset: 2px; border-radius: 4px; }

.gr-who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid #f1f5f9; }
.gr-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: 1rem; background: var(--gr-av, var(--gr-navy));
}
.gr-who__name { font-weight: 700; color: #0f172a; line-height: 1.25; }
.gr-who__biz { font-size: .8125rem; color: #64748b; line-height: 1.3; display: block; }
.gr-who__biz a { color: inherit; text-decoration: underline; text-decoration-color: #cbd5e1; text-underline-offset: 2px; }
.gr-who__biz a:hover { color: var(--gr-navy); }

/* A review with no website to show: the quote takes the screenshot's room. */
.gr-card--quote { background: linear-gradient(160deg, #eef1f8 0%, #f5f0fd 100%); border-color: #dbe2ee; }
.gr-card--quote .gr-body { padding-top: 24px; }
.gr-card--quote .gr-who { border-top-color: rgba(34, 70, 133, .1); }
.gr-mark {
    display: block; height: 52px; margin: 6px 0 -6px; font-size: 5.5rem; line-height: 1; font-weight: 800; font-family: Georgia, serif;
    background: linear-gradient(95deg, #d6157d, #5b2bd6); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gr-card--quote .gr-quote { height: calc(var(--gr-lines) + var(--gr-shot-h) - 52px); font-size: 1.125rem; line-height: 1.75rem; color: #1e293b; }
.gr-card--quote .gr-quote--xl { font-size: 1.6rem; line-height: 2.15rem; }

/* ---- controls: arrows + where you are ---- */
.gr-controls { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.gr-rail { flex: 1 1 auto; height: 4px; border-radius: 4px; background: #e2e8f0; position: relative; overflow: hidden; }
.gr-rail__thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 4px; background: linear-gradient(90deg, #d6157d, #5b2bd6); will-change: transform; }
.gr-arrow {
    width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
    background: #fff; border: 1px solid #e2e8f0; color: #334155; cursor: pointer;
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .3); transition: color .2s, box-shadow .2s, transform .2s;
}
.gr-arrow:hover { color: #0f172a; box-shadow: 0 10px 22px -8px rgba(15, 23, 42, .4); transform: translateY(-1px); }
.gr-arrow:focus-visible { outline: 3px solid #4a6eaa; outline-offset: 2px; }
.gr-arrow svg { width: 20px; height: 20px; }

/* ---- the full review, in a dialog ---- */
.gr-dialog {
    width: min(720px, calc(100vw - 32px)); max-height: calc(100svh - 48px); padding: 0; border: 0; border-radius: 22px;
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .5); overflow: hidden; color: #0f172a;
}
.gr-dialog::backdrop { background: rgba(15, 23, 42, .62); backdrop-filter: blur(3px); }
.gr-dialog[open] { display: flex; flex-direction: column; animation: gr-dlg .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes gr-dlg { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.gr-dialog__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 28px 30px 30px; }
.gr-dialog__close {
    position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; border: 0; background: rgba(255, 255, 255, .92); color: #0f172a; cursor: pointer;
    box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .4);
}
.gr-dialog__close:focus-visible { outline: 3px solid #4a6eaa; outline-offset: 2px; }
.gr-dialog__close svg { width: 20px; height: 20px; }
.gr-dialog .gr-shot { border-radius: 14px; overflow: hidden; border: 1px solid #e2e8f0; margin-bottom: 20px; max-width: 520px; }
.gr-dialog .gr-shot__visit { opacity: 1; transform: translate(-50%, 0); }
.gr-dialog .gr-quote { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; font-size: 1.125rem; line-height: 1.75rem; font-weight: 400; color: #1e293b; }
.gr-dialog .gr-who { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
    .gr-anim .gr-card, .gr-anim .gr-star__fill { transition: none; }
    .gr-anim .gr-card { opacity: 1; transform: none; }
    .gr-anim .gr-star__fill { width: calc(var(--f, 1) * 100%); }
    .gr-anim .gr-head.is-in .gr-star { animation: none; }
    .gr-shot__tall { display: none; }
    .gr-dialog[open] { animation: none; }
}

@media (hover: hover) and (pointer: fine) {
    .gr-track { cursor: grab; }
    .gr-track.is-dragging { cursor: grabbing; user-select: none; }
    .gr-track.is-dragging .gr-shot { pointer-events: none; }
}

/* The brand-tint band, for where white would touch a white neighbour. */
.gr--tint { background: linear-gradient(180deg, #eef1f8 0%, #f3f0fb 100%); }