/* Two Column section. */

.rally-two-column { padding-block: var(--rally-section-padding-y); }
.rally-two-column--pad-compact  { padding-block: var(--rally-space-5); }
.rally-two-column--pad-spacious { padding-block: var(--rally-space-9); }

.rally-two-column--bg-white { background: var(--rally-white); }
.rally-two-column--bg-gray  { background: var(--rally-gray-light); }
.rally-two-column--bg-black { background: var(--rally-black); color: var(--rally-white); }
.rally-two-column--bg-black .rally-two-column__heading { color: var(--rally-white); }

.rally-two-column__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rally-space-6);
	align-items: center;
}

@media (min-width: 768px) {
	.rally-two-column__inner {
		/* Image dominates: ~62% of the row, body ~38%. Photo is the focal
		 * point with text reading as supporting copy. */
		grid-template-columns: 1.6fr 1fr;
		gap: var(--rally-space-7);
	}
	.rally-two-column--image-right .rally-two-column__inner {
		grid-template-columns: 1fr 1.6fr;
	}
	.rally-two-column--image-right .rally-two-column__media {
		order: 2;
	}
}

/* ============================================================
 * Scroll-reveal animation.
 *   - Image slides in from its side (left or right)
 *   - Body fades up from below
 *   - Triggers when the section enters the viewport (via JS observer)
 *   - prefers-reduced-motion shortcircuits everything to visible
 * ============================================================ */

.rally-two-column__media,
.rally-two-column__body {
	opacity: 0;
	transition:
		opacity 700ms var(--rally-ease),
		transform 700ms var(--rally-ease);
	will-change: opacity, transform;
}

.rally-two-column--image-left .rally-two-column__media  { transform: translateX(-32px); }
.rally-two-column--image-right .rally-two-column__media { transform: translateX(32px); }
.rally-two-column__body { transform: translateY(24px); }

.rally-two-column.is-visible .rally-two-column__media,
.rally-two-column.is-visible .rally-two-column__body {
	opacity: 1;
	transform: none;
}

/* Stagger the body slightly so the image leads. */
.rally-two-column.is-visible .rally-two-column__body {
	transition-delay: 150ms;
}

@media (prefers-reduced-motion: reduce) {
	.rally-two-column__media,
	.rally-two-column__body {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

.rally-two-column__media img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.rally-two-column__body {
	display: flex;
	flex-direction: column;
	gap: var(--rally-space-3);
}

.rally-two-column__eyebrow {
	font-family: var(--rally-font-body);
	font-size: var(--rally-text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--rally-red);
	margin: 0;
}

.rally-two-column__heading {
	font-size: var(--rally-text-3xl);
	margin: 0;
}

.rally-two-column__content {
	font-size: var(--rally-text-base);
	line-height: 1.7;
}
.rally-two-column__content p { margin-block: 0 var(--rally-space-3); }
.rally-two-column__content p:last-child { margin-bottom: 0; }
.rally-two-column__content ul,
.rally-two-column__content ol { padding-left: 1.25em; list-style: revert; margin-block: var(--rally-space-3); }
.rally-two-column__content a { color: var(--rally-red); text-decoration: underline; }

.rally-two-column__button { align-self: flex-start; margin-top: var(--rally-space-2); }
/* .rally-button styles live in assets/css/_components.css. */