/* ================================================
   REVIEWS HIGHLIGHT
   Social-proof section: rating row + review cards.
   Background colour and star colour are editor-set
   via inline style / SVG fill.
   ================================================ */

.reviews-highlight {
    position: relative;
    padding: 5rem 0;
    overflow: hidden; /* keeps the decorative rings from widening the page */
}

.reviews-highlight.reduce-padding {
    padding: 2.5rem 0;
}

.reviews-highlight__container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100% !important; /* Prevent external CSS from breaking the layout */
}

/* ------------------------------------------------
   Decorative rings
   Bleed off both edges, as in the design. Purely
   decorative, so they never affect layout.
   ------------------------------------------------ */

/*
 * Four logo discs, positioned as in the design: a large one bleeding off the
 * left edge, a small accent above it, one top-right and one lower-right. They
 * sit behind the content (z-index 1 vs the container's 2) and are clipped by
 * the section's overflow:hidden, so they never widen the page.
 */
.reviews-highlight__disc {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    pointer-events: none;
    overflow: hidden;
}

/* The supplied SVGs already include their own coloured circle, so they fill
   the disc edge to edge. A custom uploaded logo is inset instead and sits on
   the editor-chosen background colour. */
.reviews-highlight__disc img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.reviews-highlight__disc.has-custom-logo img {
    width: 55%;
    height: 55%;
}

/* Large, bleeding off the left edge */
.reviews-highlight__disc--one {
    width: 300px;
    height: 300px;
    left: -150px;
    top: 18%;
}

/* Small accent, upper-left inside the gutter */
.reviews-highlight__disc--two {
    width: 96px;
    height: 96px;
    left: 4%;
    top: 4%;
}

/* Small, top-right */
.reviews-highlight__disc--three {
    width: 120px;
    height: 120px;
    right: 3%;
    top: 12%;
}

/* Medium, lower-right, bleeding off the edge */
.reviews-highlight__disc--four {
    width: 220px;
    height: 220px;
    right: -90px;
    bottom: 10%;
}

/* ------------------------------------------------
   Header
   ------------------------------------------------ */

.reviews-highlight__header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 3rem;
}

.reviews-highlight__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background-color: #ffffff;
    color: #1e1e23;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

.reviews-highlight__eyebrow-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #00e65f;
    flex-shrink: 0;
}

.reviews-highlight__title {
    /* House section-heading standard: 2rem / 500 / 1.316 */
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.316;
    color: #1e1e23;
    margin: 0 0 0.75rem;
}

.reviews-highlight__description {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #1e1e23;
}

.reviews-highlight__description p:first-child { margin-top: 0; }
.reviews-highlight__description p:last-child  { margin-bottom: 0; }

/* ------------------------------------------------
   Aggregate rating row
   ------------------------------------------------ */

.reviews-highlight__aggregate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.reviews-highlight__aggregate-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.reviews-highlight__aggregate-score {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e1e23;
}

.reviews-highlight__aggregate-note {
    font-size: 0.9375rem;
    color: #6b6b70;
}

/* ------------------------------------------------
   Stars
   ------------------------------------------------ */

.reviews-highlight__stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
}

.reviews-highlight__star {
    display: block;
    flex-shrink: 0;
}

/* ------------------------------------------------
   Review cards
   ------------------------------------------------ */

.reviews-highlight__grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
}

.reviews-highlight__grid[data-count="1"] {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}

.reviews-highlight__grid[data-count="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.reviews-highlight__card {
    background-color: #ffffff;
    border: 1px solid rgba(30, 30, 35, 0.08);
    border-radius: 10px;
    padding: 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reviews-highlight__card-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.reviews-highlight__avatar {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: block;
}

/*
 * The badge is also a direct child <img>, so a bare `> img` selector matched it
 * too - and at (0,1,1) it outranked the badge's own (0,1,0) rule. The badge
 * therefore rendered at 56px plus its 2px padding and, being absolutely
 * positioned, sat squarely on top of the avatar and hid it. Which looked
 * exactly like the second image replacing the first.
 *
 * Excluding the badge here stops the two rules competing at all, rather than
 * resolving it by piling on specificity.
 */
.reviews-highlight__avatar > img:not(.reviews-highlight__avatar-badge) {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.reviews-highlight__avatar-badge {
    position: absolute;
    right: -4px;
    bottom: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    padding: 2px;
    object-fit: contain;
    display: block;
}

.reviews-highlight__identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.reviews-highlight__name {
    font-size: 1rem;
    font-weight: 700;
    color: #1e1e23;
    line-height: 1.3;
}

.reviews-highlight__role {
    font-size: 0.8125rem;
    color: #6b6b70;
    line-height: 1.35;
}

.reviews-highlight__rating {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.reviews-highlight__score {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e1e23;
}

.reviews-highlight__card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: #1e1e23;
    margin: 0;
}

/*
 * review_text is a WYSIWYG field, so its content arrives wrapped in <p>.
 * Sizing only the wrapper leaves those paragraphs to the global `p` rule,
 * which renders them at 21px — larger than the 15px review title above them.
 * The size therefore has to be set on the paragraphs themselves, matched to
 * .reviews-highlight__card-title so quote and title read as one block.
 */
.reviews-highlight__card-text,
.reviews-highlight__card-text p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #4a4a4a;
}

.reviews-highlight__card-text p:first-child { margin-top: 0; }
.reviews-highlight__card-text p:last-child  { margin-bottom: 0; }

/* ------------------------------------------------
   CTA
   ------------------------------------------------ */

.reviews-highlight__cta {
    margin-top: 2.5rem;
    text-align: center;
}

.reviews-highlight__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    padding: 0.9375rem 2rem;
    background-color: #00e65f;
    color: #1e1e23;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.reviews-highlight__cta-button:hover {
    background-color: #00cc54;
    color: #1e1e23;
}

.reviews-highlight__cta-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 30, 35, 0.25);
}

/* ------------------------------------------------
   Responsive
   ------------------------------------------------ */

@media (max-width: 1024px) {
    .reviews-highlight { padding: 4rem 0; }

    .reviews-highlight__grid,
    .reviews-highlight__grid[data-count="3"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .reviews-highlight__disc--one   { left: -190px; width: 240px; height: 240px; }
    .reviews-highlight__disc--four  { right: -130px; width: 180px; height: 180px; }
    .reviews-highlight__disc--two,
    .reviews-highlight__disc--three { display: none; }
}

@media (max-width: 768px) {
    .reviews-highlight { padding: 3rem 0; }
    .reviews-highlight.reduce-padding { padding: 2rem 0; }

    .reviews-highlight__container { padding: 0 15px; }

    .reviews-highlight__header { margin-bottom: 2rem; }

    .reviews-highlight__title { font-size: 1.5rem; }

    .reviews-highlight__description { font-size: 1rem; }

    .reviews-highlight__grid,
    .reviews-highlight__grid[data-count="2"],
    .reviews-highlight__grid[data-count="3"] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .reviews-highlight__card { padding: 1.5rem; }

    /* Discs would crowd a narrow screen. */
    .reviews-highlight__disc { display: none; }

    .reviews-highlight__cta-button {
        min-width: 0;
        width: 100%;
    }
}