/*
 * qot-blocks - per-block styling. Self-contained, low-specificity, tokens only.
 *
 * 5-rule CSS contract (CTO_OS Section 7.0):
 *  1. Tokens only. Zero hex literals. Every colour reads a --brand-* var.
 *  2. Each block self-contained + low-specificity. Inherited elements reset so
 *     Kadence parent globals cannot bleed in. The theme carries ZERO block CSS.
 *  3. Panel + text declared as a pair (background and its contrast colour
 *     together) so unreadable combinations are structurally impossible.
 *  4. No venture defaults here (those come from theme filters).
 *  5. Guarded by tests/smoke_test.py on the build.
 */

/* ============================================================
 *  Quote Card
 *  Three style variants, render-matched modifiers (dead-selector fix):
 *    .qot-quote-card--large   (default hero pull-quote)
 *    .qot-quote-card--compact (small inline)
 *    .qot-quote-card--card    (boxed feature, gold edge)
 *  Navy Cormorant quote text, Sage attribution name. The on-page block is the
 *  LIGHT register (pearl/sage/white); the navy register belongs to the 1080x1080
 *  quote-card IMAGE asset, not this block (CMO caveat 1).
 * ============================================================ */

/* Base: shared chrome + the default (large) treatment. */
.qot-quote-card {
	position: relative;
	background-color: var(--brand-pullquote-bg);
	color: var(--brand-text);
	border: 1px solid var(--brand-border);
	border-left: 4px solid var(--brand-success);
	border-radius: var(--brand-radius-md);
	box-shadow: var(--brand-shadow-sm);
	padding: var(--brand-space-5) var(--brand-space-6);
	margin: var(--brand-space-6) 0;
}

/* Reset inherited elements - kill Kadence's global blockquote left-bar and
 * default figure/figcaption margins so no parent-theme chrome bleeds through
 * (Rule 2). Scoped to the block; no !important needed because we target our own
 * descendants directly. */
.qot-quote-card .qot-quote-card__quote {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	quotes: none;
}
.qot-quote-card .qot-quote-card__quote::before,
.qot-quote-card .qot-quote-card__quote::after {
	content: none;
}

.qot-quote-card__text {
	font-family: var(--brand-font-display);
	font-size: var(--brand-text-2xl);
	font-style: italic;
	line-height: var(--brand-line-height-display);
	color: var(--brand-text);
	margin: 0 0 var(--brand-space-4);
}

.qot-quote-card__attribution {
	display: flex;
	flex-direction: column;
	gap: var(--brand-space-1);
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-sm);
	line-height: var(--brand-line-height-body);
}

/* Sage attribution name - colour + line break do the separating work that the
 * banned em-dash used to do (CMO caveat 3). Linked or plain, the name is Sage.
 * Uses --brand-success-text (WCAG-AA darkened sage, CMO sign-off 2026-06-04):
 * sage-as-small-text needs the darker value; --brand-success stays for fills,
 * borders, and badges. Hover never lightens below AA. */
.qot-quote-card__attribution-name {
	font-weight: var(--brand-font-weight-semibold);
	color: var(--brand-success-text);
	font-style: normal;
	text-decoration: none;
}
a.qot-quote-card__attribution-name:hover,
a.qot-quote-card__attribution-name:focus {
	color: var(--brand-success-text);
	text-decoration: underline;
}
.qot-quote-card__attribution-source {
	color: var(--brand-text-muted);
}
.qot-quote-card__attribution-source em {
	font-style: italic;
}
.qot-quote-card__attribution-context {
	color: var(--brand-text-muted);
	font-size: var(--brand-text-xs);
}

.qot-quote-card__commentary {
	margin-top: var(--brand-space-4);
	padding-top: var(--brand-space-4);
	border-top: 1px solid var(--brand-border);
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-base);
	line-height: var(--brand-line-height-callout);
	color: var(--brand-text-body);
}

.qot-quote-card__numbering {
	display: inline-block;
	margin-bottom: var(--brand-space-3);
	padding: var(--brand-space-1) var(--brand-space-3);
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-xs);
	font-weight: var(--brand-font-weight-semibold);
	color: var(--brand-text-on-dark);
	background: var(--brand-success);
	border-radius: var(--brand-radius-pill);
}

/* Variant: compact - smaller type, tighter padding, sage edge. */
.qot-quote-card--compact {
	padding: var(--brand-space-4) var(--brand-space-5);
	margin: var(--brand-space-5) 0;
}
.qot-quote-card--compact .qot-quote-card__text {
	font-size: var(--brand-text-lg);
}

