/**
 * fanorate/match-prediction-v2 — V2 redesign match prediction band.
 *
 * A full-bleed deep-red band washed with the brand radial ripple: white
 * kicker, a giant display scoreline grid (flag chip + team name above each
 * score, a faded dash between), an italic serif man-of-the-match line, and
 * a smaller closing paragraph.
 */

.section-match-prediction-v2 {
	position: relative;
	color: var(--text-inverse);
	overflow: hidden;
	background: var(--color-primary-dark);
	padding-block: clamp(56px, 8vw, 104px);
}

.section-match-prediction-v2 .match-prediction-v2__ripple {
	position: absolute;
	inset: 0;
	background: var(--ripple-radial-red);
	opacity: .85;
}

.section-match-prediction-v2 .match-prediction-v2__ripple::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(229, 37, 61, .1), rgba(42, 5, 9, .7));
}

/* Centered like a broadcast full-time card */
.section-match-prediction-v2 .match-prediction-v2__wrap {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 48px);
	text-align: center;
}

.section-match-prediction-v2 .match-prediction-v2__kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font: var(--eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-inverse);
}

.section-match-prediction-v2 .match-prediction-v2__kicker::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 100px;
	background: currentColor;
	display: inline-block;
}

/* ---------- Scoreline ---------- */
.section-match-prediction-v2 .match-prediction-v2__scoreline {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: clamp(14px, 4vw, 44px);
	margin: 32px auto 0;
	max-width: 540px;
}

.section-match-prediction-v2 .match-prediction-v2__t {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.section-match-prediction-v2 .match-prediction-v2__t small {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	font: var(--h2);
	font-family: var(--font-ui);
	font-weight: 800;
	color: var(--text-inverse);
	letter-spacing: .01em;
}

.section-match-prediction-v2 .match-prediction-v2__chip {
	width: 28px;
	height: 18px;
	border-radius: 3px;
	flex: 0 0 auto;
	object-fit: cover;
	box-shadow: var(--shadow-sm);
}

.section-match-prediction-v2 .match-prediction-v2__chip--text {
	width: auto;
	height: auto;
	font-size: 32px;
	line-height: 1;
	border-radius: 0;
	box-shadow: none;
}

.section-match-prediction-v2 .match-prediction-v2__sc {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: .82;
	font-size: clamp(72px, 13vw, 140px);
	color: var(--text-inverse);
}

.section-match-prediction-v2 .match-prediction-v2__dash {
	align-self: end;
	opacity: .45;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(40px, 7vw, 72px);
	line-height: 1;
	padding-bottom: clamp(14px, 2.4vw, 30px);
}

/* ---------- MOTM + closing ---------- */
/* MOTM line sits under a short centered red rule */
.section-match-prediction-v2 .match-prediction-v2__motm {
	    margin: 32px auto 0;
    font: var(--serif-3);
    font-style: italic;
    color: var(--text-inverse);
    max-width: 1000px;
    font-size: 18px;
}

.section-match-prediction-v2 .match-prediction-v2__motm::before {
	content: "";
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-primary);
	margin: 0 auto var(--space-md);
}

.section-match-prediction-v2 .match-prediction-v2__motm b,
.section-match-prediction-v2 .match-prediction-v2__motm strong {
	font-style: normal;
	font-family: var(--font-ui);
	font-weight: 800;
}

.section-match-prediction-v2 .match-prediction-v2__body {
	font: var(--body-lg);
	font-family: var(--font-ui);
	color: rgba(255, 255, 255, .85);
	margin: var(--space-lg) auto 0;
	max-width: 64ch;
}

/* ---------- Reveal-on-scroll (armed by view.js) ---------- */
.section-match-prediction-v2 [data-reveal] {
	transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

.section-match-prediction-v2.is-reveal-armed [data-reveal]:not(.is-in) {
	opacity: 0;
	transform: translateY(18px);
}

@media (prefers-reduced-motion: reduce) {
	.section-match-prediction-v2.is-reveal-armed [data-reveal]:not(.is-in) {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
	.section-match-prediction-v2 {
		padding-block: clamp(40px, 9vw, 56px);
	}

	.section-match-prediction-v2 .match-prediction-v2__t small {
		white-space: normal;
		text-align: center;
	}
}