/**
 * OTS News — main stylesheet.
 * Mobile-first. Depends on tokens.css for variables.
 */

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	line-height: var(--lh-tight);
	margin: 0 0 0.5em;
}

button { font-family: inherit; }

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1rem;
}

.btn {
	display: inline-block;
	background: var(--color-blue);
	color: #fff;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.95rem;
	border: 0;
	padding: 0.6rem 1.1rem;
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
}
.btn:hover { background: var(--color-blue-dark); color: #fff; }

.screen-reader-text {
	position: absolute !important;
	clip-path: inset(50%);
	width: 1px; height: 1px;
	overflow: hidden;
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed;
	top: 0.5rem; left: 0.5rem;
	z-index: 1000;
	clip-path: none;
	width: auto; height: auto;
	background: #fff;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius);
}

/* ---------- Section headings ---------- */
.section-heading {
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-blue);
	border-bottom: 3px solid var(--color-blue);
	padding-bottom: 0.35rem;
	margin-bottom: 1rem;
}

/* ---------- Category label ---------- */
.cat-label {
	display: inline-block;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-blue);
	text-decoration: none;
	margin-bottom: 0.35rem;
}
.cat-label:hover { color: var(--color-blue-dark); text-decoration: underline; }

/* ---------- LIVE badge ---------- */
.live-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-breaking);
	color: #fff;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.2rem 0.5rem;
	border-radius: var(--radius);
}
.live-badge__dot {
	width: 0.5rem; height: 0.5rem;
	border-radius: 50%;
	background: #fff;
	animation: ots-blink 1.4s infinite;
}
@keyframes ots-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
	.live-badge__dot { animation: none; }
}
/* When a teaser/headline card is live, sit the badge over the image. */
.teaser__media .live-badge,
.hl__media .live-badge {
	position: absolute;
	top: 0.5rem; left: 0.5rem;
	z-index: 2;
}

/* ---------- Header ---------- */
.topbar {
	background: var(--color-ink);
	color: var(--color-paper);
	font-family: var(--font-head);
	font-size: 0.78rem;
}
.topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 0.35rem;
}

.masthead {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}
.masthead__inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.7rem;
}
.masthead .icon { color: var(--color-ink); display: block; }
.nav-toggle,
.search-toggle {
	background: transparent;
	border: 0;
	padding: 0.25rem;
	color: var(--color-ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}
.site-branding { flex: 1; display: flex; align-items: center; }
.site-logo { display: inline-flex; }
.site-logo__img { height: 44px; width: auto; }
/* Text fallback if no image logo. */
.site-title {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.6rem;
	letter-spacing: 0.01em;
	color: var(--color-blue);
	text-decoration: none;
}
.site-title span { opacity: 0.7; margin-left: 0.15em; }
.custom-logo { max-height: 52px; width: auto; }

/* Primary nav — carries the brand blue. */
.primary-nav { background: var(--color-blue); }
.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	flex-direction: column;
}
.site-header.nav-open .primary-menu { display: flex; }
.primary-menu li { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.primary-menu li:first-child { border-top: 0; }
.primary-menu a {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
	text-decoration: none;
	padding: 0.7rem 0;
}
.primary-menu a:hover { color: #fff; text-decoration: underline; }
.primary-menu .current-menu-item > a { text-decoration: underline; }

/* Search drawer */
.site-search {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	padding-block: 0.75rem;
}
.search-form { display: flex; gap: 0.5rem; }
.search-field {
	flex: 1;
	font-family: var(--font-body);
	font-size: 1rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

/* ---------- Main ---------- */
.site-main { padding-block: 1.5rem 2.5rem; }

/* ---------- Headlines block ----------
   A single ordered list of up to 9 cards; source order = priority order
   (slot 1 = the lead). CSS grid-template-areas reflow the cards across four
   breakpoints — mirroring the BBC homepage behaviour — and per-slot rules hide
   a card's image wherever the layout calls for a text-only promo. Slots are
   addressed by :nth-child so the PHP emits nine structurally identical cards. */
.hl { margin-bottom: 1.5rem; }
.hl__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	/* Base (< 600px): big lead, a paired row, then image-left horizontal rows. */
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"s1 s1"
		"s2 s3"
		"s6 s6"
		"s7 s7"
		"s4 s4"
		"s5 s5"
		"s8 s8"
		"s9 s9";
}
.hl__cell { display: flex; }
.hl__cell:nth-child(1) { grid-area: s1; }
.hl__cell:nth-child(2) { grid-area: s2; }
.hl__cell:nth-child(3) { grid-area: s3; }
.hl__cell:nth-child(4) { grid-area: s4; }
.hl__cell:nth-child(5) { grid-area: s5; }
.hl__cell:nth-child(6) { grid-area: s6; }
.hl__cell:nth-child(7) { grid-area: s7; }
.hl__cell:nth-child(8) { grid-area: s8; }
.hl__cell:nth-child(9) { grid-area: s9; }

.hl__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
	border-radius: var(--radius);
	overflow: hidden;
}
.hl__media { position: relative; display: block; flex-shrink: 0; }
.hl__img,
.hl__img--placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.hl__img--placeholder { background: var(--color-border); }
.hl__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 0;
	overflow: hidden;
	padding: 0.7rem 0.85rem 0.85rem;
}
.hl__title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hl__title a { color: var(--color-ink); text-decoration: none; }
.hl__title a:hover { color: var(--color-blue); }
.hl__standfirst {
	margin: 0.45rem 0 0;
	color: #2a2c30;
	font-size: 1rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Inline LIVE badge on non-lead cards — visible even where the image is hidden. */
.hl__title .live-badge {
	font-size: 0.62rem;
	padding: 0.12rem 0.4rem;
	margin-right: 0.4rem;
	vertical-align: 0.12em;
}

/* Lead card — larger, balanced headline. */
.hl__cell:nth-child(1) .hl__body { padding: 0.95rem 1.1rem 1.1rem; }
.hl__cell:nth-child(1) .hl__title {
	font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.3rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-wrap: balance;
	-webkit-line-clamp: 4;
}

/* Base only: cells 4–9 are image-left horizontal rows. The image is taken out
   of flow and absolutely positioned so it never imposes its intrinsic height on
   the flex row (which otherwise stretches the card very tall in Firefox/Chrome);
   the media box just stretches to the height of the text beside it. */
.hl__cell:nth-child(n+4) .hl__card { flex-direction: row; }
.hl__cell:nth-child(n+4) .hl__media {
	flex: 0 0 38%;
	align-self: stretch;
	min-height: 0;
}
.hl__cell:nth-child(n+4) .hl__img,
.hl__cell:nth-child(n+4) .hl__img--placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}
.hl__cell:nth-child(n+4) .hl__body { justify-content: flex-start; min-width: 0; }

