/* ===========================================================================
   On The Roll band - the full-width community strip.

   Lifted from the homepage (Views/Home/Index.cshtml, 2026-08-13) so it can be
   used away from home. Everything it needed was home-only: the rules were all
   scoped `.pe-home .otr-*`, the width container `.pe-wrap` is defined under
   `.pe-home`, and the font came from a `--fd` custom property set on `.pe-home`.
   None of that exists on any other page, so the band could not simply be pasted
   somewhere else - it had to come out.

   Scoped under `.otr-band` and paired with Views/Shared/_OnTheRollBand.cshtml.
   Child class names are deliberately unchanged (.otr-shot, .otr-strip, and the
   #peOtrStrip / #peOtrBg ids) because Scripts/PE/home.js drives the shuffle and
   the background plate off exactly those selectors.

   NOTE: the homepage still carries its own `.pe-home`-scoped copy of these
   rules inline. Two copies that can drift - converging home onto this file is a
   follow-up, deliberately not done in the same change as introducing it.
   =========================================================================== */

.otr-band {
	--otr-font: 'Rajdhani', sans-serif;
	position: relative;
	margin: 34px 0 0;
	padding: 44px 0 40px;
	background: linear-gradient(140deg, #16181b 0%, #24272d 55%, #16181b 100%);
	color: #fff;
	overflow: hidden;
}

	.otr-band::before {
		content: "";
		position: absolute;
		top: -30%;
		right: -8%;
		width: 520px;
		height: 520px;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(225, 27, 44, .22) 0%, transparent 68%);
		pointer-events: none;
		z-index: 1;
	}

/* a customer photo as the plate, at 10% - set by home.js from a random shot */
.otr-band .otr-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: .1;
	pointer-events: none;
	z-index: 0;
}

/* was .pe-wrap, which is defined under .pe-home and so does not exist here */
.otr-band .otr-wrap {
	position: relative;
	max-width: 1340px;
	margin: 0 auto;
	padding: 0 15px;
	z-index: 2;
}

.otr-band .otr-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	margin: 0 0 24px;
}

.otr-band .otr-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-family: var(--otr-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #ff5566;
}

	.otr-band .otr-eyebrow::before {
		content: "";
		width: 24px;
		height: 2px;
		background: #ff5566;
	}

/* the program name, at wordmark scale - this is the thing to remember */
.otr-band h2.otr-name {
	margin: 0 0 6px;
	font-family: var(--otr-font);
	font-size: clamp(36px, 6vw, 64px);
	font-weight: 800;
	line-height: .95;
	letter-spacing: -.015em;
	text-transform: uppercase;
	color: #fff;
}

.otr-band .otr-tagline {
	margin: 0 0 12px;
	font-family: var(--otr-font);
	font-size: clamp(15px, 1.9vw, 20px);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #ff8794;
}

.otr-band p {
	margin: 0;
	max-width: 64ch;
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .84);
}

.otr-band .otr-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 18px 0 0;
}

.otr-band .otr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 11px;
	background: linear-gradient(150deg, #f12a41 0%, #c30020 100%);
	color: #fff;
	font-family: var(--otr-font);
	font-size: 14.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
}

	.otr-band .otr-btn:hover,
	.otr-band .otr-btn:focus {
		filter: brightness(.94);
		color: #fff;
		text-decoration: none;
	}

.otr-band .otr-link {
	padding-bottom: 2px;
	border-bottom: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
}

	.otr-band .otr-link:hover,
	.otr-band .otr-link:focus {
		color: #ff8794;
		border-color: #ff8794;
		text-decoration: none;
	}

.otr-band .otr-stat {
	flex: none;
	text-align: right;
}

	.otr-band .otr-stat b {
		display: block;
		font-family: var(--otr-font);
		font-size: clamp(38px, 5vw, 54px);
		font-weight: 800;
		line-height: 1;
		color: #fff;
	}

	.otr-band .otr-stat span {
		display: block;
		margin-top: 4px;
		font-size: 12.5px;
		line-height: 1.35;
		color: rgba(255, 255, 255, .6);
	}

/* the strip scrolls horizontally rather than wrapping: it is a glance, not a grid */
.otr-band .otr-strip {
	display: flex;
	gap: 12px;
	padding: 2px 0 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: #e11b2c rgba(255, 255, 255, .12);
}

	.otr-band .otr-strip::-webkit-scrollbar {
		height: 5px;
	}

	.otr-band .otr-strip::-webkit-scrollbar-track {
		background: rgba(255, 255, 255, .12);
		border-radius: 999px;
	}

	.otr-band .otr-strip::-webkit-scrollbar-thumb {
		background: #e11b2c;
		border-radius: 999px;
	}

	.otr-band .otr-strip::-webkit-scrollbar-thumb:hover {
		background: #ff3345;
	}

/* flex-basis 0 + grow: the row divides the full width between however many tiles
   are shown, so it always reaches both edges on desktop instead of stopping
   short. min-width keeps them from collapsing to slivers; the scroller takes
   over past that. */
.otr-band .otr-shot {
	position: relative;
	flex: 1 1 0;
	min-width: 150px;
	max-width: 260px;
	height: 150px;
	border-radius: 13px;
	background: #2a2d33;
	overflow: hidden;
	scroll-snap-align: start;
	text-decoration: none;
}

	.otr-band .otr-shot img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .25s;
	}

	.otr-band .otr-shot:hover img {
		transform: scale(1.06);
	}

	.otr-band .otr-shot::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent 52%);
	}

	/* JS hides the overflow of the pool; without JS every shot stays in the scroller */
	.otr-band .otr-shot[hidden] {
		display: none;
	}

.otr-band .otr-tag {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 9px;
	z-index: 2;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .65);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 860px) {
	.otr-band .otr-head {
		flex-direction: column;
		gap: 16px;
	}

	.otr-band .otr-stat {
		display: flex;
		align-items: baseline;
		gap: 10px;
		text-align: left;
	}

		.otr-band .otr-stat span {
			margin-top: 0;
		}

			.otr-band .otr-stat span br {
				display: none;
			}
}

@media (max-width: 560px) {
	.otr-band {
		margin-top: 26px;
		padding: 32px 0 28px;
	}

	.otr-band .otr-shot {
		width: 168px;
		height: 124px;
	}

	.otr-band .otr-btn {
		width: 100%;
	}
}