/*
 * Jersey Bulls FC — Homepage section layout
 *
 * Composition scaffolding that stitches the built components (FeatureHero, NewsCard,
 * FixtureCard/ResultCard, PlayerCard) into a full-launch homepage. Alternating
 * light / ink bands, section headers with "view all", responsive grids.
 *
 * Used by previews/homepage.php · components keep their own CSS · tokens: css/tokens.css
 */

/* Dark editorial canvas — applied to the front page + all our dark page templates
   (body.bulls-dark, set in functions.php) so the FC United off-white content
   wrapper never shows through. */
body.bulls-dark,
body.bulls-dark .page_content_wrap,
body.bulls-dark .content_wrap,
body.bulls-dark .content_wrap_fullscreen,
body.bulls-dark .content {
	background: var(--t-canvas);
}
body.bulls-dark .sp-footer-sponsors { display: none; }

/* The FC United parent reserves ~144px top AND bottom on .page_content_wrap to clear
   its old fixed header/footer. Our header is sticky + in-flow and we render our own
   footer, so that padding just leaves big empty gaps — under the nav (above heroes)
   and above the footer. Remove both: full-bleed heroes sit flush under the nav (like
   the home hero), and content/footer keep their own inner spacing. */
body.bulls-dark .page_content_wrap { padding-block: 0; }

/* Dark editorial canvas — the whole homepage sits on near-black like Juventus.
   Photography + white type carry it; red is a sparing accent only. */
.bulls-home__section {
	padding: var(--space-16) 0;
	background: var(--t-canvas);
	color: var(--t-fg);
}
.bulls-home__section--muted { background: var(--t-panel); }   /* a shade deeper, for rhythm */
.bulls-home__section--ink { background: var(--c-ink-900); }

.bulls-home__container {
	max-width: var(--content-full);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.bulls-home__section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--t-border-strong);   /* editorial hairline */
}

.bulls-home__section-title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(var(--fs-600), 5vw, var(--fs-800));   /* fluid 36 → 64px — bigger, confident */
	line-height: 0.92;
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	color: var(--t-fg);
}

.bulls-home__viewall {
	flex: none;
	/* 24px tap target (WCAG 2.2) without shifting the section head */
	padding-block: var(--space-2);
	margin-block: calc(-1 * var(--space-2));
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--t-fg-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--motion-fast) var(--ease-out);
}
.bulls-home__viewall:hover { color: var(--c-bulls-red-300); }

/* Grids */
.bulls-home__grid {
	display: grid;
	gap: var(--space-2);   /* thin gutters — tiles read as a continuous editorial wall */
	grid-template-columns: repeat(3, 1fr);
}

/* Asymmetric news grid — one dominant feature tile + two stacked siblings. */
.bulls-home__grid--news {
	grid-template-columns: 1.5fr 1fr;
	grid-auto-rows: 300px;
	gap: var(--space-2);
}
.bulls-home__grid--news > :first-child { grid-row: 1 / span 2; }
/* Feature tile carries a larger headline + more breathing room. */
.bulls-home__grid--news > :first-child .bulls-news-card__title { font-size: clamp(1.75rem, 3vw, 2.75rem); }
.bulls-home__grid--news > :first-child .bulls-news-card__body { padding: var(--space-6); }

.bulls-home__grid--fixtures { grid-template-columns: repeat(3, 1fr); align-items: start; gap: var(--space-2); }
.bulls-home__grid--squad { grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }

@media (max-width: 1024px) {
	.bulls-home__grid--fixtures { grid-template-columns: repeat(3, 1fr); }
	.bulls-home__grid--squad { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.bulls-home__grid--news { grid-template-columns: 1fr; grid-auto-rows: 200px; }
	.bulls-home__grid--news > :first-child { grid-row: span 2; }   /* lead story stays dominant on mobile (Juventus keeps the lead prominent) */
	.bulls-home__grid--fixtures { grid-template-columns: 1fr; }
	.bulls-home__grid--squad { grid-template-columns: repeat(2, 1fr); }
	.bulls-home__section { padding: var(--space-12) 0; }
}

/* Sponsor strip (front page, ACF-driven) */
.bulls-sponsors__eyebrow {
	margin: 0 0 var(--space-5);
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-bulls-red-300);
	text-align: center;
}
.bulls-sponsors__strip {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: var(--space-8);
}
.bulls-sponsors__strip img { max-height: 56px; width: auto; filter: grayscale(1) brightness(0) invert(1); opacity: 0.7; transition: opacity var(--motion-base) var(--ease-out); }
.bulls-sponsors__strip li:hover img { opacity: 1; }
.bulls-sponsors__name { font-family: var(--ff-display); text-transform: uppercase; color: var(--c-white-82); font-size: var(--fs-300); }

/* ============================================================
 * Full-bleed canvas width fix (homepage) — ALL viewports
 *
 * The full-launch homepage stacks several full-bleed bands inside the shared FC United
 * content wrapper (#bulls-content-main), which on the front page resolves to an explicit
 * shrink-to-fit width (~1480px) and sits flush-left. Two failure modes result:
 *   - On viewports WIDER than the content (>~1480px): bands can't fill the canvas and
 *     `.bulls-home__container` (margin:0 auto) can't centre — content jams LEFT with dead
 *     space on the right.
 *   - On viewports NARROWER than the content: the shrink-wrapping wrapper widens past the
 *     viewport and drags every section (incl. the hero text) off-screen to the right.
 * Pin the homepage content column to the viewport so each band reflows at the true width
 * and inner containers re-centre. `100vw` (viewport-relative) is required because the
 * wrapper's width is indefinite; `overflow-x:hidden` guards the scrollbar gutter.
 *
 * Applies at ALL widths. (Previously scoped to ≤1023px on the mistaken assumption that
 * "desktop is unaffected" — it is not above the content width, e.g. 1536/1920/2560px.)
 * ============================================================ */
body.home { overflow-x: hidden; }
body.home #bulls-content-main { width: 100vw; max-width: 100vw; overflow-x: hidden; }