/* Variant: card - boxed feature on white surface with gold edge + lifted
 * shadow. This is the depth fix for "panels too flat" (CMO caveat 1): white
 * surface contrasts the pearl body, gold edge signals a highlighted quote, and
 * the medium shadow lifts it off the page. Panel + text declared together. */
.qot-quote-card--card {
	background-color: var(--brand-surface);
	color: var(--brand-text);
	border: 1px solid var(--brand-border);
	border-left: 4px solid var(--brand-accent);
	box-shadow: var(--brand-shadow-md);
}

/* ============================================================
 *  Affiliate Disclosure
 *  Navy-bordered reader note. Default copy + URL come from theme filters
 *  (rendered by render.php); this is chrome only.
 * ============================================================ */

.qot-affiliate-disclosure {
	background: var(--brand-bg-light);
	color: var(--brand-text-body);
	border: 1px solid var(--brand-border);
	border-left: 4px solid var(--brand-primary);
	border-radius: var(--brand-radius-md);
	padding: var(--brand-space-4) var(--brand-space-5);
	margin: var(--brand-space-5) 0;
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-sm);
	line-height: var(--brand-line-height-body);
}
.qot-affiliate-disclosure p {
	margin: 0;
}
.qot-affiliate-disclosure strong {
	color: var(--brand-text);
	font-weight: var(--brand-font-weight-semibold);
}
.qot-affiliate-disclosure a {
	color: var(--brand-primary);
	text-decoration: underline;
}
.qot-affiliate-disclosure a:hover,
.qot-affiliate-disclosure a:focus {
	color: var(--brand-primary-dark);
}

/* ============================================================
 *  Related Authors + Related Listicles
 *  Two-column card grid, gold left-edge, name over muted description.
 * ============================================================ */

.qot-related-authors__heading,
.qot-related-listicles__heading {
	font-family: var(--brand-font-display);
	font-size: var(--brand-text-3xl);
	color: var(--brand-text);
	line-height: var(--brand-line-height-display);
	margin: 0 0 var(--brand-space-3);
}
.qot-related-authors__intro,
.qot-related-listicles__intro {
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-base);
	color: var(--brand-text-muted);
	margin: 0 0 var(--brand-space-4);
}

.qot-related-authors__grid,
.qot-related-listicles__grid {
	list-style: none;
	margin: var(--brand-space-5) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--brand-space-4);
}
@media (max-width: 600px) {
	.qot-related-authors__grid,
	.qot-related-listicles__grid {
		grid-template-columns: 1fr;
	}
}
.qot-related-authors__item,
.qot-related-listicles__item {
	margin: 0;
	padding: 0;
}

/* The card is an <a>. Reset the inherited prose underline (Kadence's
 * .entry-content a is more specific than a plain class, so this reset is the
 * sanctioned !important per Rule 2: neutralise a parent-theme global, not a
 * specificity war with our own theme). */
.qot-related-authors__card,
.qot-related-listicles__card {
	display: block;
	height: 100%;
	text-decoration: none !important;
	background: var(--brand-surface);
	color: var(--brand-text);
	border: 1px solid var(--brand-border);
	border-left: 4px solid var(--brand-accent);
	border-radius: var(--brand-radius-md);
	padding: var(--brand-space-4) var(--brand-space-5);
	box-shadow: var(--brand-shadow-sm);
	transition: transform 140ms ease, box-shadow 140ms ease;
}
.qot-related-authors__card:hover,
.qot-related-listicles__card:hover,
.qot-related-authors__card:focus,
.qot-related-listicles__card:focus {
	transform: translateY(-2px);
	box-shadow: var(--brand-shadow-md);
}

/* Card title stays NAVY (not sage) - the sage rule is quote-attribution-specific
 * (CMO caveat 4). Here the name is a nav title. */
.qot-related-authors__name,
.qot-related-listicles__title {
	display: block;
	font-family: var(--brand-font-display);
	font-size: var(--brand-text-xl);
	font-weight: var(--brand-font-weight-semibold);
	color: var(--brand-text);
	line-height: var(--brand-line-height-display);
	margin: 0 0 var(--brand-space-2);
}
.qot-related-authors__context,
.qot-related-listicles__context {
	display: block;
	font-family: var(--brand-font-body);
	font-size: var(--brand-text-sm);
	font-weight: var(--brand-font-weight-body);
	color: var(--brand-text-muted);
	line-height: var(--brand-line-height-body);
}
.qot-related-authors__context em,
.qot-related-listicles__context em {
	font-style: italic;
}

/* ============================================================
 *  Schema Graph
 *  Emits a script type=application/ld+json only. No front-end visual.
 *  An editor-only note lives in editor.css.
 * ============================================================ */