/* ─────────────────────────────────────────────────────────────────────
   bdc_reviews_showcase — home-page reviews grid + empty state.

   Populated state: 3-card grid on desktop, 2-col tablet, 1-col mobile.
   Empty state: soft placeholder card in the same footprint so the
   home page's vertical rhythm doesn't jump when the first review lands.
   ───────────────────────────────────────────────────────────────────── */

.bdc-reviews-showcase {
    --bdc-rev-radius: 16px;
    --bdc-rev-gap: 20px;
    --bdc-rev-card-pad: 24px;
    --bdc-rev-card-bg: #ffffff;
    --bdc-rev-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --bdc-rev-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.09);
    text-align: center;
}

.bdc-reviews-showcase__eyebrow {
    font: 500 12px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bdc-sage, #3d5844);
    margin: 0 0 12px;
}

.bdc-reviews-showcase__heading {
    font: 600 34px/1.15 Newsreader, Georgia, serif;
    color: var(--bdc-ink, #1a1a1a);
    letter-spacing: -0.5px;
    margin: 0 0 12px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.bdc-reviews-showcase__subheading {
    font: 400 17px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bdc-ink-2, #4a4a48);
    margin: 0 0 32px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Grid ─── */
.bdc-reviews-showcase__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bdc-rev-gap);
    text-align: left;
}

/* ─── Card ─── */
.bdc-review-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--bdc-rev-card-pad);
    background: var(--bdc-rev-card-bg);
    border-radius: var(--bdc-rev-radius);
    box-shadow: var(--bdc-rev-card-shadow);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 200ms ease, transform 200ms ease;
    /* Cards can be either <a> (linked to source) or <article> —
       ensure the anchor variant doesn't underline anything by default. */
}
.bdc-review-card:hover {
    box-shadow: var(--bdc-rev-card-shadow-hover);
    transform: translateY(-2px);
}

