/**
 * Google Reviews – Frontend Styles
 *
 * Built on the Total theme's own CSS custom properties (read from
 * Total/assets/css/wpex-custom-properties.min.css) rather than hardcoded
 * values, so the cards inherit whatever the theme and the Sisyphus-Total
 * child theme define — including the classic-style overrides, which
 * redefine several of these tokens at a second :root.
 *
 * Tokens used:
 *   --wpex-text-1 … --wpex-text-4     text colours
 *   --wpex-surface-1 … --wpex-surface-3  backgrounds
 *   --wpex-border-main                borders
 *   --wpex-star-rating-color          stars (#ffc833)
 *   --wpex-accent                     links/focus
 *   --wpex-rounded, --wpex-rounded-sm radii
 *   --wpex-shadow-sm, --wpex-shadow-md  elevation
 *   --wpex-text-sm / -lg / -2xl       type scale
 *   --wpex-bold, --wpex-leading-relaxed
 *   --wpex-row-gap, --wpex-el-margin-bottom  rhythm
 *
 * Every var() carries a fallback so the plugin still looks right if it is
 * ever used outside Total.
 */

.wcgr-reviews {
    margin-bottom: var(--wpex-el-margin-bottom, 20px);
}

/* ─── Heading & badge ─── */
.wcgr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--wpex-row-gap, 20px);
}

