/**
 * Qing Quotes widget.
 *
 * Centred section heading plus a horizontal marquee of testimonial cards.
 * The track holds N identical copies of the card set; one animation cycle
 * travels -100/N %, landing exactly on the start of the next copy, so the
 * loop has no visible seam. Ported from the static About page
 * (.quotes / .marquee / .qcard).
 *
 * Control-driven values are read from CSS custom properties, declared here
 * as the standalone defaults so an untouched control falls back to these
 * rather than to nothing.
 *
 * Size rules double the class name to reach (0,2,x). Elementor's
 * frontend.css carries `.elementor <element>` resets at (0,1,1) that load
 * after this file and win on a tie -- that is exactly what killed the image
 * height control on the Story widget, so it is pre-empted here.
 */

.qing-quotes {
    /* ---- Defaults, overridden by the controls ---- */
    --qing-q-accent: #b3946f;
    --qing-q-text: #2f2b28;
    --qing-q-muted: #7a736c;
    --qing-q-line: #eae5df;
    --qing-q-radius: 4px;

    --qing-q-gap: 26px;
    --qing-q-card-w: 380px;
    --qing-q-card-bg: #fff;
    --qing-q-card-bw: 1px;

    --qing-q-speed: 44s;
    /* Written inline by PHP from the set count: 2 sets is -50%, 3 is -33.3333%. */
    --qing-q-shift: -50%;
    --qing-q-fade: 9%;

    --qing-q-mark-size: 3.4rem;
    --qing-q-mark-h: 26px;
    --qing-q-mark-opacity: 0.4;

    width: 100%;
    /* The track is wider than the viewport; without this the page gains a
       horizontal scrollbar. */
    overflow: hidden;
}

/* ============================================================
 * Section heading
 * ============================================================ */
.qing-quotes .qing-quotes__head {
    margin-bottom: 56px;
}

.qing-quotes--headCenter .qing-quotes__head {
    text-align: center;
}

.qing-quotes .qing-quotes__eyebrow {
    margin: 0 0 18px;
    color: var(--qing-q-accent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.qing-quotes .qing-quotes__title {
    margin: 0;
    font-family: Georgia, "Songti SC", "SimSun", serif;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--qing-q-text);
}

.qing-quotes .qing-quotes__title em,
.qing-quotes .qing-quotes__title i {
    font-style: italic;
    color: var(--qing-q-accent);
}

/* Short gold rule under the heading: the motif shared across sections. */
.qing-quotes .qing-quotes__title::after {
    content: "";
    display: block;
    width: var(--qing-q-rule-w, 48px);
    height: var(--qing-q-rule-h, 2px);
    margin-top: var(--qing-q-rule-gap, 22px);
    background-color: var(--qing-q-rule-color, var(--qing-q-accent));
}

/* Centre the rule too, otherwise it stays pinned left. */
.qing-quotes--headCenter .qing-quotes__title::after {
    margin-inline: auto;
}

/* Hidden rather than dropped from the markup, so turning the rule off does
   not change the heading's semantics. */
.qing-quotes--noRule .qing-quotes__title::after {
    display: none;
}

/* ============================================================
 * Marquee
 * ============================================================ */
.qing-quotes .qing-quotes__marquee {
    margin-top: 8px;
    /* Dissolve both ends into the background instead of a hard cut. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 var(--qing-q-fade),
        #000 calc(100% - var(--qing-q-fade)),
        transparent
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 var(--qing-q-fade),
        #000 calc(100% - var(--qing-q-fade)),
        transparent
    );
}

.qing-quotes--noFade .qing-quotes__marquee {
    -webkit-mask-image: none;
    mask-image: none;
}

.qing-quotes .qing-quotes__track {
    display: flex;
    gap: var(--qing-q-gap);
    /* Not 100%: the track has to size to its content for a percentage
       translate to mean anything. */
    width: max-content;
    animation: qing-quotes-marquee var(--qing-q-speed) linear infinite;
}

/* Reverse: walks back from the end offset to 0, reading left-to-right. */
.qing-quotes--reverse .qing-quotes__track {
    animation-name: qing-quotes-marquee-rev;
}

.qing-quotes--pauseHover .qing-quotes__marquee:hover .qing-quotes__track {
    animation-play-state: paused;
}

@keyframes qing-quotes-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--qing-q-shift)); }
}

@keyframes qing-quotes-marquee-rev {
    from { transform: translateX(var(--qing-q-shift)); }
    to   { transform: translateX(0); }
}

/* ============================================================
 * Quote card
 * ============================================================ */
.qing-quotes .qing-quotes__card {
    /* Must not shrink: a flexible width breaks the -100/N% maths and the
       seam drifts. */
    flex: 0 0 var(--qing-q-card-w);
    margin: 0;
    padding: 38px 34px 30px;
    background-color: var(--qing-q-card-bg);
    border: var(--qing-q-card-bw) solid var(--qing-q-line);
    border-radius: var(--qing-q-radius);
}

.qing-quotes .qing-quotes__mark {
    display: block;
    /* Deliberately far shorter than the glyph: the top half of the quote
       mark overlaps the card padding instead of pushing the copy down. */
    height: var(--qing-q-mark-h);
    font-family: Georgia, "Songti SC", "SimSun", serif;
    font-size: var(--qing-q-mark-size);
    line-height: 1;
    color: var(--qing-q-accent);
    opacity: var(--qing-q-mark-opacity);
}

.qing-quotes--noMark .qing-quotes__mark {
    display: none;
}

.qing-quotes .qing-quotes__card p {
    margin: 0 0 20px;
    font-family: Georgia, "Songti SC", "SimSun", serif;
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--qing-q-text);
}

.qing-quotes .qing-quotes__card cite {
    color: var(--qing-q-muted);
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ============================================================
 * Static row
 *
 * Used when Scroll is off. The track wraps, and the duplicate sets -- which
 * exist only for the loop -- are hidden.
 * ============================================================ */
.qing-quotes--static .qing-quotes__track {
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    animation: none;
}

.qing-quotes--static .qing-quotes__marquee {
    -webkit-mask-image: none;
    mask-image: none;
}

.qing-quotes--static .qing-quotes__card[aria-hidden="true"] {
    display: none;
}

/* ============================================================
 * Responsive
 *
 * 599px, not Elementor's 767px: the source breaks here, and using 767px
 * would narrow the cards a full breakpoint early.
 * ============================================================ */
@media (max-width: 599px) {

    .qing-quotes .qing-quotes__head {
        margin-bottom: 40px;
    }

    .qing-quotes .qing-quotes__card {
        padding: 30px 26px 24px;
    }
}

/* ============================================================
 * Reduced motion
 *
 * The marquee is a pure CSS animation, so it has to be switched off
 * explicitly here. Stopping it would leave the track overflowing at its
 * start offset, so the row wraps instead and every quote stays readable.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {

    .qing-quotes .qing-quotes__track {
        flex-wrap: wrap;
        width: auto;
        justify-content: center;
        animation: none;
    }

    .qing-quotes .qing-quotes__marquee {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .qing-quotes .qing-quotes__card[aria-hidden="true"] {
        display: none;
    }

    .qing-quotes .qing-quotes__track .qing-quotes__card {
        flex: 0 0 340px;
    }
}