/* ── Quote Slideshow ───────────────────────────────────────── */

/*
 * CSS custom properties — set via inline style on .qs-slideshow
 * when custom colors are configured in the admin panel:
 *
 *   --qs-bg      background color
 *   --qs-color   text color
 *   --qs-accent  buttons and dots color
 *   --qs-width   max-width of the slideshow
 */

.qs-slideshow {
    position: relative;
    width: 100%;
    max-width: var(--qs-width, 760px);
    margin: 2rem auto;
    border-radius: 12px;
    /* overflow:hidden would clip absolutely-positioned slides,
       so we let the track manage its own stacking context */
    font-family: Georgia, 'Times New Roman', serif;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

/* ── Themes (used when no custom color vars are set) ───────── */
.qs-dark  { background: var(--qs-bg, #1a1a2e); color: var(--qs-color, #e8e8f0); }
.qs-light { background: var(--qs-bg, #f9f7f2); color: var(--qs-color, #2c2c3a); }

/* ── Track ─────────────────────────────────────────────────── */
/*
 * Layout-shift fix: all slides stay position:absolute so they
 * don't push the track height around. The JS measures the tallest
 * slide on load (and on resize) and sets --qs-track-h on the track.
 */
.qs-track {
    position: relative;
    height: var(--qs-track-h, 220px);   /* JS writes the real value */
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

/* ── Slides ─────────────────────────────────────────────────── */
.qs-slide {
    position: absolute;
    inset: 0;
    width: 100%;                        /* centering fix: stretch to full width */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 3.5rem 2.5rem;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
    box-sizing: border-box;
}
.qs-slide.qs-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── Blockquote ─────────────────────────────────────────────── */
.qs-blockquote {
    margin: 0;
    width: 100%;                        /* fill the flex child so text-align works */
}
.qs-text {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    line-height: 1.65;
    margin: 0 0 1.25rem;
    quotes: "\201C" "\201D";
    /* text-align is set inline per-instance from PHP */
}
.qs-text::before { content: open-quote;  font-size: 2em; line-height: 0; vertical-align: -.4em; opacity: .35; }
.qs-text::after  { content: close-quote; font-size: 2em; line-height: 0; vertical-align: -.4em; opacity: .35; }

.qs-author {
    font-size: .95rem;
    font-style: italic;
    opacity: .65;
    /* text-align is set inline per-instance from PHP */
}

/* ── Controls bar ───────────────────────────────────────────── */
.qs-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .75rem 1rem;
}
.qs-dark  .qs-controls { border-top: 1px solid rgba(255,255,255,.08); }
.qs-light .qs-controls { border-top: 1px solid rgba(0,0,0,.08); }

.qs-btn {
    background: none;
    border: 2px solid var(--qs-accent, currentColor);
    color: var(--qs-accent, inherit);
    border-radius: 50%;
    width: 36px; height: 36px;
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
    opacity: .7;
}
.qs-btn:hover { opacity: 1; }
.qs-dark  .qs-btn:hover { background: rgba(255,255,255,.12); }
.qs-light .qs-btn:hover { background: rgba(0,0,0,.07); }

.qs-counter {
    font-size: .85rem;
    min-width: 52px;
    text-align: center;
    opacity: .55;
    font-family: sans-serif;
}

/* ── Dots ───────────────────────────────────────────────────── */
.qs-dots {
    display: flex;
    justify-content: center;
    gap: .45rem;
    padding: 0 1rem .85rem;
    flex-wrap: wrap;
}
.qs-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform .2s, opacity .2s;
    opacity: .35;
    background: var(--qs-accent, currentColor);
}
.qs-dot.qs-dot-active { opacity: 1; transform: scale(1.35); }

/* ── Empty state ────────────────────────────────────────────── */
.qs-empty { text-align: center; color: #888; font-style: italic; }