/*
 * CryptoSlate Design System: editorial quote
 *
 * The news-article treatment is the canonical presentation for authored
 * blockquotes and the crypto_person_quote renderer. Route styles may set
 * --cs-editorial-quote-accent on the owning scope, but may not recreate the
 * component chrome. Existing .post-box > article content keeps a narrow
 * compatibility adapter; new adopters use the explicit data scope. The
 * doubled selector keeps component internals above route-level prose rules
 * without relying on !important declarations.
 */

:where([data-cs-editorial-quote-scope], .post-box) {
    --cs-editorial-quote-accent: var(--cs-color-action);
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote:not(.cs-person-quote__quote) {
    --cs-editorial-quote-font-size: clamp(1.2rem, 1.08rem + 0.45vw, 1.45rem);
    --cs-editorial-quote-line-height: 1.5;

    position: relative;
    display: grid;
    gap: var(--cs-space-4);
    width: 100%;
    margin-block: clamp(var(--cs-space-5), 4vw, var(--cs-space-8));
    padding: clamp(var(--cs-space-6), 4vw, var(--cs-space-8));
    padding-left: clamp(4.75rem, 10vw, 6.5rem);
    border: 0;
    border-top: 4px solid var(--cs-editorial-quote-accent);
    border-bottom: 1px solid var(--cs-color-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--cs-color-text-strong);
    font-size: var(--cs-editorial-quote-font-size);
    font-style: normal;
    font-weight: var(--cs-font-weight-strong);
    letter-spacing: -0.02em;
    line-height: var(--cs-editorial-quote-line-height);
    isolation: isolate;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote:not(.cs-person-quote__quote)::before {
    content: "“";
    position: absolute;
    top: calc(clamp(var(--cs-space-6), 4vw, var(--cs-space-8)) + 0.75rem);
    left: clamp(var(--cs-space-4), 3vw, var(--cs-space-6));
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--cs-editorial-quote-accent);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(5rem, 9vw, 7.25rem);
    font-weight: 700;
    line-height: 0.72;
    -webkit-mask: none;
    mask: none;
    pointer-events: none;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote:not(.cs-person-quote__quote)::after {
    content: none;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote.cs-editorial-quote--short:not(.cs-person-quote__quote) {
    --cs-editorial-quote-font-size: clamp(1.7rem, 1.35rem + 1.35vw, 2.45rem);
    --cs-editorial-quote-line-height: 1.22;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote.cs-editorial-quote--long:not(.cs-person-quote__quote) {
    padding-left: clamp(4rem, 7vw, 5rem);
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote.cs-editorial-quote--long:not(.cs-person-quote__quote)::before {
    font-size: clamp(3.5rem, 5.5vw, 4.5rem);
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote:not(.cs-person-quote__quote) > :where(p, cite, footer, small) {
    margin: 0;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote:not(.cs-person-quote__quote) > p {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-wrap: pretty;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote:not(.cs-person-quote__quote) > :where(cite, footer, small) {
    padding-top: var(--cs-space-4);
    border-top: 1px solid var(--cs-color-border);
    color: var(--cs-color-text-muted);
    font-size: var(--cs-font-size-meta);
    font-style: normal;
    font-weight: var(--cs-font-weight-strong);
    letter-spacing: 0.06em;
    line-height: 1.45;
    text-transform: uppercase;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote:not(.cs-person-quote__quote) > footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cs-space-2) var(--cs-space-3);
    align-items: center;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote:not(.cs-person-quote__quote) > footer :where(cite, small) {
    margin: 0;
    padding: 0;
    border: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote:not(.cs-person-quote__quote) a {
    transition:
        color var(--cs-duration-fast) var(--cs-ease-standard),
        text-decoration-color var(--cs-duration-fast) var(--cs-ease-standard);
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote:not(.cs-person-quote__quote) a:focus-visible {
    outline-color: var(--cs-color-focus, #1742d4);
    outline-style: solid;
    outline-width: 3px;
    outline-offset: var(--cs-focus-offset, 3px);
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote {
    display: grid;
    grid-template-areas:
        "mark quote"
        "footer footer";
    grid-template-columns: clamp(3.75rem, 7vw, 5.25rem) minmax(0, 1fr);
    gap: 0;
    width: 100%;
    margin-block: clamp(var(--cs-space-6), 4vw, var(--cs-space-9));
    padding: 0;
    overflow: visible;
    border: 0;
    border-top: 4px solid var(--cs-editorial-quote-accent);
    border-bottom: 1px solid var(--cs-color-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--cs-color-text-strong);
    isolation: isolate;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote::before {
    content: "“";
    grid-area: mark;
    align-self: start;
    padding-top: clamp(var(--cs-space-6), 4vw, var(--cs-space-8));
    color: var(--cs-editorial-quote-accent);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4.75rem, 8vw, 6.5rem);
    font-weight: 700;
    line-height: 0.72;
    pointer-events: none;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__quote {
    grid-area: quote;
    display: block;
    min-width: 0;
    margin: 0;
    padding: clamp(var(--cs-space-6), 4vw, var(--cs-space-8)) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--cs-color-text-strong);
    font-size: clamp(1.55rem, 1.25rem + 1vw, 2.15rem);
    font-style: normal;
    font-weight: var(--cs-font-weight-strong);
    letter-spacing: -0.025em;
    line-height: 1.28;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__quote::before,
:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__quote::after {
    content: none;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__quote p {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-wrap: pretty;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__footer {
    grid-area: footer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--cs-space-5) var(--cs-space-7);
    align-items: center;
    margin: 0;
    padding: var(--cs-space-5) 0;
    border: 0;
    border-top: 1px solid var(--cs-color-border);
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__identity {
    display: flex;
    min-width: 0;
    gap: var(--cs-space-4);
    align-items: center;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__media-link {
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
    transition: none;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) :where(.cs-person-quote__media-link, a.cs-person-quote__name, a.cs-person-quote__button):focus-visible {
    outline-color: var(--cs-color-focus, #1742d4);
    outline-style: solid;
    outline-width: 3px;
    outline-offset: var(--cs-focus-offset, 3px);
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) :where(.cs-person-quote__media, .cs-person-quote__photo) {
    width: clamp(3.5rem, 5vw, 4rem);
    height: clamp(3.5rem, 5vw, 4rem);
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__media {
    position: relative;
    flex: 0 0 auto;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__photo {
    display: block;
    border: 2px solid color-mix(in srgb, var(--cs-editorial-quote-accent) 40%, var(--cs-color-border));
    border-radius: 50%;
    background: var(--cs-color-surface);
    box-shadow: none;
    object-fit: cover;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__company-logo {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 1.5rem;
    height: 1.5rem;
    padding: 2px;
    border: 2px solid var(--cs-color-surface);
    border-radius: 50%;
    background: var(--cs-color-surface);
    box-shadow: none;
    object-fit: contain;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__meta {
    display: grid;
    min-width: 0;
    gap: var(--cs-space-1);
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) :is(a, span).cs-person-quote__name,
:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) :is(a, span).cs-person-quote__name:visited {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    color: var(--cs-color-text-strong);
    font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    font-weight: var(--cs-font-weight-strong);
    line-height: 1.2;
    text-decoration: none;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) a.cs-person-quote__name {
    transition: color var(--cs-duration-fast) var(--cs-ease-standard);
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) a.cs-person-quote__name:hover {
    color: var(--cs-editorial-quote-accent);
    text-decoration: none;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__title {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cs-space-2);
    align-items: baseline;
    color: var(--cs-color-text-muted);
    font-size: var(--cs-font-size-meta);
    line-height: 1.45;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) :where(.cs-person-quote__role, .cs-person-quote__company) {
    color: inherit;
    font-size: inherit;
    font-weight: 400;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__separator {
    color: var(--cs-color-text-faint);
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__actions {
    display: flex;
    gap: var(--cs-space-5);
    align-items: center;
    margin: 0;
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) a.cs-person-quote__button,
:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) a.cs-person-quote__button:visited {
    display: inline-flex;
    gap: var(--cs-space-2);
    align-items: center;
    min-height: 2.5rem;
    margin: 0;
    padding: var(--cs-space-2) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cs-color-text-muted);
    font-size: var(--cs-font-size-meta);
    font-weight: var(--cs-font-weight-strong);
    line-height: 1.25;
    text-decoration: none;
    transition:
        color var(--cs-duration-default) var(--cs-ease-standard),
        transform var(--cs-duration-default) var(--cs-ease-standard);
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) a.cs-person-quote__button:hover {
    border: 0;
    background: transparent;
    color: var(--cs-color-text-strong);
    text-decoration: none;
    transform: translateY(-1px);
}

:is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__button i {
    color: var(--cs-editorial-quote-accent);
    font-size: 0.9em;
}

@media (max-width: 480px) {
    :is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote:not(.cs-person-quote__quote) {
        padding: var(--cs-space-5) var(--cs-space-4) var(--cs-space-5) 4.25rem;
    }

    :is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote:not(.cs-person-quote__quote)::before {
        top: calc(var(--cs-space-5) + 0.4rem);
        left: var(--cs-space-4);
        font-size: 4.25rem;
    }

    :is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote.cs-editorial-quote--short:not(.cs-person-quote__quote) {
        --cs-editorial-quote-font-size: clamp(1.5rem, 7vw, 2rem);
    }

    :is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote.cs-editorial-quote--long:not(.cs-person-quote__quote) {
        padding-left: 3.75rem;
    }

    :is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote.cs-editorial-quote--long:not(.cs-person-quote__quote)::before {
        font-size: 3.25rem;
    }

    :is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    :is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote::before {
        padding-top: var(--cs-space-5);
        font-size: 4rem;
    }

    :is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__quote {
        padding-block: var(--cs-space-5);
        font-size: clamp(1.35rem, 6vw, 1.75rem);
    }

    :is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__footer {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--cs-space-3);
        padding-block: var(--cs-space-4);
    }

    :is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) .cs-person-quote__actions {
        gap: var(--cs-space-5);
        padding-left: calc(3.5rem + var(--cs-space-4));
    }
}

@media (prefers-reduced-motion: reduce) {
    :is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) blockquote:not(.cs-person-quote__quote) a,
    :is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) a.cs-person-quote__name,
    :is([data-cs-editorial-quote-scope][data-cs-editorial-quote-scope], .post-box.post-box > article) a.cs-person-quote__button {
        transition: none;
    }
}