.bdc-review-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bdc-review-card__stars {
    display: inline-flex;
    gap: 2px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 1px;
    color: #dba617;
}
.bdc-review-card__star--dim {
    color: var(--bdc-ink-6, #eeece5);
}

/* Softer source badge: brand glyph + tiny "on {Source}" label.
   No pill background/colour — the coloured Google G is enough to
   anchor recognition and the sentence-case label stays subordinate
   to the review body. Matches the design language of the rest of
   the redesigned home page (trust-tiles, journey-steps). */
.bdc-review-card__source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    color: var(--bdc-ink-3, #6b6b68);
    font: 500 12px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.bdc-review-card__source-glyph {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.bdc-review-card__source-glyph svg {
    display: block;
}
.bdc-review-card__source-label {
    color: var(--bdc-ink-2, #4a4a48);
}

.bdc-review-card__body {
    margin: 0;
    font: 400 15px/1.55 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bdc-ink-2, #4a4a48);
    quotes: "“" "”";
}
.bdc-review-card__body::before { content: open-quote; }
.bdc-review-card__body::after  { content: close-quote; }

.bdc-review-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 4px;
    font: 500 13px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bdc-ink-3, #6b6b68);
}

.bdc-review-card__name {
    color: var(--bdc-ink, #1a1a1a);
    font-weight: 600;
}

.bdc-review-card__response {
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--bdc-ink-7, #f6f6f4);
    border-left: 3px solid var(--bdc-sage, #3d5844);
    border-radius: 8px;
}
.bdc-review-card__response-label {
    display: block;
    font: 700 10px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bdc-sage, #3d5844);
    margin-bottom: 6px;
}
.bdc-review-card__response-body {
    font: 400 13px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bdc-ink-2, #4a4a48);
}

/* ─── Empty state ─── */
.bdc-reviews-showcase__empty {
    padding: 40px 24px;
    background: var(--bdc-ink-7, #f6f6f4);
    border-radius: var(--bdc-rev-radius);
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.bdc-reviews-showcase__empty-icon {
    font-size: 32px;
    color: var(--bdc-sage, #3d5844);
    opacity: 0.6;
    margin-bottom: 8px;
    line-height: 1;
}
.bdc-reviews-showcase__empty-heading {
    font: 600 22px/1.2 Newsreader, Georgia, serif;
    color: var(--bdc-ink, #1a1a1a);
    margin: 0 0 8px;
}
.bdc-reviews-showcase__empty-text {
    font: 400 15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bdc-ink-2, #4a4a48);
    margin: 0;
}

/* ─── Responsive ─── */
@media (min-width: 640px) {
    .bdc-reviews-showcase__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 960px) {
    .bdc-reviews-showcase__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}
@media (max-width: 767px) {
    .bdc-reviews-showcase__heading {
        font-size: 26px;
    }
    .bdc-reviews-showcase__subheading {
        font-size: 15px;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Carousel layout — pure CSS scroll-snap track.

   Uses native horizontal overflow + scroll-snap so touch / trackpad
   scrolling works with zero JS. The arrow buttons + dot pagination
   below only add explicit affordances; the track is fully usable
   without them (a11y baseline).

   Card widths per breakpoint:
     - mobile:   90% of viewport → one card + a peek of the next
     - tablet:   47%             → two cards
     - desktop:  calc(33.33% - N) → three cards
   ───────────────────────────────────────────────────────────────────── */

.bdc-reviews-showcase__carousel-wrap {
    position: relative;
}

.bdc-reviews-showcase__track {
    display: flex;
    gap: var(--bdc-rev-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* legacy Edge */
    /* Small inner padding: 4px top so hover-shadow doesn't clip; 8px
       sides for scroll-snap breathing room; 32px bottom for controls
       gap. Deliberately NOT using the "full-bleed" negative-margin
       trick — that hack breaks flex-basis math on wide viewports and
       makes cards hug the right edge (fixed 2026-07-08). Track stays
       inside its parent container's box. */
    padding: 4px 8px 32px;
}
.bdc-reviews-showcase__track::-webkit-scrollbar {
    display: none;                 /* Safari / Chrome */
}

.bdc-reviews-showcase__track > .bdc-review-card {
    flex: 0 0 85%;                 /* mobile: peek both sides */
    scroll-snap-align: center;
    /* Reset the card's default text alignment for carousel context —
       the parent .bdc-reviews-showcase is text-align: center, which
       cascades unless we opt out here. */
    text-align: left;
}
@media (min-width: 640px) {
    .bdc-reviews-showcase__track > .bdc-review-card {
        /* Tablet: exactly 2 cards side-by-side.
           Formula: 50% - (gap / 2) accounts for the single gap
           between the pair. */
        flex: 0 0 calc(50% - (var(--bdc-rev-gap) / 2));
        scroll-snap-align: start;   /* left-align pairs cleanly */
    }
}
@media (min-width: 960px) {
    .bdc-reviews-showcase__track > .bdc-review-card {
        /* Desktop: exactly 3 cards side-by-side.
           Formula: 33.333% - (2 * gap / 3) accounts for the two
           gaps between three cards (which subtract from the
           available space each card gets). */
        flex: 0 0 calc(33.333% - (var(--bdc-rev-gap) * 2 / 3));
    }
}

/* ── Controls (arrows + dots) ────────────────────────────────────── */

.bdc-reviews-showcase__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
}

/* Nav buttons — scoped under `.bdc-v3` so believe-detox theme's
   `button:hover` reset (which flips to accent-red) loses on
   specificity. Explicit hex values (no var() fallback) because
   the theme's rule reaches these first at page load if a token
   hasn't hydrated yet. Icon `color` doubles as SVG `currentColor`,
   so setting it on the button colours the arrow too. */

.bdc-v3 .bdc-reviews-showcase__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #ffffff;
    color: #1f3f33;                /* sage — arrow via currentColor */
    border: 1px solid #d5d8d0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.bdc-v3 .bdc-reviews-showcase__nav:hover,
.bdc-v3 .bdc-reviews-showcase__nav:focus-visible {
    background-color: #1f3f33;    /* filled sage on hover */
    border-color: #1f3f33;
    color: #ffffff;                /* arrow flips to white */
    outline: none;
    transform: translateY(-1px);
}
.bdc-v3 .bdc-reviews-showcase__nav:focus-visible {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1f3f33;
}
.bdc-v3 .bdc-reviews-showcase__nav:active {
    transform: translateY(0);
}
.bdc-v3 .bdc-reviews-showcase__nav:disabled,
.bdc-v3 .bdc-reviews-showcase__nav[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    background-color: #ffffff;
    border-color: #d5d8d0;
    color: #1f3f33;
    transform: none;
}
.bdc-v3 .bdc-reviews-showcase__nav:disabled:hover,
.bdc-v3 .bdc-reviews-showcase__nav[disabled]:hover {
    background-color: #ffffff;
    border-color: #d5d8d0;
    color: #1f3f33;
}

.bdc-reviews-showcase__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bdc-reviews-showcase__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    background: var(--bdc-line, #d5d5d0);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}
.bdc-reviews-showcase__dot:hover {
    background: var(--bdc-sage-tint, #7a927e);
}
.bdc-reviews-showcase__dot[aria-current="true"] {
    background: var(--bdc-sage, #1f3f33);
    transform: scale(1.4);
}
.bdc-reviews-showcase__dot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bdc-sage, #1f3f33), 0 0 0 4px rgba(31, 63, 51, 0.15);
}