.wcgr-reviews .wcgr-heading {
    font-size: var(--wpex-text-2xl, 1.615em);
    line-height: var(--wpex-heading-line-height, 1.375);
    color: var(--wpex-heading-color, var(--wpex-text-1, #222));
    margin: 0;
}

.wcgr-heading-badge {
    margin: 0;
}

/* Grid and carousel keep the badge on its own line, as before. */
.wcgr-layout-grid .wcgr-head,
.wcgr-layout-carousel .wcgr-head {
    display: block;
}
.wcgr-layout-grid .wcgr-heading,
.wcgr-layout-carousel .wcgr-heading {
    margin-bottom: 12px;
}

/* ─── Sample-data notices ─── */
.wcgr-admin-notice,
.wcgr-sample-notice {
    font-size: var(--wpex-text-sm, .923em);
    color: var(--wpex-text-3, #616161);
    background: var(--wpex-warning-bg, #fff8e5);
    border-left: 3px solid var(--wpex-yellow-warning, #ffb900);
    padding: 8px 12px;
    margin: 0 0 var(--wpex-row-gap, 20px);
    border-radius: var(--wpex-rounded-xs, 3px);
}

/* ─── Grid ─── */
.wcgr-grid {
    display: grid;
    gap: var(--wpex-row-gap, 20px);
    grid-template-columns: repeat(var(--wcgr-cols, 3), minmax(0, 1fr));
}
.wcgr-cols-1 { --wcgr-cols: 1; }
.wcgr-cols-2 { --wcgr-cols: 2; }
.wcgr-cols-3 { --wcgr-cols: 3; }
.wcgr-cols-4 { --wcgr-cols: 4; }

@media (max-width: 1024px) {
    .wcgr-cols-3,
    .wcgr-cols-4 { --wcgr-cols: 2; }
}
@media (max-width: 767px) {
    .wcgr-grid { --wcgr-cols: 1; }
}

/* ─── Card ─── */
.wcgr-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: var(--wpex-surface-1, #fff);
    border: 1px solid var(--wpex-border-main, #eee);
    border-radius: var(--wpex-rounded, 10px);
    box-shadow: var(--wpex-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));
    transition: box-shadow .2s ease, transform .2s ease;
}
.wcgr-card:hover {
    box-shadow: var(--wpex-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1));
}

/* ─── Card header ─── */
.wcgr-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wcgr-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--wpex-rounded-full, 9999px);
    overflow: hidden;
    background: var(--wpex-surface-3, #eee);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wcgr-avatar img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    display: block;
    border-radius: var(--wpex-rounded-full, 9999px);
}
.wcgr-avatar-initial {
    font-size: var(--wpex-text-lg, 1.231em);
    font-weight: var(--wpex-bold, 600);
    color: var(--wpex-text-3, #616161);
    line-height: 1;
}

.wcgr-card-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wcgr-author {
    font-weight: var(--wpex-bold, 600);
    color: var(--wpex-text-1, #222);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wcgr-time {
    font-size: var(--wpex-text-sm, .923em);
    color: var(--wpex-text-4, #757575);
}

.wcgr-google-mark {
    margin-left: auto;
    flex: 0 0 auto;
    line-height: 0;
    opacity: .85;
}

/* ─── Stars ─── */
.wcgr-stars {
    display: inline-flex;
    gap: 2px;
    line-height: 1;
}
.wcgr-star {
    width: 1em;
    height: 1em;
    display: inline-block;
    background-color: var(--wpex-surface-4, #e0e0e0);
    /* A single star path, masked so the colour comes from the theme token. */
    -webkit-mask: var(--wcgr-star-mask) center / contain no-repeat;
    mask: var(--wcgr-star-mask) center / contain no-repeat;
}
.wcgr-stars {
    --wcgr-star-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .6l3.4 7.3 7.6 1-5.6 5.4 1.4 7.7L12 18.3 5.2 22l1.4-7.7L1 8.9l7.6-1z'/%3E%3C/svg%3E");
}
.wcgr-star-full {
    background-color: var(--wpex-star-rating-color, #ffc833);
}
.wcgr-star-half {
    background-image: linear-gradient(
        to right,
        var(--wpex-star-rating-color, #ffc833) 50%,
        var(--wpex-surface-4, #e0e0e0) 50%
    );
    background-color: transparent;
}

/* ─── Body text ─── */
.wcgr-body {
    flex: 1 1 auto;
}
.wcgr-text {
    margin: 0;
    color: var(--wpex-text-2, #424242);
    line-height: var(--wpex-leading-relaxed, 1.625);
}

.wcgr-more {
    display: inline;
    margin-left: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wpex-accent, #1a73e8);
    font: inherit;
    font-size: var(--wpex-text-sm, .923em);
    cursor: pointer;
    text-decoration: underline;
}
.wcgr-more:hover,
.wcgr-more:focus-visible {
    color: var(--wpex-accent-alt, #1464cc);
}

/* ─── Carousel ─── */
.wcgr-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wcgr-track {
    display: flex;
    gap: var(--wpex-row-gap, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Room for the card shadow, which would otherwise be clipped. */
    padding: 4px;
    margin: -4px;
    flex: 1 1 auto;
    scrollbar-width: none;
}
.wcgr-track::-webkit-scrollbar {
    display: none;
}
.wcgr-track:focus-visible {
    outline: 2px solid var(--wpex-accent, #1a73e8);
    outline-offset: 2px;
}

.wcgr-track .wcgr-card {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - (var(--wpex-row-gap, 20px) * 2)) / 3);
    min-width: 260px;
}
@media (max-width: 1024px) {
    .wcgr-track .wcgr-card {
        flex-basis: calc((100% - var(--wpex-row-gap, 20px)) / 2);
    }
}
@media (max-width: 767px) {
    .wcgr-track .wcgr-card {
        flex-basis: 85%;
        min-width: 0;
    }
}

.wcgr-nav {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--wpex-rounded-full, 9999px);
    border: 1px solid var(--wpex-border-main, #eee);
    background: var(--wpex-surface-1, #fff);
    color: var(--wpex-text-2, #424242);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--wpex-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.wcgr-nav:hover:not([disabled]) {
    background: var(--wpex-accent, #1a73e8);
    color: var(--wpex-on-accent, #fff);
    border-color: transparent;
}
.wcgr-nav[disabled] {
    opacity: .35;
    cursor: default;
}
.wcgr-nav:focus-visible {
    outline: 2px solid var(--wpex-accent, #1a73e8);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    /* Swipe is the natural gesture on touch — reclaim the arrow space. */
    .wcgr-nav {
        display: none;
    }
}

/* ─── Aggregate badge ─── */
.wcgr-badge {
    display: inline-block;
}
.wcgr-badge-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--wpex-surface-2, #f7f7f7);
    border: 1px solid var(--wpex-border-main, #eee);
    border-radius: var(--wpex-rounded-full, 9999px);
    color: var(--wpex-text-1, #222);
    text-decoration: none;
    transition: background .2s ease, box-shadow .2s ease;
}
a.wcgr-badge-inner:hover {
    background: var(--wpex-surface-3, #eee);
    box-shadow: var(--wpex-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));
    text-decoration: none;
}
a.wcgr-badge-inner:focus-visible {
    outline: 2px solid var(--wpex-accent, #1a73e8);
    outline-offset: 2px;
}

.wcgr-badge-score {
    font-size: var(--wpex-text-lg, 1.231em);
    font-weight: var(--wpex-bold, 600);
    line-height: 1;
}
.wcgr-badge-count {
    font-size: var(--wpex-text-sm, .923em);
    color: var(--wpex-text-3, #616161);
}

/* Stacked variant for sidebars */
.wcgr-badge-stacked .wcgr-badge-inner {
    flex-direction: column;
    gap: 4px;
    border-radius: var(--wpex-rounded, 10px);
    padding: 14px 18px;
    text-align: center;
}
.wcgr-badge-stacked .wcgr-badge-score {
    font-size: var(--wpex-text-2xl, 1.615em);
}

/* ════════════════════════════════════════════════════════════════
 * Chrome-free layouts: editorial, quote, band, wall
 *
 * These deliberately drop the card border, radius, shadow, avatar and
 * the multicoloured Google mark, and render the stars monochrome in the
 * surrounding text colour. On a restrained palette those are the details
 * that make an embedded review read as a bolted-on third-party widget
 * rather than part of the page.
 * ═══════════════════════════════════════════════════════════════ */

.wcgr-card-bare {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    gap: 14px;
}
.wcgr-card-bare:hover {
    box-shadow: none;
}

/* Monochrome stars — inherit the text colour instead of the gold token. */
.wcgr-layout-editorial .wcgr-star-full,
.wcgr-layout-quote .wcgr-star-full,
.wcgr-layout-band .wcgr-star-full,
.wcgr-layout-wall .wcgr-star-full {
    background-color: currentColor;
}
.wcgr-layout-editorial .wcgr-star-half,
.wcgr-layout-quote .wcgr-star-half,
.wcgr-layout-band .wcgr-star-half,
.wcgr-layout-wall .wcgr-star-half {
    background-image: linear-gradient(
        to right,
        currentColor 50%,
        var(--wpex-surface-4, #e0e0e0) 50%
    );
}

.wcgr-card-bare .wcgr-stars {
    color: var(--wpex-text-1, #222);
}

.wcgr-card-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
}
.wcgr-card-foot .wcgr-author {
    font-size: var(--wpex-text-sm, .923em);
    white-space: normal;
}
.wcgr-card-foot .wcgr-time {
    font-size: var(--wpex-text-sm, .923em);
}

/* ─── Editorial: ruled columns ─── */
.wcgr-editorial {
    display: grid;
    gap: 44px;
    grid-template-columns: repeat(var(--wcgr-cols, 3), minmax(0, 1fr));
}
.wcgr-editorial .wcgr-card-bare {
    border-top: 1px solid var(--wpex-border-main, #eee);
    padding-top: 22px;
}
.wcgr-editorial .wcgr-text {
    font-size: var(--wpex-text-md, 1.077em);
    line-height: 1.75;
    color: var(--wpex-text-1, #222);
}

@media (max-width: 1024px) {
    .wcgr-editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 767px) {
    .wcgr-editorial { grid-template-columns: 1fr; gap: 28px; }
}

/* ─── Quote: one large pull quote ─── */
.wcgr-quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    margin: 0;
    padding: 16px 0;
    color: var(--wpex-text-1, #222);
}

/* ─── Quote rotator ───
 *
 * Slides share one grid cell, so the viewport is always as tall as the
 * longest quote and rotation never shifts the page below it. Inactive
 * slides use visibility:hidden rather than display:none — it keeps them
 * contributing that height while still removing them from the
 * accessibility tree and from tab order.
 */
.wcgr-quote-viewport {
    display: grid;
}
.wcgr-quote-rotator .wcgr-quote {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease;
}
.wcgr-quote-rotator .wcgr-quote.is-active {
    opacity: 1;
    visibility: visible;
}

.wcgr-quote-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 26px;
}

.wcgr-quote-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* The hit area is a comfortable 44px square; the visible dot inside it
   is small, so the control stays quiet without being hard to hit. */
.wcgr-dot {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wcgr-dot span {
    width: 7px;
    height: 7px;
    border-radius: var(--wpex-rounded-full, 9999px);
    background: var(--wpex-surface-4, #e0e0e0);
    transition: background .2s ease, transform .2s ease;
}
.wcgr-dot:hover span {
    background: var(--wpex-text-3, #616161);
}
.wcgr-dot.is-active span {
    background: var(--wpex-text-1, #222);
    transform: scale(1.3);
}
.wcgr-dot:focus-visible {
    outline: 2px solid var(--wpex-accent, #1a73e8);
    outline-offset: -8px;
    border-radius: var(--wpex-rounded-xs, 3px);
}

.wcgr-quote-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wpex-text-3, #616161);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wcgr-quote-toggle:hover {
    color: var(--wpex-text-1, #222);
}
.wcgr-quote-toggle:focus-visible {
    outline: 2px solid var(--wpex-accent, #1a73e8);
    outline-offset: -8px;
    border-radius: var(--wpex-rounded-xs, 3px);
}

/* Pause: two bars. Play: a triangle. Drawn in CSS so they inherit
   currentColor and need no icon font or extra request. */
.wcgr-icon-pause {
    width: 10px;
    height: 12px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
    box-sizing: border-box;
}
.wcgr-icon-play {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid currentColor;
    margin-left: 2px;
}
.wcgr-quote-text {
    margin: 0;
    max-width: 44ch;
    font-size: var(--wpex-text-2xl, 1.615em);
    font-weight: 400;
    line-height: 1.45;
    color: var(--wpex-text-1, #222);
    /* The theme may style blockquote with a rule or indent — this is a
       centred pull quote, so reset those. */
    border: 0;
    padding: 0;
    font-style: normal;
    quotes: none;
}
.wcgr-quote-text::before,
.wcgr-quote-text::after {
    content: none;
}
.wcgr-quote-cite {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.wcgr-quote-cite .wcgr-author {
    font-size: var(--wpex-text-sm, .923em);
}
.wcgr-quote-cite .wcgr-time {
    font-size: var(--wpex-text-sm, .923em);
}

/* ─── Band: full-width strip ─── */
.wcgr-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px;
    padding: 40px clamp(20px, 4vw, 56px);
    background: var(--wpex-text-1, #222);
    color: var(--wpex-surface-1, #fff);
    border-radius: var(--wpex-rounded-xs, 3px);
}
.wcgr-band .wcgr-stars {
    color: var(--wpex-surface-1, #fff);
}

.wcgr-band-score {
    flex: 0 0 auto;
}
.wcgr-band-score-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wcgr-band-average {
    font-size: 2.8em;
    font-weight: 400;
    line-height: 1;
}
.wcgr-band-count {
    margin-top: 10px;
    font-size: var(--wpex-text-xs, .846em);
    letter-spacing: var(--wpex-tracking-wider, .05em);
    text-transform: uppercase;
    /* Light enough to clear 4.5:1 on the dark ground. */
    opacity: .75;
}

.wcgr-band-quotes {
    flex: 1 1 380px;
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.wcgr-band-text {
    margin: 0;
    font-size: var(--wpex-text-md, 1.077em);
    line-height: 1.5;
    color: inherit;
}
.wcgr-band-author {
    margin-top: 10px;
    font-size: var(--wpex-text-xs, .846em);
    opacity: .75;
}

@media (max-width: 767px) {
    .wcgr-band {
        gap: 28px;
        padding: 28px 20px;
    }
    .wcgr-band-quotes {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

/* ─── Wall: masonry via CSS columns ─── */
.wcgr-wall {
    column-count: var(--wcgr-cols, 3);
    column-gap: var(--wpex-row-gap, 20px);
}
.wcgr-wall-item {
    break-inside: avoid;
    /* Safari still needs the legacy property to honour the break. */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: var(--wpex-row-gap, 20px);
    padding: 24px;
    background: var(--wpex-surface-2, #f7f7f7);
    border-radius: var(--wpex-rounded-xs, 3px);
}
.wcgr-wall .wcgr-card-bare {
    display: block;
}
.wcgr-wall .wcgr-body {
    margin: 12px 0;
}
.wcgr-wall .wcgr-text {
    font-size: var(--wpex-text-sm, .923em);
    line-height: 1.7;
}

@media (max-width: 1024px) {
    .wcgr-wall { column-count: 2; }
}
@media (max-width: 767px) {
    .wcgr-wall { column-count: 1; }
}

/* ─── Badge without a count ─── */
.wcgr-badge-nocount .wcgr-badge-count {
    font-size: var(--wpex-text-xs, .846em);
    letter-spacing: var(--wpex-tracking-wide, .025em);
    text-transform: uppercase;
}

/* ─── Leave a review ─── */
.wcgr-cta {
    margin: var(--wpex-row-gap, 20px) 0 0;
}
.wcgr-cta-link {
    display: inline-block;
    font-size: var(--wpex-text-xs, .846em);
    font-weight: var(--wpex-bold, 600);
    letter-spacing: var(--wpex-tracking-wider, .05em);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--wpex-text-1, #222);
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    /* Comfortably past the 44px touch target once the line box is counted. */
    line-height: 2.2;
}
.wcgr-cta-link:hover,
.wcgr-cta-link:focus-visible {
    color: var(--wpex-accent, #1a73e8);
}
.wcgr-cta-link:focus-visible {
    outline: 2px solid var(--wpex-accent, #1a73e8);
    outline-offset: 3px;
}

/* On the dark band the call to action sits below, on the page ground —
   no colour override needed, but centre it with the quote layout. */
.wcgr-layout-quote .wcgr-cta {
    text-align: center;
}

/* ─── Motion preferences ─── */
@media (prefers-reduced-motion: reduce) {
    .wcgr-card,
    .wcgr-nav,
    .wcgr-badge-inner,
    .wcgr-dot span {
        transition: none;
    }
    .wcgr-track {
        scroll-behavior: auto;
    }
    /* The JS already refuses to autoplay here; this kills the cross-fade
       for the manual dot navigation that remains. */
    .wcgr-quote-rotator .wcgr-quote {
        transition: none;
    }
}