/*
 * hs-quote — pull quote (lead) and boxed (card) variants.
 * Color via [data-color] mapping to CSS vars.
 */

.hs-quote {
    --hs-quote-accent: #10b981;
    --hs-quote-accent-strong: #047857;
    --hs-quote-bg: #ecfdf5;
    --hs-quote-text: var(--color-text, #191919);

    margin: 2.5rem 0;
    padding: 0;
}

.hs-quote[data-color="green"] {
    --hs-quote-accent: #10b981;
    --hs-quote-accent-strong: #047857;
    --hs-quote-bg: #ecfdf5;
}

.hs-quote[data-color="blue"] {
    --hs-quote-accent: #3b82f6;
    --hs-quote-accent-strong: #1d4ed8;
    --hs-quote-bg: #eff6ff;
}

.hs-quote[data-color="orange"] {
    --hs-quote-accent: #f59e0b;
    --hs-quote-accent-strong: #b45309;
    --hs-quote-bg: #fff7ed;
}

.hs-quote[data-color="gray"] {
    --hs-quote-accent: #6b7280;
    --hs-quote-accent-strong: #374151;
    --hs-quote-bg: #f3f4f6;
}

.hs-quote__body {
    /* The shortcode renders <blockquote class="hs-quote__body"> inside
       a <figure class="hs-quote--lead"> wrapper. Reset the native
       blockquote rule (style.css) so the wrapper draws the only
       stroke — otherwise both elements grid+::before would overlay,
       producing a double line. <p> margins are intentionally left at
       browser-default to match how native blockquote renders. */
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hs-quote-text);
    quotes: none;
}

.hs-quote__body::before {
    content: none;
}

/* ---------- Lead variant: italic pull-quote with accent bar ---------- */

.hs-quote--lead {
    border-left: 4px solid var(--hs-quote-accent);
    padding: 0.25rem 0 0.25rem 1.5rem;
}

.hs-quote--lead .hs-quote__body {
    font-style: italic;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.45;
    letter-spacing: -0.01em;
}

/* ---------- Card variant: boxed with optional eyebrow ---------- */

.hs-quote--card {
    background: var(--hs-quote-bg);
    border-left: 4px solid var(--hs-quote-accent-strong);
    padding: 1.5rem 1.75rem;
    border-radius: 4px;
}

.hs-quote--card .hs-quote__body {
    font-size: 1rem;
    line-height: 1.6;
}

.hs-quote__eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hs-quote-accent-strong);
    margin-bottom: 0.75rem;
}

/* ---------- Citation ---------- */

.hs-quote__cite {
    display: block;
    margin-top: 1rem;
    /* Mirror <p>'s natural 1em (≈ 1.5rem) bottom margin so the stroke
       keeps the same bottom breathing room when a cite is present. */
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-text-light, #444);
}

.hs-quote__name {
    font-style: normal;
    font-weight: 600;
    color: var(--color-text, #191919);
}

.hs-quote__name + .hs-quote__source::before {
    content: ", ";
    color: var(--color-text-light, #444);
    font-weight: 400;
}

.hs-quote__source {
    font-style: normal;
    color: var(--color-text-light, #444);
}

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
    .hs-quote {
        margin: 2rem 0;
    }

    .hs-quote--lead {
        padding-left: 1.125rem;
    }

    .hs-quote--lead .hs-quote__body {
        font-size: 1.25rem;
    }

    .hs-quote--card {
        padding: 1.25rem 1.25rem;
    }
}