/* Fixed card proportions (base) from the spec so a card's height never depends
   on its headline length — the sizes drive the layout, the text clips to fit. */
.hl__cell:nth-child(1) .hl__card { aspect-ratio: 567 / 503; }
.hl__cell:nth-child(2) .hl__card,
.hl__cell:nth-child(3) .hl__card { aspect-ratio: 280 / 273; }
.hl__cell:nth-child(n+4) .hl__card { aspect-ratio: 567 / 160; }

/* >= 600px — three columns; the lead spans two of them. */
@media (min-width: 600px) {
	.hl__grid {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 2fr 2fr 2fr 1fr;
		aspect-ratio: 866 / 941;
		grid-template-areas:
			"s1 s1 s2"
			"s1 s1 s3"
			"s6 s7 s4"
			"s5 s8 s9";
	}
	/* The fixed grid proportions take over from the per-card ratios. */
	.hl__cell:nth-child(1) .hl__card,
	.hl__cell:nth-child(2) .hl__card,
	.hl__cell:nth-child(3) .hl__card { aspect-ratio: auto; }
	/* Cards return to image-top; the image rejoins normal flow. */
	.hl__cell:nth-child(n+4) .hl__card { flex-direction: column; aspect-ratio: auto; }
	.hl__cell:nth-child(n+4) .hl__media { flex: none; align-self: auto; }
	.hl__cell:nth-child(n+4) .hl__img,
	.hl__cell:nth-child(n+4) .hl__img--placeholder {
		position: static;
		inset: auto;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	.hl__cell:nth-child(n+4) .hl__body { justify-content: flex-start; }
	/* Text-only promos at this width: slots 5, 8, 9. */
	.hl__cell:nth-child(5) .hl__media,
	.hl__cell:nth-child(8) .hl__media,
	.hl__cell:nth-child(9) .hl__media { display: none; }
	.hl__cell:nth-child(5) .hl__body,
	.hl__cell:nth-child(8) .hl__body,
	.hl__cell:nth-child(9) .hl__body { justify-content: flex-start; }
}

/* >= 900px — four columns, three rows. */
@media (min-width: 900px) {
	.hl__grid {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 2fr 2fr 1fr;
		aspect-ratio: 976 / 792;
		grid-template-areas:
			"s1 s1 s2 s3"
			"s1 s1 s6 s7"
			"s4 s5 s8 s9";
	}
	/* Slot 4 becomes a text-only promo too. */
	.hl__cell:nth-child(4) .hl__media { display: none; }
	.hl__cell:nth-child(4) .hl__body { justify-content: flex-start; }
	/* Wider columns give the secondary cards a tall text area — let headlines
	   use more of it before truncating. (The lead keeps its own clamp.) */
	.hl__title { -webkit-line-clamp: 6; }
}

/* >= 1280px — full grid: a tall lead column beside two stacked card columns. */
@media (min-width: 1280px) {
	.hl__grid {
		grid-template-columns: 2fr 1fr 1fr 1fr;
		grid-template-rows: repeat(4, 1fr);
		aspect-ratio: 1246 / 640;
		grid-template-areas:
			"s1 s2 s3 s4"
			"s1 s2 s3 s5"
			"s1 s6 s7 s8"
			"s1 s6 s7 s9";
	}
}

/* ---------- Category section (magazine card row) ----------
   Reuses the Headlines card visuals (.hl__card/.hl__media/.hl__body/.hl__title)
   but lays them out in a simple uniform grid rather than the hero's asymmetric
   grid-areas. One column on mobile, two at 600px, four at 900px. */
.cat-section { margin-bottom: 1.5rem; }
.cat-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}
.cat-cell { display: flex; }
@media (min-width: 600px) {
	.cat-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
	.cat-grid { grid-template-columns: repeat(4, 1fr); }
}
.section-heading a { color: inherit; text-decoration: none; }
.section-heading a:hover { text-decoration: underline; }

