/* =====================================================================
   MSM Markets — Market overview page redesign (dev spec, 2026-09-13:
   "Market Page Redesign — Design + Rollout Safety"), rendered only when
   MSM_Markets_Market_Design::is_new_design_enabled() is on for a given
   Market (or via its admin-only preview).

   Loaded alongside event-preview.css (base tokens/typography/.msm-btn/
   .msm-footer shapes) and event-brand-fnl.css (the "Friday Night
   Lights" brand color skin -- the same two files every Event page
   already loads, in the same order) -- this file only adds what's
   genuinely new to this page: the header/nav, the photo hero, the
   trust-stat strip, and the sport-picker grid. (The "Not sure yet?" New
   Player Kit band that used to live here is now a shared partial --
   see .msm-npk-band* in event-brand-fnl.css, dev spec 2026-09-13.)
   Every class here is prefixed .msm-mkt- specifically
   so it can never collide with the OLD market.css this same page
   renders instead when the kill switch is off -- the two templates are
   never loaded at the same time, but keeping the class names visually
   distinct avoids any confusion reading either file on its own.
   ===================================================================== */

.msm-mkt-wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }

/* ---------- header ---------- */
.msm-mkt-header {
	background: var(--fnl-navy);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.msm-mkt-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-block: 14px;
}
.msm-mkt-header-row img.msm-mkt-logo { height: 40px; width: auto; }
.msm-mkt-nav { display: flex; align-items: center; gap: 30px; }
.msm-mkt-nav a,
.msm-mkt-nav button {
	color: rgba(255, 255, 255, 0.75);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	font-family: var(--msm-font-sans);
	appearance: none;
	-webkit-appearance: none;
}
.msm-mkt-nav a:hover,
.msm-mkt-nav button:hover { color: #fff; }

/* ---------- hero ---------- */
.msm-mkt-hero { position: relative; overflow: hidden; background: var(--hero-navy-tile); }
.msm-mkt-hero picture,
.msm-mkt-hero img.msm-mkt-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}
.msm-mkt-hero-noimg { background: linear-gradient(160deg, var(--hero-navy) 0%, var(--hero-navy-deep) 100%); }
.msm-mkt-hero .msm-mkt-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(6, 24, 47, 0.90) 0%, rgba(6, 24, 47, 0.68) 46%, rgba(6, 24, 47, 0.30) 72%, rgba(6, 24, 47, 0.78) 100%);
}
.msm-mkt-hero-inner { position: relative; padding-block: 48px 40px; }
.msm-mkt-eyebrow {
	font-family: var(--msm-font-display);
	font-weight: 900;
	font-size: 11px;
	letter-spacing: 4px;
	color: var(--fnl-gold);
	text-transform: uppercase;
}
/* ".msm-mkt-hero .msm-mkt-title" (2 classes), not just ".msm-mkt-title"
   (1 class): the shared event-brand-fnl.css's ".msm-preview h1,h2,h3"
   (1 class + 1 element) is otherwise MORE specific and silently wins the
   color fight regardless of source order, repainting the market name back
   to navy-on-navy-photo -- nearly invisible. Same root cause documented
   for .msm-hero .msm-hero-title elsewhere in event-brand-fnl.css. Found
   live on Houston (kill switch on). */
/* font-size clamp (dev spec, 2026-09-17: "Fix -- Market Page Hero Reads
   Too Short on Wide Monitors") -- the previous clamp(2.2rem, 6vw, 3.4rem)
   hit its 3.4rem ceiling at ~907px wide, meaning every real desktop/
   laptop screen (essentially all of them) already showed the title at
   its maximum size, so the hero's content height stopped growing while
   the background photo kept stretching wider -- the whole hero read as
   a short, flat band. Now keeps scaling up to ~1350-1400px wide before
   capping at 4.4rem, so the hero stays proportionate to its width on
   ordinary desktop screens instead of maxing out almost immediately. */
.msm-mkt-hero .msm-mkt-title {
	font-family: var(--msm-font-display);
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(2.2rem, 4vw + 1rem, 4.4rem);
	line-height: 1;
	letter-spacing: -1px;
	color: #fff;
	margin: 12px 0 0;
}

/* Presenting Sponsor (dev spec, 2026-09-15: "Presenting Sponsor on the
   Market Page Hero") -- own .msm-mkt-presenting-* rules at this hero's
   smaller scale, not a reuse of event-brand-fnl.css's .msm-hero-
   presenting-* rules (those are written for the Event hero's much
   larger title/type scale and are scoped to require an .msm-hero
   ancestor this page's markup doesn't have). Same visual logic as the
   Event version: graphic sits quietly under the Market name, byline
   small/muted/letter-spaced underneath it, neither competing with the
   title. */
.msm-mkt-presenting-logo {
	display: inline-block;
	height: 26px;
	width: auto;
	margin: 12px 0 0;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}
.msm-mkt-presenting-pairing {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
}
.msm-mkt-presenting-pairing-mark {
	display: block;
	height: 22px;
	width: auto;
	flex-shrink: 0;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}
