/*
 * WuzupNigeria — main stylesheet (shared PUNCH "amb" component layer + wz-* site components).
 * Mobile-first. Red brand kept from the current site, cleaner "business" feel.
 * Page-specific styles (homepage sections, article, archive, author) are added
 * in later phases and will live in this file in clearly-labelled blocks.
 */

/* ============================================================= *
 * 1. Design tokens
 * ============================================================= */
:root {
	/* Brand */
	--amb-red: #e60000;        /* WuzupNigeria red (primary, from the W mark) */
	--amb-red-600: #ff1f1f;
	--amb-red-700: #b30000;
	--amb-gold: #22b866;          /* Nigeria-green accent (from the N mark) — hovers on dark panels */
	--amb-flash: #008751;         /* Nigeria green category flash */
	--amb-ink: #14161a;        /* near-black body text */
	--amb-ink-2: #3a3f47;      /* secondary text */
	--amb-muted: #6b7280;      /* meta text */
	--amb-line: #e4e7ec;       /* hairlines/borders */
	--amb-bg: #ffffff;
	--amb-bg-2: #eef1f6;       /* alternating section bg — a soft cool grey */
	--amb-bg-3: #e5e9f0;       /* deeper tint for panels/thumbnails */
	--amb-tint: #f6f8fb;       /* very light page wash behind white cards */
	--amb-card: #ffffff;
	--amb-navy: #191c20;       /* charcoal carried over from the old nav — depth panels */

	/* Type */
	--amb-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--amb-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Layout */
	--amb-max: 1400px;
	--amb-gap: 24px;
	--amb-radius: 8px;
	--amb-shadow: 0 1px 3px rgba(16, 22, 30, .08), 0 1px 2px rgba(16, 22, 30, .04);

	--amb-header-h: 60px;
	--amb-topbar-h: 40px;
}

/* Smooth the light↔dark switch so it eases instead of snapping. Scoped to the
 * surfaces that actually change colour (not "*", which would make every hover
 * sluggish). Disabled under prefers-reduced-motion at the foot of this file. */
body, .amb-topbar, .amb-card, .amb-footer, .amb-ad__tag, .amb-cat-badge,
.amb-searchform__input, .amb-page-title, .amb-card__title, .amb-prose,
.pagination .page-numbers {
	transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* Dark mode — toggled by adding data-theme="dark" on <html> (see main.js). */
:root[data-theme="dark"] {
	--amb-ink: #e9ebee;
	--amb-ink-2: #c3c7cd;
	--amb-muted: #9aa1ab;
	--amb-line: #2a2e35;
	--amb-bg: #0f1114;
	--amb-bg-2: #15181c;
	--amb-bg-3: #1b1f24;
	--amb-card: #15181c;
	--amb-tint: #101316;
	--amb-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* ============================================================= *
 * 2. Reset / base
 * ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip stops anything (a full-width ad, a wide embed) from pushing
   the page past the viewport and creating a right-edge gutter / horizontal
   scroll on mobile. clip (not hidden) doesn't create a scroll container, so it
   leaves sticky/position contexts intact. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
	margin: 0;
	font-family: var(--amb-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--amb-ink);
	background: var(--amb-tint); /* soft wash so white cards/panels lift off it */
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--amb-red); }
h1, h2, h3, h4 { font-family: var(--amb-serif); line-height: 1.2; margin: 0 0 .5em; color: var(--amb-ink); }
button { font-family: inherit; cursor: pointer; }

.amb-container { width: 100%; max-width: var(--amb-max); margin-inline: auto; padding-inline: 16px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.amb-skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto;
	clip: auto; background: var(--amb-red); color: #fff; padding: 8px 16px; border-radius: 4px;
}
.amb-dot { color: var(--amb-line); margin: 0 4px; }

/* ============================================================= *
 * 3. Header — top bar + nav
 * ============================================================= */
/* The whole header is the sticky element, offset UP by the topbar's height so
 * that on scroll the thin top utility bar slides out of view and the red nav
 * bar pins flush to the top and stays there. (A sticky child trapped inside a
 * short header only sticks while that header box is on screen — this makes the
 * header itself the sticky box, with the body as its containing block, so the
 * nav stays pinned down the whole page.) */