/* ---------- Teaser grid ---------- */
.teaser-grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr;
}
.teaser { background: var(--color-surface); box-shadow: var(--shadow-card); border-radius: var(--radius); overflow: hidden; }
.teaser__media { position: relative; }
.teaser__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.teaser__img--placeholder { display: block; aspect-ratio: 16 / 9; background: var(--color-border); }
.teaser__body { padding: 0.75rem 0.85rem 1rem; }
.teaser__title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.teaser__title a { color: var(--color-ink); text-decoration: none; }
.teaser__title a:hover { color: var(--color-blue); }
.teaser__meta { margin-top: 0.4rem; color: var(--color-meta); font-family: var(--font-head); font-size: 0.78rem; }

/* ---------- Ad slots ---------- */
.ad-slot:empty { display: none; }
.ad-slot {
	margin: 1.5rem auto;
	text-align: center;
	max-width: 100%;
}

/* ---------- Article ---------- */
.container--article { max-width: var(--measure); }
.article__header { margin-bottom: 1rem; }
.article__title { font-size: 2rem; font-weight: 800; margin: 0.35rem 0 0.5rem; }
.article__standfirst {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: 1.2rem;
	color: #34373c;
	margin: 0 0 0.75rem;
}
.article__meta { color: var(--color-meta); font-family: var(--font-head); font-size: 0.95rem; }
.article__meta,
.article__meta a,
.article__meta time { text-decoration: none; }
.article__author { font-weight: 600; color: #4a4d54; }
.article__meta-sep { margin: 0 0.4em; }
.article__media { margin: 0 0 1.25rem; }
.article__img { width: 100%; border-radius: var(--radius); }
.article__credit {
	margin-top: 0.4rem;
	color: var(--color-meta);
	font-family: var(--font-head);
	font-size: 0.8rem;
}
.article__strapline {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.4;
	color: var(--color-ink);
	margin: 0 0 1.25rem;
	padding-left: 0.9rem;
	border-left: 3px solid var(--color-blue);
}
.article__body { font-size: 1.15rem; }
.article__body p { margin: 0 0 1.15rem; }
.article__body a,
.article__body a:hover,
.article__body a:focus { text-decoration: underline; }
.article__body img { border-radius: var(--radius); margin-block: 1rem; }
.article__body h2 { font-size: 1.5rem; margin-top: 1.6rem; }
.article__body h3 { font-size: 1.25rem; margin-top: 1.4rem; }
.article__body blockquote {
	margin: 1.25rem 0;
	padding: 0.5rem 0 0.5rem 1.1rem;
	border-left: 4px solid var(--color-blue);
	color: #2a2c30;
}

/* ---------- Single layout + sidebar ---------- */
/* Desktop-only leaderboard above single articles (Advanced Ads group). Hidden
   on mobile/tablet where a 720-wide banner won't fit the column. */
.article-leaderboard { display: none; }
@media (min-width: 992px) {
	.article-leaderboard {
		display: flex;
		justify-content: center;
		max-width: var(--container);
		margin: 0 auto 1.75rem;
		padding-inline: 1rem;
	}
}
.single-layout {
	width: 100%;
	max-width: var(--measure);
	margin-inline: auto;
	padding-inline: 1rem;
}
.widget-area { margin-top: 2.5rem; }
.widget {
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
	border-radius: var(--radius);
	padding: 1rem 1.1rem;
	margin-bottom: 1.25rem;
}
.widget:last-child { margin-bottom: 0; }
.widget-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-blue);
	border-bottom: 2px solid var(--color-blue);
	padding-bottom: 0.35rem;
	margin: 0 0 0.85rem;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { margin-bottom: 0.6rem; line-height: 1.35; }
