/*
 * qot-blocks - BEM variant + column-layout system.
 *
 * Structural classes shared by every block. Block content layers on top in
 * blocks.css. Every block roots through .qot-<slug>. Token VALUES come from the
 * theme; this file references --brand-* only (Rule 1).
 */

/* ============================================================
 *  Base BEM root - box-sizing reset scoped to qot blocks only.
 * ============================================================ */

[class^="qot-"],
[class*=" qot-"] {
	box-sizing: border-box;
}

[class^="qot-"] *,
[class*=" qot-"] * {
	box-sizing: inherit;
}

/* ============================================================
 *  Layout variant: --variant-column (default)
 * ============================================================ */

[class*="qot-"][class*="--variant-column"] {
	margin-block: var(--brand-space-5);
}

[class*="qot-"][class*="--col-full"] {
	display: block;
}

[class*="qot-"][class*="--col-70-30"],
[class*="qot-"][class*="--col-50-50"],
[class*="qot-"][class*="--col-30-70"],
[class*="qot-"][class*="--col-custom"] {
	display: grid;
	gap: var(--brand-space-5);
	align-items: start;
}

[class*="qot-"][class*="--col-70-30"] { grid-template-columns: 70% 30%; }
[class*="qot-"][class*="--col-50-50"] { grid-template-columns: 50% 50%; }
[class*="qot-"][class*="--col-30-70"] { grid-template-columns: 30% 70%; }

@media (max-width: 768px) {
	[class*="qot-"][class*="--col-70-30"],
	[class*="qot-"][class*="--col-50-50"],
	[class*="qot-"][class*="--col-30-70"],
	[class*="qot-"][class*="--col-custom"] {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
 *  Layout variant: --variant-boxed
 * ============================================================ */

[class*="qot-"][class*="--variant-boxed"] {
	max-width: 800px;
	margin-inline: auto;
	margin-block: var(--brand-space-5);
	padding: var(--brand-space-5);
	background: var(--brand-surface);
	border: 1px solid var(--brand-border);
	border-radius: var(--brand-radius-md);
}

/* ============================================================
 *  Universal bg_override variants (CRO contrast).
 *  Each panel override sets background AND its contrast text colour together
 *  (Rule 3: panel + text as a pair).
 * ============================================================ */

[class*="qot-"][class*="--bg-override-surface"] { background: var(--brand-surface) !important; color: var(--brand-text) !important; }
[class*="qot-"][class*="--bg-override-light"]   { background: var(--brand-bg-light) !important; color: var(--brand-text) !important; }
[class*="qot-"][class*="--bg-override-callout"] { background: var(--brand-bg-callout) !important; color: var(--brand-text) !important; }
[class*="qot-"][class*="--bg-override-accent"]  { background: var(--brand-accent) !important; color: var(--brand-primary) !important; border-color: var(--brand-accent) !important; }
[class*="qot-"][class*="--bg-override-warning"] { background: color-mix(in srgb, var(--brand-warning) 22%, var(--brand-surface)) !important; color: var(--brand-text) !important; border-color: var(--brand-warning) !important; }
[class*="qot-"][class*="--bg-override-success"] { background: color-mix(in srgb, var(--brand-success) 15%, var(--brand-surface)) !important; color: var(--brand-text) !important; border-color: var(--brand-success) !important; }
[class*="qot-"][class*="--bg-override-primary"] { background: var(--brand-primary) !important; color: var(--brand-text-on-dark) !important; border-color: var(--brand-primary) !important; }

/* Radius overrides */
[class*="qot-"][class*="--radius-override-sm"]   { border-radius: var(--brand-radius-sm) !important; }
[class*="qot-"][class*="--radius-override-md"]   { border-radius: var(--brand-radius-md) !important; }
[class*="qot-"][class*="--radius-override-lg"]   { border-radius: var(--brand-radius-lg) !important; }
[class*="qot-"][class*="--radius-override-pill"] { border-radius: var(--brand-radius-pill) !important; }

/* Shadow overrides. "none" included: shadow_override defaults to the
   non-empty value none, so the modifier always emits and must actually
   remove the block default shadow (Reviewer note N1). */
[class*="qot-"][class*="--shadow-override-none"] { box-shadow: var(--brand-shadow-none) !important; }
[class*="qot-"][class*="--shadow-override-sm"] { box-shadow: var(--brand-shadow-sm) !important; }
[class*="qot-"][class*="--shadow-override-md"] { box-shadow: var(--brand-shadow-md) !important; }