/* components/quick-answer/quick-answer.css
 *
 * AEO quick-answer block. Four visible style variants selected per post via
 * data-style. The machine layer (data-aeo) carries no styling — it is purely
 * a hook for answer engines and the MVC scanner.
 *
 * Every rule is scoped under its [data-style="..."] ancestor so variants never
 * leak into each other. Dark-preset contrast is handled globally in
 * bg-presets.css; do not duplicate per-variant colour overrides here.
 *
 *   minimal   = styled label + answer, no surface (default)
 *   card      = bordered/elevated surface
 *   editorial = large serif lead paragraph, subdued label
 *   luxury    = floating glass / premium treatment
 */

/* ── Shared base ──────────────────────────────────────────────────────────── */
.mvc-quick-answer {
	margin: 0 0 var(--space-6, 1.5rem);
}

.mvc-quick-answer__label {
	margin: 0 0 var(--space-2, 0.5rem);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mvc-color-muted, #6b7280);
}

.mvc-quick-answer__text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--mvc-color-text, #111827);
}

/* ── minimal ──────────────────────────────────────────────────────────────── */
.mvc-quick-answer[data-style="minimal"] .mvc-quick-answer__text {
	font-weight: 500;
}

/* ── card ─────────────────────────────────────────────────────────────────── */
.mvc-quick-answer[data-style="card"] {
	padding: var(--space-6, 1.5rem);
	background: var(--mvc-color-surface, #f9fafb);
	border: 1px solid var(--mvc-color-border, #e5e7eb);
	border-radius: var(--radius, 12px);
}

.mvc-quick-answer[data-style="card"] .mvc-quick-answer__label {
	color: var(--mvc-color-accent, #2563eb);
}

/* ── editorial ────────────────────────────────────────────────────────────── */
.mvc-quick-answer[data-style="editorial"] {
	padding-left: var(--space-6, 1.5rem);
	border-left: 3px solid var(--mvc-color-accent, #2563eb);
}

.mvc-quick-answer[data-style="editorial"] .mvc-quick-answer__label {
	font-size: 0.68rem;
	opacity: 0.7;
}

.mvc-quick-answer[data-style="editorial"] .mvc-quick-answer__text {
	font-family: var(--mvc-font-accent, var(--mvc-font-heading, Georgia, serif));
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.4;
}

/* ── luxury / glass ───────────────────────────────────────────────────────── */
.mvc-quick-answer[data-style="luxury"] {
	padding: var(--space-8, 2rem);
	border-radius: var(--radius, 16px);
	background: color-mix(in srgb, var(--mvc-color-surface, #ffffff) 70%, transparent);
	border: 1px solid color-mix(in srgb, var(--mvc-color-border, #e5e7eb) 60%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.mvc-quick-answer[data-style="luxury"] .mvc-quick-answer__label {
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	color: var(--mvc-color-accent, #b08d57);
}

.mvc-quick-answer[data-style="luxury"] .mvc-quick-answer__text {
	font-family: var(--mvc-font-accent, var(--mvc-font-heading, Georgia, serif));
	font-size: 1.375rem;
	font-weight: 300;
	line-height: 1.45;
}

/* ── archive context ──────────────────────────────────────────────────────── */
/* On archive cards the block is a short supporting line, never the focal point. */
.mvc-quick-answer[data-context="archive"] {
	margin-bottom: var(--space-3, 0.75rem);
}

.mvc-quick-answer[data-context="archive"] .mvc-quick-answer__text {
	font-size: 0.95rem;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mvc-quick-answer[data-context="archive"][data-style="editorial"] .mvc-quick-answer__text,
.mvc-quick-answer[data-context="archive"][data-style="luxury"] .mvc-quick-answer__text {
	font-size: 1.05rem;
}