.widget a { text-decoration: none; }
.widget a:hover { text-decoration: underline; }
.widget-recent li {
	font-family: var(--font-head);
	font-size: 0.95rem;
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 0.6rem;
}
.widget-recent li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

@media (min-width: 992px) {
	.single-layout {
		max-width: var(--container);
		display: grid;
		grid-template-columns: minmax(0, var(--measure)) 300px;
		justify-content: center;
		gap: 3rem;
		align-items: start;
	}
	.widget-area {
		margin-top: 0;
		position: sticky;
		top: 1rem;
	}
}

/* ---------- Newsletter ---------- */
.newsletter {
	background: var(--color-blue);
	color: #fff;
	border-radius: var(--radius);
	margin: 2rem 0;
}
.newsletter__inner { padding: 1.5rem 1.25rem; }
.newsletter__title { color: #fff; font-size: 1.3rem; }
.newsletter__text { margin: 0 0 1rem; opacity: 0.92; }
.newsletter__form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.newsletter__input {
	flex: 1 1 220px;
	font-size: 1rem;
	padding: 0.6rem 0.7rem;
	border: 0;
	border-radius: var(--radius);
}
.newsletter__btn { background: var(--color-breaking); }
.newsletter__btn:hover { background: #b21f1d; }
.newsletter__placeholder { margin: 0; opacity: 0.85; font-style: italic; }

/* ---------- Pagination ---------- */
.pagination { margin-top: 1.75rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.pagination .page-numbers {
	display: inline-block;
	font-family: var(--font-head);
	font-weight: 600;
	padding: 0.45rem 0.7rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--color-ink);
}
.pagination .page-numbers.current { background: var(--color-blue); color: #fff; border-color: var(--color-blue); }

/* ---------- Archive / search headers ---------- */
.archive-header { margin-bottom: 1.25rem; }
.archive-title { font-size: 1.75rem; font-weight: 800; }
.archive-description { color: var(--color-meta); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-ink); color: var(--color-paper); margin-top: 2rem; }
.site-footer__top {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	padding-block: 2rem;
}
.site-footer__title { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: #fff; }
.site-footer__about { color: #c9cbd2; margin: 0.5rem 0 0; }
.site-footer .custom-logo { filter: brightness(0) invert(1); max-height: 44px; }
.site-footer__logo-link { display: inline-block; }
.site-footer__logo { display: block; height: 48px; width: auto; max-width: 100%; }
.footer-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin-bottom: 0.4rem; }
.footer-menu a { color: var(--color-paper); text-decoration: none; font-family: var(--font-head); font-size: 0.95rem; }
.footer-menu a:hover { color: #fff; text-decoration: underline; }
.site-footer__newsletter .newsletter { margin: 0; }
.site-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.site-footer__copy { margin: 0; padding-block: 1rem; color: #9b9ea7; font-family: var(--font-head); font-size: 0.82rem; }
.site-footer__copy-link { color: #c9cbd2; text-decoration: underline; }
.site-footer__copy-link:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
	.nav-toggle { display: none; }
	.site-logo__img { height: 54px; }
	.primary-menu { display: flex; flex-direction: row; gap: 1.5rem; }
	.primary-menu li { border-top: 0; }
	.primary-menu a { padding: 0.85rem 0; }

	.teaser-grid { grid-template-columns: repeat(2, 1fr); }

	.site-footer__top { grid-template-columns: 2fr 1fr; }
}

@media (min-width: 992px) {
	.teaser-grid { grid-template-columns: repeat(3, 1fr); }

	.article__title { font-size: 2.4rem; }
}