/*
 * SE Option Rows.
 *
 * Five bands, each 640px tall at 1920, photo a little over half the screen and
 * swapping side every row. Everything is rem or vw so a 4K screen gets the same
 * drawing at twice the size rather than a small island in the middle.
 */

.se-option-rows {
	background: var(--se-black, #0b0a09);
}

.se-option-rows__head {
	padding-top: 8.125rem;
	padding-bottom: 2.875rem;
}

.se-option-rows__head .se-eyebrow {
	margin: 0;
}

.se-option-rows__rows {
	display: block;
}

.se-option-rows__row {
	position: relative;
	display: grid;
	grid-template-columns: 54.1667% 45.8333%;
	align-items: center;
	min-height: clamp(26rem, 33.333vw, 40rem);
	background: var(--se-black, #0b0a09);
	overflow: hidden;
}

.se-option-rows__photo {
	position: relative;
	grid-row: 1;
	align-self: stretch;
	overflow: hidden;
	background: var(--se-black, #0b0a09);
}

/* The parallax runtime scales and slides this wrapper inside the clipped frame. */
.se-option-rows__drift {
	position: absolute;
	inset: -6%;
}

.se-option-rows__copy {
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	min-width: 0;
}

.se-option-rows__row--left .se-option-rows__photo {
	grid-column: 1;
}

.se-option-rows__row--left .se-option-rows__copy {
	grid-column: 2;
	padding-left: 4.1667vw;
	padding-right: var(--se-pad, clamp(1.25rem, 3.333vw, 4rem));
}

/* The photo keeps its 54.17% whichever side it sits on, so the tracks flip. */
.se-option-rows__row--right {
	grid-template-columns: 45.8333% 54.1667%;
}

.se-option-rows__row--right .se-option-rows__photo {
	grid-column: 2;
}

.se-option-rows__row--right .se-option-rows__copy {
	grid-column: 1;
	padding-left: var(--se-pad, clamp(1.25rem, 3.333vw, 4rem));
	padding-right: 4.1667vw;
}

.se-option-rows__num {
	margin: 0;
	font-family: var(--se-font-mono, 'IBM Plex Mono', monospace);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--se-grey, #9a948b);
}

.se-option-rows__name {
	margin: 0;
	display: flex;
	flex-direction: column;
	font-family: var(--se-font-display, 'Barlow Condensed', sans-serif);
	font-weight: 900;
	font-style: normal;
	font-size: clamp(2.75rem, 5.7292vw, 6.875rem);
	line-height: 0.88;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--se-bone, #f3eee5);
}

.se-option-rows__line {
	display: block;
}

.se-option-rows__text {
	margin: 0;
	max-width: 37.5rem;
	font-family: var(--se-font-body, 'Barlow', sans-serif);
	font-weight: 400;
	font-size: clamp(1.0625rem, 1.1458vw, 1.375rem);
	line-height: 1.5;
	color: rgba(243, 238, 229, 0.72);
}

/* The note that stands in for the link on an option that has no page yet.
   At 14px it is under the large text threshold, so it takes the AA safe red
   rather than --se-red-hot, which measures 3.96 to 1 on black. */
.se-option-rows__soon {
	margin: 0;
	font-family: var(--se-font-mono, 'IBM Plex Mono', monospace);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--se-red-text, #dc4b3c);
}

.se-option-rows__link {
	font-size: clamp(1.0625rem, 1.1458vw, 1.375rem);
}

/* Tablet: keep the two columns, pull the type back. */
@media (max-width: 1279px) {
	.se-option-rows__row {
		grid-template-columns: 50% 50%;
		min-height: 28rem;
	}

	.se-option-rows__row--left .se-option-rows__copy {
		padding-left: 3vw;
	}

	.se-option-rows__row--right .se-option-rows__copy {
		padding-right: 3vw;
	}
}

/* Phone: photo over text, both full bleed. */
@media (max-width: 767px) {
	.se-option-rows__head {
		padding-top: 4.5rem;
		padding-bottom: 1.75rem;
	}

	.se-option-rows__row,
	.se-option-rows__row--left,
	.se-option-rows__row--right {
		grid-template-columns: 100%;
		min-height: 0;
	}

	.se-option-rows__row--left .se-option-rows__photo,
	.se-option-rows__row--right .se-option-rows__photo,
	.se-option-rows__row--left .se-option-rows__copy,
	.se-option-rows__row--right .se-option-rows__copy {
		grid-column: 1;
	}

	.se-option-rows__row--left .se-option-rows__photo,
	.se-option-rows__row--right .se-option-rows__photo {
		grid-row: 1;
		aspect-ratio: 16 / 10;
	}

	.se-option-rows__row--left .se-option-rows__copy,
	.se-option-rows__row--right .se-option-rows__copy {
		grid-row: 2;
		gap: 1rem;
		padding: 2rem var(--se-pad, 1.25rem) 3.25rem;
	}

	.se-option-rows__name {
		font-size: clamp(2.5rem, 12.8vw, 4rem);
	}

	.se-option-rows__text {
		font-size: 1.0625rem;
	}
}