.amb-header { position: sticky; top: calc(-1 * var(--amb-topbar-h)); z-index: 100; }
.amb-topbar { background: var(--amb-bg-2); border-bottom: 1px solid var(--amb-line); }
.amb-topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--amb-topbar-h); }
.amb-topbar__cta {
	background: var(--amb-red); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .04em;
	padding: 7px 18px; border-radius: 4px;
}
.amb-topbar__cta:hover { background: var(--amb-red-700); color: #fff; }

.amb-navbar { background: var(--amb-red); color: #fff; box-shadow: var(--amb-shadow); }
.amb-navbar__inner { display: flex; align-items: center; gap: 12px; min-height: var(--amb-header-h); }
.amb-navbar a { color: #fff; }

.amb-logo { display: flex; align-items: center; margin-right: auto; }
/* Logo shown in its own brand colours. Sits on a white chip so the green/navy
 * mark stays legible against the red nav bar (and the dark footer). */
.amb-logo__img { height: 34px; width: auto; }
.amb-logo { background: #fff; padding: 5px 10px; border-radius: 6px; }

.amb-nav__list { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.amb-nav__list a { font-weight: 600; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; padding: 6px 0; display: inline-block; }
.amb-nav__list a:hover { color: #ffe3e3; }

.amb-navbar__tools { display: flex; align-items: center; gap: 6px; }
.amb-theme-toggle, .amb-search-toggle, .amb-nav-toggle {
	background: transparent; border: 0; color: #fff; padding: 8px; display: inline-flex; border-radius: 4px;
}
.amb-theme-toggle:hover, .amb-search-toggle:hover, .amb-nav-toggle:hover { background: rgba(255,255,255,.15); }
.amb-icon--sun { display: none; }
:root[data-theme="dark"] .amb-icon--moon { display: none; }
:root[data-theme="dark"] .amb-icon--sun { display: block; }

/* Hamburger (hidden on desktop) */
.amb-nav-toggle { flex-direction: column; gap: 4px; display: none; }
.amb-nav-toggle__bar { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: .2s; }

/* Search slide-down */
.amb-search-panel { background: var(--amb-red-700); padding: 14px 0; }
.amb-searchform { display: flex; gap: 8px; }
.amb-searchform__input { flex: 1; border: 0; border-radius: 4px; padding: 11px 14px; font-size: 15px; background: #fff; color: var(--amb-ink); }
.amb-searchform__btn { background: var(--amb-navy); color: #fff; border: 0; border-radius: 4px; padding: 0 16px; display: inline-flex; align-items: center; }

/* ============================================================= *
 * 4. Social icons
 * ============================================================= */
.amb-social { list-style: none; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; }
.amb-social__link { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; transition: .15s; }
.amb-social--top .amb-social__link { color: var(--amb-ink-2); }
.amb-social--top .amb-social__link:hover { color: var(--amb-red); }
.amb-social--footer .amb-social__link, .amb-social--bar .amb-social__link { color: var(--amb-muted); }
.amb-social--footer .amb-social__link:hover, .amb-social--bar .amb-social__link:hover { color: var(--amb-red); }

/* ============================================================= *
 * 5. Layout + cards (generic, used by fallback templates)
 * ============================================================= */
.amb-main { min-height: 50vh; }
.amb-layout { padding-block: 32px; }
.amb-page-title { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 24px; }

.amb-cards { display: grid; grid-template-columns: 1fr; gap: var(--amb-gap); }
/* Card fills its grid cell so every card in a row is the same height; the
 * media is a fixed aspect ratio and the title is line-clamped, so cards stay
 * consistent regardless of headline length. */
.amb-card { background: var(--amb-card); border: 1px solid var(--amb-line); border-radius: var(--amb-radius); overflow: hidden; display: flex; flex-direction: column; height: 100%; box-shadow: var(--amb-shadow); transition: box-shadow .18s ease, transform .18s ease; }
.amb-card:hover { box-shadow: 0 6px 18px rgba(16, 22, 30, .1), 0 2px 6px rgba(16, 22, 30, .06); }
.amb-card__media { display: block; aspect-ratio: 3 / 2; background: var(--amb-bg-3); overflow: hidden; }
.amb-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.amb-card:hover .amb-card__media img { transform: scale(1.04); }
.amb-thumb--empty { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--amb-bg-3), var(--amb-bg-2)); }
.amb-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.amb-card__title { font-size: 1.12rem; margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.amb-card__title a:hover { color: var(--amb-red); }
.amb-card__meta { font-size: 12.5px; color: var(--amb-muted); margin-top: auto; }
.amb-byline a { color: var(--amb-ink-2); font-weight: 600; }

.amb-cat-badge {
	align-self: flex-start; background: var(--amb-red); color: #fff; font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 3px;
}
.amb-cat-badge:hover { background: var(--amb-red-700); color: #fff; }

/* ============================================================= *
 * 5b. Homepage — hero, sections, feature blocks, buttons
 * ============================================================= */

/* Buttons */
.amb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 12px 26px; border-radius: 6px; border: 1px solid transparent; transition: .15s; }
.amb-btn--outline { border-color: var(--amb-line); color: var(--amb-ink); background: var(--amb-bg); }
.amb-btn--outline:hover { border-color: var(--amb-red); color: var(--amb-red); }
.amb-viewcats { text-align: center; padding-block: 8px 40px; }

/* Section wrapper + heading with the red marker */
.amb-section { padding-block: 36px; }
.amb-section--muted { background: var(--amb-bg-2); }
.amb-section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.amb-section__title { position: relative; font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0; padding-left: 16px; }
.amb-section__title::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 6px; border-radius: 2px; background: var(--amb-red); }
.amb-section__more { font-size: 13px; font-weight: 600; color: var(--amb-muted); white-space: nowrap; }
.amb-section__more:hover { color: var(--amb-red); }
.amb-section__more span { color: var(--amb-red); }

/* Grids. Desktop: grid-3 = 3 cols, grid-4 = 4 cols. Tablet: grid-3 = 2,
 * grid-4 = 3. Mobile: grid-3 stacks; grid-4 becomes compact horizontal cards
 * (image left + text right), echoing the hero's secondary cards but tighter,
 * since these sit lower down the page. */
.amb-grid { display: grid; gap: var(--amb-gap); grid-template-columns: 1fr; }
@media (min-width: 600px) and (max-width: 991px) {
	.amb-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.amb-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.amb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.amb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.amb-grid--4 { gap: 12px; }
	.amb-grid--4 .amb-card { flex-direction: row; align-items: stretch; }
	.amb-grid--4 .amb-card__media { flex: 0 0 104px; width: 104px; height: auto; aspect-ratio: 1 / 1; }
	.amb-grid--4 .amb-card__body { flex: 1; justify-content: center; padding: 8px 12px; gap: 4px; }
	.amb-grid--4 .amb-card__title { font-size: .88rem; -webkit-line-clamp: 2; }
	.amb-grid--4 .amb-card__meta { font-size: 11px; }
	.amb-grid--4 .amb-cat-badge { font-size: 9.5px; padding: 2px 6px; }
}

/* Hero */
.amb-hero { padding-block: 24px 8px; }
.amb-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--amb-gap); }
.amb-hero__main { display: flex; flex-direction: column; gap: var(--amb-gap); }

/* Two-pane lead card: text panel + image, via flexbox (reliable stretch).
 * Mobile = image on top, text below. The image is absolutely positioned and
 * object-fit:cover, so a tall/huge featured image is always cropped to fit and
 * can never balloon the block. */
.amb-lead { display: flex; flex-direction: column; background: #16181d; border-radius: var(--amb-radius); overflow: hidden; }
.amb-lead__media { order: -1; position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.amb-lead__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.amb-lead__text { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 26px; color: #fff; }
.amb-lead__cats .amb-cat-badge { position: static; }
.amb-lead__title { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; line-height: 1.18; }
.amb-lead:hover .amb-lead__title { color: #ffd9d9; }
.amb-lead__excerpt { margin: 0; color: #c7ccd4; font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.amb-lead__meta { font-size: 12.5px; color: #9aa1ab; }

/* Two secondary cards — always 2-up (so they stay compact, incl. on phones)
 * and smaller than standard cards now the hero lead is taller. */
/* Three secondary cards under the hero. Narrower columns, so the image is a
 * touch shorter and the type scaled down to read cleanly at this width. */
.amb-hero__secondary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.amb-hero__secondary .amb-card__media { aspect-ratio: auto; height: 130px; }
.amb-hero__secondary .amb-card__body { padding: 9px 11px 11px; gap: 5px; }
.amb-hero__secondary .amb-card__title { font-size: .92rem; line-height: 1.26; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.amb-hero__secondary .amb-card__meta { font-size: 11.5px; }
.amb-hero__secondary .amb-cat-badge { font-size: 10px; padding: 2px 7px; }
/* Phones: 3-up is too tight, so drop to a compact 1-column stack with a short,
 * wide image — the cards read clearly as secondary to the hero. */
@media (max-width: 559px) {
	.amb-hero__secondary { grid-template-columns: 1fr; gap: 12px; }
	.amb-hero__secondary .amb-card { flex-direction: row; align-items: stretch; }
	.amb-hero__secondary .amb-card__media { height: auto; width: 128px; flex: 0 0 128px; aspect-ratio: 1 / 1; }
	.amb-hero__secondary .amb-card__body { flex: 1; justify-content: center; }
	.amb-hero__secondary .amb-card__title { font-size: .92rem; }
}

/* Overlay card (used by hero feature-list image + section feature) */
.amb-hero__card { position: relative; display: block; border-radius: var(--amb-radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--amb-ink); height: 100%; }
.amb-hero__media { position: absolute; inset: 0; }
.amb-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.amb-hero__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 22px; color: #fff; background: linear-gradient(to top, rgba(10,12,16,.92) 8%, rgba(10,12,16,.55) 45%, rgba(10,12,16,0) 75%); }
.amb-hero__title { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0; font-family: var(--amb-serif); line-height: 1.2; }
.amb-hero__card:hover .amb-hero__title { color: #ffd9d9; }
.amb-hero__meta { font-size: 12.5px; color: #cfd3d9; }
.amb-hero__cats .amb-cat-badge { position: static; }

.amb-hero__side { display: flex; flex-direction: column; }
.amb-hero__side-title { font-family: var(--amb-serif); font-size: 1.1rem; padding-bottom: 10px; margin: 0 0 4px; border-bottom: 2px solid var(--amb-red); }
.amb-hero__list { display: flex; flex-direction: column; flex: 1; }
/* By default the rail shows 6 stories (desktop & mobile); items 7–12 appear
 * only on tablet, where the rail drops below as a 6+6 two-column block. */
.amb-hero__list .amb-row:nth-child(n+7) { display: none; }

@media (min-width: 560px) {
	/* Side-by-side: text panel left, image right. align-items:stretch + a
	 * min-height makes both halves the same height; the image covers its half. */
	.amb-lead { flex-direction: row; align-items: stretch; min-height: 340px; }
	.amb-lead__media { order: 0; flex: 1 1 56%; aspect-ratio: auto; }
	.amb-lead__text { flex: 0 0 44%; }
}

/* Horizontal list rows. The thumbnail is a fixed, perfect square (shrunk, not
 * grown, to stay square) and the title is clamped to 2 lines so every row is a
 * consistent height and the column aligns cleanly. */
.amb-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--amb-line); align-items: flex-start; }
.amb-row:last-child { border-bottom: 0; }
.amb-row__media { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 6px; overflow: hidden; background: var(--amb-bg-3); }
.amb-row__media img { width: 100%; height: 100%; object-fit: cover; }
.amb-row__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.amb-row__title { font-size: .96rem; margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.amb-row__title a:hover { color: var(--amb-red); }
.amb-row__meta { font-size: 12px; color: var(--amb-muted); }

/* Feature block: one big story + a list of 4 (8 on tablet). 'feature' = image
 * right / list left; '--flip' = image left / list right. On desktop both sides
 * are equal height (the image covers to match the list). */
.amb-feature { display: grid; grid-template-columns: 1fr; gap: var(--amb-gap); }
.amb-feature__main { order: -1; } /* mobile: image on top */
.amb-feature__main .amb-hero__card { height: 100%; aspect-ratio: 16 / 10; min-height: 220px; }
.amb-feature__list { display: flex; flex-direction: column; justify-content: space-between; }
/* Desktop & mobile show 4 list rows; tablet reveals all 8. */
.amb-feature__list .amb-row:nth-child(n+5) { display: none; }

@media (min-width: 680px) and (max-width: 991px) {
	.amb-feature__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
	.amb-feature__list .amb-row:nth-child(n+5) { display: flex; }
	.amb-feature__list .amb-row__title { -webkit-line-clamp: 3; }
}

/* Card size variants */
.amb-card--lg .amb-card__title { font-size: 1.45rem; -webkit-line-clamp: 3; }
.amb-card--lg .amb-card__excerpt { color: var(--amb-ink-2); font-size: 15px; margin: 0; }
.amb-card--sm .amb-card__title { font-size: 1rem; -webkit-line-clamp: 2; }
.amb-card--sm .amb-card__media { aspect-ratio: 16 / 10; }
.amb-card__excerpt { margin: 0; color: var(--amb-muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Tablet: the rail has dropped below the main column, so show all 12 Latest
 * News stories as an even 6 + 6 two-column block, with a slightly looser
 * 3-line title clamp since the columns are tighter here. */
@media (min-width: 680px) and (max-width: 991px) {
	.amb-hero__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
	.amb-hero__list .amb-row:nth-child(n+7) { display: flex; }
	.amb-hero__list .amb-row__title { -webkit-line-clamp: 3; }
}

@media (min-width: 992px) {
	.amb-hero__grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; }
	/* Lead grows to fill the column so the left side (lead + 3 cards) ends
	 * level with the bottom of the 6th Latest-News card on the right. */
	.amb-hero__main .amb-lead { flex: 1 1 auto; }

	/* Feature: list left (1fr) + image right (1.6fr), equal height. */
	.amb-feature { grid-template-columns: 1fr 1.6fr; align-items: stretch; }
	.amb-feature__list { order: 1; }
	.amb-feature__main { order: 2; }
	/* Flip: image left + list right. */
	.amb-feature--flip { grid-template-columns: 1.6fr 1fr; }
	.amb-feature--flip .amb-feature__main { order: 1; }
	.amb-feature--flip .amb-feature__list { order: 2; }
}

/* Text-only list rows (no thumbnail) — sidebar Latest/Related */
.amb-row--text { align-items: flex-start; }
.amb-row--text .amb-row__title { font-size: .95rem; }
.amb-widget__list--text .amb-row { padding: 11px 0; }

/* Under-article "Top News" block (punchng-style: 1 big + 3 columns of 3) */
.amb-topnews { margin-top: 44px; padding-top: 26px; border-top: 2px solid var(--amb-red); }
.amb-topnews .amb-section__title { margin-bottom: 20px; }
.amb-topnews__grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.amb-topnews__lead .amb-topnews__media { display: block; aspect-ratio: 16 / 10; border-radius: var(--amb-radius); overflow: hidden; background: var(--amb-bg-3); margin-bottom: 10px; }
.amb-topnews__lead .amb-topnews__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.amb-topnews__lead:hover .amb-topnews__media img { transform: scale(1.04); }
.amb-topnews__title { font-size: 1.15rem; margin: 0 0 6px; line-height: 1.25; }
.amb-topnews__title a:hover { color: var(--amb-red); }
.amb-topnews__date { font-size: 12px; color: var(--amb-muted); }
.amb-topnews__col { display: flex; flex-direction: column; }
.amb-topnews__item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--amb-line); }
.amb-topnews__item:last-child { border-bottom: 0; }
.amb-topnews__item-media { flex: 0 0 74px; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: var(--amb-bg-3); }
.amb-topnews__item-media img { width: 100%; height: 100%; object-fit: cover; }
.amb-topnews__item-title { font-size: .9rem; margin: 0; line-height: 1.3; }
.amb-topnews__item-title a:hover { color: var(--amb-red); }
@media (min-width: 680px) {
	.amb-topnews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.amb-topnews__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* More Post block: wide recent-stories grid + a slim advert rail on the right. */
.amb-section--more { padding-block: 36px; }
.amb-more { display: grid; grid-template-columns: 1fr; gap: var(--amb-gap); }
.amb-more__rail { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
@media (min-width: 992px) {
	.amb-more { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}

/* ============================================================= *
 * 6. Advert slots (placeholders until the ads pass)
 * ============================================================= */
.amb-ad { margin: 24px auto; text-align: center; }
.amb-ad__tag {
	display: inline-flex; align-items: center; justify-content: center; width: 100%;
	min-height: 90px; border: 1px dashed var(--amb-line); border-radius: var(--amb-radius);
	color: var(--amb-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--amb-bg-2);
}

/* --- Site ad frame: the permanent, consistent wrapper for EVERY ad slot. ---
 * A thin border + a small, very faint "Advertisement" label on top, so a loaded
 * creative always reads as a contained, labelled unit rather than a floating
 * image. Reusable site-wide (hero rails, sidebar, in-article, leaderboard). */
/* The frame (border + faint "Advertisement" label + padding) appears ONLY once an
   ad actually FILLS — the footer monitor adds .amb-ad--live. An unfilled slot shows
   nothing and is collapsed, so a low-fill page isn't littered with empty labelled
   boxes. Width is kept so responsive units can still measure their container. */
.amb-ad--framed { display: block; width: fit-content; max-width: 100%; border-radius: 6px; }
.amb-ad--framed.amb-ad--live { border: 1px solid var(--amb-line); background: var(--amb-bg); padding: 5px 5px 6px; }
/* Standalone framed ads (e.g. the homepage leaderboard) centre in their block
   container via the base .amb-ad { margin: 24px auto }. In the hero they sit in
   flex centres, so margins there are zeroed below. */
.amb-ad__label { display: none; margin: 0 0 5px; font-size: 9px; line-height: 1; letter-spacing: .14em;
	text-transform: uppercase; text-align: center; color: var(--amb-muted); opacity: .45; }
.amb-ad--live .amb-ad__label { display: block; } /* label only on a filled ad */
.amb-ad__box { display: flex; align-items: center; justify-content: center; max-width: 100%; }
.amb-ad__box--empty { background: var(--amb-bg-2); border-radius: 3px; max-width: 100%; }
.amb-ad__dims { font-size: 11px; letter-spacing: .06em; color: var(--amb-muted); opacity: .55; }

/* The standalone homepage leaderboard (between sections) is DESKTOP-ONLY: a
   728×90 banner doesn't suit phones, and on tablet the hero already carries its
   own mid leaderboard. Hidden below 992px, centred on desktop. */
.amb-ad--leaderboard { display: none; }
@media ( min-width: 992px ) { .amb-ad--leaderboard { display: block; } }

/* Full-width self-sizing ads (Multiplex + Responsive) — fill the column width,
   overriding the frame's fit-content. */
.amb-ad--flex { width: 100%; }
/* Responsive/multiplex/in-article frames must fill their column — never
   width:fit-content (from .amb-ad--framed), which collapses a not-yet-filled
   responsive unit to 0 width and blocks it from rendering. */
.amb-ad--flex.amb-ad--framed { width: 100%; }
.amb-ad__box--flex { display: block; width: 100%; min-height: 0; } /* no reserved empty space; height comes from the filled ad */
/* The REAL ad box for a self-sizing ad (responsive / multiplex / in-article) must
   be a plain block so the width:100% <ins> fills it with no flex ambiguity — a
   flex .amb-ad__box can measure a Matched-Content / Multiplex unit to 0 width
   ("Invalid responsive width 0"). Fixed-size ads aren't .amb-ad--flex, so they
   keep the centred flex box above. */
.amb-ad--flex .amb-ad__box { display: block; width: 100%; }
.amb-ad--flex .amb-ad__box > .adsbygoogle { width: 100%; max-width: 100%; }

/* In-content ad ROWS, shown by breakpoint via their CONTAINER — so the same ad
   UNIT can also appear in the desktop sidebar with no class conflict.
   - mobile rows (300×250, half page): phones only.
   - desktop rows (Multiplex): tablet + desktop. */
.wz-adrow--mobile { display: none; }
.wz-adrow--desktop { display: none; }
@media ( max-width: 767px ) { .wz-adrow--mobile { display: block; } }
@media ( min-width: 768px ) { .wz-adrow--desktop { display: block; } }

/* --- Lower homepage region: main content column + right AD SIDEBAR -------- *
 * From City News down. Single column on mobile/tablet; on desktop the sidebar
 * appears as a right rail of ads with the last unit sticky to the footer. */
.wz-lower { margin-top: 8px; }
.wz-lower__sidebar { display: none; }
/* Lower sections fill the main column (neutralise their nested container). */
.wz-lower__main .amb-container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
@media ( min-width: 992px ) {
	.wz-lower { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; }
	/* The sidebar stretches to the row height so the last (sticky) half page has
	   room to travel and stay pinned until the footer, once the main column has
	   enough content to be the taller side. */
	.wz-lower__sidebar { display: flex; flex-direction: column; gap: 24px; align-self: stretch; }
	.wz-lower__sidebar .amb-ad { margin: 0 auto; }
	.wz-lower__sticky { position: sticky; top: 84px; } /* half page 2 sticks while the page scrolls */
}

/* ============================================================= *
 * 6b. Breadcrumbs
 * ============================================================= */
.amb-breadcrumbs { font-size: 12.5px; color: var(--amb-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.amb-breadcrumbs a:hover { color: var(--amb-red); }
.amb-breadcrumbs__sep { color: var(--amb-line); }
.amb-breadcrumbs__current { color: var(--amb-ink-2); }

/* ============================================================= *
 * 6c. Article + sidebar layout
 * ============================================================= */

/* Reading progress bar */
.amb-progress { position: sticky; top: var(--amb-header-h); left: 0; height: 3px; z-index: 90; background: transparent; }
.amb-progress__bar { display: block; height: 100%; width: 0; background: var(--amb-red); transition: width .08s linear; }

.amb-article-wrap { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 32px; }
@media (min-width: 992px) {
	.amb-article-wrap { grid-template-columns: minmax(0, 1fr) 320px; }
	.amb-article-wrap--archive { grid-template-columns: minmax(0, 1fr) 300px; }
}
.amb-article { min-width: 0; max-width: 820px; }
.amb-article__cat { margin-bottom: 12px; }
.amb-article__title { font-size: clamp(1.8rem, 4.5vw, 2.9rem); line-height: 1.12; margin: 0 0 14px; }
.amb-article__standfirst { font-size: 1.2rem; color: var(--amb-ink-2); line-height: 1.5; margin: 0 0 20px; }
.amb-article__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--amb-line); border-bottom: 1px solid var(--amb-line); }
.amb-article__avatar { border-radius: 50%; }
.amb-article__meta-text { display: flex; flex-direction: column; margin-right: auto; }
.amb-article__meta-text .amb-byline a { color: var(--amb-ink); font-weight: 700; }
.amb-article__meta-sub { font-size: 12.5px; color: var(--amb-muted); }
.amb-article__figure { margin: 24px 0; }
.amb-article__figure img { width: 100%; border-radius: var(--amb-radius); }
.amb-article__caption { font-size: 12.5px; color: var(--amb-muted); margin-top: 8px; text-align: center; }
.amb-article__body { margin-top: 24px; }
.amb-article__tags { margin: 28px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.amb-tags__label { font-weight: 700; font-size: 13px; }
.amb-article__tags a { font-size: 12.5px; background: var(--amb-bg-2); border: 1px solid var(--amb-line); padding: 5px 11px; border-radius: 20px; color: var(--amb-ink-2); }
.amb-article__tags a:hover { border-color: var(--amb-red); color: var(--amb-red); }

/* Share */
.amb-share { display: flex; align-items: center; gap: 10px; }
.amb-share__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--amb-muted); }
.amb-social--share .amb-social__link { width: 34px; height: 34px; background: var(--amb-bg-2); border: 1px solid var(--amb-line); color: var(--amb-ink-2); }
.amb-social--share .amb-social__link:hover { background: var(--amb-red); border-color: var(--amb-red); color: #fff; }
/* Brand tints on hover for the share buttons */
.amb-social--share .amb-social__link--facebook:hover { background: #1877f2; border-color: #1877f2; }
.amb-social--share .amb-social__link--whatsapp:hover { background: #25d366; border-color: #25d366; }
.amb-social--share .amb-social__link--linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.amb-social--share .amb-social__link--x:hover { background: #000; border-color: #000; }

/* Article body + sticky share rail */
.amb-article__layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
.amb-share-rail { display: none; }
@media (min-width: 1100px) {
	.amb-article__layout { grid-template-columns: 52px minmax(0, 1fr); gap: 26px; }
	.amb-share-rail { display: block; }
	.amb-share--vertical { position: sticky; top: calc(var(--amb-header-h) + 24px); }
	.amb-share--vertical .amb-social--share { flex-direction: column; gap: 10px; }
	.amb-share--vertical .amb-social__link { width: 42px; height: 42px; }
}

/* Drop cap on the first paragraph */
.amb-article__body > p:first-of-type::first-letter {
	float: left; font-family: var(--amb-serif); font-weight: 700; font-size: 3.6em;
	line-height: .82; padding: 6px 10px 0 0; color: var(--amb-red);
}

/* Inline "Also read" callout */
.amb-alsoread { margin: 24px 0; padding: 12px 16px; border-left: 4px solid var(--amb-red); background: var(--amb-bg-2); border-radius: 0 6px 6px 0; }
.amb-alsoread__label { display: inline; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--amb-red); margin-right: 6px; }
.amb-alsoread__link { font-weight: 600; color: var(--amb-ink); }
.amb-alsoread__link:hover { color: var(--amb-red); text-decoration: underline; }

/* Fixed share bar (phones) */
.amb-sharebar { display: none; }
@media (max-width: 767px) {
	.amb-sharebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--amb-card); border-top: 1px solid var(--amb-line); box-shadow: 0 -2px 10px rgba(0,0,0,.08); padding: 8px 12px; }
	.amb-sharebar .amb-social--share { display: flex; justify-content: space-around; width: 100%; gap: 8px; }
	.amb-sharebar .amb-social__link { flex: 1; max-width: 64px; height: 40px; border-radius: 6px; }
	.amb-main { padding-bottom: 60px; } /* room for the fixed bar */
}

/* Author box */
.amb-authorbox { display: flex; gap: 16px; padding: 22px; background: var(--amb-bg-2); border: 1px solid var(--amb-line); border-radius: var(--amb-radius); margin: 32px 0; }
.amb-authorbox__avatar { border-radius: 50%; flex-shrink: 0; }
.amb-authorbox__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--amb-muted); font-weight: 700; }
.amb-authorbox__name { font-size: 1.25rem; margin: 2px 0 6px; }
.amb-authorbox__name a:hover { color: var(--amb-red); }
.amb-authorbox__bio { margin: 0; color: var(--amb-ink-2); font-size: 14.5px; }

/* Related */
.amb-related { margin-top: 40px; padding-top: 28px; border-top: 2px solid var(--amb-red); }
.amb-related .amb-section__title { margin-bottom: 20px; }

/* Sidebar / widgets */
/* Article sidebar is desktop-only (hidden on mobile + tablet, like the homepage
   sidebar) — the related content lives in the full-width "Top News" block. */
.amb-sidebar { min-width: 0; display: none; }
@media (min-width: 992px) { .amb-sidebar { display: block; } }
.amb-widget { margin-bottom: 32px; }
.amb-widget__title { font-size: 1.05rem; padding-bottom: 10px; margin: 0 0 12px; border-bottom: 2px solid var(--amb-red); }
.amb-ad--sticky { position: sticky; top: calc(var(--amb-header-h) + 20px); }

/* Category/archive grid: 3 columns on desktop AND tablet; on mobile the cards
 * become compact horizontal rows (image left + text right), like the cards under
 * the homepage hero. */
.amb-cat-grid { display: grid; gap: var(--amb-gap); grid-template-columns: 1fr; }
@media (min-width: 680px) {
	.amb-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 679px) {
	.amb-cat-grid { gap: 12px; }
	.amb-cat-grid .amb-card { flex-direction: row; align-items: stretch; }
	.amb-cat-grid .amb-card__media { flex: 0 0 116px; width: 116px; height: auto; aspect-ratio: 1 / 1; }
	.amb-cat-grid .amb-card__body { flex: 1; justify-content: center; padding: 10px 13px; gap: 5px; }
	.amb-cat-grid .amb-card__title { -webkit-line-clamp: 2; font-size: .96rem; }
	.amb-cat-grid .amb-card__excerpt { display: none; } /* keep mobile rows tight */
}

/* ============================================================= *
 * 6d. Archive + author + search + 404 headers
 * ============================================================= */
.amb-archive-head { background: var(--amb-bg-2); border-bottom: 1px solid var(--amb-line); padding-block: 30px; }
.amb-archive-head__title { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: 6px 0 8px; }
.amb-archive-head__title span { color: var(--amb-red); }
.amb-archive-head__desc { color: var(--amb-ink-2); max-width: 70ch; }
.amb-archive-head__count { font-size: 13px; color: var(--amb-muted); margin: 8px 0 0; }
.amb-archive-head__searchbar { max-width: 480px; margin-top: 14px; }
.amb-archive-head__searchbar .amb-searchform__input { border: 1px solid var(--amb-line); }

.amb-author-head { background: linear-gradient(135deg, var(--amb-navy), #0a0e52); color: #fff; padding-block: 40px; }
.amb-author-head__inner { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.amb-author-head__avatar { border-radius: 50%; border: 3px solid rgba(255,255,255,.25); }
.amb-author-head__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; font-weight: 700; }
.amb-author-head__name { color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 4px 0 8px; }
.amb-author-head__bio { margin: 0 0 8px; max-width: 70ch; color: #dfe2ee; }
.amb-author-head__count { margin: 0; font-size: 13px; opacity: .8; }
.amb-author-posts, .amb-search-results { padding-block: 36px; }

.amb-404 { text-align: center; padding-block: 60px; }
.amb-404__code { font-family: var(--amb-serif); font-size: clamp(4rem, 14vw, 8rem); color: var(--amb-red); line-height: 1; margin: 0; }
.amb-404__title { font-size: 1.8rem; margin: 6px 0 10px; }
.amb-404__text { color: var(--amb-ink-2); max-width: 46ch; margin: 0 auto 20px; }
.amb-404__search { max-width: 420px; margin: 0 auto 20px; }
.amb-404__latest { margin-top: 56px; text-align: left; }

/* ============================================================= *
 * 7. Prose (static pages, article body)
 * ============================================================= */
/* Static content pages */
.amb-page-head { background: var(--amb-bg-2); border-bottom: 1px solid var(--amb-line); padding-block: 34px; }
.amb-page-head__title { font-size: clamp(1.9rem, 5vw, 2.9rem); margin: 6px 0 6px; }
.amb-page-head__updated { font-size: 12.5px; color: var(--amb-muted); margin: 0; }
.amb-page-body { padding-block: 40px 20px; }
.amb-prose--page { max-width: 760px; margin-inline: auto; }
.amb-prose--page h2 { font-size: 1.5rem; margin-top: 1.7em; }
.amb-prose--page h3 { font-size: 1.2rem; margin-top: 1.4em; }
.amb-prose--page ul, .amb-prose--page ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.amb-prose--page li { margin-bottom: .5em; }

.amb-prose { font-size: 1.05rem; color: var(--amb-ink-2); }
.amb-prose p { margin: 0 0 1.2em; }
.amb-prose a { color: var(--amb-red); text-decoration: underline; }
.amb-prose h2, .amb-prose h3 { margin-top: 1.6em; color: var(--amb-ink); }
.amb-layout--page { max-width: 820px; }

/* ============================================================= *
 * 8. Footer
 * ============================================================= */
.amb-footer { background: #0e1013; color: #aeb4bd; margin-top: 56px; }
:root[data-theme="dark"] .amb-footer { background: #08090b; }
.amb-footer a { color: #c7cbd1; }
.amb-footer a:hover { color: #fff; }

.amb-footer__grid { display: grid; grid-template-columns: 1fr; gap: 36px; padding-block: 48px 40px; }
@media (min-width: 680px) { .amb-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .amb-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; } }

.amb-footer__heading { font-family: var(--amb-sans); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: #fff; margin: 0 0 16px; position: relative; padding-bottom: 10px; }
.amb-footer__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--amb-red); }

.amb-footer__brand .amb-footer__logo { display: inline-block; background: #fff; padding: 8px 12px; border-radius: 8px; }
.amb-footer__brand .amb-logo__img { height: 46px; }
.amb-footer__about { font-size: 14px; line-height: 1.6; margin: 16px 0 18px; max-width: 42ch; }

.amb-footer__col ul, .amb-footer__list { list-style: none; margin: 0; padding: 0; }
.amb-footer__col li { margin-bottom: 11px; font-size: 14px; }
.amb-footer__col li a { display: inline-block; transition: padding-left .15s ease, color .15s ease; }
.amb-footer__col li a:hover { padding-left: 6px; }

.amb-footer__contact .amb-footer__email a { font-size: 15px; font-weight: 600; color: #fff; }
.amb-footer__contact .amb-footer__email a:hover { color: var(--amb-red-600); }
.amb-footer__fineprint { font-size: 13px; margin: 8px 0 16px; }
.amb-footer__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: #fff; }
.amb-footer__cta span { color: var(--amb-red-600); transition: transform .15s ease; }
.amb-footer__cta:hover span { transform: translateX(4px); }

.amb-social--footer { margin-top: 2px; }
.amb-social--footer .amb-social__link { width: 36px; height: 36px; background: rgba(255,255,255,.06); color: #cfd3d9; }
.amb-social--footer .amb-social__link:hover { background: var(--amb-red); color: #fff; }

.amb-footer__bar { border-top: 1px solid rgba(255,255,255,.08); }
.amb-footer__bar-inner { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; padding-block: 18px; }
.amb-footer__copy { margin: 0; font-size: 13px; color: #868d97; }
.amb-totop { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 0; color: #c7cbd1; font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 20px; }
.amb-totop:hover { background: var(--amb-red); color: #fff; }

/* ============================================================= *
 * 9. Pagination
 * ============================================================= */
.pagination, .amb-pagination { margin-top: 36px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--amb-line); border-radius: 4px; color: var(--amb-ink-2); }
.pagination .page-numbers.current { background: var(--amb-red); border-color: var(--amb-red); color: #fff; }
.pagination .page-numbers:hover { border-color: var(--amb-red); color: var(--amb-red); }
.pagination .page-numbers.current:hover { color: #fff; }

/* ============================================================= *
 * 10. Responsive — tablet & up
 * ============================================================= */
@media (min-width: 600px) {
	.amb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.amb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 680px) {
	.amb-footer__bar-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* Mobile nav: below 992px the menu collapses behind the hamburger. */
@media (max-width: 991px) {
	.amb-nav-toggle { display: inline-flex; }
	.amb-nav {
		position: fixed; inset: var(--amb-header-h) 0 0 auto; width: min(80vw, 320px);
		background: var(--amb-red); padding: 16px; transform: translateX(100%);
		transition: transform .25s ease; overflow-y: auto; box-shadow: -4px 0 20px rgba(0,0,0,.25);
	}
	.amb-nav.is-open { transform: translateX(0); }
	.amb-nav__list { flex-direction: column; gap: 2px; }
	.amb-nav__list a { padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,.12); width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================= *
 * WUZUPNIGERIA — masthead + sticky nav (overrides the base header)
 * ============================================================= */
.wz-header { position: static; }
.wz-masthead { background: var(--amb-bg); border-bottom: 1px solid var(--amb-line); }
.wz-masthead__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: 96px; }
.wz-masthead__social { justify-self: start; display: flex; }
.wz-masthead__social .amb-social__link { color: var(--amb-ink-2); }
.wz-masthead__social .amb-social__link:hover { color: var(--amb-red); }
.wz-logo { justify-self: center; display: inline-flex; align-items: center; }
.wz-logo__img { height: 54px; width: auto; display: block; }
.wz-masthead__tools { justify-self: end; display: flex; gap: 4px; }
.wz-masthead__tools .amb-theme-toggle, .wz-masthead__tools .amb-search-toggle { color: var(--amb-ink); background: transparent; }

.wz-navbar { position: sticky; top: 0; z-index: 100; background: var(--amb-bg); color: var(--amb-ink); border-top: 1px solid var(--amb-line); border-bottom: 3px solid var(--amb-red); box-shadow: var(--amb-shadow); }
.wz-navbar__inner { min-height: 46px; justify-content: center; gap: 0; }
.wz-navbar .amb-nav { margin: 0; }
.wz-navbar .amb-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.wz-navbar .amb-nav a { color: var(--amb-ink); font-weight: 800; text-transform: uppercase; font-size: 12.5px; letter-spacing: .03em; padding: 13px 13px; position: relative; display: block; }
.wz-navbar .amb-nav a:hover { color: var(--amb-red); }
.wz-navbar .amb-nav .current-menu-item > a, .wz-navbar .amb-nav .current_page_item > a, .wz-navbar .amb-nav .current-menu-parent > a { color: var(--amb-red); }
.wz-navbar .amb-nav .current-menu-item > a::after, .wz-navbar .amb-nav .current_page_item > a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -3px; height: 3px; background: var(--amb-gold); }
.wz-navbar .amb-nav-toggle__bar { background: var(--amb-ink); }
@media (max-width: 991px) {
	.wz-masthead__inner { grid-template-columns: auto 1fr auto; min-height: 64px; }
	.wz-masthead__social { display: none; }
	.wz-logo__img { height: 34px; }
	.wz-navbar__inner { justify-content: flex-start; }
}

/* Sticky nav: the masthead scrolls away, the nav bar pins to the top and stays.
   (The header is the sticky element, offset up by the masthead height — a nested
   sticky child would only stick while its parent box is on screen.) */
:root { --wz-masthead-h: 96px; }
.wz-header  { position: sticky; top: calc(-1 * var(--wz-masthead-h)); z-index: 100; }
.wz-navbar  { position: static; }
@media (max-width: 991px) { :root { --wz-masthead-h: 64px; } }

/* Keep the sticky nav below the WP admin bar for logged-in users (visitors see it flush at top:0). */
.admin-bar .wz-header { top: calc(32px - var(--wz-masthead-h)); }
@media (max-width: 782px) { .admin-bar .wz-header { top: calc(46px - var(--wz-masthead-h)); } }

/* ------------------------------------------------------------------------- *
 * WUZUPNIGERIA — three-pane hero news board
 * Centre lead + two sub-leads, flanked by a "Latest" image rail (left) and a
 * "Top Stories" editorial rail (right). Each side rail is a flex column whose
 * news list grows to fill while a 300x250 advert is pinned to the bottom, so
 * all three columns END on the same line (the centre is the tallest because of
 * its two sub-leads, and the rail ads backfill the matching space on each side).
 * DOM order stays mobile-first (lead → latest → top); grid-template-areas
 * re-place the panes on wider screens, so no source reordering or JS is needed.
 * ------------------------------------------------------------------------- */
.wz-hero { padding: var(--amb-gap) 0; }
/* minmax(0,1fr), not a bare 1fr: a 1fr track keeps min-width:auto, which let the
   lead column (lead image + sub-lead swipe rail) grow past the viewport on phones
   and bleed over the right edge. minmax(0,...) lets the column shrink to its share. */
.wz-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--amb-gap); }
.wz-hero__grid > * { min-width: 0; } /* grid items may shrink below their content */

/* --- Centre: lead story --- */
.wz-hero__lead-col { display: flex; flex-direction: column; min-width: 0; }
.wz-lead { display: flex; flex-direction: column; }
.wz-lead__media { display: block; border-radius: var(--amb-radius); overflow: hidden; background: var(--amb-bg-3); }
.wz-lead__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.wz-lead__text { padding-top: 14px; }
.wz-lead__cat { display: inline-block; margin-bottom: 8px; }
.wz-lead__title { margin: 0 0 8px; font-family: var(--amb-sans); font-weight: 800; letter-spacing: -.01em; line-height: 1.12; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem); }
.wz-lead__title a { color: var(--amb-ink); }
.wz-lead__title a:hover { color: var(--amb-red); }
.wz-lead__excerpt { margin: 0 0 10px; color: var(--amb-ink-2); font-size: 1.02rem; line-height: 1.55;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wz-lead__meta { color: var(--amb-muted); font-size: .85rem; }

/* Sub-lead cards under the lead. Responsive count: 2 on mobile, 3 on tablet,
   2 on desktop. We always render three; CSS hides the 3rd except on tablet. */
/* Mobile: the sub-leads are a horizontal swipe rail of 6 (not a 2-col grid that
   overflowed off the screen edge). overflow-x:auto keeps the scroll INSIDE this
   element, so it can no longer push the whole page wider than the viewport. */
.wz-hero__subleads { display: flex; gap: var(--amb-gap); margin-top: 18px;
	padding-top: 18px; border-top: 1px solid var(--amb-line);
	overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
	scrollbar-width: none; }
.wz-hero__subleads::-webkit-scrollbar { display: none; }
.wz-hero__subleads > .amb-card { scroll-snap-align: start; flex: 0 0 70%; max-width: 280px; }

/* --- Shared rail heading --- */
.wz-rail__title { margin: 0 0 12px; font-family: var(--amb-sans); font-weight: 800; text-transform: uppercase;
	letter-spacing: .04em; font-size: .95rem; line-height: 1; padding-bottom: 10px; border-bottom: 2px solid var(--amb-line); }
.wz-rail__title--accent { border-bottom-color: var(--amb-red); color: var(--amb-ink); }
.wz-rail__title--accent::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px;
	background: var(--amb-red); border-radius: 2px; vertical-align: baseline; }
.wz-rail__title--dark { border-bottom-color: var(--amb-gold); color: var(--amb-ink); }

/* Both side rails are flex columns so the news list can grow and the advert
   pins to the bottom, keeping the rail bottoms level with the centre column. */
.wz-hero__latest, .wz-hero__top { display: flex; flex-direction: column; }
.wz-rail__rows { display: flex; flex-direction: column; flex: 1 1 auto; }
/* Distribute the rows across the available height so there is no dead gap
   above the pinned advert — the column fills edge to edge. */
.wz-rail__rows--fill { justify-content: space-between; }

/* --- Left rail: Latest (square-thumbnail rows) --- */
.wz-hero__latest .amb-row { padding: 12px 0; border-bottom: 1px solid var(--amb-line); align-items: center; }
.wz-hero__latest .amb-row:last-child { border-bottom: 0; }
/* Perfect square thumbnail, rounded corners kept. */
.wz-hero__latest .amb-row__media { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 8px; overflow: hidden; }
.wz-hero__latest .amb-row__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Right rail: Top Stories (text-only, no numbers = wider headlines) --- */
.wz-hero__top .amb-row { padding: 12px 0; border-bottom: 1px solid var(--amb-line); }
.wz-hero__top .amb-row:last-child { border-bottom: 0; }
.wz-hero__top .amb-row__title { font-size: 1rem; font-weight: 700; line-height: 1.3; }

/* --- Hero rail advert (framed 300x250), pinned to the bottom of each rail.
   The frame component (.amb-ad--framed) sizes itself; we just centre it. --- */
.wz-hero__ad { margin: 16px 0 0; display: flex; justify-content: center; }
.wz-hero__ad .amb-ad { margin: 0; max-width: 100%; }

/* --- Mid-hero advert: shown only on tablet + mobile (hidden on desktop).
   Mobile shows the 300×250; tablet shows the 728×90 leaderboard. Both are in
   the DOM; the one for the other breakpoint is hidden. --- */
.wz-hero__midad { display: flex; justify-content: center; margin: 2px 0 0; }
.wz-hero__midad .amb-ad { margin: 0; } /* flex centres it; drop the base auto margin */
.wz-hero__midad .amb-ad--hero_leaderboard { display: none; } /* mobile: 300×250 shows instead */

/* --- Tablet: lead full-width on top, the two rails side by side below;
   sub-leads become a 3-up row. --- */
@media (min-width: 768px) {
	.wz-hero__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "lead lead" "midad midad" "latest top";
		align-items: stretch;
	}
	.wz-hero__lead-col { grid-area: lead; }
	.wz-hero__latest   { grid-area: latest; }
	.wz-hero__top      { grid-area: top; }
	/* Tablet: back to a grid of 3 (minmax(0,1fr) stops image blowout). */
	.wz-hero__subleads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
	.wz-hero__subleads > .amb-card { flex: none; max-width: none; }
	.wz-hero__subleads > .amb-card:nth-child(n+4) { display: none; } /* tablet: 3 cards */
	/* Tablet mid-advert: the 728×90 leaderboard between the cards and the rails. */
	.wz-hero__midad { grid-area: midad; margin: 12px 0 2px; }
	.wz-hero__midad .amb-ad--hero_leaderboard { display: block; }
	.wz-hero__midad .amb-ad--hero_mobile { display: none; }
}

/* --- Desktop: three even columns, Latest · Lead · Top Stories; sub-leads back
   to 2-up. Side columns are 314px so the framed 300×250 ad fits exactly. --- */
@media (min-width: 992px) {
	.wz-hero__grid {
		grid-template-columns: 314px minmax(0, 1fr) 314px;
		grid-template-areas: "latest lead top";
		align-items: stretch;
	}
	.wz-lead__title { font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.5rem); }
	.wz-hero__subleads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wz-hero__subleads > .amb-card:nth-child(n+3) { display: none; } /* desktop: 2 cards */
	.wz-hero__midad { display: none; } /* desktop: the two rail adverts run instead */
}

/* ========================================================================= *
 * WUZUPNIGERIA — reusable homepage SECTION COMPONENTS
 * Four shuffle-able layouts fed by wz_section(): Spotlight, Carousel, Mosaic,
 * and the dark Band. Mobile-first; tablet/desktop enhancements below each.
 * ========================================================================= */
.wz-sec { padding: 30px 0; }
.wz-sec .amb-section__head { margin-bottom: 16px; }

/* --- Shared tile (card) used by Carousel / Mosaic / Band ----------------- */
.wz-tile { background: var(--amb-card); border: 1px solid var(--amb-line); border-radius: var(--amb-radius);
	overflow: hidden; display: flex; flex-direction: column; }
.wz-tile__media { display: block; aspect-ratio: 16 / 10; background: var(--amb-bg-3); overflow: hidden; }
.wz-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.wz-tile:hover .wz-tile__media img { transform: scale(1.04); }
.wz-tile__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; }
.wz-tile__title { margin: 0; font-family: var(--amb-sans); font-weight: 700; font-size: .98rem; line-height: 1.3;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wz-tile__title a { color: var(--amb-ink); }
.wz-tile__title a:hover { color: var(--amb-red); }

/* --- 1) SPOTLIGHT: tall cover story + two sub-cards + side headline list -- */
.wz-spotlight__grid { display: grid; grid-template-columns: 1fr; gap: var(--amb-gap); }
.wz-spotlight__main { display: flex; flex-direction: column; gap: 16px; }
/* Branded fallback: when the lead has no image (common for Opinion), the cover
   is a designed metro gradient card — never an empty grey box. The real image,
   when present, sits on top and hides it. */
.wz-cover { position: relative; border-radius: var(--amb-radius); overflow: hidden;
	background: linear-gradient(135deg, var(--amb-red) 0%, var(--amb-navy) 100%); }
.wz-cover .amb-thumb--empty { background: linear-gradient(135deg, var(--amb-red), var(--amb-navy)); }
.wz-cover__media { display: block; }
.wz-cover__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; display: block;
	color: transparent; transition: transform .5s ease; } /* color:transparent hides any broken-image alt text */
.wz-cover--tall .wz-cover__media img { aspect-ratio: 16 / 9; }
.wz-cover:hover .wz-cover__media img { transform: scale(1.03); }
.wz-cover__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 20px;
	background: linear-gradient(to top, rgba(10,12,16,.92), rgba(10,12,16,.5) 55%, transparent); }
.wz-cover__cat { display: inline-block; margin-bottom: 8px; }
.wz-cover__title { margin: 0; font-family: var(--amb-sans); font-weight: 800; letter-spacing: -.01em;
	line-height: 1.16; font-size: clamp(1.25rem, 1rem + 1.6vw, 2rem); }
.wz-cover__title a { color: #fff; }
.wz-cover__title a:hover { color: var(--amb-gold); }

/* Two compact cards under the cover (image left). */
.wz-spotlight__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wz-spotlight__sub .amb-card { flex-direction: row; align-items: stretch; }
.wz-spotlight__sub .amb-card__media { flex: 0 0 104px; width: 104px; height: auto; aspect-ratio: 1 / 1; }
.wz-spotlight__sub .amb-card__body { padding: 9px 13px; justify-content: center; gap: 4px; }

/* Side headline list. */
.wz-spotlight__list { display: flex; flex-direction: column; }
.wz-spotlight__list .amb-row { padding: 13px 0; border-bottom: 1px solid var(--amb-line); align-items: center; }
.wz-spotlight__list .amb-row:first-child { padding-top: 0; }
.wz-spotlight__list .amb-row:last-child { border-bottom: 0; }
.wz-spotlight__list .amb-row__media { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; }
.wz-spotlight__list .amb-row__media img { width: 100%; height: 100%; object-fit: cover; }

/* Mobile: keep it to 5 headlines under the cover (hide the two sub-cards). */
@media (max-width: 767px) {
	.wz-spotlight__sub { display: none; }
}

@media (min-width: 768px) {
	.wz-spotlight__grid { grid-template-columns: 1.8fr 1fr; align-items: stretch; }
	/* The side list sets the row height; the cover GROWS to fill the main column
	   (its image is absolute, so its aspect-ratio never inflates the box). Both
	   columns therefore always end level — no empty space on tablet or desktop. */
	.wz-spotlight__main { height: 100%; }
	.wz-cover { flex: 1 1 auto; min-height: 0; }
	.wz-cover__media { position: absolute; inset: 0; }
	.wz-cover__media img { width: 100%; height: 100%; aspect-ratio: auto; }
	.wz-spotlight__list { justify-content: space-between; }
}

/* --- 2) CAROUSEL + the shared rail (also used by the Band) --------------- */
.wz-rail { position: relative; }
.wz-rail__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity;
	overscroll-behavior-x: contain; touch-action: pan-x pan-y; scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.wz-rail__track > .wz-tile { scroll-snap-align: start; flex: 0 0 auto; width: 260px; }
.wz-rail__track::-webkit-scrollbar { height: 6px; }
.wz-rail__track::-webkit-scrollbar-thumb { background: var(--amb-line); border-radius: 6px; }
.wz-rail__track { scrollbar-width: thin; scrollbar-color: var(--amb-line) transparent; }
.wz-rail__nav { display: none; position: absolute; top: calc(50% - 22px); width: 42px; height: 42px;
	align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--amb-line);
	background: var(--amb-bg); color: var(--amb-ink); box-shadow: var(--amb-shadow); cursor: pointer; z-index: 3;
	transition: background .15s ease, color .15s ease; }
.wz-rail__nav:hover { background: var(--amb-red); color: #fff; border-color: var(--amb-red); }
.wz-rail__nav--prev { left: -10px; }
.wz-rail__nav--next { right: -10px; }

/* Scroll affordance: a soft fade at whichever edge still has content to reveal
   (toggled by JS with .wz-rail--has-prev / --has-next). Makes it obvious the
   rail scrolls — on touch (no arrows) and on desktop alike. The fade colour
   matches the section background behind the rail. */
.wz-rail::before, .wz-rail::after { content: ""; position: absolute; top: 0; bottom: 6px; width: 46px;
	z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.wz-rail::before { left: 0; background: linear-gradient(to right, var(--amb-bg), transparent); }
.wz-rail::after  { right: 0; background: linear-gradient(to left, var(--amb-bg), transparent); }
.wz-rail--has-prev::before { opacity: 1; }
.wz-rail--has-next::after  { opacity: 1; }
.amb-section--muted .wz-rail::before { background: linear-gradient(to right, var(--amb-bg-2), transparent); }
.amb-section--muted .wz-rail::after  { background: linear-gradient(to left, var(--amb-bg-2), transparent); }
.wz-band .wz-rail::before { background: linear-gradient(to right, #0d1017, transparent); }
.wz-band .wz-rail::after  { background: linear-gradient(to left, #0d1017, transparent); }
@media (min-width: 768px) {
	.wz-rail__track > .wz-tile { width: 288px; }
	.wz-rail__nav { display: flex; }
	.wz-rail__nav[hidden] { display: none; }
}

/* --- 3) MOSAIC: one big overlay tile + four small ----------------------- */
.wz-tile--overlay { position: relative; border: 0; border-radius: var(--amb-radius); }
.wz-tile--overlay .wz-tile__media { aspect-ratio: 16 / 10; height: 100%; }
.wz-tile--overlay .wz-tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 15px; gap: 6px;
	background: linear-gradient(to top, rgba(10,12,16,.9), rgba(10,12,16,.35) 60%, transparent); }
.wz-tile--overlay .wz-tile__title a { color: #fff; }
.wz-tile--overlay .wz-tile__title a:hover { color: var(--amb-gold); }
.wz-mosaic__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wz-mosaic__big { grid-column: 1 / -1; } /* mobile: big spans full width */
.wz-mosaic__big .wz-tile__media { aspect-ratio: 16 / 9; }
.wz-mosaic__cell .wz-tile__media { aspect-ratio: 4 / 3; }
@media (min-width: 768px) {
	.wz-mosaic__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 19vw, 205px); }
	.wz-mosaic__big { grid-column: 1 / 3; grid-row: 1 / 3; }
	.wz-tile--overlay { height: 100%; }
	.wz-tile--overlay .wz-tile__media { aspect-ratio: auto; height: 100%; }
}

/* --- 4) BAND: full-bleed dark "Trending" strip with ranked cards --------- */
.wz-band { background: #0d1017; color: #fff; padding: 34px 0; }
.wz-band .amb-section__title { color: #fff; }
.wz-band .amb-section__title::before { background: var(--amb-gold); }
.wz-band .amb-section__more { color: var(--amb-gold); }
.wz-band .amb-section__more:hover { color: #fff; }
.wz-tile--dark { background: #161b24; border-color: #242c38; position: relative; }
.wz-tile--dark .wz-tile__title a { color: #fff; }
.wz-tile--dark .wz-tile__title a:hover { color: var(--amb-gold); }
.wz-tile__rank { position: absolute; top: 8px; left: 8px; z-index: 2; font-family: var(--amb-sans); font-weight: 800;
	font-size: 1.15rem; line-height: 1; color: var(--amb-gold); background: rgba(0,0,0,.6); padding: 4px 9px; border-radius: 6px; }
.wz-band .wz-rail__nav { background: #161b24; border-color: #2a323f; color: #fff; }
.wz-band .wz-rail__nav:hover { background: var(--amb-gold); color: #10131a; border-color: var(--amb-gold); }
.wz-band .wz-rail__track::-webkit-scrollbar-thumb { background: #2a323f; }
.wz-band .wz-rail__track { scrollbar-color: #2a323f transparent; }

/* Double row: the band rail is a 2-row grid that scrolls horizontally, so it
   shows twice the stories in the same strip. Equal tile heights (clamped title)
   keep the two rows aligned. */
.wz-band .wz-rail__track { display: grid; grid-auto-flow: column; grid-template-rows: auto auto;
	grid-auto-columns: 270px; align-items: stretch; }
.wz-band .wz-rail__track > .wz-tile { width: auto; }
.wz-band .wz-tile__title { min-height: 2.6em; } /* reserve 2 lines so rows line up */
@media (min-width: 768px) { .wz-band .wz-rail__track { grid-auto-columns: 288px; } }

/* A clean "See more" pill button under the band. */
.wz-band__foot { margin-top: 22px; text-align: center; }
.wz-band__more { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 999px;
	border: 1px solid var(--amb-gold); color: var(--amb-gold); font-family: var(--amb-sans); font-weight: 700;
	font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; transition: background .16s ease, color .16s ease; }
.wz-band__more:hover { background: var(--amb-gold); color: #10131a; }

/* Respect reduced-motion for the rail + hover transforms. */
@media (prefers-reduced-motion: reduce) {
	.wz-rail__track { scroll-behavior: auto; }
	.wz-tile:hover .wz-tile__media img, .wz-cover:hover .wz-cover__media img { transform: none; }
}

/* --- 5) GRID: clean 3-up card grid (image + 2-line headline, no badge) ---- */
.wz-tile--plain .wz-tile__cat { display: none; }
.wz-grid__items { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 768px) {
	.wz-grid__items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--amb-gap); }
}

/* --- 6) COLUMNS: a lead card + a 2-column list of image-left cards -------- */
.wz-columns__grid { display: grid; grid-template-columns: 1fr; gap: var(--amb-gap); }
.wz-columns__lead .wz-tile__media { aspect-ratio: 16 / 9; }
.wz-columns__lead .wz-tile__title { font-size: 1.1rem; }
.wz-columns__list { display: grid; grid-template-columns: 1fr; gap: 0; }
.wz-hcard { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--amb-line); }
.wz-hcard:first-child { padding-top: 0; }
.wz-hcard:last-child { border-bottom: 0; }
.wz-hcard__media { flex: 0 0 92px; width: 92px; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--amb-bg-3); }
.wz-hcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.wz-hcard:hover .wz-hcard__media img { transform: scale(1.05); }
.wz-hcard__title { margin: 0; font-family: var(--amb-sans); font-weight: 700; font-size: .95rem; line-height: 1.3;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wz-hcard__title a { color: var(--amb-ink); }
.wz-hcard__title a:hover { color: var(--amb-red); }
@media (min-width: 768px) {
	.wz-columns__grid { grid-template-columns: 1fr 1.35fr; align-items: start; }
	.wz-columns__list { grid-template-columns: 1fr 1fr; column-gap: 22px; }
	/* keep the hairline inside each column, not across the gap */
	.wz-columns__list .wz-hcard:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* ========================================================================= *
 * WUZUPNIGERIA — footer (dark, centred logo + category columns)
 * ========================================================================= */
.wz-footer { background: #0d1017; color: #aeb4bd; margin-top: 44px; }
.wz-footer__top { text-align: center; padding: 40px 0 26px; }
.wz-footer__logo { display: inline-block; }
.wz-footer__logo img { height: 50px; width: auto; }
.wz-footer__social { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.wz-footer__social .amb-social__link { color: #c3c7cd; }
.wz-footer__social .amb-social__link:hover { color: var(--amb-gold); }

.wz-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px;
	padding: 30px 0 34px; border-top: 1px solid #20262f; }
@media (min-width: 560px) { .wz-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .wz-footer__cols { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.wz-footer__list { list-style: none; margin: 0; padding: 0; }
.wz-footer__list li { margin-bottom: 11px; }
.wz-footer__list a { color: #aeb4bd; font-size: .88rem; line-height: 1.3; transition: color .14s ease; }
.wz-footer__list a:hover { color: var(--amb-gold); }
.wz-footer__list--company a { color: #cfd4da; font-weight: 600; }

.wz-footer__bar { border-top: 1px solid #20262f; padding: 16px 0; }
.wz-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.wz-footer__copy { margin: 0; font-size: .8rem; color: #7f868f; }
.wz-footer__bar-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.wz-footer__bar-nav a { color: #aeb4bd; font-size: .8rem; }
.wz-footer__bar-nav a:hover { color: var(--amb-gold); }
.wz-footer .amb-totop { background: transparent; border: 1px solid #2a323f; color: #aeb4bd; border-radius: 50%;
	width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wz-footer .amb-totop:hover { background: var(--amb-gold); color: #10131a; border-color: var(--amb-gold); }

/* --- 7) CATEGORY SHOWCASE: a 4-up grid of category columns ---------------- */
.wz-catgrid-sec { padding: 30px 0; }
/* minmax(0,1fr) lets columns shrink below their content's min width — without
   it, a full-size image makes a column blow out and overflow the page. */
.wz-catgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } /* mobile: one per row */
@media (min-width: 768px) { .wz-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .wz-catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wz-catcol { min-width: 0; }
.wz-catcol__media img { max-width: 100%; }
/* Mobile 300×600 ad cell (after every 3 columns) — centred in its row.
   The flex display is scoped to mobile so it doesn't override the .wz-adrow--mobile
   hide on desktop (same specificity). */
@media (max-width: 767px) { .wz-catgrid__ad { display: flex; justify-content: center; } }
.wz-catgrid__ad .amb-ad { margin: 0 auto; }
/* Desktop/tablet banner between the rows — spans all columns. */
.wz-catgrid__banner { grid-column: 1 / -1; }

.wz-catcol { display: flex; flex-direction: column; }
.wz-catcol__head { margin: 0 0 14px; }
.wz-catcol__head a { display: block; background: var(--amb-tint); border-left: 3px solid var(--amb-red);
	padding: 9px 12px; font-family: var(--amb-sans); font-weight: 800; text-transform: uppercase;
	letter-spacing: .03em; font-size: .82rem; color: var(--amb-red); }
.wz-catcol__head a:hover { background: var(--amb-bg-2); }

/* Lead = ONE card: the image and its headline live in the same bordered box,
   so they clearly belong together and stand apart from the list below. */
.wz-catcol__lead { display: block; margin-bottom: 16px; border: 1px solid var(--amb-line); border-radius: var(--amb-radius);
	overflow: hidden; background: var(--amb-card); box-shadow: var(--amb-shadow);
	transition: box-shadow .18s ease, transform .18s ease; }
.wz-catcol__lead:hover { box-shadow: 0 8px 20px rgba(16, 22, 30, .1); transform: translateY(-2px); }
.wz-catcol__media { display: block; aspect-ratio: 16 / 10; background: var(--amb-bg-3); overflow: hidden; }
.wz-catcol__media img { width: 100%; height: 100%; object-fit: cover; max-width: 100%; display: block; transition: transform .45s ease; }
.wz-catcol__lead:hover .wz-catcol__media img { transform: scale(1.05); }
.wz-catcol__title { margin: 0; padding: 12px 14px 15px; font-family: var(--amb-sans); font-weight: 800; letter-spacing: -.01em;
	font-size: 1.05rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: calc(2.5em + 27px); } /* reserve 2 lines (+ padding) so every lead card is the same height */
.wz-catcol__title a { color: var(--amb-ink); }
.wz-catcol__title a:hover { color: var(--amb-red); }

/* Follow-up list — clearly SECONDARY: smaller, lighter, with a red bullet. */
.wz-catcol__list { list-style: none; margin: 0 0 16px; padding: 0; flex: 1 1 auto; }
.wz-catcol__list li { display: flex; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--amb-line); }
.wz-catcol__list li:first-child { padding-top: 0; }
.wz-catcol__list li:last-child { border-bottom: 0; }
.wz-catcol__list li::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%;
	background: var(--amb-red); opacity: .6; }
.wz-catcol__list a { color: var(--amb-ink-2); font-size: .875rem; line-height: 1.35; font-weight: 600;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.7em; } /* reserve 2 lines so every row is even and the dividers line up */
.wz-catcol__list a:hover { color: var(--amb-red); }

.wz-catcol__more { text-align: center; background: var(--amb-tint); color: var(--amb-red); border-radius: 999px;
	padding: 10px 14px; font-family: var(--amb-sans); font-weight: 800; font-size: .76rem; text-transform: uppercase;
	letter-spacing: .05em; border: 1px solid transparent; transition: background .14s ease, color .14s ease, border-color .14s ease; }
.wz-catcol__more:hover { background: var(--amb-red); color: #fff; border-color: var(--amb-red); }

/* ========================================================================= *
 * WUZUPNIGERIA — listing pages (search + category/tag archives)
 * Results grid (3-up desktop / 2-up tablet / 1-up horizontal cards mobile)
 * with an advert after every 6, plus a right ad sidebar on desktop.
 * ========================================================================= */
.wz-list { padding-block: 8px 24px; } /* vertical only — keep the container's 16px side gutter */
.wz-list__sidebar { display: none; }
.wz-list__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.wz-list__ad .amb-ad { margin: 0 auto; }

/* Mobile: horizontal cards — image on the left, headline + time on the right. */
@media (max-width: 767px) {
	.wz-list__grid .amb-card { flex-direction: row; align-items: stretch; }
	.wz-list__grid .amb-card__media { flex: 0 0 116px; width: 116px; height: auto; aspect-ratio: 1 / 1; }
	.wz-list__grid .amb-card__body { justify-content: center; padding: 10px 14px; }
}

/* Tablet: 2-up vertical cards, full width (no sidebar). */
@media (min-width: 768px) {
	.wz-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--amb-gap); }
	.wz-list__ad { grid-column: 1 / -1; }
}

/* Desktop: results main (3-up) + a 320px ad sidebar. */
@media (min-width: 992px) {
	.wz-list { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; }
	.wz-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wz-list__sidebar { display: flex; flex-direction: column; gap: 24px; align-self: stretch; }
	.wz-list__sidebar .amb-ad { margin: 0 auto; }
	.wz-list__sticky { position: sticky; top: 84px; }
}

/* In-article native ad: blends into the article body — no border/box, just
   vertical spacing and the consistent faint "Advertisement" label. */
.amb-ad--inart.amb-ad--framed { border: 0; background: transparent; padding: 0; margin: 22px auto; }
.amb-ad--inart .amb-ad__box { width: 100%; }
.amb-ad--inart .amb-ad__box--flex { min-height: 92px; background: var(--amb-bg-2); border-radius: 6px; }

/* ================================================================= *
 * X. Overflow hardening — mobile/tablet right-edge bleed (Oct 2026)
 * ----------------------------------------------------------------- *
 * Symptom: on phones/tablets the hero sub-leads and the card grids
 * could extend PAST the container's right edge — wider than even the
 * nav bar — producing a right-side gutter the header doesn't share.
 * Cause: a CSS-grid track declared `1fr` keeps its default
 * min-width:auto, so a card's own content (a long unbreakable
 * headline word, or a self-sizing media box) can force that track —
 * and the whole grid — wider than its column. `overflow-x:clip` on
 * <html> can't catch it because the grid overflows its *container*,
 * not the viewport. Fixes, in order of effect:
 *   1. Grid/flex items may shrink below their content (min-width:0),
 *      the same guarantee `minmax(0,1fr)` gives a track — so no item
 *      ever pushes its column wider than its share of the row. This
 *      also covers the remaining explicit `1fr 1fr` grids.
 *   2. Long unbreakable strings (URLs, hashtags, long names) wrap
 *      instead of forcing width outward.
 *   3. Reinforce the page-level clip on <body> as well as <html>.
 * ================================================================= */
body { overflow-x: clip; }

/* (1) Every homepage/archive grid or rail item may shrink to its track. */
.amb-cards > *, .amb-grid > *, .amb-cat-grid > *, .amb-topnews__grid > *,
.amb-hero__secondary > *, .amb-feature__list > *, .amb-hero__list > *,
.amb-footer__grid > *, .wz-hero__subleads > *, .wz-mosaic__grid > *,
.wz-grid__items > *, .wz-spotlight__sub > *, .wz-columns__list > *,
.wz-footer__cols > *, .wz-catgrid > *, .wz-list__grid > * { min-width: 0; }

/* (2) Headlines and body copy wrap long tokens rather than blowing a track. */
.amb-card__title, .amb-card__body, .amb-card__meta, .amb-byline,
.wz-tile__title, .wz-tile__body, .amb-row__title, .amb-row__body,
.amb-section__title, .amb-page-title, .amb-prose,
.wz-lead__title, .wz-lead__excerpt,
.wz-spotlight__lead-title, .wz-mosaic__title { overflow-wrap: break-word; }