/* =========================================================================
   Star Rewards Scroll Experience — front-end styles
   Every selector is namespaced under .star-rewards to avoid colliding with
   the theme or Beaver Builder. Generic class names (.container, .section,
   .content, .image) are intentionally never used bare.
   ========================================================================= */

.star-rewards {
	position: relative;
	background: var(--star-rewards-bg, #3a0000);
	color: var(--star-rewards-text, #ffffff);
	overflow: hidden;
	isolation: isolate;
}

.star-rewards * {
	box-sizing: border-box;
}

.star-rewards__notice {
	padding: 32px;
	text-align: center;
	background: #f6f7f7;
	color: #1d2327;
	border: 1px dashed #c3c4c7;
}

/* ---- Section wrapper + sticky pin area -------------------------------- */

.star-rewards__section {
	position: relative;
}

.star-rewards__sticky {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	will-change: transform, opacity;
}

/* ---- Background / decorative layers ------------------------------------ */

.star-rewards__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.star-rewards__bg-image {
	position: absolute;
	inset: -10% -10% -10% -10%;
	width: 120%;
	height: 120%;
	object-fit: cover;
	will-change: transform;
}

.star-rewards__decorative {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.star-rewards__decorative-image {
	position: absolute;
	max-width: 40%;
	height: auto;
	will-change: transform;
}

/* ---- Content layout ----------------------------------------------------- */

.star-rewards__content {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 48px;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 48px 5%;
}

.star-rewards__section--text-left .star-rewards__content {
	grid-template-columns: 1fr 1fr;
}
.star-rewards__section--text-left .star-rewards__text { order: 1; text-align: left; }
.star-rewards__section--text-left .star-rewards__visual { order: 2; }

.star-rewards__section--text-right .star-rewards__text { order: 2; text-align: left; }
.star-rewards__section--text-right .star-rewards__visual { order: 1; }

.star-rewards__section--centered .star-rewards__content {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}

.star-rewards__section--fullscreen .star-rewards__content {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	max-width: 900px;
}
.star-rewards__section--fullscreen .star-rewards__sticky {
	height: 100vh !important;
}

/* ---- Text block ---------------------------------------------------------- */

.star-rewards__text {
	will-change: transform, opacity;
}

.star-rewards__subtitle {
	display: inline-block;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.75;
	margin-bottom: 12px;
}

.star-rewards__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.05;
	font-weight: 800;
	margin: 0 0 16px;
	color: inherit;
}

.star-rewards__description {
	font-size: 1.05rem;
	line-height: 1.6;
	opacity: 0.9;
	max-width: 46ch;
	margin: 0 0 24px;
}

.star-rewards__section--centered .star-rewards__description,
.star-rewards__section--fullscreen .star-rewards__description {
	margin-left: auto;
	margin-right: auto;
}

.star-rewards__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.star-rewards__section--centered .star-rewards__actions,
.star-rewards__section--fullscreen .star-rewards__actions {
	justify-content: center;
}

.star-rewards__button {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.star-rewards__button--primary {
	background: var(--star-rewards-accent, #c8102e);
	color: #fff;
}

.star-rewards__button--secondary {
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
}

.star-rewards__button:hover,
.star-rewards__button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.star-rewards__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---- Visual / image block ------------------------------------------------ */

.star-rewards__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform, opacity;
}

.star-rewards__image {
	max-width: 100%;
	height: auto;
	display: block;
	will-change: transform, opacity;
}

.star-rewards__image--mobile {
	display: none;
}

.star-rewards__foreground {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.star-rewards__foreground-image {
	max-width: 60%;
	height: auto;
}

/* ---- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.star-rewards__text,
	.star-rewards__visual,
	.star-rewards__bg-image,
	.star-rewards__decorative-image,
	.star-rewards__image {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

.star-rewards.star-rewards--reduced-motion .star-rewards__text,
.star-rewards.star-rewards--reduced-motion .star-rewards__visual,
.star-rewards.star-rewards--reduced-motion .star-rewards__bg-image,
.star-rewards.star-rewards--reduced-motion .star-rewards__decorative-image,
.star-rewards.star-rewards--reduced-motion .star-rewards__image {
	transform: none !important;
	opacity: 1 !important;
}

/* ---- Tablet: 768px – 1199px ------------------------------------------------ */

@media (max-width: 1199px) {
	.star-rewards__content {
		gap: 32px;
		padding: 40px 6%;
	}
	.star-rewards__title {
		font-size: clamp(1.75rem, 4.5vw, 2.75rem);
	}
}

/* ---- Mobile: below 768px ---------------------------------------------------
   Explicit mobile layout (not just a shrunk desktop grid): single column,
   image below text, per-section configurable via inline custom properties
   set by JS from each section's data-mobile-* attributes. */

@media (max-width: 767px) {
	.star-rewards__content {
		display: flex;
		flex-direction: column;
		padding: 32px 6%;
		gap: var(--sr-mobile-spacing, 24px);
	}

	.star-rewards__section--text-left .star-rewards__text,
	.star-rewards__section--text-right .star-rewards__text {
		order: 1;
		text-align: var(--sr-mobile-text-align, center);
	}

	.star-rewards__section--text-left .star-rewards__visual,
	.star-rewards__section--text-right .star-rewards__visual {
		order: 2;
	}

	.star-rewards__visual {
		width: var(--sr-mobile-image-width, 80%);
		margin: 0 auto;
		align-self: var(--sr-mobile-image-align, center);
	}

	.star-rewards__image--desktop {
		display: none;
	}

	.star-rewards__image--mobile {
		display: block;
	}

	.star-rewards__title {
		font-size: clamp(1.5rem, 8vw, 2.25rem);
	}

	.star-rewards__description {
		margin-left: auto;
		margin-right: auto;
	}

	.star-rewards__sticky {
		height: auto !important;
		min-height: 100vh;
		padding: 24px 0;
	}
}