/**
 * Oyolloo Elements — Private Registrations.
 *
 * Figma: node 471:1252 — 1920x682 on light grey, flush to the block above.
 *   grid  790 image + 60px gap + 790 copy, both columns 562 tall
 *   media white plate, radius 16, with a 265x266 inset plate bottom-left
 *   list  rows 58px tall, 8px apart; 34px round numbered chip inset 12px
 *   cta   24px below the list, matching the body rhythm
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

.oe-private-regs__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 60px;
}

/* Reverse the visual order without touching the DOM order, so the heading
   still precedes the image for screen readers and search engines. */
.oe-private-regs__grid--flip .oe-private-regs__media {
	order: 2;
}

.oe-private-regs .oe-section {
	--oe-section-y-start: 0px;
}

.oe-private-regs__media {
	position: relative;
	margin: 0;
	border-radius: var(--oe-radius-xl);
	overflow: hidden;
	background-color: var(--oe-color-white);
	aspect-ratio: 790 / 562;
}

.oe-private-regs__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The second plate sits over the photo, 30px in from the bottom-left corner
   of the 790x562 frame — as shares, so it scales with the photograph. */
.oe-private-regs__inset {
	position: absolute;
	left: 3.797%;
	bottom: 5.338%;
	width: 33.544%;
	height: 47.331%;
	border-radius: 31px;
	overflow: hidden;
}

.oe-private-regs__inset img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oe-private-regs__body {
	display: flex;
	flex-direction: column;
	gap: var(--oe-space-md);
	min-width: 0;
}

.oe-private-regs__head {
	display: flex;
	flex-direction: column;
	gap: var(--oe-space-sm);
}

/* Sentence case here, unlike the other section eyebrows. */
.oe-private-regs__eyebrow {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
}

.oe-private-regs__desc {
	margin: 0;
	color: var(--oe-color-black);
	font-size: var(--oe-body-lg-size);
	line-height: 29px;
}

/* -- Numbered list ------------------------------------------------------- */

.oe-private-regs__list {
	display: flex;
	flex-direction: column;
	gap: var(--oe-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: oe-regs;
}

.oe-private-regs__item {
	display: flex;
	align-items: center;
	gap: var(--oe-space-sm);
	--oe-regs-line: var(--oe-color-neutral-300);

	min-height: 58px;
	padding: 12px;
	box-shadow: inset 0 0 0 1px var(--oe-regs-line);
	border-radius: var(--oe-radius-xl);
	background-color: var(--oe-color-white);
	transition:
		box-shadow 200ms var(--oe-ease, ease),
		background-color 200ms var(--oe-ease, ease);
}

.oe-private-regs__item:hover {
	--oe-regs-line: var(--oe-color-brand);

	background-color: var(--oe-color-brand-soft);
}

.oe-private-regs__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border: 1px solid var(--oe-color-neutral-300);
	border-radius: var(--oe-radius-pill);
	background-color: var(--oe-color-white);
	font-family: var(--oe-font-title);
	font-size: var(--oe-body-size);
	font-weight: 500;
	line-height: 1;
	/* The row's own tint above already eases in; without this the numbered
	   circle inside it flicked to gold ahead of the row it belongs to, so one
	   hover read as two separate things happening. */
	transition:
		border-color 160ms var(--oe-ease, ease),
		background-color 160ms var(--oe-ease, ease);
}

.oe-private-regs__item:hover .oe-private-regs__num {
	border-color: var(--oe-color-brand);
	background-color: var(--oe-color-brand);
}

.oe-private-regs__label {
	min-width: 0;
}

.oe-private-regs__cta {
	align-self: flex-start;
}

/* -- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.oe-private-regs__grid {
		grid-template-columns: 1fr;
		gap: var(--oe-space-xl);
	}

	.oe-private-regs__grid--flip .oe-private-regs__media {
		order: 0;
	}

	.oe-private-regs__grid {
		gap: var(--oe-space-md);
	}
}

/* Mobile (Figma 471:4094): the photograph runs to the top of the band and the
   copy follows underneath. */
@media (max-width: 767px) {
	.oe-private-regs .oe-section {
		--oe-section-y-end: var(--oe-space-3xl);
	}

	.oe-private-regs__grid {
		gap: var(--oe-space-md);
	}

	.oe-private-regs__media {
		border-radius: 7px;
	}

	.oe-private-regs__inset {
		border-radius: 14px;
	}

	.oe-private-regs__eyebrow {
		font-size: var(--oe-body-sm-size);
		line-height: 20px;
	}

	.oe-private-regs__desc {
		font-size: var(--oe-body-sm-size);
		line-height: 22px;
	}

	.oe-private-regs__cta {
		align-self: stretch;
		width: 100%;
	}

	.oe-private-regs__cta .oe-btn {
		width: 100%;
	}

	.oe-private-regs__label {
		font-size: var(--oe-body-size);
		line-height: 18px;
	}
}