/* Wedding Souls — Google reviews section (spec §7).
   Own class names throughout: the template animates its heading classes, and a
   new section using them would wait on an animation that is never registered. */

.reviews-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.reviews-heading {
    margin: 0;
    font-family: var(--font-family--display);
    font-size: clamp(2.25rem, 7vw, 6rem);
    font-weight: var(--fonts-weight--semi-bold);
    line-height: 1;
    letter-spacing: var(--letter-space-s);
    color: var(--_color---nobel);
    overflow-wrap: anywhere;
}

.reviews-count {
    flex: none;
    font-size: .8125rem;
    letter-spacing: .08em;
    color: var(--_color---nobel);
}

.reviews-rating {
    margin: 0 0 1.5rem;
    color: var(--_color---nobel);
}

.reviews-rating strong {
    color: var(--_color---white);
}

.reviews-rating a {
    color: var(--_color---white);
    text-underline-offset: .2em;
}

/* ---- pull-quote rows (reviews.js) ------------------------------------------
   Each track holds its quotes twice and slides by half its width, so the loop has
   no seam. Spacing is padding on each quote, not flex gap: a gap would leave the
   two halves half a gap apart in width and the loop would jump. */
.reviews-quotes {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 2.5rem;
}

/* Standing still (reduced motion, no script) the rows would show a quote or two
   and cut the rest off mid-sentence. Every quote is in full in its card. */
.reviews-section:not(.reviews-live) .reviews-quotes {
    display: none;
}

.reviews-marquee {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: .9rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.reviews-marquee-row {
    overflow: hidden;
}

.reviews-marquee-track {
    display: flex;
    width: max-content;
}

.reviews-quote {
    display: inline-flex;
    align-items: baseline;
    gap: .9rem;
    padding-right: 2.25rem;
    white-space: nowrap;
}

/* A small gold diamond between quotes. */
.reviews-quote::after {
    content: "";
    align-self: center;
    width: .4rem;
    height: .4rem;
    margin-left: 1.35rem;
    background-color: #d4a24c;
    transform: rotate(45deg);
}

.reviews-quote-text {
    font-family: var(--font-family--display);
    font-size: clamp(1.35rem, 2.6vw, 2.35rem);
    line-height: 1.2;
    color: var(--_color---nobel);
}

.reviews-marquee-row--right .reviews-quote-text {
    font-size: clamp(1.1rem, 2vw, 1.8rem);
    color: var(--_color---white-40);
}

.reviews-quote-by {
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #d4a24c;
}

.reviews-live .reviews-marquee-track {
    animation: reviews-drift 90s linear infinite;
}

.reviews-live .reviews-marquee-row--right .reviews-marquee-track {
    animation-duration: 75s;
    animation-direction: reverse;
}

.reviews-marquee.is-paused .reviews-marquee-track,
.reviews-marquee.is-offscreen .reviews-marquee-track {
    animation-play-state: paused;
}

/* Hover pauses for a mouse only: a tap leaves :hover stuck on touch screens. */
@media (hover: hover) {
    .reviews-marquee:hover .reviews-marquee-track {
        animation-play-state: paused;
    }
}

@keyframes reviews-drift {
    to {
        transform: translateX(-50%);
    }
}

.reviews-marquee-toggle {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--_color---white-15);
    border-radius: 50%;
    background: none;
    color: var(--_color---nobel);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.reviews-marquee-toggle[hidden] {
    display: none;
}

.reviews-marquee-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
}

.reviews-marquee-toggle[aria-pressed="false"] .reviews-icon-play,
.reviews-marquee-toggle[aria-pressed="true"] .reviews-icon-pause {
    display: none;
}

.reviews-marquee-toggle:hover {
    border-color: #d4a24c;
    color: var(--_color---white);
}

.reviews-marquee-toggle:focus-visible {
    outline: 2px solid var(--_color---primary-color);
    outline-offset: 2px;
}

/* On a phone the button beside the rows would leave them a few words wide. */
@media screen and (max-width: 767px) {
    .reviews-quotes {
        flex-direction: column;
        align-items: flex-end;
        gap: .75rem;
    }

    .reviews-marquee {
        align-self: stretch;
    }
}

/* position:relative makes the track the offset parent of its cards, which is
   what motion.js measures scroll targets against. */
.reviews-track {
    position: relative;
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0 0 .5rem;
    list-style: none;
    /* Each card keeps its own height; one long review must not stretch the rest. */
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.reviews-track::-webkit-scrollbar {
    display: none;
}

.reviews-card {
    flex: 0 0 min(26rem, 86%);
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    position: relative;
    padding: 1.5rem;
    border: 1px solid var(--_color---white-15);
    background-color: var(--_color---onyx);
    transition: opacity .5s ease, border-color .3s ease;
}

/* Gold hairline along the top edge. */
.reviews-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4a24c 25%, #d4a24c 75%, transparent);
    transform-origin: left;
}

.reviews-card::after {
    content: "\201C";
    position: absolute;
    top: .4rem;
    right: 1.25rem;
    font-family: var(--font-family--display);
    font-size: 5rem;
    line-height: 1;
    color: rgba(212, 162, 76, .22);
    pointer-events: none;
}

.reviews-card:hover {
    border-color: rgba(212, 162, 76, .45);
}

/* Outside the row: present but quiet, so the eye rests on the cards in view.
   A card being read with the keyboard is never dimmed. */
.reviews-card.is-away:not(:focus-within) {
    opacity: .4;
}

.reviews-who {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    /* Clear of the quote mark. */
    padding-right: 3rem;
}