.msm-mkt-presenting-pairing-divider {
	display: block;
	width: 1px;
	height: 17px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.4);
}
.msm-mkt-presenting-pairing-sponsor {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.msm-mkt-presenting-pairing-sponsor-img {
	display: block;
	height: 22px;
	min-height: 14px;
	width: auto;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}
/* ".msm-mkt-hero .msm-mkt-presenting-sponsor" (2 classes) -- same
   specificity reasoning documented above for .msm-mkt-hero .msm-mkt-title:
   the shared event-brand-fnl.css's ".msm-preview p { margin: 0 0 1rem }"
   would otherwise win against a single-class selector. */
.msm-mkt-hero .msm-mkt-presenting-sponsor {
	margin: 4px 0 0;
	font-family: var(--msm-font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	color: rgba(255, 255, 255, 0.72);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.msm-mkt-sub {
	margin: 14px 0 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--fnl-muted-on-navy);
	max-width: 52ch;
}

/* ---------- trust stat strip (dev spec: same shared stats already used
   on the Homepage -- players / years running / NPS / reviews) ---------- */
.msm-mkt-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.msm-mkt-stat { padding: 22px 14px; text-align: center; }
.msm-mkt-stat.msm-mkt-on-red { background: var(--fnl-crimson); }
.msm-mkt-stat.msm-mkt-on-navy { background: var(--fnl-navy); }
.msm-mkt-stat-num { font-family: var(--msm-font-display); font-weight: 900; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.msm-mkt-stat.msm-mkt-on-red .msm-mkt-stat-num { color: #fff; }
.msm-mkt-stat.msm-mkt-on-navy .msm-mkt-stat-num { color: var(--fnl-gold); }
.msm-mkt-stat-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
.msm-mkt-stat.msm-mkt-on-red .msm-mkt-stat-lbl { color: rgba(255, 255, 255, 0.85); }
.msm-mkt-stat.msm-mkt-on-navy .msm-mkt-stat-lbl { color: rgba(255, 255, 255, 0.7); }

/* ---------- sport picker ---------- */
.msm-mkt-sports { padding-block: 56px 60px; }
.msm-mkt-section-head { max-width: 60ch; margin-bottom: 30px; }
.msm-mkt-section-head .msm-mkt-eyebrow { color: var(--fnl-crimson); }
.msm-mkt-section-head h2 {
	font-family: var(--msm-font-display);
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(1.7rem, 3.4vw, 2.3rem);
	color: var(--fnl-navy);
	letter-spacing: -0.5px;
	margin-top: 8px;
}
.msm-mkt-section-head p { color: var(--fnl-text-gray); margin-top: 10px; font-size: 0.98rem; }

.msm-mkt-sport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Card is a <div>, not an <a> -- the whole-card overlay link
   (.msm-mkt-sport-card-link) sits BELOW the sport icon's own <a> (never
   present here, since the icon isn't itself a link on this card -- kept
   as a plain absolute overlay regardless, matching the same nested-
   anchor-avoidance convention as the Homepage's city grid). */
.msm-mkt-sport-card {
	position: relative;
	border-radius: var(--msm-radius-sm);
	overflow: hidden;
	box-shadow: var(--msm-shadow);
	aspect-ratio: 4 / 3.1;
	background: var(--fnl-navy);
}
.msm-mkt-sport-card-link { position: absolute; inset: 0; z-index: 2; }
.msm-mkt-sport-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.msm-mkt-sport-card .msm-mkt-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(11, 28, 58, 0.05) 34%, rgba(11, 28, 58, 0.94) 100%);
}
.msm-mkt-sport-card.msm-mkt-sport-card--noimg { background: linear-gradient(160deg, var(--fnl-navy), var(--fnl-navy-deep)); }
.msm-mkt-sport-card.msm-mkt-sport-card--noimg .msm-mkt-scrim { background: none; }
.msm-mkt-sport-glyph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.16;
}
.msm-mkt-sport-glyph svg { width: 96px; height: 96px; stroke: #fff; fill: none; stroke-width: 0.9; }

.msm-mkt-sport-pill {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	/* Sits visually above .msm-mkt-sport-card-link (z-index: 2) but was
	   silently capturing every click landing on it -- pointer-events: none
	   lets the click fall through to the real overlay link underneath
	   instead, same fix as .msm-mkt-sport-body below (dev spec,
	   2026-09-14: "Fix -- Market Page Sport Cards Only Partially
	   Clickable"). Purely visual layer; nothing inside it is interactive. */
	pointer-events: none;
	font-family: var(--msm-font-sans);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 20px;
}
.msm-mkt-sport-pill--vip { background: var(--fnl-gold); color: var(--fnl-navy-deep); }
.msm-mkt-sport-pill--registration { background: var(--fnl-crimson); color: #fff; }
.msm-mkt-sport-pill--waitlist { background: rgba(255, 255, 255, 0.92); color: var(--fnl-navy); }
.msm-mkt-sport-pill--teams_released { background: var(--fnl-navy-deep); color: var(--fnl-gold); border: 1px solid rgba(227, 178, 60, 0.6); }

/* pointer-events: none for the same reason as .msm-mkt-sport-pill above
   -- the sport name, date, venue, and "View Event ->" text all sat on
   top of .msm-mkt-sport-card-link and silently swallowed clicks meant
   for it (dev spec, 2026-09-14). */
.msm-mkt-sport-card .msm-mkt-sport-body { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 3; pointer-events: none; }
.msm-mkt-sport-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(227, 178, 60, 0.55);
	color: var(--fnl-gold);
	margin-bottom: 8px;
}
.msm-mkt-sport-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; }

.msm-mkt-sport-name {
	font-family: var(--msm-font-display);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1.2rem;
	color: #fff;
	letter-spacing: -0.2px;
}
.msm-mkt-sport-when { font-size: 0.82rem; color: var(--fnl-muted-on-navy); margin-top: 3px; }
.msm-mkt-sport-venue { font-size: 0.76rem; color: var(--fnl-muted-on-navy-2); margin-top: 1px; }
.msm-mkt-sport-cta {
	display: inline-flex;
	margin-top: 12px;
	font-family: var(--msm-font-sans);
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--fnl-gold);
	align-items: center;
	gap: 6px;
	position: relative;
	z-index: 1;
}
.msm-mkt-sport-card:hover .msm-mkt-sport-cta { color: #fff; }

.msm-mkt-empty { padding-block: 20px 10px; color: var(--fnl-text-gray); }

/* The "Not sure yet?" New Player Kit band is now a shared partial (dev
   spec, 2026-09-13: "Homepage — How It Works, What MSM Is/Isn't, New
   Player Kit Band, Testimonials") -- see .msm-npk-band* in
   event-brand-fnl.css, no longer this page's own CSS. */

@media (max-width: 900px) {
	.msm-mkt-sport-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Hero min-height (dev spec, 2026-09-17: "Fix -- Market Page Hero Reads
   Too Short on Wide Monitors") -- backstop for viewports wide enough
   that even the larger .msm-mkt-title clamp above isn't enough to keep
   the hero looking proportionate to its width. On .msm-mkt-hero itself,
   not .msm-mkt-hero-inner, since the background photo (absolutely
   positioned, inset:0) needs to fill the same box the content sizes.

   Explicitly gated behind this file's own existing min-width:901px
   tablet/desktop split (the inverse of the max-width:900px rule right
   above) rather than trusting the clamp's own 400px floor to naturally
   stay below content height at every narrower width -- tested live and
   confirmed that assumption was wrong: at 375px mobile, actual content
   height is only ~305px, well under a bare 400px floor, so an ungated
   min-height WAS visibly stretching the hero taller on phone, directly
   contradicting this spec's own "unchanged on mobile/tablet" acceptance
   check. Scoping to min-width:901px makes that structurally impossible
   regardless of how content height happens to compare to the floor
   value at any given width, rather than relying on the numbers working
   out by chance.

   A flat px value was also tried and tested live before this -- it
   failed the spec's 2560px check outright: since .msm-mkt-title's clamp
   caps at ~1360px wide, a flat min-height means the hero's height is
   completely static from 1360px all the way out to any wider monitor,
   so it actually read FLATTER at 2560px (width:height ~6:1) than at
   1366px (~3.25:1), the opposite of what this spec asks for. This
   clamp() keeps growing (just more slowly than the title does) all the
   way out to a genuinely wide monitor instead: ~414px at 1366px
   (matches the spec's own 380-450px "typical laptop" starting
   suggestion), ~480px at 1920px, ~557px at 2560px, capping at 620px
   past ~3440px so it doesn't run away on an extreme ultrawide. */
@media (min-width: 901px) {
	.msm-mkt-hero { min-height: clamp(400px, 12vw + 250px, 620px); }
}
@media (max-width: 820px) {
	.msm-mkt-nav { display: none; }
}
@media (max-width: 560px) {
	.msm-mkt-sport-grid { grid-template-columns: 1fr; }
	/* Compact trust strip on phone (Ignatius's explicit refinement) --
	   same 4 stats, same order, tightened back to one row instead of a
	   tall 2x2 block, so a phone visitor (the large majority of traffic)
	   reaches the sport cards with far less scrolling. */
	.msm-mkt-stats { grid-template-columns: repeat(4, 1fr); }
	.msm-mkt-stat { padding: 10px 4px; }
	.msm-mkt-stat-num { font-size: 0.78rem; line-height: 1.1; }
	.msm-mkt-stat-lbl { font-size: 6.3px; letter-spacing: 0.3px; margin-top: 2px; line-height: 1.2; }
	/* The section padding above "Pick Your Sport" was still full desktop
	   size -- on phone that gives back a chunk of the scroll distance the
	   compact stat strip just saved, so tighten it too (same refinement). */
	.msm-mkt-sports { padding-block: 26px 40px; }
	.msm-mkt-section-head { margin-bottom: 18px; }
}