/* components/subject-feature/subject-feature.css
 *
 * Two-column "introduce a subject" block.
 *   --pair-overlap : hero photo + smaller overlap card on its top-left
 *   --single-cta   : single hero photo, 1–2 buttons under the body
 *
 * Mirror via .mvc-subject-feature--img-left | --img-right.
 * Overlap image shape via .mvc-subject-feature--overlap-{shape}.
 */

/* ── Shared shell ───────────────────────────────────────────────────────── */

.mvc-subject-feature__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	align-items: center;
}

@media (min-width: 900px) {
	.mvc-subject-feature__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-12);
	}

	.mvc-subject-feature--img-left .mvc-subject-feature__media { grid-column: 1; grid-row: 1; }
	.mvc-subject-feature--img-left .mvc-subject-feature__body  { grid-column: 2; grid-row: 1; }

	.mvc-subject-feature--img-right .mvc-subject-feature__media { grid-column: 2; grid-row: 1; }
	.mvc-subject-feature--img-right .mvc-subject-feature__body  { grid-column: 1; grid-row: 1; }
}

/* ── Body column ────────────────────────────────────────────────────────── */

.mvc-subject-feature__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.mvc-subject-feature__eyebrow {
	margin: 0;
}

.mvc-subject-feature__title {
	margin: 0;
	font-size: var(--text-4xl);
	line-height: var(--leading-tight);
}

.mvc-subject-feature__copy {
	color: var(--color-text-muted);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
}

.mvc-subject-feature__copy p {
	margin: 0 0 var(--space-3);
}

.mvc-subject-feature__copy p:last-child {
	margin-bottom: 0;
}

.mvc-subject-feature__signature {
	margin-block-start: var(--space-4);
}

.mvc-subject-feature__signature-img {
	max-width: 220px;
	height: auto;
	display: block;
}

.mvc-subject-feature__byline {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-block-start: var(--space-2);
}

.mvc-subject-feature__byline-name {
	font-weight: var(--font-weight-bold, 700);
	font-size: var(--text-base);
	color: var(--color-text);
}

.mvc-subject-feature__byline-title {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* ── Media column — pair-overlap ────────────────────────────────────────── */

.mvc-subject-feature--pair-overlap .mvc-subject-feature__media {
	position: relative;
	padding-block-start: var(--space-8);
	padding-inline-start: var(--space-8);
}

.mvc-subject-feature--pair-overlap .mvc-subject-feature__hero {
	overflow: hidden;
	border-radius: var(--radius-lg, var(--radius-md));
	box-shadow: var(--shadow-md);
	aspect-ratio: 4 / 3;
}

.mvc-subject-feature--pair-overlap .mvc-subject-feature__hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mvc-subject-feature--pair-overlap .mvc-subject-feature__overlap {
	position: absolute;
	top: 0;
	left: 0;
	width: 42%;
	max-width: 220px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-bg, #fff);
	padding: var(--space-2);
	box-shadow: var(--shadow-lg);
	border-radius: var(--radius-md);
}

.mvc-subject-feature--pair-overlap .mvc-subject-feature__overlap-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

/* Overlap shape variants — each fully scoped */
.mvc-subject-feature--pair-overlap.mvc-subject-feature--overlap-square .mvc-subject-feature__overlap {
	aspect-ratio: 1 / 1;
	border-radius: 0;
}
.mvc-subject-feature--pair-overlap.mvc-subject-feature--overlap-square .mvc-subject-feature__overlap-img {
	border-radius: 0;
}

.mvc-subject-feature--pair-overlap.mvc-subject-feature--overlap-rectangle .mvc-subject-feature__overlap {
	aspect-ratio: 4 / 5;
	border-radius: 0;
}
.mvc-subject-feature--pair-overlap.mvc-subject-feature--overlap-rectangle .mvc-subject-feature__overlap-img {
	border-radius: 0;
}

.mvc-subject-feature--pair-overlap.mvc-subject-feature--overlap-rounded-rect .mvc-subject-feature__overlap {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-md);
}

.mvc-subject-feature--pair-overlap.mvc-subject-feature--overlap-heavy-rounded .mvc-subject-feature__overlap {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-xl, 24px);
}

.mvc-subject-feature--pair-overlap.mvc-subject-feature--overlap-circle .mvc-subject-feature__overlap {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

.mvc-subject-feature--pair-overlap.mvc-subject-feature--overlap-oval .mvc-subject-feature__overlap {
	aspect-ratio: 4 / 5;
	border-radius: 50%;
}

.mvc-subject-feature--pair-overlap.mvc-subject-feature--overlap-natural .mvc-subject-feature__overlap {
	aspect-ratio: auto;
	border-radius: var(--radius-md);
}
.mvc-subject-feature--pair-overlap.mvc-subject-feature--overlap-natural .mvc-subject-feature__overlap-img {
	height: auto;
	aspect-ratio: auto;
}

/* When image is on the LEFT, anchor the overlap to top-right of the hero
   so it still reads as an "intentional" composition rather than colliding
   with the body column. */
.mvc-subject-feature--pair-overlap.mvc-subject-feature--img-left .mvc-subject-feature__media {
	padding-inline-start: 0;
	padding-inline-end: var(--space-8);
}
.mvc-subject-feature--pair-overlap.mvc-subject-feature--img-left .mvc-subject-feature__overlap {
	left: auto;
	right: 0;
}

/* ── Media column — single-cta ──────────────────────────────────────────── */

.mvc-subject-feature--single-cta .mvc-subject-feature__hero {
	overflow: hidden;
	border-radius: var(--radius-lg, var(--radius-md));
	box-shadow: var(--shadow-md);
	aspect-ratio: 4 / 3;
}

.mvc-subject-feature--single-cta .mvc-subject-feature__hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mvc-subject-feature--single-cta .mvc-subject-feature__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-start: var(--space-4);
}