/* Bro History — torn paper BG, blue outline marquee, scroll inline images */

.ortega-bro-history {
	--ortega-bhst-blue: #0058a4;
	--ortega-bhst-navy: #092450;
	--ortega-bhst-paper: #e8eef4;
	--ortega-bhst-pad-x: clamp(1.25rem, 4.5vw, 4rem);
	--ortega-bhst-media-h: clamp(2.25rem, 5.5vw, 4.5rem);
	/* Match the 110vw Follow Along tear footprint (1440×55). */
	--ortega-bhst-edge-h: calc(110vw * 55 / 1440);
	--ortega-bhst-bg-image: none;
	isolation: isolate;
	/* Sit over the hero so the top tear is the divider (no white gap). */
	margin-block-start: calc(-1 * var(--ortega-bhst-edge-h)) !important;
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	overflow: visible;
	position: relative;
	width: 100vw;
	z-index: 5;
}

/*
 * One paper paint + one full silhouette mask (top tear / body / bottom tear).
 * Uses the same tear artwork as the old white overlays, as a mask — not painted white.
 */
.ortega-bro-history__skin {
	background-color: var(--ortega-bhst-paper);
	background-image: var(--ortega-bhst-bg-image);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	inset: 0;
	-webkit-mask-image:
		url("../images/white-edge-overlay.svg"),
		linear-gradient(#000 0 0),
		url("../images/white-edge-overlay-flip.svg");
	mask-image:
		url("../images/white-edge-overlay.svg"),
		linear-gradient(#000 0 0),
		url("../images/white-edge-overlay-flip.svg");
	-webkit-mask-position:
		center top,
		center calc(var(--ortega-bhst-edge-h) - 2px),
		center bottom;
	mask-position:
		center top,
		center calc(var(--ortega-bhst-edge-h) - 2px),
		center bottom;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size:
		110vw var(--ortega-bhst-edge-h),
		100% calc(100% - (var(--ortega-bhst-edge-h) * 2) + 6px),
		110vw var(--ortega-bhst-edge-h);
	mask-size:
		110vw var(--ortega-bhst-edge-h),
		100% calc(100% - (var(--ortega-bhst-edge-h) * 2) + 6px),
		110vw var(--ortega-bhst-edge-h);
	-webkit-mask-composite: source-over;
	mask-composite: add;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/* —— Marquee: full viewport width (outside the 1880 content column) —— */

.ortega-bro-history__marquee {
	overflow: hidden;
	padding-top: clamp(4.65rem, 9.35vw, 7.35rem);
	position: relative;
	width: 100%;
	z-index: 2;
}

.ortega-bro-history__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 5vw, 3.5rem);
	margin-inline: auto;
	max-width: 1880px;
	padding:
		clamp(2rem, 5vw, 3.5rem)
		var(--ortega-bhst-pad-x)
		clamp(5.5rem, 11vw, 12rem);
	position: relative;
	width: 100%;
	z-index: 2;
}

.ortega-bro-history__marquee-track {
	align-items: center;
	animation: ortega-bro-history-marquee 48s linear infinite;
	display: flex;
	gap: clamp(1.5rem, 4vw, 3rem);
	width: max-content;
	will-change: transform;
}

.ortega-bro-history__marquee-segment {
	align-items: center;
	display: inline-flex;
	flex-shrink: 0;
	gap: clamp(1rem, 3vw, 2rem);
}

.ortega-bro-history__marquee-text {
	-webkit-text-stroke: 3px var(--ortega-bhst-blue);
	color: transparent;
	font-family: var(--ortega-font-display);
	font-size: clamp(56px, 10vw, 132px);
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 0.9;
	text-transform: uppercase;
}

.ortega-bro-history__marquee-icon {
	display: block;
	flex-shrink: 0;
	height: clamp(36px, 6vw, 72px);
	width: auto;
}

@keyframes ortega-bro-history-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* —— Scroll story —— */

.ortega-bro-history__story {
	margin-inline: auto;
	max-width: min(75rem, 100%);
	text-align: center;
	width: 100%;
}

.ortega-bro-history__story-line {
	color: var(--ortega-bhst-blue);
	font-family: var(--ortega-font-display);
	font-size: clamp(1.65rem, 4.2vw, 3.25rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.15;
	margin: 0;
	text-transform: uppercase;
}

.ortega-bro-history__story-text {
	display: inline;
	white-space: pre-wrap;
}

.ortega-bro-history__media {
	align-items: center;
	display: inline-flex;
	flex-shrink: 0;
	height: var(--ortega-bhst-media-h);
	justify-content: center;
	margin-inline: 0.12em;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	vertical-align: middle;
	width: 0;
	will-change: max-width, opacity, width;
}

.ortega-bro-history__media.is-ready {
	/* Natural width applied via --ortega-bhst-media-w from JS. */
	max-width: var(--ortega-bhst-media-w, 4.5rem);
}

.ortega-bro-history__media-img {
	border-radius: 0.35em;
	display: block;
	height: var(--ortega-bhst-media-h);
	max-width: none;
	object-fit: cover;
	width: auto;
}

.ortega-bro-history__media--round .ortega-bro-history__media-img {
	aspect-ratio: 1;
	border-radius: 50%;
	width: var(--ortega-bhst-media-h);
}

/* —— Footer description —— */

.ortega-bro-history__footer {
	margin-inline: auto;
	max-width: 36rem;
	text-align: center;
	width: 100%;
}

.ortega-bro-history__description {
	color: var(--ortega-bhst-navy);
	font-family: var(--ortega-font-copy, var(--ortega-font-body));
	font-size: var(--ortega-type-body-lg, 1.125rem);
	font-weight: 400;
	line-height: 1.45;
	margin: 0;
}

.ortega-bro-history__description p {
	margin: 0;
}

.ortega-bro-history__description p + p {
	margin-top: 0.75em;
}

.ortega-bro-history-placeholder {
	background: #e8eef4;
	border: 1px dashed var(--ortega-bhst-blue, #0058a4);
	color: var(--ortega-bhst-blue, #0058a4);
	font-family: var(--ortega-font-body);
	padding: 1.5rem;
	text-align: center;
}

@media (min-width: 782px) {
	.ortega-bro-history__marquee-text {
		-webkit-text-stroke-width: 4px;
	}
}

@media (min-width: 1200px) {
	.ortega-bro-history__marquee-text {
		-webkit-text-stroke-width: 5px;
	}

	.ortega-bro-history__marquee-icon {
		height: clamp(48px, 5vw, 80px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ortega-bro-history__marquee-track {
		animation: none;
	}

	.ortega-bro-history__media {
		max-width: var(--ortega-bhst-media-w, 4.5rem);
		opacity: 1;
		width: auto;
	}
}