/* =========================================================================
   16 · STORY — featured pull-quote (used on About page mainly)
   Reference: V4-BUILD-SPEC §4 #10 (Featured story in Customizer §10)
   ========================================================================= */

.jj-story {
	background: var(--jj-bg-warm);
	padding-block: var(--section-y);
}

.jj-story__inner {
	display: grid;
	gap: var(--sp-8);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 48em) {
	.jj-story__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		gap: var(--sp-12);
	}
}

.jj-story__media {
	position: relative;
	max-width: 400px;
	margin: 0 auto;
}
@media (min-width: 48em) {
	.jj-story__media { margin: 0; }
}
.jj-story__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.jj-story__placeholder {
	width: 100%;
	aspect-ratio: 4 / 5;
	background: var(--jj-primary);
	color: var(--jj-accent-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-lg);
}

.jj-story__copy {
	min-width: 0;
}

.jj-story__quote {
	font-family: var(--jj-font-serif);
	font-size: var(--fs-xl);
	font-weight: 500;
	line-height: 1.4;
	color: var(--jj-text);
	margin: 0;
	border: 0;
	padding: 0;
	position: relative;
}
.jj-story__quote-mark {
	display: block;
	color: var(--jj-accent-gold);
	margin-bottom: var(--sp-3);
}
.jj-story__cite {
	display: block;
	margin-top: var(--sp-5);
	font-family: var(--jj-font-sans);
	font-style: normal;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--jj-muted);
	letter-spacing: 0.02em;
}