/**
 * Spotlight Content — image beside text, with three button treatments and an
 * optional modal video player.
 *
 * Colors, sizes, typography and the dialog's appearance are all Elementor
 * controls; they emit more specific selectors and so override the fallbacks
 * below.
 */

.irpp-spotlight__heading {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

/* Independent of the heading: a card can have one, the other, or both. */
.irpp-spotlight__rule {
	margin-bottom: 1.5rem;
	border-top: 3px solid #231F20;
}

/*
 * grid-template-columns and the media item's order below are also set by the
 * Layout/Reverse order controls (Style tab), responsively -- there is no
 * static breakpoint here. Those controls decide when the layout stacks, using
 * whatever breakpoints the site has configured in Elementor. Their "row"/off
 * state emits an empty (and so dropped) declaration rather than "revert" --
 * revert would roll back to the user-agent default instead of falling through
 * to whatever this rule (or Image width, below) already set.
 */
.irpp-spotlight__body {
	display: grid;
	grid-template-columns: 45% 1fr;
	gap: 2.5rem;
	align-items: start;
}

/* --- Media --- */

/*
 * This is the link, and it is what the Aspect ratio and Height controls size --
 * not the image. The image only ever fills it. Sizing the <img> instead leaves
 * the anchor at its own auto height, so it can end up taller or shorter than the
 * picture it wraps, which throws off the play badge and the click target.
 */
.irpp-spotlight__media {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
}

/*
 * height: 100% resolves to auto while the anchor has no definite height, so an
 * uncropped image still sets its own proportions. Once Aspect ratio or Height
 * gives the anchor a real height, this is what lets object-fit act on it.
 */
.irpp-spotlight__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Play badge, only present when the dialog player is enabled. */
.irpp-spotlight__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba( 35, 31, 32, 0.6 );
	transform: translate( -50%, -50% );
	transition: background 0.2s ease;
}

.irpp-spotlight__media:hover .irpp-spotlight__play,
.irpp-spotlight__media:focus-visible .irpp-spotlight__play {
	background: rgba( 35, 31, 32, 0.8 );
}

.irpp-spotlight__play svg {
	width: 1.75rem;
	height: 1.75rem;
	fill: #FFFFFF;
}

/* --- Content --- */

.irpp-spotlight__content {
	min-width: 0;
}

.irpp-spotlight__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.irpp-spotlight__dot {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #940027;
}

.irpp-spotlight__title {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	line-height: 1.25;
}

.irpp-spotlight__excerpt {
	margin-bottom: 1.5rem;
}

.irpp-spotlight__excerpt p:last-child {
	margin-bottom: 0;
}

/* --- Buttons --- */

.irpp-spotlight__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #940027;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.irpp-spotlight__button-icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.irpp-spotlight__button svg {
	width: 1em;
	height: 1em;
	fill: #940027;
}

.irpp-spotlight__button--pill {
	padding: 0.85rem 2rem;
	border: 1px solid #940027;
	border-radius: 999px;
	transition: background 0.2s ease, color 0.2s ease;
}

.irpp-spotlight__button--pill:hover,
.irpp-spotlight__button--pill:focus-visible {
	background: #940027;
	color: #FFFFFF;
}

.irpp-spotlight__button--pill:hover svg,
.irpp-spotlight__button--pill:focus-visible svg {
	fill: #FFFFFF;
}

.irpp-spotlight__button--arrow svg {
	transition: transform 0.2s ease;
}

.irpp-spotlight__button--arrow:hover svg {
	transform: translateX( 0.25rem );
}

/* --- Video dialog --- */

.irpp-spotlight__dialog {
	--irpp-dialog-duration: 200ms;

	/*
	 * position/inset/margin set explicitly rather than left to the browser's
	 * default dialog:modal { position: fixed; margin: auto; } -- any theme-level
	 * reset that zeroes margin globally (common in WordPress themes) silently
	 * breaks that centering with no error and no obvious cause.
	 */
	position: fixed;
	inset: 0;
	z-index: 100000;
	margin: auto;
	width: min( 90vw, 1024px );
	max-width: none;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
}

.irpp-spotlight__dialog::backdrop {
	background: rgba( 35, 31, 32, 0.8 );
}

.irpp-spotlight__dialog-frame {
	position: relative;
	z-index: 1;
	aspect-ratio: 16 / 9;
	background: #231F20;
}

.irpp-spotlight__dialog-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.irpp-spotlight__dialog-close {
	position: absolute;
	top: -3rem;
	right: -2.5rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #FFFFFF;
	font-size: 2.75rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease;
}

/*
 * Entrance animations. Exit is not animated: closing a <dialog> removes it from
 * the top layer immediately, and delaying that in JS to play an outro risks
 * leaving the iframe alive -- which is what actually keeps a video playing.
 */
.irpp-spotlight__dialog[open] {
	animation: irpp-spotlight-fade var( --irpp-dialog-duration ) ease both;
}

.irpp-spotlight__dialog--zoom[open] {
	animation-name: irpp-spotlight-zoom;
}

.irpp-spotlight__dialog--slide[open] {
	animation-name: irpp-spotlight-slide;
}

.irpp-spotlight__dialog--none[open] {
	animation: none;
}

@keyframes irpp-spotlight-fade {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes irpp-spotlight-zoom {

	from {
		opacity: 0;
		transform: scale( 0.92 );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes irpp-spotlight-slide {

	from {
		opacity: 0;
		transform: translateY( 2rem );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.irpp-spotlight__dialog[open] {
		animation: none;
	}

	.irpp-spotlight__button--arrow svg,
	.irpp-spotlight__play {
		transition: none;
	}
}