/* =========================================================================
   Beyln Gameday — scoped styles. Everything lives under .bgd so it can't
   leak into the theme, and vanishes cleanly when the plugin is off.
   ========================================================================= */

.bgd,
.bgd * { box-sizing: border-box; }

.bgd {
	--bgd-ink: #08080A;
	--bgd-ink-2: #101014;
	--bgd-ink-3: #1A1A20;
	--bgd-paper: #ffffff;
	--bgd-muted: #9C9CA6;
	--bgd-primary: #111111;
	--bgd-accent: #ffffff;
	--bgd-display: "Big Shoulders Display", "Oswald", "Arial Narrow", system-ui, sans-serif;
}

/* ---------- Homepage band ------------------------------------------------ */

.bgd--home {
	background: var(--bgd-ink);
	color: #fff;
	padding: clamp(40px, 6vw, 84px) clamp(16px, 4vw, 56px);
	border-top: 1px solid var(--bgd-ink-3);
	border-bottom: 1px solid var(--bgd-ink-3);
}

.bgd__inner { max-width: 1240px; margin: 0 auto; }

.bgd__head {
	display: flex;
	align-items: baseline;
	gap: 16px 24px;
	flex-wrap: wrap;
	margin-bottom: clamp(20px, 3vw, 36px);
}

.bgd__kicker {
	margin: 0;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--bgd-muted);
	flex-basis: 100%;
}

.bgd__title {
	margin: 0;
	font-family: var(--bgd-display);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -.02em;
	line-height: .9;
	font-size: clamp(34px, 6vw, 72px);
}

.bgd__all {
	margin-left: auto;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	letter-spacing: .04em;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
	padding-bottom: 2px;
	white-space: nowrap;
}
.bgd__all:hover { border-color: #fff; }

/* Hero card */
.bgd-hero {
	display: grid;
	grid-template-columns: minmax(0, 44%) 1fr;
	gap: clamp(20px, 4vw, 56px);
	align-items: center;
	background: var(--bgd-ink-2);
	border: 1px solid var(--bgd-ink-3);
	border-left: 6px solid var(--bgd-primary);
	border-radius: 14px;
	overflow: hidden;
	padding: clamp(18px, 3vw, 36px);
}

.bgd-hero__media {
	aspect-ratio: 1 / 1;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
}
.bgd-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bgd-hero__eyebrow {
	margin: 0 0 10px;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bgd-primary);
	filter: brightness(1.7);
}

.bgd-hero__matchup {
	margin: 0 0 12px;
	font-family: var(--bgd-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.01em;
	line-height: .95;
	font-size: clamp(26px, 4vw, 46px);
}

.bgd-hero__when {
	margin: 0 0 18px;
	color: var(--bgd-muted);
	font-size: 14px;
}

.bgd-hero__product {
	margin: 0 0 22px;
	font-size: 14px;
	color: #d7d7dd;
	max-width: 46ch;
}
.bgd-hero__price {
	display: inline-block;
	margin-left: 10px;
	font-weight: 700;
	color: #fff;
}

.bgd-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	color: #08080A;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	padding: 13px 22px;
	border-radius: 999px;
	transition: transform .15s ease;
}
.bgd-hero__cta:hover { transform: translateX(3px); }

/* Team rail */
.bgd__rail {
	list-style: none;
	margin: clamp(18px, 3vw, 30px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 10px;
}

.bgd__chip {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 14px;
	background: var(--bgd-ink-2);
	border: 1px solid var(--bgd-ink-3);
	border-left: 4px solid var(--bgd-team, #444);
	border-radius: 8px;
	text-decoration: none;
	color: #fff;
	transition: background-color .2s ease;
}
.bgd__chip:hover { background: #17171d; }
.bgd__chip-team { font-weight: 700; font-size: 14px; }
.bgd__chip-game { font-size: 12px; color: var(--bgd-muted); }

@media (max-width: 720px) {
	.bgd-hero { grid-template-columns: 1fr; }
	.bgd-hero__media { max-width: 280px; }
}

/* ---------- /gameday/ page -------------------------------------------- */

.bgd--page { margin-top: 8px; }

.bgd-page__intro {
	font-size: 16px;
	line-height: 1.6;
	max-width: 68ch;
	margin: 0 0 40px;
}

.bgd-team {
	margin: 0 0 52px;
	padding: 0 0 8px 20px;
	border-left: 5px solid var(--bgd-primary, #111);
}

.bgd-team__head { margin-bottom: 18px; }

.bgd-team__name {
	margin: 0 0 4px;
	font-family: var(--bgd-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.01em;
	font-size: clamp(24px, 3.4vw, 38px);
	line-height: 1;
}
.bgd-team__name a { text-decoration: none; color: inherit; }
.bgd-team__name a:hover { text-decoration: underline; }

.bgd-team__game { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.bgd-team__matchup { font-weight: 600; font-size: 15px; }
.bgd-team__meta { font-size: 13px; color: #6b6b73; }

.bgd-team__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 18px;
}

.bgd-card a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}
.bgd-card__media {
	aspect-ratio: 1 / 1;
	background: #f3f3f4;
	border-radius: 8px;
	overflow: hidden;
}
.bgd-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.bgd-card a:hover .bgd-card__media img { transform: scale(1.04); }
.bgd-card__title {
	font-size: 13px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bgd-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bgd-card__price { font-weight: 700; font-size: 14px; }
.bgd-card__where { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #6b6b73; }

.bgd-team__more {
	display: inline-block;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}