/**
 * PX Quote - Static CSS
 *
 * Lightweight inline quote with accent line, text, and author persona.
 * Supports two color variants: default (dark) and white.
 *
 * Module wrapper (.px-quote) adds white card + decorative quote icons.
 * The reusable component (.px-quote__figure) stays unstyled so it works
 * standalone inside other modules (e.g. Hero).
 */


/* ── Module outer section ─────────────────────── */

.px-quote {
	margin: var(--space-d3) 0;
}


/* ── Card (inner container) ───────────────────── */

.px-quote__card {
	max-width: var(--row-width);
	width: 100%;
	margin: 0 auto;
	background-color: var(--white);
	padding: var(--space-d3);
	box-shadow: var(--shadow-elevated);
	position: relative;
}

.px-quote__card .px-quote__figure {
	position: relative;
	z-index: 1;
	padding: var(--space-d15) var(--space-d2);
}


/* ── Decorative quote icons ──────────────────── */

.px-quote__icon {
	position: absolute;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--sky-blue);
	pointer-events: none;
	user-select: none;
}

.px-quote__icon--open {
	top: var(--space-d075);
	left: var(--space-d075);
}

.px-quote__icon--close {
	bottom: var(--space-d075);
	right: var(--space-d075);
	transform: rotate(180deg);
}


/* ── Figure (quote content) ───────────────────── */

.px-quote__figure {
	display: flex;
	flex-direction: column;
	gap: var(--space-d075);
	margin: 0;
}

.px-quote__figure--white {
	gap: var(--space-d15);
	margin: var(--space-d3) 0;
}


/* ── Quote body (accent + text) ───────────────── */

.px-quote__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-d1);
}


/* ── Accent line ──────────────────────────────── */

.px-quote__accent {
	width: 60px;
	height: 5px;
	background: var(--action);
	flex-shrink: 0;
}


/* ── Quote text ───────────────────────────────── */

.px-quote__text {
	margin: 0;
}

.px-quote__text p {
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: var(--text-d125);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--gray-dark);
	margin: 0;
}


/* ── Author (persona) ─────────────────────────── */

.px-quote__author {
	display: flex;
	align-items: center;
	gap: var(--space-d075);
}

.px-quote__avatar {
	width: var(--space-d5);
	height: var(--space-d5);
	border-radius: var(--radius-full);
	object-fit: cover;
	flex-shrink: 0;
}

.px-quote__meta {
	display: flex;
	flex-direction: column;
}

.px-quote__name {
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	font-size: var(--text-d125);
	line-height: 1.3;
	letter-spacing: -0.25px;
	color: var(--gray-dark);
}

.px-quote__subtitle {
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: var(--text-body);
	line-height: 1.75;
	color: var(--gray-dark);
}


/* ── Color variant: white ─────────────────────── */

.px-quote__figure--white .px-quote__text p {
	font-size: var(--text-d2);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-snug);
	letter-spacing: -0.4px;
	color: var(--white);
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45);
}

.px-quote__figure--white .px-quote__name,
.px-quote__figure--white .px-quote__subtitle {
	color: var(--white);
}