/* blz_quote_split — evergreen quote card + credential badges, ported from
   editorial-tech-green.html (BENTO block: .q-split/.q-creds plus the .b/.b-quote
   rules they depend on, copied here scoped under .q-split so the module stands
   alone), tokens → --blz-*. Editor-set badge heights ride inline styles and
   deliberately win over the design's clamp() defaults below. */

.q-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; align-items: stretch; margin-top: 56px; }
.q-split .q-creds { display: flex; align-items: center; justify-content: center; gap: clamp(30px, 4.5vw, 60px); flex-wrap: wrap; padding: 20px 0; }
.q-creds .avvo-link { display: block; transition: transform .3s; }
.q-creds .avvo-link:hover { transform: translateY(-4px); }
.q-creds .avvo-link svg { display: block; height: clamp(104px, 10.5vw, 144px); width: auto; }
.q-creds .avvo-link img { display: block; width: auto; }
.q-creds .gtown { height: clamp(70px, 7vw, 96px); width: auto; }
@media (max-width: 900px) { .q-split { grid-template-columns: 1fr; } }

/* ---------- the quote card (base .b + .b-quote, scoped) ---------- */
.q-split .b { border-radius: var(--blz-radius); padding: 36px 34px; border: 1px solid var(--blz-line); background: var(--blz-card-bg); transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s; position: relative; overflow: hidden; }
.q-split .b:hover { transform: translateY(-6px); box-shadow: var(--blz-shadow); }
.q-split .b-quote { background: var(--blz-accent); color: #F0EBDF; border: none; display: flex; flex-direction: column; justify-content: center; padding: 34px 38px; }
.q-split .b-quote::before { content: "\201C"; display: block; font-family: var(--blz-serif); font-size: 70px; line-height: .62; color: var(--blz-accent-3); opacity: .6; margin-bottom: 10px; }
.q-split .b-quote blockquote { font-family: var(--blz-serif); font-style: italic; font-weight: 320; font-size: clamp(18px, 1.9vw, 23px); line-height: 1.5; border: none !important; margin: 0 !important; padding: 0 !important; }
.q-split .b-quote .who { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.q-split .b-quote .who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(244, 240, 232, .35); }
.q-split .b-quote .who b { font-size: 14px; display: block; }
.q-split .b-quote .who span { font-size: 12.5px; color: rgba(240, 235, 223, .7); }