/* Hero Layout: Quote (3.3.9, CUSTOM-TEMPLATE.md D8). The voice leads: the page title is a small, quiet line and the
   pull quote is the display type. Portrait beside it, or a darkened photo behind it. Restyle with Branding and a
   site's css/screen.css; --ct6-accent colors the quote marks. */
.ct2-hero-quote { --ct6-accent: var(--color-main); }
.ct2-hero-quote.is-dark, .ct2-hero-quote.ct2-hp-main, .ct2-hero-quote:has(.ct6-qt--behind) { --ct6-accent: currentColor; }
.ct2-hero-quote.is-full:not(.cc-fit) { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; }
.ct2-hero-quote .ct6-qt-wrap { padding-bottom: clamp(56px, 7vw, 120px); }

/* small title line (the H1) */
.ct6-qt-title { font-size: clamp(18px, 1.5vw, 24px) !important; line-height: 1.3 !important; letter-spacing: 0 !important; font-family: var(--font-headlines, var(--font-titles)); margin: 0 0 clamp(20px, 2vw, 40px) !important; text-transform: none !important; text-wrap: wrap; }
.ct6-qt-title::before { content: ""; display: inline-block; vertical-align: middle; width: 48px; height: 1px; margin-right: 16px; background: currentColor; opacity: .5; }

/* the quote */
.ct6-qt-figure { margin: 0; }
.ct6-qt-quote { margin: 0; padding: 0; border: 0; background: none; quotes: none; }
.ct6-qt-quote > div { margin: 0; max-width: 18em; font-family: var(--font-headlines, var(--font-titles)); font-size: clamp(34px, 4.4vw, 84px); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; text-indent: -.42em; color: inherit; }
.ct6-qt-quote > div::before { content: "\201C"; color: var(--ct6-accent); display: inline-block; }
.ct6-qt-quote > div::after { content: "\201D"; color: var(--ct6-accent); }
.ct6-qt--none .ct6-qt-quote > div { font-size: clamp(40px, 5.4vw, 104px); max-width: 16em; }
.is-dark .ct6-qt-quote > div::before, .is-dark .ct6-qt-quote > div::after, .ct2-hp-main .ct6-qt-quote > div::before, .ct2-hp-main .ct6-qt-quote > div::after, .ct6-qt--behind .ct6-qt-quote > div::before, .ct6-qt--behind .ct6-qt-quote > div::after { opacity: .7; }
.ct6-qt-cite { position: relative; display: flex; flex-direction: column; gap: 2px; margin-top: 24px; padding-top: 16px; }
.ct6-qt-cite::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 2px; background: currentColor; transform-origin: left; }
.ct6-qt-name { font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1.4; }
.ct6-qt-role { font-family: var(--font-body); font-size: 15px; line-height: 1.4; opacity: .72; }
.ct6-qt-text .ct2-hero-sentence { max-width: 34em; margin-top: 28px; }

/* beside: quote left, portrait right (Photo Side left swaps the columns) */
.ct6-qt--beside { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 120px); align-items: end; }
.ct6-qt--beside.ct6-qt--photo-left { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.ct6-qt--beside.ct6-qt--photo-left .ct6-qt-media { order: -1; }
.ct6-qt-text, .ct6-qt-media { min-width: 0; }
.ct6-qt-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--img-radius, 0); }
.ct6-qt-credit { margin: 12px 0 0; font-size: 14px; line-height: 1.4; opacity: .7; }

/* behind: a darkened photo, text at the bottom */
.ct2-hero-quote:has(.ct6-qt--behind), .ct2-hero-quote:has(.ct6-qt-bg) { position: relative; }
.ct6-qt-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ct6-qt-bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ct6-qt-shade { position: absolute; inset: 0; background: var(--ct2-hero-shade, #000); }
.ct6-qt-bg ~ .ct6-qt-wrap { position: relative; z-index: 2; color: #fff; }
.ct2-hero-quote:has(.ct6-qt--behind) { color: #fff; }
.ct2-hero-quote:has(.ct6-qt--behind) { min-height: max(78svh, 560px); display: flex; flex-direction: column; justify-content: flex-end; }
.ct2-hero-quote.is-full:has(.ct6-qt--behind) { min-height: 100svh; box-sizing: border-box; }
.ct6-qt--behind { display: block; }
.ct6-qt--behind .ct6-qt-quote > div { max-width: 16em; }

/* motion moment: the opening mark settles and the cite rule draws. Only the decoration animates. */
@media (prefers-reduced-motion: no-preference) {
	.ct6-qt-quote > div::before { animation: ct6-qt-mark .7s cubic-bezier(.2, .7, 0, 1) .25s both; }
	.ct6-qt-cite::before { animation: ct6-qt-rule .6s cubic-bezier(.2, .7, 0, 1) .65s both; }
}
@keyframes ct6-qt-mark { from { opacity: 0; transform: translateY(.12em); } }
@keyframes ct6-qt-rule { from { transform: scaleX(0); } }

@media (max-width: 1024px) {
	.ct6-qt-img { aspect-ratio: 1 / 1; }
	.ct2-hero-quote .ct6-qt-wrap { padding-bottom: 40px; }
	.ct6-qt--beside, .ct6-qt--beside.ct6-qt--photo-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
	.ct6-qt--beside.ct6-qt--photo-left { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
/* phones and small tablets: title, quote, then [photo | cite], then the rest */
@media (max-width: 767px) {
	.ct6-qt-quote > div { font-size: clamp(30px, 8.4vw, 44px); }
	.ct6-qt--none .ct6-qt-quote > div, .ct6-qt--behind .ct6-qt-quote > div { font-size: clamp(30px, 8.4vw, 44px); }
	.ct6-qt--beside, .ct6-qt--beside.ct6-qt--photo-left { grid-template-columns: 44% minmax(0, 1fr); gap: 0 20px; align-items: end; }
	.ct6-qt--beside .ct6-qt-text, .ct6-qt--beside .ct6-qt-figure { display: contents; }
	.ct6-qt--beside .ct6-qt-text > .ct2-hero-eyebrow { grid-column: 1 / -1; grid-row: 1; }
	.ct6-qt--beside .ct6-qt-text > .ct2-hero-title { grid-column: 1 / -1; grid-row: 2; }
	.ct6-qt--beside .ct6-qt-quote { grid-column: 1 / -1; grid-row: 3; }
	.ct6-qt--beside .ct6-qt-media { grid-column: 1; grid-row: 4; order: 0; margin-top: 28px; }
	.ct6-qt--beside .ct6-qt-cite { grid-column: 2; grid-row: 4; margin-top: 0; }
	.ct6-qt--beside .ct6-qt-text > .ct2-hero-sentence { grid-column: 1 / -1; grid-row: 5; margin-top: 32px; }
	.ct6-qt--beside .ct6-qt-text > .ct2-hero-buttons { grid-column: 1 / -1; grid-row: 6; }
	.ct2-hero-quote:has(.ct6-qt--behind) { min-height: 88svh; }
}