.reviews-avatar {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: var(--_color---primary-color);
    color: var(--_color---white);
    font-family: var(--font-family--display);
    font-size: 1.25rem;
}

.reviews-name {
    min-width: 0;
    color: var(--_color---white);
    font-weight: var(--fonts-weight--medium);
    overflow-wrap: anywhere;
}

.reviews-stars {
    display: flex;
    gap: .15rem;
    color: #f2b01e;
}

.reviews-stars svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.reviews-text {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--_color---white);
    font-size: 1rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* A very long review scrolls inside its card rather than making the row a screen
   tall. The fade at the bottom shows there is more; the padding lets the last line
   scroll clear of it. */
.reviews-text--long {
    max-height: 22rem;
    overflow-y: auto;
    padding: 0 .6rem 2.5rem 0;
    scrollbar-width: thin;
    scrollbar-color: var(--_color---white-30) transparent;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(#000 calc(100% - 2.5rem), transparent);
}

.reviews-text--long:focus-visible {
    outline: 2px solid var(--_color---primary-color);
    outline-offset: 4px;
}

/* The template hides its section numbers at these widths; alone beside
   "on Google" this one would read as a review count. */
@media screen and (max-width: 991px) {
    .reviews-count {
        display: none;
    }
}

.reviews-text p {
    margin: 0 0 .75em;
}

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

.reviews-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}

/* Fills with the share of the row seen so far (reviews.js). Without the script it shows full. */
.reviews-progress {
    flex: 1;
    height: 1px;
    margin-right: 1rem;
    background-color: var(--_color---white-15);
}

.reviews-progress-fill {
    display: block;
    height: 100%;
    background-color: #d4a24c;
    transform-origin: left;
    transition: transform .4s cubic-bezier(.23, 1, .32, 1);
}

.reviews-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--_color---white-15);
    background: none;
    color: var(--_color---white);
    cursor: pointer;
}

/* The hidden attribute must win over display:grid above. */
.reviews-btn[hidden] {
    display: none;
}

.reviews-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.reviews-btn--prev svg {
    transform: scaleX(-1);
}

.reviews-btn:hover {
    border-color: var(--_color---primary-color);
}

.reviews-track:focus-visible,
.reviews-btn:focus-visible {
    outline: 2px solid var(--_color---primary-color);
    outline-offset: 2px;
}

/* ---- entrance (reviews.js adds .reviews-live, then .is-seen) ----------------
   Cards fade in one after another, the hairline draws across, then the stars pop in.
   The cards themselves only fade: with a card moving (a rise, a tilt, even a rise
   of its contents), Chrome ended a Next pressed mid-entrance 1px short of the card
   and left it there (Pixel 7 profile, cards 307.875px wide, 2026-10-18).
   The stagger stops at the fifth card: later ones are off to the side and would
   only make the visitor wait. `backwards` holds the start state
   through the delay, and once done the card falls back to its own opacity, so a
   card outside the row ends dimmed rather than fully lit. */
.reviews-live:not(.is-seen) .reviews-card {
    opacity: 0;
}

.reviews-live.is-seen .reviews-card {
    animation: reviews-fade-in .9s ease-out calc(min(var(--i), 4) * 90ms) backwards;
}

.reviews-live.is-seen .reviews-card::before {
    animation: reviews-draw 1s cubic-bezier(.65, 0, .35, 1) calc(min(var(--i), 4) * 90ms + 250ms) backwards;
}

.reviews-live.is-seen .reviews-stars svg {
    animation: reviews-star .5s cubic-bezier(.34, 1.56, .64, 1) calc(min(var(--i), 4) * 90ms + 400ms + var(--s, 0) * 70ms) backwards;
}

.reviews-stars svg:nth-child(2) { --s: 1; }
.reviews-stars svg:nth-child(3) { --s: 2; }
.reviews-stars svg:nth-child(4) { --s: 3; }
.reviews-stars svg:nth-child(5) { --s: 4; }

@keyframes reviews-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes reviews-draw {
    from {
        transform: scaleX(0);
    }
}

@keyframes reviews-star {
    from {
        opacity: 0;
        transform: scale(.3) rotate(-30deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-card,
    .reviews-progress-fill {
        transition: none;
    }
}

/* Hero link to the reviews. Waits for Webflow to reveal the hero copy (w-mod-ix3)
   so it does not show before the paragraph above it. */
.hero-reviews-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.25rem;
    padding: .55rem 1rem .55rem .8rem;
    border: 1px solid var(--_color---white-15);
    border-radius: 999px;
    background-color: rgba(4, 2, 0, .35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--_color---white);
    font-size: .9rem;
    line-height: 1.2;
    text-decoration: none;
    opacity: 0;
    transform: translateY(.5rem);
    transition: opacity .6s cubic-bezier(.23, 1, .32, 1) .5s, transform .6s cubic-bezier(.23, 1, .32, 1) .5s, border-color .2s ease;
}

html.w-mod-ix3 .hero-reviews-link,
html:not(.w-mod-js) .hero-reviews-link {
    opacity: 1;
    transform: none;
}

.hero-reviews-link:hover {
    border-color: var(--_color---white-40);
}

.hero-reviews-link:focus-visible {
    outline: 2px solid var(--_color---white);
    outline-offset: 3px;
}

.hero-reviews-stars {
    color: #f5b301;
    letter-spacing: .08em;
    font-size: .85rem;
}

@media (prefers-reduced-motion: reduce) {
    .hero-reviews-link {
        transform: none;
        transition: border-color .2s ease;
    }
}