/*
 * Jersey Bulls FC — News archive + single article (dark editorial)
 *
 * Markup: page-templates/news.php, single.php · cards: card-news.php · tokens: css/tokens.css
 */

/* ============================================================
 * News archive
 * ============================================================ */

.bulls-news-archive__inner {
	max-width: var(--content-full);
	margin: 0 auto;
	padding: var(--space-16) var(--gutter);
	color: var(--c-text-inverse);
}
/* Desktop corner gutters — full-width containers carry their own inset on the
   site-wide fullscreen canvas. */
@media (min-width: 1024px) {
	.bulls-news-archive__inner { padding-inline: clamp(72px, 7vw, 132px); }
}

.bulls-news-archive__kicker {
	margin: 0 0 var(--space-3);
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-bulls-red-300);
}

.bulls-news-archive__title {
	margin: 0 0 var(--space-8);
	font-family: var(--ff-display);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 0.92;
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	color: var(--t-fg);
}

.bulls-news-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-2);
	grid-auto-rows: 340px;
}
.bulls-news-archive__grid > :first-child { grid-column: span 2; grid-row: span 2; }
/* Search results have no editorial hierarchy (and many hits carry no image) —
   keep every card the same size. */
.bulls-news-archive--search .bulls-news-archive__grid > :first-child { grid-column: auto; grid-row: auto; }

@media (max-width: 1024px) { .bulls-news-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
	.bulls-news-archive__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
	.bulls-news-archive__grid > :first-child { grid-column: 1 / -1; grid-row: span 2; }   /* lead story stays dominant on mobile */
	.bulls-news-archive__inner { padding: var(--space-12) var(--gutter-sm); }
}

.bulls-news-archive__more {
	margin-top: var(--space-8);
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	font-family: var(--ff-mono);
	font-size: var(--fs-75);
}
.bulls-news-archive__more a,
.bulls-news-archive__more .current {
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--t-border-strong);
	color: var(--t-fg);
	text-decoration: none;
}
.bulls-news-archive__more .current { background: var(--c-bulls-red); border-color: var(--c-bulls-red); }
.bulls-news-archive__more a:hover { border-color: var(--c-bulls-red); }

/* ============================================================
 * Single article
 * ============================================================ */

.bulls-article__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(360px, 56vh, 620px);
	padding: var(--space-12) 0;
	overflow: hidden;
	isolation: isolate;
	/* Full-bleed banner — break out of the constrained ~850px article column so wide
	   featured images fill the viewport width (premium, no black side-margins, and far
	   less crop than the old boxed near-square treatment). */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}
.bulls-article__hero:not(.has-media) {
	min-height: auto;
	padding: var(--space-12) 0 0;
	width: auto;
	margin-inline: 0;   /* no image → keep a bare text header in the column */
}

.bulls-article__hero-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 28%;   /* favour the upper subject — avoids cropping heads/faces */
	z-index: 0;
}
.bulls-article__hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--scrim-bottom-strong);
}

.bulls-article__hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--content-base);
	margin: 0 auto;
	padding: 0 var(--gutter);
	color: var(--c-white);
}

.bulls-article__kicker {
	margin: 0 0 var(--space-3);
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-bulls-red-300);
}
.bulls-article__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(2rem, 5vw, 3.75rem);
	line-height: 0.95;
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	color: var(--c-white);
}
.bulls-article__meta {
	margin: var(--space-4) 0 0;
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-white-50);
}

.bulls-article__body {
	max-width: 68ch;
	margin: 0 auto;
	padding: var(--space-10) var(--gutter) var(--space-16);
	color: var(--t-fg-body);
	font-family: var(--ff-sans);
	font-size: var(--fs-200);
	line-height: var(--lh-loose);
}
.bulls-article__body p { margin: 0 0 var(--space-5); }
/* Standfirst — the opening italic lead paragraph (set in inc/content-format.php). */
.bulls-article__lead {
	font-size: var(--fs-300);
	line-height: var(--lh-snug);
	color: var(--t-fg);
}
.bulls-article__lead em { font-style: italic; }
.bulls-article__body a { color: var(--c-bulls-red-300); text-decoration: underline; }
.bulls-article__body a:hover { color: var(--t-fg); }
.bulls-article__body img { max-width: 100%; height: auto; }

.bulls-article__back { margin-top: var(--space-8); }
.bulls-article__back a {
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--t-fg-body);
	text-decoration: none;
}
.bulls-article__back a:hover { color: var(--c-bulls-red-300); }

/* ============================================================
 * Split article header — PSG pattern (2026-06-10, client item 10):
 * italic display title + meta + share LEFT, featured image RIGHT.
 * The old full-bleed scrim hero styles above are kept for any template
 * still using .bulls-article__hero.
 * ============================================================ */
.bulls-article--split .bulls-article__head {
	/* Break out of the parent theme's ~850px article column (same trick as the
	   old full-bleed hero), then re-centre to our own content width. */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	box-sizing: border-box;
	padding: var(--space-12) var(--gutter) var(--space-8);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--space-8);
	align-items: center;
}
@media (min-width: 1024px) {
	.bulls-article--split .bulls-article__head {
		padding-inline: max(clamp(72px, 7vw, 132px), calc((100vw - var(--content-full)) / 2 + clamp(72px, 7vw, 132px)));
	}
}
.bulls-article--split .bulls-article__title {
	margin: var(--space-3) 0 0;
	font-family: var(--ff-display);
	font-style: italic;            /* PSG's editorial slant — Evogria ships a true italic cut */
	font-weight: var(--fw-regular);
	font-size: clamp(var(--fs-600), 3.4vw, var(--fs-800));
	line-height: 1.02;
	letter-spacing: var(--ls-snug);
	text-transform: uppercase;
	color: var(--t-fg);
	overflow-wrap: normal;
	word-break: keep-all;   /* never split words like BLOOMSBURY mid-word */
}
.bulls-article--split .bulls-article__kicker { color: var(--c-bulls-red); }
.bulls-article--split .bulls-article__meta {
	margin: var(--space-4) 0 0;
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--t-fg-muted);
}
.bulls-article__head-media {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: var(--ar-video);
	background: var(--t-panel);
}
.bulls-article__head-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Share row */
.bulls-article__share { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.bulls-article__share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--t-border-strong);
	border-radius: var(--radius-pill);
	background: none;
	color: var(--t-fg);
	cursor: pointer;
	transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.bulls-article__share-link:hover,
.bulls-article__share-link:focus-visible { color: var(--c-bulls-red); border-color: var(--c-bulls-red); }
.bulls-article__share-link:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }
.bulls-article__share-link.is-copied { color: var(--c-white); background: var(--c-bulls-red); border-color: var(--c-bulls-red); }

@media (max-width: 860px) {
	.bulls-article--split .bulls-article__head { grid-template-columns: 1fr; gap: var(--space-6); }
	.bulls-article__head-media { order: -1; }   /* image first on mobile (PSG) */
}