/* pullquote — @tokens: --pullquote-mark-size, --pullquote-mark-offset, --pullquote-measure

   A large editorial quote block pulled out of running copy — a designer drops it
   inside a `.hzo-container` (it is NOT a full-bleed band; the section supplies the
   padding + gutter). Root is a semantic <blockquote>. Distinct from
   `.hzo-testimonial` (a card with an avatar/rating for social proof); a pullquote
   is bare typographic emphasis. Primitive: CSS-only, not interactive (no
   focus/disabled idioms).

   Token-only: the quote reads --font-heading + the big end of the L1 --fs-*
   ladder + heading ink; the decorative mark + accent bar read --border / --brand
   so a per-client recolor + a dark archetype re-theme from :root. Two values have
   no semantic role — the oversized quote-mark glyph and the centered readability
   measure — so they're component tokens with literal fallbacks (the icon-button.css
   dial pattern). The glyph's optical baseline nudge is a component token too. */
.hzo-pullquote {
    margin: 0;
    color: var(--text-heading);
}

/* Optional oversized opening quote mark — low-opacity chrome in the border ink
   so it reads as decoration, not content. Set the glyph in markup (an aria-hidden
   ::before glyph carries no meaning a screen reader needs). */
.hzo-pullquote__quote::before {
    content: "\201C";               /* “ — decorative opening double-quote */
    font-family: var(--font-heading);
    font-size: var(--pullquote-mark-size, var(--fs-900));
    line-height: var(--lh-none);
    color: var(--border);
    opacity: var(--opacity-muted);
    margin-right: var(--space-2xs);
    vertical-align: var(--pullquote-mark-offset, -0.15em);
}

/* The quote itself — large, serif display face, relaxed leading for readability
   at size. Sizes from the L1 ladder rather than a fixed px. */
.hzo-pullquote__quote {
    font-family: var(--font-heading);
    font-size: var(--fs-500);
    font-weight: var(--fw-500);
    line-height: var(--lh-relaxed);
    color: var(--text-heading);
    margin: 0;
}

/* Attribution — muted, small, upright (not italic). Prefix the em-dash in markup. */
.hzo-pullquote__cite {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-200);
    font-style: normal;
    line-height: var(--lh-normal);
    color: var(--text-muted);
    margin: var(--space-md) 0 0;
}

/* Centered variant — also caps + centers the quote to a readable measure. */
.hzo-pullquote--center {
    text-align: center;
}
.hzo-pullquote--center .hzo-pullquote__quote {
    max-width: var(--pullquote-measure, 32ch);
    margin-inline: auto;
}

/* Brand variant — a quieter inline treatment: a brand accent bar on the left
   (the callout.css idiom) instead of the oversized mark. */
.hzo-pullquote--brand {
    padding-left: var(--space-lg);
    border-left: var(--border-3) solid var(--brand);
}
.hzo-pullquote--brand .hzo-pullquote__quote::before {
    content: none;
}