/* Source: assets/css/zbc.css */
/* =========================================================
   ZBC NEWS
   Main stylesheet
   Bootstrap handles the grid/responsive foundation.
   This file handles ZBC's visual identity and editorial layouts.
   ========================================================= */

/*
   FONT NOTE
   ----------
   Palatino is a commercial/system typeface and is not reliably available
   as a free hosted webfont. We therefore use a strong system Palatino stack.

   If ZBC later provides licensed WOFF2 files, add:

   @font-face {
       font-family: "ZBC Palatino";
       src: url("../fonts/palatino.woff2") format("woff2");
       font-display: swap;
   }

   Then change --font-editorial to "ZBC Palatino", ...
*/

:root {
    --zbc-red: #d00000;
    --zbc-red-dark: #a80000;
    --zbc-black: #111111;
    --zbc-ink: #20242a;
    --zbc-muted: #6b7280;
    --zbc-line: #e6e7e9;
    --zbc-soft: #f5f6f8;
    --zbc-deep: #11151a;
    --zbc-white: #ffffff;

    --font-editorial:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        "URW Palladio L",
        Georgia,
        serif;

    --font-ui:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    --site-radius: 4px;
    --site-shadow: 0 8px 28px rgba(17, 24, 39, 0.08);
}


/* =========================================================
   BASE
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--zbc-ink);
    background: var(--zbc-white);
    font-family: var(--font-editorial);
    font-size: 17px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--zbc-red);
}

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

button,
input,
select,
textarea,
.navbar,
.btn,
.story-kicker,
.story-meta,
.section-eyebrow,
.utility-bar,
.breaking-bar,
.footer-heading,
.app-badge {
    font-family: var(--font-ui);
}

.container-xxl {
    --bs-gutter-x: 2rem;
}

.section-space {
    padding: 42px 0;
}

.bg-soft {
    background: var(--zbc-soft);
}

.section-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--zbc-red);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 18px;
}

.section-heading h2 {
    position: relative;
    margin: 0;
    padding-right: 48px;
    color: var(--zbc-black);
    font-size: clamp(1.55rem, 2vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
}

.section-heading h2::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0.25em;
    width: 34px;
    height: 3px;
    background: var(--zbc-red);
}

.compact-heading {
    margin-bottom: 16px;
}

.section-link {
    color: var(--zbc-red);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.section-link:hover {
    color: var(--zbc-red-dark);
}

.story-kicker {
    display: inline-block;
    color: var(--zbc-red);
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.story-meta {
    color: var(--zbc-muted);
    font-family: var(--font-ui);
    font-size: 0.72rem;
}

.story-meta-light {
    color: rgba(255, 255, 255, 0.88);
}


/* =========================================================
   HEADER
   ========================================================= */

.utility-bar {
    background: #fff;
    color: #5e6470;
}

.utility-links a {
    color: #5e6470;
    font-size: 0.76rem;
}

.utility-links a:hover {
    color: var(--zbc-red);
}

.social-links a {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 50%;
    color: #27303b;
    background: #f0f2f4;
    font-size: 0.8rem;
}

.social-links a:hover {
    color: #fff;
    background: var(--zbc-red);
}

.search-button {
    color: var(--zbc-black);
    font-size: 1rem;
}

.main-navbar {
    min-height: 74px;
    border-bottom: 3px solid var(--zbc-red);
}

.zbc-logo {
    width: 118px;
    height: 78px;
    object-fit: contain;
    object-position: left center;
}

.navbar-nav .nav-link {
    position: relative;
    padding: 1rem 0.68rem !important;
    color: #16191d;
    font-family: var(--font-ui);
    font-size: 0.88rem;
    font-weight: 650;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--zbc-red);
}

.navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    right: 0.68rem;
    bottom: 0.52rem;
    left: 0.68rem;
    height: 2px;
    background: var(--zbc-red);
}

.btn-live {
    padding: 0.68rem 1.25rem;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--zbc-red);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 800;
}

.btn-live:hover {
    color: #fff;
    background: var(--zbc-red-dark);
}

.breaking-bar {
    background: #f4f4f5;
    border-bottom: 1px solid #e2e2e3;
}

.breaking-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    min-height: 43px;
}

.breaking-label {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: #fff;
    background: var(--zbc-red);
    font-size: 0.83rem;
    font-weight: 800;
    white-space: nowrap;
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

.breaking-copy {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 1.3rem;
    color: #3f4247;
    font-size: 0.8rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.breaking-controls {
    display: flex;
    align-items: center;
}

.ticker-button {
    width: 32px;
    height: 43px;
    border: 0;
    color: var(--zbc-red);
    background: transparent;
}


/* =========================================================
   HERO
   ========================================================= */

.hero-card {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    border-radius: var(--site-radius);
    background: #111;
}

.hero-media,
.hero-media img {
    width: 100%;
    height: 100%;
}

.hero-media {
    position: absolute;
    inset: 0;
}

.hero-media img {
    object-fit: cover;
}

.hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.06) 15%,
            rgba(0, 0, 0, 0.28) 50%,
            rgba(0, 0, 0, 0.91) 100%
        );
}

.hero-overlay {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 28px;
    color: #fff;
}

.hero-overlay .story-kicker {
    margin-bottom: 8px;
    padding: 4px 7px;
    border-radius: 2px;
    color: #fff;
    background: var(--zbc-red);
}

.hero-title {
    max-width: 780px;
    margin: 0;
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    font-weight: 700;
    line-height: 1.02;
}

.hero-title a:hover {
    color: #fff;
}

.hero-summary {
    max-width: 760px;
    margin: 12px 0 14px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.02rem;
    line-height: 1.45;
}

.lead-list {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.lead-list-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 11px;
    flex: 1;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--zbc-line);
}

.lead-list-item + .lead-list-item {
    padding-top: 12px;
}

.lead-list-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.lead-list-image {
    overflow: hidden;
    border-radius: 2px;
}

.lead-list-image img {
    width: 100%;
    height: 100%;
    min-height: 84px;
    object-fit: cover;
}

.lead-list-item h2 {
    margin: 3px 0 5px;
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.13;
}

.lead-list-item h2 a:hover {
    color: var(--zbc-red);
}


/* =========================================================
   WATCH & LISTEN
   ========================================================= */

.watch-card {
    padding: 15px;
    background: #f7f8fa;
    border: 1px solid #eceef0;
    border-radius: var(--site-radius);
}

.watch-card h2 {
    margin: 0 0 12px;
    color: var(--zbc-black);
    font-size: 1.45rem;
    font-weight: 700;
}

.watch-tabs {
    gap: 8px;
    margin-bottom: 12px;
}

.watch-tabs .nav-link {
    border-radius: 4px;
    color: #4d5560;
    background: #eef0f2;
    font-size: 0.75rem;
    font-weight: 750;
}

.watch-tabs .nav-link.active {
    color: #fff;
    background: var(--zbc-red);
}

.live-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 3px;
}

.live-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.live-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #fff;
    background: var(--zbc-red);
    font-family: var(--font-ui);
    font-size: 0.67rem;
    font-weight: 900;
}

.play-button,
.video-play {
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--zbc-red);
    background: #fff;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
}

.play-button {
    position: absolute;
    right: 50%;
    bottom: 50%;
    width: 44px;
    height: 44px;
    transform: translate(50%, 50%);
    font-size: 1.35rem;
}

.watch-title {
    margin: 11px 0 0;
    font-size: 1.18rem;
    font-weight: 700;
}

.now-playing {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    background: #fff;
    border: 1px solid #eceef0;
}

.now-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    color: var(--zbc-red);
    background: #fff0f0;
}

.radio-live-panel {
    padding: 34px 14px;
    text-align: center;
}

.radio-icon {
    display: grid;
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--zbc-red);
    font-size: 1.75rem;
}


/* =========================================================
   NEWS CARDS
   ========================================================= */

.news-card {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--zbc-line);
    border-radius: var(--site-radius);
    background: #fff;
}

.news-card-image {
    overflow: hidden;
}

.news-card-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.news-card:hover .news-card-image img {
    transform: scale(1.025);
}

.news-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 13px;
}

.news-card h3 {
    margin: 4px 0 18px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.22;
}


/* =========================================================
   MOST READ
   ========================================================= */

.most-read-card {
    height: 100%;
    padding: 18px;
    background: #f5f6f8;
}

.most-read-card > h2 {
    margin: 0 0 10px;
    color: var(--zbc-black);
    font-size: 1.55rem;
    font-weight: 700;
}

.most-read-tabs {
    border: 0;
    gap: 6px;
}

.most-read-tabs .nav-link {
    border: 0 !important;
    border-radius: 4px;
    color: #4d5560;
    background: #eceff2;
    font-size: 0.72rem;
    font-weight: 700;
}

.most-read-tabs .nav-link.active {
    color: #fff;
    background: #28313d;
}

.most-read-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: mostread;
}

.most-read-list li {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #e0e2e5;
    counter-increment: mostread;
}

.most-read-list li:last-child {
    border-bottom: 0;
}

.most-read-list li::before {
    content: counter(mostread);
    color: #111827;
    font-family: var(--font-ui);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
}

.most-read-list a {
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.2;
}


/* =========================================================
   ADVERT
   ========================================================= */

.ad-section {
    padding: 8px 0 18px;
}

.ad-slot {
    display: flex;
    min-height: 96px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px;
    border: 1px dashed #c7cbd0;
    color: #747b84;
    background: #fafafa;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    text-align: center;
}

.ad-slot strong {
    color: #3f454d;
}

.ad-label {
    padding: 3px 7px;
    border-radius: 3px;
    color: #fff;
    background: #9ca3af;
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
}


/* =========================================================
   LOCAL
   ========================================================= */

.local-news-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(310px, 1fr);
    gap: 24px;
}

.local-feature {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    overflow: hidden;
    min-height: 340px;
    border: 1px solid var(--zbc-line);
    background: #fff;
}

.local-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.local-feature-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
}

.local-feature h3 {
    margin: 6px 0 12px;
    font-size: clamp(1.55rem, 2.3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.08;
}

.local-feature p {
    color: var(--zbc-muted);
    font-size: 0.95rem;
}

.local-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.horizontal-story {
    display: grid;
    grid-template-columns: 135px 1fr;
    gap: 13px;
    flex: 1;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--zbc-line);
}

.horizontal-story:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.horizontal-story img {
    width: 135px;
    height: 94px;
    object-fit: cover;
}

.horizontal-story h3 {
    margin: 4px 0 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.18;
}


/* =========================================================
   BUSINESS
   ========================================================= */

.business-feature {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    background: #111;
}

.business-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.08) 100%);
}

.business-feature > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.business-feature-content {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    width: min(68%, 620px);
    padding: 34px;
    color: #fff;
    transform: translateY(-50%);
}

.business-feature-content h3 {
    margin: 7px 0 12px;
    font-size: clamp(1.7rem, 2.8vw, 2.8rem);
    font-weight: 700;
    line-height: 1.05;
}

.business-feature-content a:hover {
    color: #fff;
}

.business-list {
    height: 100%;
    border-top: 3px solid var(--zbc-red);
    background: #fff;
}

.business-list article {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
    padding: 17px 0;
    border-bottom: 1px solid var(--zbc-line);
}

.business-list article > span {
    color: #c6c8cb;
    font-family: var(--font-ui);
    font-size: 1.35rem;
    font-weight: 900;
}

.business-list small {
    color: var(--zbc-red);
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.business-list h3 {
    margin: 2px 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.16;
}


/* =========================================================
   AFRICA & WORLD
   ========================================================= */

.world-section {
    color: #fff;
    background: var(--zbc-deep);
}

.section-heading-light h2 {
    color: #fff;
}

.section-link-light {
    color: #fff;
}

.world-lead {
    position: relative;
    min-height: 410px;
    overflow: hidden;
}

.world-lead > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.world-lead::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.88));
}

.world-lead-overlay {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 28px;
}

.world-lead h3 {
    max-width: 720px;
    margin: 6px 0 8px;
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
}

.world-lead a:hover {
    color: #fff;
}

.world-lead p {
    max-width: 680px;
    margin: 0;
    color: rgba(255,255,255,.78);
}

.world-small {
    display: grid;
    grid-template-columns: 155px 1fr;
    gap: 16px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.world-small img {
    width: 155px;
    height: 165px;
    object-fit: cover;
}

.world-small h3 {
    margin: 5px 0 7px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.12;
}

.world-small a:hover {
    color: #fff;
}

.world-small p {
    margin: 0;
    color: rgba(255,255,255,.65);
    font-size: 0.82rem;
}


/* =========================================================
   LATEST / FEATURED / OPINION
   ========================================================= */

.latest-list article {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--zbc-line);
}

.latest-list article:first-child {
    padding-top: 0;
}

.latest-list article:last-child {
    border-bottom: 0;
}

.latest-list img {
    width: 92px;
    height: 69px;
    object-fit: cover;
}

.latest-list h3 {
    margin: 0 0 5px;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.18;
}

.featured-card {
    position: relative;
    min-height: 356px;
    overflow: hidden;
    background: #111;
}

.featured-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.88));
}

.featured-card-overlay {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px;
    color: #fff;
}

.video-play {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    font-size: 1.3rem;
}

.featured-card h3 {
    margin: 5px 0 7px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.08;
}

.featured-card a:hover {
    color: #fff;
}

.featured-card p {
    margin: 0 0 12px;
    color: rgba(255,255,255,.82);
    font-size: 0.87rem;
}

.opinion-list article {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--zbc-line);
}

.opinion-list article:first-child {
    padding-top: 0;
}

.opinion-list article:last-child {
    border-bottom: 0;
}

.opinion-avatar {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border-radius: 3px;
    color: #fff;
    background: linear-gradient(135deg, #cbd5e1, #475569);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 900;
}

.opinion-list h3 {
    margin: 0 0 5px;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.15;
}

.opinion-list p {
    margin: 0;
    color: var(--zbc-muted);
    font-family: var(--font-ui);
    font-size: 0.69rem;
}


/* =========================================================
   LIFESTYLE
   ========================================================= */

.lifestyle-section {
    background: #f7f3ef;
}

.lifestyle-card {
    overflow: hidden;
    height: 100%;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0,0,0,.04);
}

.lifestyle-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lifestyle-card > div {
    padding: 16px;
}

.lifestyle-card h3 {
    margin: 5px 0 0;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.2;
}


/* =========================================================
   SPORT
   ========================================================= */

.sport-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--zbc-black);
}

.sport-header h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.score-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    background: #111;
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.75rem;
}

.score-strip > span:not(.score-label) {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    background: var(--zbc-red);
    font-weight: 900;
}

.score-label {
    color: #ff9d9d;
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
}

.sport-feature {
    position: relative;
    min-height: 365px;
    overflow: hidden;
}

.sport-feature img {
    width: 100%;
    height: 365px;
    object-fit: cover;
}

.sport-feature > div {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 22px;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.92));
}

.sport-feature h3 {
    margin: 5px 0 8px;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.08;
}

.sport-feature p {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 0.88rem;
}

.sport-feature a:hover {
    color: #fff;
}

.sport-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow: hidden;
    background: var(--zbc-line);
    border: 1px solid var(--zbc-line);
}

.sport-grid article {
    min-height: 181px;
    padding: 22px;
    background: #fff;
}

.sport-number {
    color: var(--zbc-red);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 900;
}

.sport-grid h3 {
    margin: 14px 0 0;
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.15;
}


/* =========================================================
   VIDEO
   ========================================================= */

.video-section {
    color: #fff;
    background: #0b0e12;
}

.video-main {
    position: relative;
    min-height: 440px;
    overflow: hidden;
}

.video-main > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.88));
}

.video-play-large {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    margin: 0;
    transform: translate(-50%, -50%);
    font-size: 2rem;
}

.video-main-copy {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 26px;
}

.video-main h3 {
    max-width: 760px;
    margin: 5px 0 0;
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
}

.video-main a:hover {
    color: #fff;
}

.video-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.video-list article {
    min-width: 0;
}

.video-thumb {
    position: relative;
    overflow: hidden;
}

.video-thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.video-thumb span {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 50%;
    color: var(--zbc-red);
    background: #fff;
}

.video-list h3 {
    margin: 8px 0 0;
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.18;
}

.video-list a:hover {
    color: #fff;
}


/* =========================================================
   CATEGORIES
   ========================================================= */

.category-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    border-top: 1px solid var(--zbc-line);
    border-left: 1px solid var(--zbc-line);
}

.category-grid a {
    display: flex;
    min-height: 105px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    border-right: 1px solid var(--zbc-line);
    border-bottom: 1px solid var(--zbc-line);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    transition: 0.18s ease;
}

.category-grid a:hover {
    color: #fff;
    background: var(--zbc-red);
}

.category-grid i {
    color: var(--zbc-red);
    font-size: 1.6rem;
}

.category-grid a:hover i {
    color: #fff;
}

.promo-banner {
    width: 100%;
    min-height: 88px;
    object-fit: cover;
    border-bottom: 4px solid var(--zbc-red);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    border-top: 1px solid var(--zbc-line);
    background: #f6f7f8;
}

.footer-logo {
    width: 118px;
    height: 76px;
    object-fit: contain;
    object-position: left center;
}

.footer-heading {
    margin: 0 0 12px;
    color: #1b2026;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li + li {
    margin-top: 5px;
}

.footer-links a {
    color: #59616c;
    font-size: 0.8rem;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social a {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #27303b;
    font-size: 0.85rem;
}

.footer-social a:hover {
    background: var(--zbc-red);
}

.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 5px 7px 0;
    padding: 7px 10px;
    border-radius: 4px;
    color: #fff;
    background: #111;
    font-size: 0.68rem;
    font-weight: 700;
}

.app-badge:hover {
    color: #fff;
    background: var(--zbc-red);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 0;
    border-top: 1px solid var(--zbc-line);
    color: #6b7280;
    font-family: var(--font-ui);
    font-size: 0.68rem;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {
    .main-navbar {
        min-height: 68px;
    }

    .zbc-logo {
        width: 100px;
        height: 66px;
    }

    .offcanvas .navbar-nav .nav-link {
        padding: 0.75rem 0 !important;
        border-bottom: 1px solid #eee;
    }

    .offcanvas .navbar-nav .nav-link.active::after {
        display: none;
    }

    .hero-card {
        min-height: 500px;
    }

    .lead-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 20px;
    }

    .lead-list-item,
    .lead-list-item + .lead-list-item {
        padding: 0 0 14px;
    }

    .category-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}


@media (max-width: 991.98px) {
    body {
        font-size: 16px;
    }

    .section-space {
        padding: 34px 0;
    }

    .local-news-grid {
        grid-template-columns: 1fr;
    }

    .business-feature-content {
        width: 78%;
    }

    .world-small img {
        height: 135px;
    }

    .score-strip {
        display: none;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 767.98px) {
    .container-xxl {
        --bs-gutter-x: 1.35rem;
    }

    .section-heading {
        align-items: flex-start;
    }

    .section-heading h2 {
        padding-right: 40px;
        font-size: 1.55rem;
    }

    .breaking-label {
        padding: 0 0.7rem;
        font-size: 0.72rem;
    }

    .breaking-copy {
        padding: 0 0.8rem;
        font-size: 0.72rem;
    }

    .hero-card {
        min-height: 430px;
    }

    .hero-overlay {
        padding: 19px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .lead-list {
        grid-template-columns: 1fr;
    }

    .lead-list-item {
        grid-template-columns: 118px 1fr;
    }

    .local-feature {
        grid-template-columns: 1fr;
    }

    .local-feature-image img {
        aspect-ratio: 16 / 9;
    }

    .local-feature-body {
        padding: 22px;
    }

    .business-feature-content {
        top: auto;
        bottom: 0;
        width: 100%;
        padding: 24px;
        transform: none;
    }

    .business-feature::after {
        background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.92));
    }

    .world-small {
        grid-template-columns: 120px 1fr;
    }

    .world-small img {
        width: 120px;
        height: 120px;
    }

    .sport-grid {
        grid-template-columns: 1fr;
    }

    .sport-grid article {
        min-height: auto;
    }

    .video-list {
        grid-template-columns: 1fr 1fr;
    }

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

    .ad-slot {
        align-items: flex-start;
        flex-direction: column;
        text-align: left;
    }
}


@media (max-width: 575.98px) {
    .navbar-brand {
        margin-right: 0 !important;
    }

    .zbc-logo {
        width: 88px;
        height: 58px;
    }

    .breaking-inner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .breaking-controls {
        display: none;
    }

    .breaking-label {
        max-width: 116px;
    }

    .hero-card {
        min-height: 390px;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-summary {
        display: none;
    }

    .local-feature h3 {
        font-size: 1.65rem;
    }

    .horizontal-story {
        grid-template-columns: 105px 1fr;
    }

    .horizontal-story img {
        width: 105px;
        height: 82px;
    }

    .business-feature {
        min-height: 350px;
    }

    .business-feature-content h3 {
        font-size: 1.8rem;
    }

    .world-lead {
        min-height: 350px;
    }

    .world-lead h3 {
        font-size: 1.8rem;
    }

    .world-small {
        grid-template-columns: 92px 1fr;
    }

    .world-small img {
        width: 92px;
        height: 105px;
    }

    .world-small p {
        display: none;
    }

    .sport-feature,
    .sport-feature img {
        min-height: 335px;
        height: 335px;
    }

    .sport-feature h3 {
        font-size: 1.55rem;
    }

    .video-main {
        min-height: 350px;
    }

    .video-main h3 {
        font-size: 1.75rem;
    }

    .video-list {
        grid-template-columns: 1fr;
    }

    .footer-legal {
        gap: 10px;
    }
}

/* === ZBC FULL DARK MODE V5 START === */

/* =========================================================
   FULL SITE THEME TOKENS
   ---------------------------------------------------------
   The header JavaScript switches Bootstrap 5.3 by setting
   data-bs-theme="light" or data-bs-theme="dark" on <html>.
   These tokens extend the same state to all ZBC custom UI.
   ========================================================= */

:root,
[data-bs-theme="light"] {
    --zbc-page-bg: #ffffff;
    --zbc-surface: #ffffff;
    --zbc-surface-soft: #f5f6f8;
    --zbc-surface-warm: #f7f3ef;
    --zbc-surface-raised: #ffffff;
    --zbc-text: #20242a;
    --zbc-heading: #111111;
    --zbc-text-muted: #6b7280;
    --zbc-border: #e6e7e9;
    --zbc-border-strong: #c7cbd0;
    --zbc-number: #111827;
    --zbc-tab-bg: #eceff2;
    --zbc-tab-text: #4d5560;
    --zbc-ad-bg: #fafafa;
    --zbc-footer-bg: #f6f7f8;
    --zbc-card-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] {
    --zbc-page-bg: #0d1014;
    --zbc-surface: #13171c;
    --zbc-surface-soft: #171c22;
    --zbc-surface-warm: #171512;
    --zbc-surface-raised: #181d23;
    --zbc-text: #e7eaf0;
    --zbc-heading: #f7f8fa;
    --zbc-text-muted: #a8b0ba;
    --zbc-border: #2b323a;
    --zbc-border-strong: #414a55;
    --zbc-number: #f1f4f7;
    --zbc-tab-bg: #232a32;
    --zbc-tab-text: #c8ced6;
    --zbc-ad-bg: #14191e;
    --zbc-footer-bg: #11151a;
    --zbc-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);

    /* Re-map existing design variables used throughout zbc.css. */
    --zbc-black: var(--zbc-heading);
    --zbc-ink: var(--zbc-text);
    --zbc-muted: var(--zbc-text-muted);
    --zbc-line: var(--zbc-border);
    --zbc-soft: var(--zbc-surface-soft);
    --zbc-white: var(--zbc-page-bg);

    color-scheme: dark;
}


/* =========================================================
   GLOBAL PAGE
   ========================================================= */

html,
body {
    transition:
        background-color 180ms ease,
        color 180ms ease;
}

body {
    color: var(--zbc-text);
    background: var(--zbc-page-bg);
}

main {
    color: var(--zbc-text);
    background: var(--zbc-page-bg);
}

.section-heading h2,
.sport-header h2,
.watch-card h2,
.most-read-card > h2,
.footer-heading {
    color: var(--zbc-heading);
}

p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: pretty;
}

.story-meta,
.local-feature p,
.opinion-list p {
    color: var(--zbc-text-muted);
}

.bg-soft {
    background: var(--zbc-surface-soft) !important;
}


/* =========================================================
   LEAD / HERO SIDE STORIES
   ========================================================= */

.lead-list-item {
    border-bottom-color: var(--zbc-border);
}


/* =========================================================
   WATCH & LISTEN
   ========================================================= */

.watch-card {
    color: var(--zbc-text);
    background: var(--zbc-surface-soft);
    border-color: var(--zbc-border);
}

.watch-tabs .nav-link {
    color: var(--zbc-tab-text);
    background: var(--zbc-tab-bg);
}

.watch-tabs .nav-link:not(.active):hover {
    color: var(--zbc-heading);
    background: color-mix(
        in srgb,
        var(--zbc-tab-bg) 80%,
        var(--zbc-red) 20%
    );
}

.now-playing {
    color: var(--zbc-text);
    background: var(--zbc-surface-raised);
    border-color: var(--zbc-border);
}

.now-icon {
    background: color-mix(
        in srgb,
        var(--zbc-red) 12%,
        var(--zbc-surface-raised)
    );
}

.radio-live-panel {
    color: var(--zbc-text);
}


/* Bootstrap text utility used in Watch & Listen. */
[data-bs-theme="dark"] .text-secondary {
    color: var(--zbc-text-muted) !important;
}


/* =========================================================
   TOP STORIES / CARDS
   ========================================================= */

.news-card {
    color: var(--zbc-text);
    background: var(--zbc-surface-raised);
    border-color: var(--zbc-border);
    box-shadow: var(--zbc-card-shadow);
}

.news-card h3,
.news-card a {
    color: inherit;
}

.news-card a:hover {
    color: var(--zbc-red);
}


/* =========================================================
   MOST READ
   ========================================================= */

.most-read-card {
    color: var(--zbc-text);
    background: var(--zbc-surface-soft);
}

.most-read-tabs .nav-link {
    color: var(--zbc-tab-text);
    background: var(--zbc-tab-bg);
}

.most-read-tabs .nav-link.active {
    color: #ffffff;
    background: #343d48;
}

.most-read-list li {
    border-bottom-color: var(--zbc-border);
}

.most-read-list li::before {
    color: var(--zbc-number);
}


/* =========================================================
   ADVERTISING
   ========================================================= */

.ad-slot {
    color: var(--zbc-text-muted);
    background: var(--zbc-ad-bg);
    border-color: var(--zbc-border-strong);
}

.ad-slot strong {
    color: var(--zbc-heading);
}

.ad-label {
    color: #ffffff;
}


/* =========================================================
   LOCAL NEWS
   ========================================================= */

.local-feature {
    color: var(--zbc-text);
    background: var(--zbc-surface-raised);
    border-color: var(--zbc-border);
    box-shadow: var(--zbc-card-shadow);
}

.horizontal-story {
    border-bottom-color: var(--zbc-border);
}


/* =========================================================
   BUSINESS
   ========================================================= */

.business-list {
    color: var(--zbc-text);
    background: var(--zbc-surface-raised);
}

.business-list article {
    border-bottom-color: var(--zbc-border);
}

.business-list article > span {
    color: color-mix(
        in srgb,
        var(--zbc-text-muted) 52%,
        transparent
    );
}


/* =========================================================
   AFRICA & WORLD
   ---------------------------------------------------------
   This section is intentionally dark in BOTH modes.
   Keep its editorial treatment unchanged.
   ========================================================= */

.world-section {
    color: #ffffff;
    background: #11151a;
}

.world-section .section-heading h2,
.world-section a {
    color: inherit;
}

.world-section .story-kicker,
.world-section .section-eyebrow {
    color: var(--zbc-red);
}


/* =========================================================
   LATEST / FEATURED / OPINION
   ========================================================= */

.latest-list article,
.opinion-list article {
    border-bottom-color: var(--zbc-border);
}

.opinion-avatar {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}


/* =========================================================
   LIFESTYLE
   ========================================================= */

.lifestyle-section {
    color: var(--zbc-text);
    background: var(--zbc-surface-warm);
}

.lifestyle-card {
    color: var(--zbc-text);
    background: var(--zbc-surface-raised);
    box-shadow: var(--zbc-card-shadow);
}


/* =========================================================
   SPORT
   ========================================================= */

.sport-header {
    border-bottom-color: var(--zbc-heading);
}

.sport-grid {
    background: var(--zbc-border);
    border-color: var(--zbc-border);
}

.sport-grid article {
    color: var(--zbc-text);
    background: var(--zbc-surface-raised);
}


/* =========================================================
   VIDEO
   ---------------------------------------------------------
   Video is intentionally dark in both themes.
   ========================================================= */

.video-section {
    color: #ffffff;
    background: #0b0e12;
}

.video-section .section-heading h2,
.video-section a {
    color: inherit;
}

.video-thumb span,
.play-button,
.video-play {
    background: #ffffff;
}


/* =========================================================
   CATEGORY EXPLORER
   ========================================================= */

.category-grid {
    border-top-color: var(--zbc-border);
    border-left-color: var(--zbc-border);
}

.category-grid a {
    color: var(--zbc-text);
    background: var(--zbc-surface);
    border-right-color: var(--zbc-border);
    border-bottom-color: var(--zbc-border);
}

.category-grid a:hover {
    color: #ffffff;
    background: var(--zbc-red);
}


/* =========================================================
   PROMO BANNER
   ========================================================= */

[data-bs-theme="dark"] .promo-banner {
    filter: brightness(0.88) contrast(1.04);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    color: var(--zbc-text);
    background: var(--zbc-footer-bg);
    border-top-color: var(--zbc-border);
}

.footer-heading {
    color: var(--zbc-heading);
}

.footer-links a {
    color: var(--zbc-text-muted);
}

.footer-links a:hover,
.footer-legal a:hover {
    color: var(--zbc-red);
}

.footer-social a {
    color: #ffffff;
    background: #27303b;
}

[data-bs-theme="dark"] .footer-social a {
    background: #252c34;
}

.footer-bottom {
    color: var(--zbc-text-muted);
    border-top-color: var(--zbc-border);
}

.footer-legal a {
    color: inherit;
}


/* =========================================================
   BOOTSTRAP COMPONENT COORDINATION
   ========================================================= */

[data-bs-theme="dark"] {
    --bs-body-bg: var(--zbc-page-bg);
    --bs-body-color: var(--zbc-text);
    --bs-secondary-color: var(--zbc-text-muted);
    --bs-border-color: var(--zbc-border);
    --bs-tertiary-bg: var(--zbc-surface-soft);
}

[data-bs-theme="dark"] .nav-tabs {
    --bs-nav-tabs-border-color: var(--zbc-border);
}

[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content {
    color: var(--zbc-text);
    background-color: var(--zbc-surface-raised);
    border-color: var(--zbc-border);
}


/* =========================================================
   REMOVE LIGHT-MODE LEAKS FROM LEGACY SELECTORS
   ---------------------------------------------------------
   zbc.css still contains the original header styles even though
   the live header uses the namespaced zbcHdr component.
   These safeguards also cover any old utility component that
   might be reintroduced later.
   ========================================================= */

[data-bs-theme="dark"] .utility-bar,
[data-bs-theme="dark"] .main-navbar {
    color: var(--zbc-text);
    background: var(--zbc-surface);
}

[data-bs-theme="dark"] .utility-links a,
[data-bs-theme="dark"] .navbar-nav .nav-link,
[data-bs-theme="dark"] .search-button {
    color: var(--zbc-text);
}

[data-bs-theme="dark"] .social-links a {
    color: var(--zbc-text);
    background: var(--zbc-tab-bg);
}

[data-bs-theme="dark"] .breaking-bar {
    background: var(--zbc-surface-soft);
    border-bottom-color: var(--zbc-border);
}

[data-bs-theme="dark"] .breaking-copy {
    color: var(--zbc-text);
}


/* =========================================================
   TRANSITIONS
   ---------------------------------------------------------
   Avoid animating photographs; only UI surfaces change.
   ========================================================= */

body,
main,
.bg-soft,
.watch-card,
.now-playing,
.news-card,
.most-read-card,
.ad-slot,
.local-feature,
.business-list,
.lifestyle-section,
.lifestyle-card,
.sport-grid article,
.category-grid a,
.site-footer {
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

[data-bs-theme="dark"] ::selection {
    color: #ffffff;
    background: #9f0000;
}

[data-bs-theme="dark"] a:focus-visible,
[data-bs-theme="dark"] button:focus-visible,
[data-bs-theme="dark"] input:focus-visible {
    outline-color: #ff5555;
}

@media (prefers-reduced-motion: reduce) {
    body,
    main,
    .bg-soft,
    .watch-card,
    .now-playing,
    .news-card,
    .most-read-card,
    .ad-slot,
    .local-feature,
    .business-list,
    .lifestyle-section,
    .lifestyle-card,
    .sport-grid article,
    .category-grid a,
    .site-footer {
        transition: none !important;
    }
}

/* === ZBC FULL DARK MODE V5 END === */

/* Source: assets/css/components/zbc-header.css */
/* =========================================================
   ZBC HEADER / NAVIGATION V3
   ---------------------------------------------------------
   Every custom selector is namespaced:
     zbcHdr-
     zbcBreaking-

   Bootstrap remains responsible for offcanvas/collapse.
   This file owns only the ZBC header presentation.
   ========================================================= */

.zbcHdr-shell {
    --zbcHdr-red: #d60000;
    --zbcHdr-red-dark: #ae0000;

    --zbcHdr-bg: #ffffff;
    --zbcHdr-surface: #ffffff;
    --zbcHdr-text: #14171b;
    --zbcHdr-muted: #616b77;
    --zbcHdr-line: #e3e6e9;
    --zbcHdr-chip: #f1f3f5;
    --zbcHdr-breaking-bg: #f4f5f6;
    --zbcHdr-shadow: 0 8px 28px rgba(15, 23, 42, 0.10);

    position: relative;
    z-index: 1030;
    width: 100%;
    color: var(--zbcHdr-text);
    background: var(--zbcHdr-bg);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}

[data-bs-theme="dark"] .zbcHdr-shell {
    --zbcHdr-bg: #0f1216;
    --zbcHdr-surface: #11151a;
    --zbcHdr-text: #f4f6f8;
    --zbcHdr-muted: #adb5bf;
    --zbcHdr-line: #2a3038;
    --zbcHdr-chip: #20252c;
    --zbcHdr-breaking-bg: #171b20;
    --zbcHdr-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}

.zbcHdr-container {
    --bs-gutter-x: 2rem;
}


/* =========================================================
   STICKY HEADER
   ========================================================= */

.zbcHdr-main {
    position: sticky;
    top: 0;
    z-index: 1035;
    width: 100%;
    background: color-mix(in srgb, var(--zbcHdr-bg) 96%, transparent);
    border-bottom: 0;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition:
        box-shadow 180ms ease,
        background-color 180ms ease;
}

.zbcHdr-shell.zbcHdr-isScrolled .zbcHdr-main {
    box-shadow: var(--zbcHdr-shadow);
}

.zbcHdr-grid {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    grid-template-rows: 54px 78px;
    column-gap: 30px;
    align-items: stretch;
    transition: grid-template-rows 180ms ease;
}


/* =========================================================
   BRAND
   ========================================================= */

.zbcHdr-brandArea {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.zbcHdr-brandLink {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.zbcHdr-logo {
    display: block;
    width: 158px;
    height: auto;
    max-height: 118px;
    object-fit: contain;
    transform-origin: left center;
    transition:
        width 180ms ease,
        max-height 180ms ease;
}


/* =========================================================
   UTILITY ROW
   ========================================================= */

.zbcHdr-utilityRow {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    overflow: hidden;
    border-bottom: 1px solid var(--zbcHdr-line);
    opacity: 1;
    transition:
        opacity 120ms ease,
        border-color 180ms ease;
}

.zbcHdr-dateWeather {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 34px;
    color: var(--zbcHdr-muted);
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
}

.zbcHdr-date,
.zbcHdr-weather {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.zbcHdr-date i {
    color: var(--zbcHdr-muted);
    font-size: 0.88rem;
}

.zbcHdr-weather i {
    color: #f2a000;
    font-size: 1.28rem;
}

.zbcHdr-weather strong {
    color: var(--zbcHdr-text);
    font-weight: 800;
}

.zbcHdr-utilityRight {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 13px;
}

.zbcHdr-utilityLinks {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.zbcHdr-utilityLinks a {
    color: var(--zbcHdr-muted);
    font-size: 0.80rem;
    font-weight: 560;
    text-decoration: none;
    transition: color 160ms ease;
}

.zbcHdr-utilityLinks a:hover {
    color: var(--zbcHdr-red);
}

.zbcHdr-utilityDivider {
    color: color-mix(in srgb, var(--zbcHdr-muted) 45%, transparent);
    font-size: 0.68rem;
}

.zbcHdr-socials {
    display: flex;
    align-items: center;
    gap: 7px;
}

.zbcHdr-socialLink {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--zbcHdr-text);
    background: var(--zbcHdr-chip);
    font-size: 0.83rem;
    text-decoration: none;
    transition:
        transform 160ms ease,
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}

.zbcHdr-socialLink:hover {
    color: #fff;
    background: var(--zbcHdr-red);
    border-color: var(--zbcHdr-red);
    transform: translateY(-1px);
}

.zbcHdr-socialFacebook {
    color: #1769d2;
}

.zbcHdr-socialYoutube {
    color: #df0000;
}

.zbcHdr-socialInstagram {
    color: #d12d72;
}


/* =========================================================
   HEADER ICON BUTTONS
   ========================================================= */

.zbcHdr-iconBtn {
    display: grid;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    place-items: center;
    border: 0;
    border-left: 1px solid var(--zbcHdr-line);
    color: var(--zbcHdr-text);
    background: transparent;
    font-size: 1.04rem;
    transition:
        color 160ms ease,
        background-color 160ms ease;
}

.zbcHdr-iconBtn:hover {
    color: var(--zbcHdr-red);
    background: var(--zbcHdr-chip);
}

.zbcHdr-themeToggle {
    border-left: 0;
    border-radius: 50%;
}

.zbcHdr-searchBtn {
    border-radius: 0;
}

.zbcHdr-mobileTheme,
.zbcHdr-mobileSearch {
    display: none;
}


/* =========================================================
   PRIMARY NAVIGATION
   ========================================================= */

.zbcHdr-navRow {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

.zbcHdr-menuBtn {
    display: grid;
    width: 40px;
    height: 44px;
    flex: 0 0 40px;
    place-items: center;
    border: 0;
    border-radius: 4px;
    padding: 0;
    color: var(--zbcHdr-text);
    background: transparent;
    font-size: 1.72rem;
    transition:
        color 160ms ease,
        background-color 160ms ease;
}

.zbcHdr-menuBtn:hover {
    color: var(--zbcHdr-red);
    background: var(--zbcHdr-chip);
}

.zbcHdr-nav {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: stretch;
    height: 100%;
}

.zbcHdr-navLink {
    position: relative;
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    color: var(--zbcHdr-text);
    font-size: 0.91rem;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
    transition:
        color 160ms ease,
        background-color 160ms ease;
}

.zbcHdr-navLink:hover {
    color: var(--zbcHdr-red);
}

.zbcHdr-navLinkActive {
    color: var(--zbcHdr-red);
}

.zbcHdr-navLinkActive::after {
    content: "";
    position: absolute;
    right: 11px;
    bottom: 12px;
    left: 11px;
    height: 3px;
    border-radius: 999px;
    background: var(--zbcHdr-red);
}

.zbcHdr-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.zbcHdr-watchLive {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 20px 0 11px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, #e30b14 0%, #cf0000 100%);
    box-shadow: 0 7px 18px rgba(190, 0, 0, 0.17);
    font-size: 0.87rem;
    font-weight: 850;
    white-space: nowrap;
    text-decoration: none;
    transition:
        transform 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.zbcHdr-watchLive:hover {
    color: #fff;
    background: linear-gradient(180deg, #cc0000 0%, #aa0000 100%);
    box-shadow: 0 9px 22px rgba(174, 0, 0, 0.24);
    transform: translateY(-1px);
}

.zbcHdr-watchIcon {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 50%;
    color: var(--zbcHdr-red);
    background: #fff;
    font-size: 1rem;
}

.zbcHdr-mobileNavBtn {
    display: none;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid var(--zbcHdr-line);
    border-radius: 5px;
    color: var(--zbcHdr-text);
    background: var(--zbcHdr-surface);
    font-size: 1.5rem;
}


/* =========================================================
   COMPACT STICKY STATE
   Desktop: utility row collapses when the user scrolls.
   ========================================================= */

@media (min-width: 1200px) {
    .zbcHdr-shell.zbcHdr-isScrolled .zbcHdr-grid {
        grid-template-rows: 0 66px;
    }

    .zbcHdr-shell.zbcHdr-isScrolled .zbcHdr-utilityRow {
        opacity: 0;
        pointer-events: none;
        border-bottom-color: transparent;
    }

    .zbcHdr-shell.zbcHdr-isScrolled .zbcHdr-logo {
        width: 105px;
        max-height: 61px;
    }

    .zbcHdr-shell.zbcHdr-isScrolled .zbcHdr-navLinkActive::after {
        bottom: 8px;
    }

    .zbcHdr-shell.zbcHdr-isScrolled .zbcHdr-watchLive {
        min-height: 42px;
    }
}


/* =========================================================
   SEARCH DRAWER
   ========================================================= */

.zbcHdr-searchDrawer {
    border-top: 1px solid var(--zbcHdr-line);
    background: var(--zbcHdr-surface);
}

.zbcHdr-searchForm {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
}

.zbcHdr-searchIcon {
    color: var(--zbcHdr-muted);
    font-size: 1.12rem;
}

.zbcHdr-searchInput {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--zbcHdr-text);
    background: transparent;
    font-size: 1rem;
}

.zbcHdr-searchInput::placeholder {
    color: color-mix(in srgb, var(--zbcHdr-muted) 75%, transparent);
}

.zbcHdr-searchSubmit {
    min-height: 40px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--zbcHdr-red);
    font-size: 0.80rem;
    font-weight: 850;
}

.zbcHdr-searchSubmit:hover {
    background: var(--zbcHdr-red-dark);
}


/* =========================================================
   RED BRAND RULE
   ========================================================= */

.zbcHdr-rule {
    width: 100%;
    height: 3px;
    background: var(--zbcHdr-red);
}


/* =========================================================
   BREAKING NEWS
   Breaking news scrolls normally; only the masthead/nav stays sticky.
   ========================================================= */

.zbcBreaking-shell {
    background: var(--zbcHdr-breaking-bg);
    border-bottom: 1px solid var(--zbcHdr-line);
}

.zbcBreaking-row {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr) 78px;
    min-height: 54px;
    align-items: stretch;
}

.zbcBreaking-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 0 31px 0 19px;
    color: #fff;
    background: linear-gradient(90deg, #ba0000 0%, #d60000 100%);
    font-size: 0.88rem;
    font-weight: 850;
    white-space: nowrap;
}

.zbcBreaking-label::after {
    content: "";
    position: absolute;
    top: 0;
    right: -18px;
    width: 36px;
    height: 100%;
    background: var(--zbcHdr-breaking-bg);
    transform: skewX(-15deg);
    transform-origin: bottom;
}

.zbcBreaking-label i {
    font-size: 1.22rem;
}

.zbcBreaking-headline {
    display: flex;
    min-width: 0;
    align-items: center;
    overflow: hidden;
    padding: 0 28px;
    color: var(--zbcHdr-text);
    font-size: 0.86rem;
    font-weight: 560;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    transition:
        opacity 130ms ease,
        color 160ms ease;
}

.zbcBreaking-headline:hover {
    color: var(--zbcHdr-red);
}

.zbcBreaking-headline.zbcBreaking-changing {
    opacity: 0.32;
}

.zbcBreaking-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.zbcBreaking-control {
    display: grid;
    width: 35px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: 4px;
    padding: 0;
    color: var(--zbcHdr-red);
    background: transparent;
    font-size: 0.94rem;
}

.zbcBreaking-control:hover {
    color: #fff;
    background: var(--zbcHdr-red);
}


/* =========================================================
   OFFCANVAS
   ========================================================= */

.zbcHdr-offcanvas {
    --bs-offcanvas-width: min(410px, 90vw);

    color: var(--zbcHdr-text);
    background: var(--zbcHdr-bg);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}

.zbcHdr-offcanvasHead {
    display: flex;
    min-height: 96px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 22px;
    border-bottom: 3px solid var(--zbcHdr-red);
}

.zbcHdr-offcanvasLogo {
    display: block;
    width: 126px;
    height: auto;
}

.zbcHdr-offcanvasClose {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--zbcHdr-line);
    border-radius: 50%;
    color: var(--zbcHdr-text);
    background: var(--zbcHdr-chip);
    font-size: 1rem;
}

.zbcHdr-offcanvasBody {
    overflow-y: auto;
    padding: 8px 22px 30px;
}

.zbcHdr-mobileNav {
    display: flex;
    flex-direction: column;
}

.zbcHdr-mobileLink {
    position: relative;
    display: flex;
    min-height: 54px;
    align-items: center;
    border-bottom: 1px solid var(--zbcHdr-line);
    color: var(--zbcHdr-text);
    font-size: 1rem;
    font-weight: 740;
    text-decoration: none;
}

.zbcHdr-mobileLink::after {
    content: "\F285";
    margin-left: auto;
    color: var(--zbcHdr-muted);
    font-family: "bootstrap-icons";
    font-size: 0.74rem;
}

.zbcHdr-mobileLink:hover,
.zbcHdr-mobileLinkActive {
    color: var(--zbcHdr-red);
}

.zbcHdr-mobileUtility {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 18px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--zbcHdr-line);
}

.zbcHdr-mobileUtility a {
    color: var(--zbcHdr-muted);
    font-size: 0.86rem;
    font-weight: 550;
    text-decoration: none;
}

.zbcHdr-mobileWatch {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 24px;
    border-radius: 999px;
    color: #fff;
    background: var(--zbcHdr-red);
    font-size: 0.90rem;
    font-weight: 850;
    text-decoration: none;
}


/* =========================================================
   RESPONSIVE: LARGE / TABLET
   ========================================================= */

@media (max-width: 1399.98px) and (min-width: 1200px) {
    .zbcHdr-grid {
        grid-template-columns: 168px minmax(0, 1fr);
        column-gap: 22px;
    }

    .zbcHdr-logo {
        width: 145px;
    }

    .zbcHdr-navRow {
        gap: 10px;
    }

    .zbcHdr-navLink {
        padding: 0 8px;
        font-size: 0.84rem;
    }

    .zbcHdr-navLinkActive::after {
        right: 8px;
        left: 8px;
    }

    .zbcHdr-watchLive {
        padding-right: 15px;
        font-size: 0.82rem;
    }

    .zbcHdr-utilityLinks a {
        font-size: 0.75rem;
    }
}


/* Switch to Bootstrap offcanvas before desktop nav becomes cramped. */
@media (max-width: 1199.98px) {
    .zbcHdr-grid {
        grid-template-columns: 146px minmax(0, 1fr);
        grid-template-rows: 48px 66px;
        column-gap: 20px;
    }

    .zbcHdr-logo {
        width: 132px;
        max-height: 101px;
    }

    .zbcHdr-utilityLinks {
        display: none;
    }

    .zbcHdr-nav,
    .zbcHdr-menuBtn {
        display: none;
    }

    .zbcHdr-navRow {
        justify-content: flex-end;
    }

    .zbcHdr-mobileNavBtn {
        display: grid;
    }

    .zbcHdr-mobileTheme,
    .zbcHdr-mobileSearch {
        display: grid;
        width: 43px;
        height: 43px;
        flex: 0 0 43px;
        place-items: center;
        border: 1px solid var(--zbcHdr-line);
        border-radius: 50%;
        color: var(--zbcHdr-text);
        background: var(--zbcHdr-chip);
        font-size: 1rem;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE
   ========================================================= */

@media (max-width: 767.98px) {
    .zbcHdr-container {
        --bs-gutter-x: 1.25rem;
    }

    .zbcHdr-main {
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
    }

    .zbcHdr-grid {
        grid-template-columns: 108px minmax(0, 1fr);
        grid-template-rows: 72px;
        column-gap: 10px;
    }

    .zbcHdr-brandArea {
        grid-row: 1;
    }

    .zbcHdr-logo {
        width: 98px;
        max-height: 65px;
    }

    .zbcHdr-utilityRow {
        display: none;
    }

    .zbcHdr-navRow {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
        gap: 6px;
    }

    .zbcHdr-actions {
        gap: 6px;
    }

    .zbcHdr-watchLive {
        min-height: 41px;
        padding: 0 12px 0 8px;
        font-size: 0.75rem;
    }

    .zbcHdr-watchIcon {
        width: 25px;
        height: 25px;
    }

    .zbcHdr-mobileTheme,
    .zbcHdr-mobileSearch,
    .zbcHdr-mobileNavBtn {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .zbcBreaking-row {
        grid-template-columns: 138px minmax(0, 1fr);
        min-height: 48px;
    }

    .zbcBreaking-label {
        padding: 0 22px 0 12px;
        font-size: 0.73rem;
    }

    .zbcBreaking-label i {
        font-size: 1rem;
    }

    .zbcBreaking-headline {
        padding: 0 13px 0 18px;
        font-size: 0.75rem;
    }

    .zbcBreaking-controls {
        display: none;
    }

    .zbcHdr-searchForm {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .zbcHdr-searchSubmit {
        grid-column: 1 / -1;
        width: 100%;
    }
}


@media (max-width: 479.98px) {
    .zbcHdr-grid {
        grid-template-columns: 94px minmax(0, 1fr);
    }

    .zbcHdr-logo {
        width: 86px;
    }

    .zbcHdr-watchLive > span:last-child {
        display: none;
    }

    .zbcHdr-watchLive {
        width: 40px;
        padding: 0;
    }

    .zbcHdr-watchIcon {
        width: 27px;
        height: 27px;
        margin: auto;
    }

    .zbcHdr-mobileTheme,
    .zbcHdr-mobileSearch,
    .zbcHdr-mobileNavBtn {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        font-size: 0.95rem;
    }

    .zbcBreaking-row {
        grid-template-columns: 118px minmax(0, 1fr);
    }

    .zbcBreaking-label {
        gap: 5px;
        padding-left: 9px;
        font-size: 0.65rem;
    }

    .zbcBreaking-headline {
        font-size: 0.70rem;
    }
}


/* =========================================================
   ACCESSIBILITY / MOTION
   ========================================================= */

.zbcHdr-shell button:focus-visible,
.zbcHdr-shell a:focus-visible,
.zbcHdr-shell input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--zbcHdr-red) 35%, transparent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .zbcHdr-shell *,
    .zbcHdr-shell *::before,
    .zbcHdr-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* === ZBC STICKY V4 FIX START === */

/*
   IMPORTANT:
   The sticky element must not be constrained by the short header
   containing block. We therefore stick the complete header shell
   to the viewport and collapse non-essential rows after scroll.
*/

.zbcHdr-shell {
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
    isolation: isolate;
}

/*
   V3 made .zbcHdr-main sticky. Once the shell itself is sticky,
   the nested sticky positioning is unnecessary and can produce
   inconsistent browser behaviour.
*/
.zbcHdr-main {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
}

/*
   At the top of the page Breaking News is visible.
   After scrolling, it collapses so the sticky area remains compact.
*/
.zbcBreaking-shell {
    max-height: 58px;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition:
        max-height 180ms ease,
        opacity 140ms ease,
        transform 180ms ease,
        border-color 180ms ease;
}

.zbcHdr-shell.zbcHdr-isScrolled .zbcBreaking-shell {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    border-bottom-color: transparent;
}

/*
   Make the compact sticky state visually distinct while remaining
   restrained enough for a newsroom site.
*/
.zbcHdr-shell.zbcHdr-isScrolled {
    box-shadow: var(--zbcHdr-shadow);
}

.zbcHdr-shell.zbcHdr-isScrolled .zbcHdr-main {
    box-shadow: none !important;
}

/*
   Prevent anchors/content from being hidden behind the compact
   sticky masthead when the user navigates to an in-page target.
*/
html {
    scroll-padding-top: 84px;
}

/* Mobile keeps a stable single-row sticky masthead. */
@media (max-width: 767.98px) {
    .zbcHdr-shell {
        width: 100%;
    }

    .zbcHdr-shell.zbcHdr-isScrolled .zbcBreaking-shell {
        max-height: 0;
    }

    html {
        scroll-padding-top: 76px;
    }
}

/*
   Older Safari/WebKit can be sensitive to transformed ancestors.
   No transform is applied to the sticky shell itself.
*/
@supports (-webkit-touch-callout: none) {
    .zbcHdr-shell {
        -webkit-transform: none;
        transform: none;
    }
}

/* === ZBC STICKY V4 FIX END === */

/* Source: assets/css/components/zbc-lead.css */
/* =========================================================
   ZBC LEAD / HERO RESPONSIVE COMPONENT
   ---------------------------------------------------------
   Everything is scoped below .zbcLead-shell so these rules
   cannot accidentally affect other homepage sections.
   ========================================================= */

.zbcLead-shell {
    --zbcLead-gap: 1.5rem;
    overflow: clip;
}

.zbcLead-shell > .container-xxl {
    min-width: 0;
}

.zbcLead-shell > .container-xxl > .row {
    min-width: 0;
}

.zbcLead-shell > .container-xxl > .row > * {
    min-width: 0;
}


/* =========================================================
   DESKTOP
   Keep the approved 6 / 3 / 3 Bootstrap composition.
   ========================================================= */

@media (min-width: 1200px) {

    .zbcLead-shell .hero-card {
        min-height: 470px;
    }

    .zbcLead-shell .lead-list-item h2 {
        font-size: clamp(0.92rem, 0.82vw, 1.03rem);
    }

    .zbcLead-shell .watch-card {
        min-width: 0;
    }
}


/* =========================================================
   LAPTOP / SMALL DESKTOP
   992px - 1199px

   Hero stays dominant across the full first row.
   Secondary stories and Watch & Listen share row two.
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

    .zbcLead-shell > .container-xxl > .row {
        display: grid;
        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(320px, 0.85fr);
        gap: 1.5rem !important;
    }

    .zbcLead-shell > .container-xxl > .row > .col-xl-6 {
        grid-column: 1 / -1;
        width: auto;
        max-width: none;
        padding: 0;
    }

    .zbcLead-shell > .container-xxl > .row > .col-xl-3 {
        width: auto;
        max-width: none;
        padding: 0;
    }

    .zbcLead-shell > .container-xxl > .row > .col-xl-3:nth-of-type(2) {
        grid-column: 1;
    }

    .zbcLead-shell > .container-xxl > .row > .col-xl-3:nth-of-type(3) {
        grid-column: 2;
    }

    .zbcLead-shell .hero-card {
        min-height: 500px;
    }

    .zbcLead-shell .hero-title {
        max-width: 850px;
        font-size: clamp(2.35rem, 4vw, 3.45rem);
    }

    .zbcLead-shell .hero-summary {
        max-width: 820px;
        font-size: 1.02rem;
    }

    .zbcLead-shell .lead-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.15rem;
        height: 100%;
    }

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        grid-template-columns: 122px minmax(0, 1fr);
        align-items: stretch;
        padding: 0.85rem 0;
    }

    .zbcLead-shell .lead-list-item:nth-child(-n + 2) {
        padding-top: 0;
    }

    .zbcLead-shell .lead-list-image img {
        min-height: 94px;
    }

    .zbcLead-shell .lead-list-item h2 {
        font-size: 1rem;
        line-height: 1.18;
    }

    .zbcLead-shell .watch-card {
        height: 100%;
    }
}


/* =========================================================
   TABLET
   768px - 991px

   Hero full width.
   Secondary stories become a clean 2 x 2 grid.
   Watch & Listen becomes a full-width broadcast panel.
   ========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

    .zbcLead-shell {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .zbcLead-shell .hero-card {
        min-height: 480px;
    }

    .zbcLead-shell .hero-overlay {
        padding: 2rem;
    }

    .zbcLead-shell .hero-title {
        max-width: 760px;
        font-size: clamp(2.15rem, 5vw, 3.1rem);
    }

    .zbcLead-shell .hero-summary {
        max-width: 720px;
        font-size: 1rem;
    }

    .zbcLead-shell .lead-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.5rem;
        height: auto;
    }

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        display: grid;
        grid-template-columns: 135px minmax(0, 1fr);
        gap: 0.85rem;
        padding: 0.9rem 0;
    }

    .zbcLead-shell .lead-list-item:nth-child(-n + 2) {
        padding-top: 0;
    }

    .zbcLead-shell .lead-list-image img {
        min-height: 98px;
    }

    .zbcLead-shell .lead-list-item h2 {
        font-size: 1rem;
        line-height: 1.18;
    }

    .zbcLead-shell .watch-card {
        padding: 1.25rem;
    }

    .zbcLead-shell .watch-card h2 {
        font-size: 1.55rem;
    }

    /*
       Reflow Live TV inside the full-width tablet panel.
       The video occupies the left, programme information the right.
    */
    .zbcLead-shell #live-tv.tab-pane.active,
    .zbcLead-shell #live-tv.tab-pane.show {
        display: grid;
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(260px, 0.8fr);
        grid-template-rows: auto auto auto 1fr;
        column-gap: 1.4rem;
        align-items: start;
    }

    .zbcLead-shell #live-tv .live-media {
        grid-column: 1;
        grid-row: 1 / 5;
    }

    .zbcLead-shell #live-tv .watch-title,
    .zbcLead-shell #live-tv > .text-secondary,
    .zbcLead-shell #live-tv .now-playing,
    .zbcLead-shell #live-tv > .section-link {
        grid-column: 2;
    }

    .zbcLead-shell #live-tv .watch-title {
        margin-top: 0;
        font-size: 1.35rem;
    }

    .zbcLead-shell #live-tv > .section-link {
        align-self: end;
    }
}


/* =========================================================
   MOBILE / SMALL TABLET
   below 768px

   - Hero remains the strong lead.
   - Secondary stories become a touch-friendly horizontal rail.
   - Watch & Listen returns to a single-column broadcast card.
   ========================================================= */

@media (max-width: 767.98px) {

    .zbcLead-shell {
        padding-top: 1.25rem;
        padding-bottom: 1.6rem;
        overflow: hidden;
    }

    .zbcLead-shell > .container-xxl {
        --bs-gutter-x: 1.25rem;
    }

    .zbcLead-shell > .container-xxl > .row {
        --bs-gutter-y: 1.35rem;
    }

    .zbcLead-shell .hero-card {
        min-height: clamp(390px, 72vw, 460px);
        border-radius: 3px;
    }

    .zbcLead-shell .hero-overlay {
        padding: 1.35rem;
    }

    .zbcLead-shell .hero-title {
        max-width: 100%;
        font-size: clamp(1.75rem, 7vw, 2.45rem);
        line-height: 1.03;
    }

    .zbcLead-shell .hero-summary {
        font-size: 0.96rem;
    }

    .zbcLead-shell .hero-overlay .story-kicker {
        margin-bottom: 0.55rem;
    }

    .zbcLead-shell .story-meta-light {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem 1rem;
        margin-top: 0.8rem;
    }

    /*
       Secondary-story rail.
       This avoids a very long four-story vertical stack on mobile.
    */
    .zbcLead-shell .lead-list {
        display: flex;
        width: 100%;
        height: auto;
        gap: 0.85rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.1rem 0 0.65rem;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .zbcLead-shell .lead-list::-webkit-scrollbar {
        display: none;
    }

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        display: grid;
        grid-template-columns: 128px minmax(0, 1fr);
        gap: 0.8rem;
        flex: 0 0 min(84vw, 430px);
        min-height: 118px;
        align-items: stretch;
        padding: 0.7rem;
        border: 1px solid var(--zbc-border, var(--zbc-line));
        border-radius: 4px;
        background: var(--zbc-surface-raised, #fff);
        box-shadow: var(--zbc-card-shadow, none);
        scroll-snap-align: start;
    }

    .zbcLead-shell .lead-list-item:last-child {
        border-bottom: 1px solid var(--zbc-border, var(--zbc-line));
    }

    .zbcLead-shell .lead-list-image {
        border-radius: 3px;
    }

    .zbcLead-shell .lead-list-image img {
        width: 100%;
        height: 100%;
        min-height: 104px;
        object-fit: cover;
    }

    .zbcLead-shell .lead-list-item h2 {
        margin: 0.2rem 0 0.45rem;
        font-size: 0.98rem;
        line-height: 1.16;
    }

    .zbcLead-shell .lead-list-item .story-meta {
        font-size: 0.69rem;
    }

    .zbcLead-shell .watch-card {
        height: auto !important;
        padding: 1rem;
    }

    .zbcLead-shell .watch-card h2 {
        font-size: 1.45rem;
    }

    .zbcLead-shell .watch-tabs {
        gap: 0.5rem;
    }

    .zbcLead-shell .watch-tabs .nav-link {
        min-height: 42px;
        font-size: 0.82rem;
    }

    .zbcLead-shell .live-media img {
        aspect-ratio: 16 / 9;
    }

    .zbcLead-shell .watch-title {
        font-size: 1.25rem;
    }

    .zbcLead-shell .now-playing {
        padding: 0.85rem;
    }
}


/* =========================================================
   SMALL MOBILE
   480px and below
   ========================================================= */

@media (max-width: 479.98px) {

    .zbcLead-shell {
        padding-top: 1rem;
    }

    .zbcLead-shell > .container-xxl {
        --bs-gutter-x: 1rem;
    }

    .zbcLead-shell .hero-card {
        min-height: 390px;
    }

    .zbcLead-shell .hero-overlay {
        padding: 1.1rem;
    }

    .zbcLead-shell .hero-title {
        font-size: clamp(1.6rem, 7.7vw, 2rem);
    }

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        grid-template-columns: 112px minmax(0, 1fr);
        flex-basis: 88vw;
        min-height: 108px;
        padding: 0.6rem;
    }

    .zbcLead-shell .lead-list-image img {
        min-height: 96px;
    }

    .zbcLead-shell .lead-list-item h2 {
        font-size: 0.92rem;
    }

    .zbcLead-shell .watch-card {
        padding: 0.85rem;
    }

    .zbcLead-shell .now-playing {
        gap: 0.7rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 374.98px) {

    .zbcLead-shell .hero-card {
        min-height: 365px;
    }

    .zbcLead-shell .hero-title {
        font-size: 1.5rem;
    }

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        grid-template-columns: 100px minmax(0, 1fr);
        flex-basis: 91vw;
    }

    .zbcLead-shell .lead-list-item h2 {
        font-size: 0.87rem;
    }

    .zbcLead-shell .story-kicker {
        font-size: 0.63rem;
    }
}


/* =========================================================
   LANDSCAPE PHONE
   Prevent the hero becoming unnecessarily tall.
   ========================================================= */

@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 560px) {

    .zbcLead-shell .hero-card {
        min-height: 360px;
    }

    .zbcLead-shell .hero-summary {
        display: none !important;
    }
}


/* =========================================================
   DARK MODE COORDINATION
   Most colours already come from V5 theme variables.
   ========================================================= */

[data-bs-theme="dark"] .zbcLead-shell .lead-list-item {
    color: var(--zbc-text);
    background: var(--zbc-surface-raised);
    border-color: var(--zbc-border);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .zbcLead-shell .lead-list {
        scroll-behavior: auto;
    }

    .zbcLead-shell .news-card-image img,
    .zbcLead-shell img {
        transition: none !important;
    }
}

/* === ZBC LEAD MOBILE MEDIA V2 START === */

/* =========================================================
   RESPONSIVE TYPE SCALE
   ---------------------------------------------------------
   Do not let important editorial text shrink into unreadable
   UI text. clamp() gives fluid scaling with hard minimums.
   ========================================================= */

.zbcLead-shell .hero-title {
    font-size: clamp(2rem, 3.15vw, 3.35rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
}

.zbcLead-shell .hero-summary {
    font-size: clamp(1rem, 0.34vw + 0.92rem, 1.08rem);
    line-height: 1.5;
}

.zbcLead-shell .lead-list-item h2 {
    font-size: clamp(0.98rem, 0.28vw + 0.88rem, 1.08rem);
    line-height: 1.18;
}

.zbcLead-shell .watch-card h2 {
    font-size: clamp(1.4rem, 1vw + 0.9rem, 1.65rem);
}

.zbcLead-shell .watch-title {
    font-size: clamp(1.16rem, 0.35vw + 1rem, 1.32rem);
}

.zbcLead-shell .story-meta {
    font-size: clamp(0.72rem, 0.16vw + 0.68rem, 0.79rem);
}


/* =========================================================
   IMAGE BEHAVIOUR
   ========================================================= */

.zbcLead-shell img {
    max-width: 100%;
}

.zbcLead-shell .hero-media img,
.zbcLead-shell .live-media img,
.zbcLead-shell .lead-list-image img {
    object-fit: cover;
}

.zbcLead-shell .hero-media img {
    object-position: 50% 50%;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .zbcLead-shell .hero-card {
        min-height: clamp(380px, 98vw, 475px);
    }

    .zbcLead-shell .hero-overlay {
        padding: clamp(1rem, 4.4vw, 1.4rem);
    }

    .zbcLead-shell .hero-title {
        /*
           Minimum remains about 28px even on narrow phones.
           The upper cap prevents the title becoming oversized.
        */
        font-size: clamp(1.78rem, 6.4vw, 2.25rem);
        line-height: 1.04;
        letter-spacing: -0.025em;
        text-wrap: balance;
    }

    .zbcLead-shell .hero-summary {
        font-size: clamp(0.98rem, 3.7vw, 1.05rem);
        line-height: 1.46;
    }

    /*
       V1 inherited flex-direction: column from the original
       .lead-list rule. Explicitly turn the mobile list into the
       intended horizontal swipe rail.
    */
    .zbcLead-shell .lead-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        gap: 0.85rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.65rem;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .zbcLead-shell .lead-list::-webkit-scrollbar {
        display: none;
    }

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        grid-template-columns: 120px minmax(0, 1fr);
        flex: 0 0 min(86vw, 420px);
        min-height: 0;
        height: auto;
        align-items: start;
        padding: 0.7rem;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    /*
       Critical mobile image correction:
       do NOT stretch the thumbnail to the card's text height.
    */
    .zbcLead-shell .lead-list-image {
        width: 100%;
        aspect-ratio: 4 / 3;
        align-self: start;
        overflow: hidden;
    }

    .zbcLead-shell .lead-list-image img {
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center;
    }

    .zbcLead-shell .lead-list-item h2 {
        margin-top: 0.25rem;
        font-size: clamp(1rem, 4vw, 1.08rem);
        line-height: 1.17;
        text-wrap: pretty;
    }

    .zbcLead-shell .story-kicker {
        font-size: clamp(0.68rem, 2.5vw, 0.74rem);
    }

    .zbcLead-shell .story-meta {
        font-size: clamp(0.72rem, 2.7vw, 0.78rem);
    }

    .zbcLead-shell .watch-card {
        padding: clamp(0.9rem, 3.6vw, 1.15rem);
    }

    .zbcLead-shell .watch-card h2 {
        font-size: clamp(1.4rem, 5.2vw, 1.6rem);
    }

    .zbcLead-shell .watch-tabs .nav-link {
        min-height: 44px;
        font-size: clamp(0.82rem, 3vw, 0.9rem);
    }

    .zbcLead-shell .watch-title {
        font-size: clamp(1.18rem, 4.5vw, 1.35rem);
    }

    .zbcLead-shell .live-media {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .zbcLead-shell .live-media img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479.98px) {

    .zbcLead-shell .hero-title {
        font-size: clamp(1.72rem, 7vw, 2rem);
    }

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        grid-template-columns: 106px minmax(0, 1fr);
        flex-basis: 89vw;
    }

    .zbcLead-shell .lead-list-item h2 {
        font-size: clamp(0.96rem, 4.2vw, 1.04rem);
    }
}


/* =========================================================
   VERY SMALL PHONES
   Keep body-copy-equivalent editorial text readable.
   ========================================================= */

@media (max-width: 374.98px) {

    .zbcLead-shell .hero-title {
        font-size: 1.68rem;
    }

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        grid-template-columns: 96px minmax(0, 1fr);
        flex-basis: 91vw;
    }

    .zbcLead-shell .lead-list-item h2 {
        font-size: 0.95rem;
    }
}


/* =========================================================
   LANDSCAPE PHONE
   ========================================================= */

@media
    (max-width: 991.98px)
    and (orientation: landscape)
    and (max-height: 560px) {

    .zbcLead-shell .hero-card {
        min-height: 350px;
    }

    .zbcLead-shell .hero-title {
        font-size: clamp(1.65rem, 4.5vw, 2.1rem);
    }
}

/* === ZBC LEAD MOBILE MEDIA V2 END === */

/* === ZBC LEAD MOBILE VERTICAL V3 START === */

/* =========================================================
   MOBILE LEAD TYPOGRAPHY
   Slightly larger than V2 for stronger readability.
   ========================================================= */

@media (max-width: 767.98px) {

    .zbcLead-shell .hero-title {
        font-size: clamp(1.9rem, 6.8vw, 2.38rem);
        line-height: 1.035;
        letter-spacing: -0.026em;
    }

    .zbcLead-shell .hero-summary {
        font-size: clamp(1.03rem, 3.85vw, 1.10rem);
        line-height: 1.48;
    }

    .zbcLead-shell .story-kicker {
        font-size: clamp(0.72rem, 2.55vw, 0.78rem);
        letter-spacing: 0.045em;
    }

    .zbcLead-shell .story-meta {
        font-size: clamp(0.75rem, 2.75vw, 0.81rem);
    }

    .zbcLead-shell .watch-card h2 {
        font-size: clamp(1.5rem, 5.4vw, 1.7rem);
    }

    .zbcLead-shell .watch-title {
        font-size: clamp(1.24rem, 4.7vw, 1.4rem);
    }


    /* =====================================================
       MOBILE SECONDARY STORIES
       Vertical feed instead of horizontal swipe.
       ===================================================== */

    .zbcLead-shell .lead-list {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: 100%;
        overflow: visible !important;
        padding: 0 !important;
        scroll-snap-type: none !important;
    }

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        display: grid;
        grid-template-columns: 124px minmax(0, 1fr);
        gap: 0.95rem;

        width: 100%;
        min-height: 0;
        height: auto;

        align-items: start;

        padding: 0.95rem 0;
        margin: 0;

        border: 0;
        border-bottom: 1px solid var(--zbc-border, var(--zbc-line));
        border-radius: 0;

        background: transparent;
        box-shadow: none;

        scroll-snap-align: none;
    }

    .zbcLead-shell .lead-list-item:first-child {
        padding-top: 0;
    }

    .zbcLead-shell .lead-list-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .zbcLead-shell .lead-list-image {
        width: 124px;
        aspect-ratio: 4 / 3;
        align-self: start;
        overflow: hidden;
        border-radius: 4px;
    }

    .zbcLead-shell .lead-list-image img {
        display: block;
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        object-fit: cover;
        object-position: center;
    }

    .zbcLead-shell .lead-list-item > div {
        min-width: 0;
        padding-top: 0.05rem;
    }

    .zbcLead-shell .lead-list-item h2 {
        margin: 0.28rem 0 0.5rem;
        font-size: clamp(1.06rem, 4.2vw, 1.16rem);
        line-height: 1.19;
        letter-spacing: -0.01em;
        text-wrap: pretty;
    }

    .zbcLead-shell .lead-list-item h2 a {
        display: inline;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479.98px) {

    .zbcLead-shell .hero-title {
        font-size: clamp(1.84rem, 7.25vw, 2.12rem);
    }

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 0.82rem;
        padding: 0.88rem 0;
    }

    .zbcLead-shell .lead-list-image {
        width: 108px;
    }

    .zbcLead-shell .lead-list-item h2 {
        font-size: clamp(1.02rem, 4.45vw, 1.11rem);
        line-height: 1.18;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 374.98px) {

    .zbcLead-shell .hero-title {
        font-size: 1.78rem;
    }

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        grid-template-columns: 98px minmax(0, 1fr);
        gap: 0.75rem;
    }

    .zbcLead-shell .lead-list-image {
        width: 98px;
    }

    .zbcLead-shell .lead-list-item h2 {
        font-size: 1rem;
    }
}


/* =========================================================
   DARK MODE
   ========================================================= */

[data-bs-theme="dark"] .zbcLead-shell .lead-list-item {
    background: transparent;
    border-bottom-color: var(--zbc-border);
}

/* === ZBC LEAD MOBILE VERTICAL V3 END === */

/* === ZBC LEAD MOBILE SPACING V4 START === */

/*
   The base desktop rule contains:
       .lead-list-item { flex: 1; }

   On a vertical mobile flex column that makes every story stretch
   vertically. Reset the flex sizing so every story uses only the
   height required by its image and text.
*/

@media (max-width: 767.98px) {

    .zbcLead-shell .lead-list {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;

        width: 100%;
        height: auto !important;
        min-height: 0 !important;

        gap: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        flex: 0 0 auto !important;

        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        align-self: auto;
        align-items: start;

        margin: 0 !important;
        padding: 1rem 0 !important;

        border: 0 !important;
        border-bottom:
            1px solid var(--zbc-border, var(--zbc-line)) !important;

        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .zbcLead-shell .lead-list-item:first-child {
        padding-top: 0 !important;
    }

    .zbcLead-shell .lead-list-item:last-child {
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }

    /*
       Keep thumbnails compact and predictable.
       They should not control the height of the whole story row.
    */
    .zbcLead-shell .lead-list-image {
        width: 124px;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3;
        align-self: start;
        overflow: hidden;
        border-radius: 4px;
    }

    .zbcLead-shell .lead-list-image img {
        display: block;
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center;
    }

    .zbcLead-shell .lead-list-item > div {
        min-width: 0;
        height: auto !important;
        align-self: start;
    }

    .zbcLead-shell .lead-list-item h2 {
        margin: 0.3rem 0 0.45rem;
    }
}


@media (max-width: 479.98px) {

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 0.85rem;
        padding: 0.9rem 0 !important;
    }

    .zbcLead-shell .lead-list-image {
        width: 108px;
    }
}


@media (max-width: 374.98px) {

    .zbcLead-shell .lead-list-item,
    .zbcLead-shell .lead-list-item + .lead-list-item {
        grid-template-columns: 98px minmax(0, 1fr);
        gap: 0.75rem;
    }

    .zbcLead-shell .lead-list-image {
        width: 98px;
    }
}

/* === ZBC LEAD MOBILE SPACING V4 END === */

/* Lead summary and publication details below the photograph. */
.zbcLead-shell .rgk-lead-details { padding: 1rem 0 .25rem; color: var(--zbc-text); }
.zbcLead-shell .rgk-lead-excerpt { margin: 0 0 .85rem; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; }
.zbcLead-shell .rgk-lead-details .story-meta { color: var(--zbc-text-muted); }
.zbcLead-shell .rgk-lead-feature { min-width: 0; }

/* Source: assets/css/components/zbc-watch.css */
/* =========================================================
   ZBC WATCH & LISTEN
   All custom classes are namespaced zbcWatch-*.
   ========================================================= */

.zbcWatch-shell {
    --zbcWatch-red: var(--zbc-red, #d00000);
    --zbcWatch-bg: var(--zbc-surface-soft, #f5f6f8);
    --zbcWatch-surface: var(--zbc-surface-raised, #ffffff);
    --zbcWatch-text: var(--zbc-text, #20242a);
    --zbcWatch-heading: var(--zbc-heading, #111111);
    --zbcWatch-muted: var(--zbc-text-muted, #6b7280);
    --zbcWatch-border: var(--zbc-border, #e6e7e9);

    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;

    padding: 1rem;

    color: var(--zbcWatch-text);
    background: var(--zbcWatch-bg);
    border: 1px solid var(--zbcWatch-border);
    border-radius: 5px;
}

.zbcWatch-header {
    margin-bottom: 0.85rem;
}

.zbcWatch-title {
    margin: 0 0 0.75rem;
    color: var(--zbcWatch-heading);
    font-family: var(--font-editorial, Palatino, Georgia, serif);
    font-size: clamp(1.45rem, 1.15vw + 0.8rem, 1.7rem);
    font-weight: 700;
    line-height: 1.08;
}

.zbcWatch-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;

    margin: 0;
    padding: 0;
}

.zbcWatch-tabs .nav-item {
    min-width: 0;
}

.zbcWatch-tabs .nav-link {
    width: 100%;
    min-height: 39px;

    border: 1px solid transparent;
    border-radius: 4px;

    color: var(--zbcWatch-muted);
    background: color-mix(
        in srgb,
        var(--zbcWatch-bg) 72%,
        var(--zbcWatch-border)
    );

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.zbcWatch-tabs .nav-link:hover {
    color: var(--zbcWatch-heading);
    border-color: var(--zbcWatch-border);
}

.zbcWatch-tabs .nav-link.active {
    color: #ffffff;
    background: var(--zbcWatch-red);
    border-color: var(--zbcWatch-red);
}


/* =========================================================
   LIVE MEDIA
   ========================================================= */

.zbcWatch-media {
    position: relative;
    display: block;
    overflow: hidden;

    width: 100%;
    aspect-ratio: 16 / 9;

    border-radius: 4px;
    background: #0d1116;
}

.zbcWatch-media img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 220ms ease,
        filter 220ms ease;
}

.zbcWatch-media::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 40%,
            rgba(0, 0, 0, 0.32) 100%
        );

    pointer-events: none;
}

.zbcWatch-media:hover img {
    transform: scale(1.018);
}

.zbcWatch-liveBadge {
    position: absolute;
    z-index: 3;
    bottom: 0.7rem;
    left: 0.7rem;

    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    padding: 0.3rem 0.55rem;

    border-radius: 999px;

    color: #ffffff;
    background: var(--zbcWatch-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.zbcWatch-liveDot {
    width: 7px;
    height: 7px;
    border-radius: 50%;

    background: #ffffff;

    box-shadow: 0 0 0 4px rgba(255,255,255,.18);
}

.zbcWatch-play {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;

    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    color: var(--zbcWatch-red);
    background: #ffffff;

    box-shadow: 0 8px 22px rgba(0,0,0,.25);

    font-size: 1.45rem;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.zbcWatch-media:hover .zbcWatch-play {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 10px 26px rgba(0,0,0,.32);
}


/* =========================================================
   CHANNEL / STATUS
   ========================================================= */

.zbcWatch-channel {
    margin-top: 0.82rem;
}

.zbcWatch-channelTitle {
    margin: 0;

    color: var(--zbcWatch-heading);

    font-family: var(--font-editorial, Palatino, Georgia, serif);
    font-size: clamp(1.15rem, 0.5vw + 1rem, 1.32rem);
    font-weight: 700;
    line-height: 1.1;
}

.zbcWatch-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;

    margin-top: 0.3rem;

    color: var(--zbcWatch-muted);

    font-size: 0.75rem;
    font-weight: 600;
}

.zbcWatch-statusLive {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;

    color: var(--zbcWatch-red);

    font-weight: 900;
}

.zbcWatch-statusLive::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--zbcWatch-red);
}

.zbcWatch-statusDivider {
    color: color-mix(
        in srgb,
        var(--zbcWatch-muted) 60%,
        transparent
    );
}


/* =========================================================
   PROGRAMME STRIP
   ========================================================= */

.zbcWatch-programme {
    margin-top: 0.9rem;

    border: 1px solid var(--zbcWatch-border);
    border-radius: 4px;

    background: var(--zbcWatch-surface);
}

.zbcWatch-programmeRow {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0.7rem;

    align-items: center;

    padding: 0.75rem;
}

.zbcWatch-programmeRow + .zbcWatch-programmeRow {
    border-top: 1px solid var(--zbcWatch-border);
}

.zbcWatch-programmeIcon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;

    border-radius: 50%;

    color: var(--zbcWatch-red);

    background: color-mix(
        in srgb,
        var(--zbcWatch-red) 9%,
        var(--zbcWatch-surface)
    );

    font-size: 0.95rem;
}

.zbcWatch-programmeLabel {
    display: block;

    margin-bottom: 0.1rem;

    color: var(--zbcWatch-red);

    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.zbcWatch-programmeName {
    display: block;

    color: var(--zbcWatch-heading);

    font-family: var(--font-editorial, Palatino, Georgia, serif);
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.12;
}

.zbcWatch-programmeTime {
    display: block;

    margin-top: 0.1rem;

    color: var(--zbcWatch-muted);

    font-size: 0.7rem;
    font-weight: 500;
}


/* =========================================================
   FOOTER ACTION
   ========================================================= */

.zbcWatch-footer {
    margin-top: auto;
    padding-top: 0.85rem;
}

.zbcWatch-scheduleLink {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    color: var(--zbcWatch-red);

    font-size: 0.76rem;
    font-weight: 800;

    text-decoration: none;
}

.zbcWatch-scheduleLink:hover {
    color: color-mix(
        in srgb,
        var(--zbcWatch-red) 78%,
        black
    );
}


/* =========================================================
   RADIO
   ========================================================= */

.zbcWatch-radio {
    display: flex;
    min-height: 310px;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    padding: 1.25rem 0.5rem;

    text-align: center;
}

.zbcWatch-radioIcon {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;

    margin-bottom: 0.9rem;

    border-radius: 50%;

    color: #ffffff;
    background: var(--zbcWatch-red);

    box-shadow: 0 8px 24px rgba(180,0,0,.18);

    font-size: 1.6rem;
}

.zbcWatch-radioTitle {
    margin: 0;

    color: var(--zbcWatch-heading);

    font-family: var(--font-editorial, Palatino, Georgia, serif);
    font-size: 1.35rem;
    font-weight: 700;
}

.zbcWatch-radioProgramme {
    margin: 0.35rem 0 0;

    color: var(--zbcWatch-muted);

    font-size: 0.8rem;
}

.zbcWatch-radioNow {
    margin: 0.85rem 0 1rem;

    color: var(--zbcWatch-heading);

    font-size: 0.93rem;
    font-weight: 700;
}

.zbcWatch-radioButton {
    display: inline-flex;
    min-height: 42px;

    align-items: center;
    justify-content: center;
    gap: 0.45rem;

    padding: 0 1.15rem;

    border-radius: 999px;

    color: #ffffff;
    background: var(--zbcWatch-red);

    font-size: 0.79rem;
    font-weight: 850;

    text-decoration: none;
}

.zbcWatch-radioButton:hover {
    color: #ffffff;
    background: color-mix(
        in srgb,
        var(--zbcWatch-red) 82%,
        black
    );
}


/* =========================================================
   TABLET
   When Watch occupies the full row, use the width intelligently.
   ========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

    .zbcWatch-shell {
        padding: 1.15rem;
    }

    .zbcWatch-tvPane.active,
    .zbcWatch-tvPane.show {
        display: grid;

        grid-template-columns:
            minmax(0, 1.4fr)
            minmax(260px, 0.9fr);

        grid-template-areas:
            "media channel"
            "media programme"
            "media footer";

        column-gap: 1.35rem;
        align-items: start;
    }

    .zbcWatch-media {
        grid-area: media;
    }

    .zbcWatch-channel {
        grid-area: channel;
        margin-top: 0;
    }

    .zbcWatch-programme {
        grid-area: programme;
    }

    .zbcWatch-footer {
        grid-area: footer;
        align-self: end;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .zbcWatch-shell {
        height: auto;
        padding: 1rem;
    }

    .zbcWatch-title {
        font-size: clamp(1.5rem, 5.4vw, 1.72rem);
    }

    .zbcWatch-tabs .nav-link {
        min-height: 44px;
        font-size: 0.86rem;
    }

    .zbcWatch-play {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }

    .zbcWatch-channelTitle {
        font-size: clamp(1.22rem, 4.7vw, 1.4rem);
    }

    .zbcWatch-status {
        font-size: 0.79rem;
    }

    .zbcWatch-programmeName {
        font-size: 1rem;
    }

    .zbcWatch-programmeTime,
    .zbcWatch-scheduleLink {
        font-size: 0.76rem;
    }
}


/* =========================================================
   DARK MODE
   ========================================================= */

[data-bs-theme="dark"] .zbcWatch-shell {
    color: var(--zbcWatch-text);
    background: var(--zbcWatch-bg);
    border-color: var(--zbcWatch-border);
}

[data-bs-theme="dark"] .zbcWatch-programme {
    background: var(--zbcWatch-surface);
    border-color: var(--zbcWatch-border);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.zbcWatch-shell a:focus-visible,
.zbcWatch-shell button:focus-visible {
    outline: 3px solid color-mix(
        in srgb,
        var(--zbcWatch-red) 35%,
        transparent
    );
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .zbcWatch-media img,
    .zbcWatch-play {
        transition: none !important;
    }
}

/* Source: assets/css/components/zbc-ads.css */
/* =========================================================
   ZBC RESPONSIVE ADVERTISING COMPONENT
   ---------------------------------------------------------
   Reusable site-wide ad system.

   Large desktop : 970 x 90
   Small desktop : 728 x 90
   Mobile        : 300 x 250

   All custom selectors are prefixed zbcAd-.
   ========================================================= */

.zbcAd-shell {
    --zbcAd-bg: var(--zbc-surface, #ffffff);
    --zbcAd-surface: var(--zbc-surface-soft, #f5f6f8);
    --zbcAd-border: var(--zbc-border, #e6e7e9);
    --zbcAd-text: var(--zbc-text-muted, #6b7280);
    --zbcAd-heading: var(--zbc-heading, #111111);
    --zbcAd-red: var(--zbc-red, #d00000);

    width: 100%;
    padding: 1.15rem 0 1.35rem;

    background: var(--zbcAd-bg);
}

.zbcAd-wrap {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   COMMON PLACEHOLDER
   ========================================================= */

.zbcAd-unit {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--zbcAd-border);

    color: var(--zbcAd-text);
    background:
        linear-gradient(
            135deg,
            transparent 0 49.7%,
            color-mix(
                in srgb,
                var(--zbcAd-border) 55%,
                transparent
            ) 50% 50.3%,
            transparent 50.4% 100%
        ),
        linear-gradient(
            45deg,
            transparent 0 49.7%,
            color-mix(
                in srgb,
                var(--zbcAd-border) 55%,
                transparent
            ) 50% 50.3%,
            transparent 50.4% 100%
        ),
        var(--zbcAd-surface);

    text-align: center;
}

.zbcAd-badge {
    position: absolute;
    top: 0.45rem;
    left: 50%;

    padding: 0.18rem 0.48rem;

    transform: translateX(-50%);

    border-radius: 2px;

    color: var(--zbcAd-text);
    background: var(--zbcAd-bg);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.zbcAd-size {
    color: var(--zbcAd-heading);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.025em;
}

.zbcAd-note {
    margin-top: 0.2rem;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.64rem;
    font-weight: 500;
}


/* =========================================================
   LARGE DESKTOP: 970 x 90
   ========================================================= */

.zbcAd-unit970 {
    width: min(970px, 100%);
    min-height: 90px;
}


/* =========================================================
   SMALL DESKTOP / TABLET LANDSCAPE: 728 x 90
   ========================================================= */

.zbcAd-unit728 {
    display: none;

    width: min(728px, 100%);
    min-height: 90px;
}


/* =========================================================
   MOBILE: 300 x 250
   ========================================================= */

.zbcAd-unit300 {
    display: none;

    width: 300px;
    height: 250px;
    max-width: 100%;
}


/* =========================================================
   RESPONSIVE SWITCHING
   ========================================================= */

@media (max-width: 1199.98px) and (min-width: 768px) {

    .zbcAd-unit970 {
        display: none;
    }

    .zbcAd-unit728 {
        display: flex;
    }
}


@media (max-width: 767.98px) {

    .zbcAd-shell {
        padding: 1.35rem 0 1.6rem;
    }

    .zbcAd-unit970,
    .zbcAd-unit728 {
        display: none;
    }

    .zbcAd-unit300 {
        display: flex;
    }

    .zbcAd-size {
        font-size: 0.85rem;
    }

    .zbcAd-note {
        max-width: 215px;
        font-size: 0.68rem;
        line-height: 1.35;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   Keep 300x250 ad inside narrow screens without overflow.
   ========================================================= */

@media (max-width: 319.98px) {

    .zbcAd-unit300 {
        width: calc(100vw - 1.5rem);
        height: auto;
        aspect-ratio: 300 / 250;
    }
}


/* =========================================================
   DARK MODE
   ========================================================= */

[data-bs-theme="dark"] .zbcAd-shell {
    background: var(--zbcAd-bg);
}

[data-bs-theme="dark"] .zbcAd-unit {
    border-color: var(--zbcAd-border);
}


/* =========================================================
   FUTURE REAL-AD STATE
   Add .zbcAd-hasCreative when an ad server injects creative.
   ========================================================= */

.zbcAd-unit.zbcAd-hasCreative {
    background: transparent;
}

.zbcAd-unit.zbcAd-hasCreative .zbcAd-size,
.zbcAd-unit.zbcAd-hasCreative .zbcAd-note {
    display: none;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .zbcAd-unit {
        scroll-behavior: auto;
    }
}

/* Source: assets/css/components/zbc-local.css */
/* =========================================================
   ZBC LOCAL NEWS — PREMIUM EDITORIAL COMPONENT
   ---------------------------------------------------------
   Structure:
     visual | lead copy | supporting rail

   All selectors are namespaced zbcLocal-*.
   ========================================================= */

.zbcLocal-shell {
    --zbcLocal-red: var(--zbc-red, #d00000);
    --zbcLocal-bg: var(--zbc-page-bg, #ffffff);
    --zbcLocal-surface: var(--zbc-surface-raised, #ffffff);
    --zbcLocal-soft: var(--zbc-surface-soft, #f5f6f8);
    --zbcLocal-text: var(--zbc-text, #20242a);
    --zbcLocal-heading: var(--zbc-heading, #111111);
    --zbcLocal-muted: var(--zbc-text-muted, #6b7280);
    --zbcLocal-border: var(--zbc-border, #e2e4e7);
    --zbcLocal-shadow: var(--zbc-card-shadow, 0 10px 32px rgba(0,0,0,.05));

    padding: clamp(2.6rem, 4.4vw, 4.8rem) 0;

    color: var(--zbcLocal-text);
    background: var(--zbcLocal-bg);
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.zbcLocal-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem;

    margin-bottom: 1.15rem;
}

.zbcLocal-headingCopy {
    min-width: 0;
}

.zbcLocal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    margin-bottom: 0.24rem;

    color: var(--zbcLocal-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.zbcLocal-eyebrow::before {
    content: "";
    display: block;

    width: 4px;
    height: 18px;

    background: var(--zbcLocal-red);
}

.zbcLocal-heading h2 {
    margin: 0;

    color: var(--zbcLocal-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(2rem, 2.3vw, 2.55rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
}

.zbcLocal-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;

    padding-bottom: 0.15rem;

    color: var(--zbcLocal-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.79rem;
    font-weight: 800;
    text-decoration: none;
}

.zbcLocal-more:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =========================================================
   MAIN PANEL
   ========================================================= */

.zbcLocal-panel {
    display: grid;
    grid-template-columns:
        minmax(0, 1.34fr)
        minmax(0, 1.28fr)
        minmax(285px, 0.92fr);

    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--zbcLocal-border);
    border-radius: 6px;

    background: var(--zbcLocal-surface);
    box-shadow: var(--zbcLocal-shadow);
}


/* =========================================================
   LEFT: VISUAL
   ========================================================= */

.zbcLocal-visual {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 365px;
    overflow: hidden;

    background: #dfe3e7;
}

.zbcLocal-visual img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 280ms ease;
}

.zbcLocal-visual:hover img {
    transform: scale(1.018);
}

.zbcLocal-visualTag {
    position: absolute;
    z-index: 2;
    top: 1rem;
    left: 1rem;

    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    padding: 0.42rem 0.62rem;

    border-radius: 3px;

    color: #ffffff;
    background: rgba(18, 20, 23, 0.82);

    backdrop-filter: blur(4px);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.zbcLocal-visualTag i {
    color: #ffffff;
}


/* =========================================================
   CENTER: LEAD STORY
   ========================================================= */

.zbcLocal-lead {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;

    padding: clamp(1.55rem, 2.2vw, 2.5rem);

    border-right: 1px solid var(--zbcLocal-border);
}

.zbcLocal-location {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.35rem;

    margin-bottom: 0.65rem;

    color: var(--zbcLocal-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.zbcLocal-leadTitle {
    margin: 0;

    color: var(--zbcLocal-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(2rem, 2.7vw, 3.15rem);
    font-weight: 700;
    line-height: 1.01;
    letter-spacing: -0.032em;
    text-wrap: balance;
}

.zbcLocal-leadTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcLocal-leadTitle a:hover {
    color: var(--zbcLocal-red);
}

.zbcLocal-summary {
    margin: 1rem 0 0;

    color: var(--zbcLocal-text);

    font-size: clamp(0.98rem, 0.45vw + 0.85rem, 1.08rem);
    line-height: 1.52;
}

.zbcLocal-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;

    margin-top: 0.85rem;

    color: var(--zbcLocal-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.73rem;
    font-weight: 550;
}

.zbcLocal-cta {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 0.55rem;

    margin-top: 1.25rem;
    padding: 0 1.15rem;

    border-radius: 4px;

    color: #ffffff;
    background: var(--zbcLocal-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.8rem;
    font-weight: 850;
    text-decoration: none;
}

.zbcLocal-cta:hover {
    color: #ffffff;
    background:
        color-mix(
            in srgb,
            var(--zbcLocal-red) 84%,
            black
        );
}


/* =========================================================
   RIGHT: SUPPORTING RAIL
   ========================================================= */

.zbcLocal-rail {
    display: flex;
    min-width: 0;
    flex-direction: column;

    padding: 0.85rem 1rem;
}

.zbcLocal-railItem {
    display: grid;
    grid-template-columns: 122px minmax(0, 1fr);
    gap: 0.85rem;

    min-width: 0;
    flex: 1;
    align-items: center;

    padding: 0.75rem 0;

    border-bottom: 1px solid var(--zbcLocal-border);
}

.zbcLocal-railItem:last-child {
    border-bottom: 0;
}

.zbcLocal-thumb {
    display: block;
    width: 122px;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: 4px;
    background: var(--zbcLocal-soft);
}

.zbcLocal-thumb img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 220ms ease;
}

.zbcLocal-thumb:hover img {
    transform: scale(1.025);
}

.zbcLocal-railCopy {
    min-width: 0;
}

.zbcLocal-railLocation {
    display: block;

    margin-bottom: 0.22rem;

    color: var(--zbcLocal-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.zbcLocal-railTitle {
    margin: 0;

    color: var(--zbcLocal-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(0.98rem, 0.34vw + 0.87rem, 1.08rem);
    font-weight: 700;
    line-height: 1.14;
    text-wrap: pretty;
}

.zbcLocal-railTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcLocal-railTitle a:hover {
    color: var(--zbcLocal-red);
}

.zbcLocal-railMeta {
    display: flex;
    align-items: center;
    gap: 0.35rem;

    margin-top: 0.35rem;

    color: var(--zbcLocal-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.68rem;
}


/* =========================================================
   LAPTOP / TABLET LANDSCAPE
   768px - 1199px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199.98px) {

    .zbcLocal-panel {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(0, 1.05fr);

        grid-template-areas:
            "visual lead"
            "rail rail";
    }

    .zbcLocal-visual {
        grid-area: visual;
        min-height: 350px;
    }

    .zbcLocal-lead {
        grid-area: lead;
        border-right: 0;
    }

    .zbcLocal-rail {
        grid-area: rail;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 0 1.35rem;

        padding: 0.8rem 1.1rem;

        border-top: 1px solid var(--zbcLocal-border);
    }

    .zbcLocal-railItem {
        flex: none;
        min-height: 125px;
    }

    .zbcLocal-railItem:nth-child(3) {
        border-bottom: 0;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .zbcLocal-shell {
        padding: 2.4rem 0;
    }

    .zbcLocal-heading {
        align-items: center;
        margin-bottom: 0.95rem;
    }

    .zbcLocal-heading h2 {
        font-size: clamp(1.8rem, 7vw, 2.08rem);
    }

    .zbcLocal-more {
        font-size: 0.76rem;
    }

    .zbcLocal-panel {
        display: block;
        border-radius: 4px;
    }

    .zbcLocal-visual {
        width: 100%;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .zbcLocal-visualTag {
        top: 0.75rem;
        left: 0.75rem;
    }

    .zbcLocal-lead {
        padding: 1.25rem 1.15rem 1.35rem;

        border-right: 0;
        border-bottom: 1px solid var(--zbcLocal-border);
    }

    .zbcLocal-location {
        margin-bottom: 0.5rem;
        font-size: 0.74rem;
    }

    .zbcLocal-leadTitle {
        font-size: clamp(1.72rem, 7.1vw, 2.1rem);
        line-height: 1.035;
    }

    .zbcLocal-summary {
        margin-top: 0.8rem;

        font-size: clamp(1rem, 3.8vw, 1.08rem);
        line-height: 1.48;
    }

    .zbcLocal-meta {
        font-size: 0.76rem;
    }

    .zbcLocal-cta {
        min-height: 46px;
        margin-top: 1rem;

        font-size: 0.84rem;
    }

    .zbcLocal-rail {
        display: block;
        padding: 0 1.15rem;
    }

    .zbcLocal-railItem {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 0.9rem;

        min-height: 0;

        padding: 1rem 0;
    }

    .zbcLocal-thumb {
        width: 118px;
    }

    .zbcLocal-railLocation {
        font-size: 0.68rem;
    }

    .zbcLocal-railTitle {
        font-size: clamp(1.04rem, 4.25vw, 1.15rem);
        line-height: 1.18;
    }

    .zbcLocal-railMeta {
        margin-top: 0.4rem;
        font-size: 0.72rem;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479.98px) {

    .zbcLocal-heading {
        gap: 0.7rem;
    }

    .zbcLocal-heading h2 {
        font-size: 1.82rem;
    }

    .zbcLocal-more span {
        display: none;
    }

    .zbcLocal-rail {
        padding: 0 1rem;
    }

    .zbcLocal-railItem {
        grid-template-columns: 106px minmax(0, 1fr);
        gap: 0.8rem;

        padding: 0.9rem 0;
    }

    .zbcLocal-thumb {
        width: 106px;
    }

    .zbcLocal-railTitle {
        font-size: clamp(1rem, 4.4vw, 1.08rem);
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 374.98px) {

    .zbcLocal-lead {
        padding-inline: 1rem;
    }

    .zbcLocal-leadTitle {
        font-size: 1.68rem;
    }

    .zbcLocal-railItem {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 0.72rem;
    }

    .zbcLocal-thumb {
        width: 96px;
    }

    .zbcLocal-railTitle {
        font-size: 0.98rem;
    }
}


/* =========================================================
   DARK MODE
   ========================================================= */

[data-bs-theme="dark"] .zbcLocal-shell {
    color: var(--zbcLocal-text);
    background: var(--zbcLocal-bg);
}

[data-bs-theme="dark"] .zbcLocal-panel {
    background: var(--zbcLocal-surface);
    border-color: var(--zbcLocal-border);
}

[data-bs-theme="dark"] .zbcLocal-lead,
[data-bs-theme="dark"] .zbcLocal-rail,
[data-bs-theme="dark"] .zbcLocal-railItem {
    border-color: var(--zbcLocal-border);
}


/* =========================================================
   ACCESSIBILITY / MOTION
   ========================================================= */

.zbcLocal-shell a:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--zbcLocal-red) 35%,
            transparent
        );

    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .zbcLocal-visual img,
    .zbcLocal-thumb img {
        transition: none !important;
    }
}

/* Source: assets/css/components/zbc-justin.css */
/* =========================================================
   ZBC JUST IN V2 — BALANCED LIVE NEWSROOM
   ---------------------------------------------------------
   Completely distinct from Local News.

   Desktop:
     8-column live-news composition
     4-column discovery rail

   Left:
     image-led latest lead
     2 x 2 compact latest update cards

   Right:
     Trending Now / Editor's Picks / Popular

   All selectors are zbcJustIn-*.
   ========================================================= */

.zbcJustIn-shell {
    --zbcJustIn-red: var(--zbc-red, #d00000);
    --zbcJustIn-bg: var(--zbc-page-bg, #ffffff);
    --zbcJustIn-surface: var(--zbc-surface-raised, #ffffff);
    --zbcJustIn-soft: var(--zbc-surface-soft, #f5f6f8);
    --zbcJustIn-text: var(--zbc-text, #20242a);
    --zbcJustIn-heading: var(--zbc-heading, #111111);
    --zbcJustIn-muted: var(--zbc-text-muted, #6b7280);
    --zbcJustIn-border: var(--zbc-border, #e2e4e7);
    --zbcJustIn-shadow: var(--zbc-card-shadow, 0 10px 30px rgba(0,0,0,.05));

    padding: clamp(2.7rem, 4.4vw, 4.8rem) 0;

    color: var(--zbcJustIn-text);
    background: var(--zbcJustIn-bg);
}


/* =========================================================
   HEADING
   ========================================================= */

.zbcJustIn-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 1.15rem;
}

.zbcJustIn-headingCopy {
    min-width: 0;
}

.zbcJustIn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.52rem;

    margin-bottom: 0.25rem;

    color: var(--zbcJustIn-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.zbcJustIn-pulse {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--zbcJustIn-red);

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--zbcJustIn-red) 12%,
            transparent
        );
}

.zbcJustIn-heading h2 {
    margin: 0;

    color: var(--zbcJustIn-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(2rem, 2.25vw, 2.55rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
}

.zbcJustIn-viewAll {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    color: var(--zbcJustIn-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.79rem;
    font-weight: 800;
    text-decoration: none;
}

.zbcJustIn-viewAll:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =========================================================
   MASTER LAYOUT
   ========================================================= */

.zbcJustIn-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 2.08fr)
        minmax(320px, 0.92fr);

    gap: 1.35rem;

    align-items: stretch;
}

.zbcJustIn-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


/* =========================================================
   LEAD — VISUALLY DIFFERENT FROM LOCAL NEWS
   ========================================================= */

.zbcJustIn-lead {
    position: relative;

    display: block;
    min-height: 410px;
    overflow: hidden;

    border-radius: 5px;

    color: #ffffff;
    background: #121417;

    box-shadow: var(--zbcJustIn-shadow);
}

.zbcJustIn-lead img {
    position: absolute;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 260ms ease;
}

.zbcJustIn-lead:hover img {
    transform: scale(1.018);
}

.zbcJustIn-lead::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 26%,
            rgba(0,0,0,.42) 57%,
            rgba(0,0,0,.88) 100%
        );

    pointer-events: none;
}

.zbcJustIn-leadCopy {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;

    padding: clamp(1.2rem, 2vw, 2rem);
}

.zbcJustIn-liveTag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    margin-bottom: 0.55rem;
    padding: 0.34rem 0.55rem;

    border-radius: 3px;

    color: #ffffff;
    background: var(--zbcJustIn-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.zbcJustIn-leadTitle {
    max-width: 850px;
    margin: 0;

    color: #ffffff;

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(2rem, 2.75vw, 3rem);
    font-weight: 700;
    line-height: 1.01;
    letter-spacing: -0.032em;
    text-wrap: balance;
}

.zbcJustIn-leadTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcJustIn-leadSummary {
    max-width: 760px;

    margin: 0.75rem 0 0;

    color: rgba(255,255,255,.88);

    font-size: clamp(0.98rem, 0.35vw + 0.88rem, 1.05rem);
    line-height: 1.46;
}

.zbcJustIn-leadMeta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;

    margin-top: 0.72rem;

    color: rgba(255,255,255,.76);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.71rem;
}


/* =========================================================
   2 x 2 UPDATE GRID
   ========================================================= */

.zbcJustIn-updates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0;

    margin-top: 1rem;

    border-top: 2px solid var(--zbcJustIn-heading);
    border-left: 1px solid var(--zbcJustIn-border);
}

.zbcJustIn-update {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0.8rem;

    min-width: 0;
    min-height: 142px;
    align-items: center;

    padding: 0.85rem;

    border-right: 1px solid var(--zbcJustIn-border);
    border-bottom: 1px solid var(--zbcJustIn-border);

    background: var(--zbcJustIn-surface);
}

.zbcJustIn-updateThumb {
    display: block;
    width: 112px;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: 4px;
    background: var(--zbcJustIn-soft);
}

.zbcJustIn-updateThumb img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.zbcJustIn-updateCopy {
    min-width: 0;
}

.zbcJustIn-updateTopline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;

    margin-bottom: 0.22rem;
}

.zbcJustIn-updateTime {
    color: var(--zbcJustIn-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.66rem;
    font-weight: 900;
}

.zbcJustIn-updateCategory {
    color: var(--zbcJustIn-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.zbcJustIn-updateTitle {
    margin: 0;

    color: var(--zbcJustIn-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(1rem, 0.28vw + 0.94rem, 1.1rem);
    font-weight: 700;
    line-height: 1.15;
    text-wrap: pretty;
}

.zbcJustIn-updateTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcJustIn-updateTitle a:hover {
    color: var(--zbcJustIn-red);
}

.zbcJustIn-updateMeta {
    margin-top: 0.3rem;

    color: var(--zbcJustIn-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.66rem;
}


/* =========================================================
   RIGHT DISCOVERY RAIL
   ========================================================= */

.zbcJustIn-discovery {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--zbcJustIn-border);
    border-radius: 5px;

    background: var(--zbcJustIn-surface);
    box-shadow: var(--zbcJustIn-shadow);
}

.zbcJustIn-discoveryHead {
    padding: 1rem 1rem 0.8rem;

    border-bottom: 1px solid var(--zbcJustIn-border);
}

.zbcJustIn-discoveryTitle {
    display: flex;
    align-items: center;
    gap: 0.45rem;

    margin: 0 0 0.8rem;

    color: var(--zbcJustIn-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
}

.zbcJustIn-discoveryTitle i {
    color: var(--zbcJustIn-red);
}

.zbcJustIn-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;

    border: 0;
}

.zbcJustIn-tabs .nav-link {
    width: 100%;
    min-height: 42px;

    padding: 0.45rem 0.25rem;

    border: 1px solid var(--zbcJustIn-border) !important;
    border-radius: 3px !important;

    color: var(--zbcJustIn-muted);
    background: var(--zbcJustIn-soft);

    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1.05;
}

.zbcJustIn-tabs .nav-link.active {
    color: #ffffff !important;
    background: var(--zbcJustIn-red) !important;
    border-color: var(--zbcJustIn-red) !important;
}

.zbcJustIn-tabBody {
    flex: 1;

    padding: 0 1rem 0.45rem;
}

.zbcJustIn-rankedList {
    margin: 0;
    padding: 0;

    list-style: none;
    counter-reset: zbcJustInRank;
}

.zbcJustIn-rankedList li {
    counter-increment: zbcJustInRank;

    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.72rem;

    align-items: start;

    padding: 0.9rem 0;

    border-bottom: 1px solid var(--zbcJustIn-border);
}

.zbcJustIn-rankedList li:last-child {
    border-bottom: 0;
}

.zbcJustIn-rankedList li::before {
    content: counter(zbcJustInRank);

    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;

    border-radius: 50%;

    color: var(--zbcJustIn-red);

    background:
        color-mix(
            in srgb,
            var(--zbcJustIn-red) 9%,
            var(--zbcJustIn-surface)
        );

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.82rem;
    font-weight: 900;
}

.zbcJustIn-rankedTitle {
    margin: 0;

    color: var(--zbcJustIn-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(0.96rem, 0.28vw + 0.9rem, 1.05rem);
    font-weight: 700;
    line-height: 1.15;
}

.zbcJustIn-rankedTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcJustIn-rankedTitle a:hover {
    color: var(--zbcJustIn-red);
}

.zbcJustIn-rankedMeta {
    display: block;

    margin-top: 0.28rem;

    color: var(--zbcJustIn-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.67rem;
}


/* =========================================================
   TOPICS STRIP
   ========================================================= */

.zbcJustIn-topics {
    display: flex;
    align-items: center;

    margin-top: 1rem;

    overflow-x: auto;

    border-top: 1px solid var(--zbcJustIn-border);
    border-bottom: 1px solid var(--zbcJustIn-border);

    background: var(--zbcJustIn-soft);

    scrollbar-width: none;
}

.zbcJustIn-topics::-webkit-scrollbar {
    display: none;
}

.zbcJustIn-topicsLabel {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;

    padding: 0 1rem;

    color: var(--zbcJustIn-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.74rem;
    font-weight: 900;
    white-space: nowrap;
}

.zbcJustIn-topic {
    position: relative;

    display: inline-flex;
    min-height: 46px;
    align-items: center;
    flex: 0 0 auto;

    padding: 0 1rem;

    color: var(--zbcJustIn-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.72rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.zbcJustIn-topic::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 1px;
    height: 18px;

    transform: translateY(-50%);

    background: var(--zbcJustIn-border);
}

.zbcJustIn-topic:hover {
    color: var(--zbcJustIn-red);
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

    .zbcJustIn-layout {
        grid-template-columns:
            minmax(0, 1.72fr)
            minmax(300px, 0.88fr);
    }

    .zbcJustIn-lead {
        min-height: 380px;
    }

    .zbcJustIn-update {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .zbcJustIn-updateThumb {
        width: 96px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .zbcJustIn-layout {
        grid-template-columns: 1fr;
    }

    .zbcJustIn-discovery {
        height: auto;
    }

    .zbcJustIn-rankedList {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.35rem;
    }

    .zbcJustIn-rankedList li:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .zbcJustIn-shell {
        padding: 2.4rem 0;
    }

    .zbcJustIn-heading {
        align-items: center;
    }

    .zbcJustIn-heading h2 {
        font-size: clamp(1.82rem, 7vw, 2.08rem);
    }

    .zbcJustIn-lead {
        min-height: clamp(390px, 105vw, 480px);
    }

    .zbcJustIn-leadCopy {
        padding: 1.15rem;
    }

    .zbcJustIn-leadTitle {
        font-size: clamp(1.78rem, 7.1vw, 2.12rem);
    }

    .zbcJustIn-leadSummary {
        font-size: clamp(1rem, 3.8vw, 1.07rem);
    }

    .zbcJustIn-updates {
        grid-template-columns: 1fr;
    }

    .zbcJustIn-update {
        grid-template-columns: 118px minmax(0, 1fr);

        min-height: 0;

        padding: 0.9rem;
    }

    .zbcJustIn-updateThumb {
        width: 118px;
    }

    .zbcJustIn-updateTitle {
        font-size: clamp(1.03rem, 4.2vw, 1.12rem);
    }

    .zbcJustIn-rankedList {
        grid-template-columns: 1fr;
    }

    .zbcJustIn-rankedList li:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--zbcJustIn-border);
    }

    .zbcJustIn-rankedList li:last-child {
        border-bottom: 0;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479.98px) {

    .zbcJustIn-viewAll span {
        display: none;
    }

    .zbcJustIn-update {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 0.72rem;
    }

    .zbcJustIn-updateThumb {
        width: 104px;
    }

    .zbcJustIn-tabs .nav-link {
        font-size: 0.63rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 374.98px) {

    .zbcJustIn-update {
        grid-template-columns: 94px minmax(0, 1fr);
    }

    .zbcJustIn-updateThumb {
        width: 94px;
    }

    .zbcJustIn-updateTitle {
        font-size: 0.99rem;
    }
}


/* =========================================================
   DARK MODE
   ========================================================= */

[data-bs-theme="dark"] .zbcJustIn-shell {
    color: var(--zbcJustIn-text);
    background: var(--zbcJustIn-bg);
}

[data-bs-theme="dark"] .zbcJustIn-update,
[data-bs-theme="dark"] .zbcJustIn-discovery {
    background: var(--zbcJustIn-surface);
    border-color: var(--zbcJustIn-border);
}

[data-bs-theme="dark"] .zbcJustIn-tabs .nav-link {
    color: var(--zbcJustIn-muted);
    background: var(--zbcJustIn-soft);
    border-color: var(--zbcJustIn-border) !important;
}


/* =========================================================
   ACCESSIBILITY / MOTION
   ========================================================= */

.zbcJustIn-shell a:focus-visible,
.zbcJustIn-shell button:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--zbcJustIn-red) 35%,
            transparent
        );

    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .zbcJustIn-lead img {
        transition: none !important;
    }
}

/* Source: assets/css/components/zbc-business.css */
/* =========================================================
   ZBC BUSINESS NEWS — BALANCED EDITORIAL + SPONSORED
   ---------------------------------------------------------
   Desktop:
       Editorial 75% | Sponsored 25%

   Editorial:
       Lead 60% | 4 supporting stories 40%
       + 3 horizontal briefs

   Sponsored:
       6 equal title rows

   All selectors use zbcBusiness-*.
   ========================================================= */

.zbcBusiness-shell {
    --zbcBusiness-red: var(--zbc-red, #d00000);
    --zbcBusiness-bg: var(--zbc-surface-soft, #f5f6f8);
    --zbcBusiness-page: var(--zbc-page-bg, #ffffff);
    --zbcBusiness-surface: var(--zbc-surface-raised, #ffffff);
    --zbcBusiness-text: var(--zbc-text, #20242a);
    --zbcBusiness-heading: var(--zbc-heading, #111111);
    --zbcBusiness-muted: var(--zbc-text-muted, #6b7280);
    --zbcBusiness-border: var(--zbc-border, #e2e4e7);
    --zbcBusiness-shadow: var(--zbc-card-shadow, 0 10px 30px rgba(0,0,0,.05));

    padding: clamp(2.8rem, 4.4vw, 4.8rem) 0;

    color: var(--zbcBusiness-text);
    background: var(--zbcBusiness-bg);
}


/* =========================================================
   HEADING
   ========================================================= */

.zbcBusiness-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 1.15rem;
}

.zbcBusiness-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    margin-bottom: 0.25rem;

    color: var(--zbcBusiness-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.zbcBusiness-eyebrow::before {
    content: "";
    width: 4px;
    height: 18px;

    background: var(--zbcBusiness-red);
}

.zbcBusiness-heading h2 {
    margin: 0;

    color: var(--zbcBusiness-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(2rem, 2.3vw, 2.55rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
}

.zbcBusiness-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    color: var(--zbcBusiness-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.79rem;
    font-weight: 800;
    text-decoration: none;
}

.zbcBusiness-more:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =========================================================
   MASTER 75 / 25 BALANCED GRID
   ========================================================= */

.zbcBusiness-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 3fr)
        minmax(285px, 1fr);

    gap: 1.35rem;

    align-items: stretch;
}

.zbcBusiness-editorial {
    display: flex;
    min-width: 0;
    flex-direction: column;
}


/* =========================================================
   EDITORIAL TOP:
   MAIN LEAD + FOUR SUPPORTING STORIES
   ========================================================= */

.zbcBusiness-top {
    display: grid;
    grid-template-columns:
        minmax(0, 1.48fr)
        minmax(300px, 0.92fr);

    min-height: 455px;

    overflow: hidden;

    border: 1px solid var(--zbcBusiness-border);
    border-radius: 5px;

    background: var(--zbcBusiness-surface);
    box-shadow: var(--zbcBusiness-shadow);
}


/* =========================================================
   MAIN BUSINESS LEAD
   ========================================================= */

.zbcBusiness-lead {
    display: flex;
    min-width: 0;
    flex-direction: column;

    border-right: 1px solid var(--zbcBusiness-border);
}

.zbcBusiness-leadMedia {
    position: relative;
    display: block;

    width: 100%;
    aspect-ratio: 16 / 8.8;

    overflow: hidden;

    background: var(--zbcBusiness-bg);
}

.zbcBusiness-leadMedia img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 240ms ease;
}

.zbcBusiness-leadMedia:hover img {
    transform: scale(1.018);
}

.zbcBusiness-leadBadge {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;

    padding: 0.34rem 0.55rem;

    border-radius: 3px;

    color: #ffffff;
    background: var(--zbcBusiness-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.zbcBusiness-leadBody {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;

    padding: clamp(1.15rem, 1.7vw, 1.65rem);
}

.zbcBusiness-leadTitle {
    margin: 0;

    color: var(--zbcBusiness-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(1.7rem, 2vw, 2.35rem);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.028em;
    text-wrap: balance;
}

.zbcBusiness-leadTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcBusiness-leadTitle a:hover {
    color: var(--zbcBusiness-red);
}

.zbcBusiness-leadSummary {
    margin: 0.7rem 0 0;

    color: var(--zbcBusiness-text);

    font-size: clamp(0.95rem, 0.28vw + 0.89rem, 1.04rem);
    line-height: 1.45;
}

.zbcBusiness-leadMeta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;

    margin-top: 0.65rem;

    color: var(--zbcBusiness-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.69rem;
}


/* =========================================================
   FOUR SUPPORTING STORIES
   Equal-height rows keep the top composition balanced.
   ========================================================= */

.zbcBusiness-support {
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));

    min-width: 0;
}

.zbcBusiness-supportItem {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 0.75rem;

    min-width: 0;
    align-items: center;

    padding: 0.72rem;

    border-bottom: 1px solid var(--zbcBusiness-border);
}

.zbcBusiness-supportItem:last-child {
    border-bottom: 0;
}

.zbcBusiness-supportThumb {
    display: block;
    width: 104px;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: 4px;
    background: var(--zbcBusiness-bg);
}

.zbcBusiness-supportThumb img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.zbcBusiness-supportCopy {
    min-width: 0;
}

.zbcBusiness-supportCategory {
    display: block;

    margin-bottom: 0.18rem;

    color: var(--zbcBusiness-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.zbcBusiness-supportTitle {
    margin: 0;

    color: var(--zbcBusiness-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(0.96rem, 0.25vw + 0.91rem, 1.05rem);
    font-weight: 700;
    line-height: 1.13;
    text-wrap: pretty;
}

.zbcBusiness-supportTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcBusiness-supportTitle a:hover {
    color: var(--zbcBusiness-red);
}

.zbcBusiness-supportMeta {
    margin-top: 0.25rem;

    color: var(--zbcBusiness-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.65rem;
}


/* =========================================================
   THREE COMPACT BUSINESS BRIEFS
   Horizontal so the left column does not grow too tall.
   ========================================================= */

.zbcBusiness-briefs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: 0.95rem;

    border-top: 2px solid var(--zbcBusiness-heading);
    border-left: 1px solid var(--zbcBusiness-border);
}

.zbcBusiness-brief {
    min-width: 0;

    padding: 0.95rem 1rem;

    border-right: 1px solid var(--zbcBusiness-border);
    border-bottom: 1px solid var(--zbcBusiness-border);

    background: var(--zbcBusiness-surface);
}

.zbcBusiness-briefCategory {
    display: block;

    margin-bottom: 0.25rem;

    color: var(--zbcBusiness-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.zbcBusiness-briefTitle {
    margin: 0;

    color: var(--zbcBusiness-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(0.98rem, 0.27vw + 0.93rem, 1.08rem);
    font-weight: 700;
    line-height: 1.14;
}

.zbcBusiness-briefTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcBusiness-briefTitle a:hover {
    color: var(--zbcBusiness-red);
}


/* =========================================================
   SPONSORED CONTENT RAIL
   Six equal rows deliberately fill the available height.
   ========================================================= */

.zbcBusiness-sponsored {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--zbcBusiness-border);
    border-radius: 5px;

    background: var(--zbcBusiness-surface);
    box-shadow: var(--zbcBusiness-shadow);
}

.zbcBusiness-sponsoredHead {
    padding: 1rem;

    border-bottom: 2px solid var(--zbcBusiness-red);
}

.zbcBusiness-sponsoredLabel {
    display: block;

    color: var(--zbcBusiness-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.zbcBusiness-sponsoredNote {
    display: block;

    margin-top: 0.2rem;

    color: var(--zbcBusiness-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.66rem;
}

.zbcBusiness-sponsoredList {
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));

    flex: 1;

    margin: 0;
    padding: 0;

    list-style: none;
    counter-reset: zbcBusinessSponsor;
}

.zbcBusiness-sponsoredItem {
    counter-increment: zbcBusinessSponsor;

    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0.68rem;

    align-items: center;

    padding: 0.85rem 0.95rem;

    border-bottom: 1px solid var(--zbcBusiness-border);
}

.zbcBusiness-sponsoredItem:last-child {
    border-bottom: 0;
}

.zbcBusiness-sponsoredItem::before {
    content: counter(zbcBusinessSponsor, decimal-leading-zero);

    color: var(--zbcBusiness-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.69rem;
    font-weight: 900;
}

.zbcBusiness-sponsoredTitle {
    margin: 0;

    color: var(--zbcBusiness-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(0.94rem, 0.22vw + 0.9rem, 1.02rem);
    font-weight: 700;
    line-height: 1.14;
}

.zbcBusiness-sponsoredTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcBusiness-sponsoredTitle a:hover {
    color: var(--zbcBusiness-red);
}

.zbcBusiness-sponsoredDisclosure {
    display: block;

    margin-top: 0.25rem;

    color: var(--zbcBusiness-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.61rem;
    font-weight: 650;
}

.zbcBusiness-sponsoredFooter {
    padding: 0.8rem 1rem;

    border-top: 1px solid var(--zbcBusiness-border);
}

.zbcBusiness-sponsoredMore {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    color: var(--zbcBusiness-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

    .zbcBusiness-layout {
        grid-template-columns:
            minmax(0, 2.55fr)
            minmax(265px, 1fr);
    }

    .zbcBusiness-top {
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(270px, 0.9fr);
    }

    .zbcBusiness-supportItem {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .zbcBusiness-supportThumb {
        width: 88px;
    }
}


/* =========================================================
   TABLET
   Editorial first, sponsored below.
   ========================================================= */

@media (max-width: 991.98px) {

    .zbcBusiness-layout {
        grid-template-columns: 1fr;
    }

    .zbcBusiness-sponsored {
        height: auto;
    }

    .zbcBusiness-sponsoredList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .zbcBusiness-sponsoredItem {
        min-height: 105px;
    }

    .zbcBusiness-sponsoredItem:nth-child(odd) {
        border-right: 1px solid var(--zbcBusiness-border);
    }

    .zbcBusiness-sponsoredItem:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}


/* =========================================================
   TABLET PORTRAIT / LARGE MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .zbcBusiness-shell {
        padding: 2.4rem 0;
    }

    .zbcBusiness-heading {
        align-items: center;
    }

    .zbcBusiness-heading h2 {
        font-size: clamp(1.82rem, 7vw, 2.08rem);
    }

    .zbcBusiness-top {
        display: block;
        min-height: 0;
    }

    .zbcBusiness-lead {
        border-right: 0;
        border-bottom: 1px solid var(--zbcBusiness-border);
    }

    .zbcBusiness-leadMedia {
        aspect-ratio: 16 / 9;
    }

    .zbcBusiness-leadTitle {
        font-size: clamp(1.68rem, 6.7vw, 2rem);
    }

    .zbcBusiness-leadSummary {
        font-size: clamp(1rem, 3.8vw, 1.07rem);
    }

    .zbcBusiness-support {
        display: block;
    }

    .zbcBusiness-supportItem {
        grid-template-columns: 116px minmax(0, 1fr);

        min-height: 0;

        padding: 0.9rem;
    }

    .zbcBusiness-supportThumb {
        width: 116px;
    }

    .zbcBusiness-supportTitle {
        font-size: clamp(1.02rem, 4.15vw, 1.11rem);
    }

    .zbcBusiness-briefs {
        grid-template-columns: 1fr;
    }

    .zbcBusiness-brief {
        padding: 0.9rem 1rem;
    }

    .zbcBusiness-briefTitle {
        font-size: 1.05rem;
    }

    .zbcBusiness-sponsoredList {
        grid-template-columns: 1fr;
    }

    .zbcBusiness-sponsoredItem {
        min-height: 0;

        padding: 0.9rem 1rem;

        border-right: 0 !important;
        border-bottom: 1px solid var(--zbcBusiness-border) !important;
    }

    .zbcBusiness-sponsoredItem:last-child {
        border-bottom: 0 !important;
    }

    .zbcBusiness-sponsoredTitle {
        font-size: 1.02rem;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479.98px) {

    .zbcBusiness-more span {
        display: none;
    }

    .zbcBusiness-supportItem {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 0.72rem;
    }

    .zbcBusiness-supportThumb {
        width: 104px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 374.98px) {

    .zbcBusiness-supportItem {
        grid-template-columns: 94px minmax(0, 1fr);
    }

    .zbcBusiness-supportThumb {
        width: 94px;
    }

    .zbcBusiness-supportTitle {
        font-size: 0.99rem;
    }
}


/* =========================================================
   DARK MODE
   ========================================================= */

[data-bs-theme="dark"] .zbcBusiness-shell {
    color: var(--zbcBusiness-text);
    background: var(--zbcBusiness-bg);
}

[data-bs-theme="dark"] .zbcBusiness-top,
[data-bs-theme="dark"] .zbcBusiness-brief,
[data-bs-theme="dark"] .zbcBusiness-sponsored {
    background: var(--zbcBusiness-surface);
    border-color: var(--zbcBusiness-border);
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

.zbcBusiness-shell a:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--zbcBusiness-red) 35%,
            transparent
        );

    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .zbcBusiness-leadMedia img {
        transition: none !important;
    }
}

/* Source: assets/css/components/zbc-tridesk.css */
/* =========================================================
   ZBC THREE EDITORIAL DESKS
   Arts & Entertainment | Health | Agriculture
   ---------------------------------------------------------
   Design principles:
   - 3 equal-height newsroom desks on desktop
   - each desk has its own visual rhythm
   - one feature + two supporting stories per desk
   - normal vertical reading order on mobile
   - all article images preserve crop/aspect ratio
   - top-centre focal area is prioritised

   Namespace: zbcTriDesk-*
   ========================================================= */

.zbcTriDesk-shell {
    --zbcTriDesk-red: var(--zbc-red, #d00000);
    --zbcTriDesk-bg: var(--zbc-page-bg, #ffffff);
    --zbcTriDesk-surface: var(--zbc-surface-raised, #ffffff);
    --zbcTriDesk-soft: var(--zbc-surface-soft, #f5f6f8);
    --zbcTriDesk-text: var(--zbc-text, #20242a);
    --zbcTriDesk-heading: var(--zbc-heading, #111111);
    --zbcTriDesk-muted: var(--zbc-text-muted, #6b7280);
    --zbcTriDesk-border: var(--zbc-border, #e2e4e7);
    --zbcTriDesk-shadow: var(--zbc-card-shadow, 0 10px 30px rgba(0,0,0,.05));

    padding: clamp(2.8rem, 4.5vw, 4.9rem) 0;

    color: var(--zbcTriDesk-text);
    background: var(--zbcTriDesk-bg);
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.zbcTriDesk-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 1.15rem;
}

.zbcTriDesk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    margin-bottom: 0.25rem;

    color: var(--zbcTriDesk-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.zbcTriDesk-eyebrow::before {
    content: "";
    width: 4px;
    height: 18px;
    background: var(--zbcTriDesk-red);
}

.zbcTriDesk-heading h2 {
    margin: 0;

    color: var(--zbcTriDesk-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(1.9rem, 2.2vw, 2.45rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
}


/* =========================================================
   THREE BALANCED DESKS
   ========================================================= */

.zbcTriDesk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;

    align-items: stretch;
}

.zbcTriDesk-desk {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--zbcTriDesk-border);
    border-radius: 5px;

    background: var(--zbcTriDesk-surface);
    box-shadow: var(--zbcTriDesk-shadow);
}


/* =========================================================
   DESK HEADER
   ========================================================= */

.zbcTriDesk-deskHead {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;

    padding: 0.9rem 1rem;

    border-bottom: 1px solid var(--zbcTriDesk-border);
}

.zbcTriDesk-deskTitle {
    margin: 0;

    color: var(--zbcTriDesk-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(1.3rem, 1.25vw, 1.55rem);
    font-weight: 700;
    line-height: 1.05;
}

.zbcTriDesk-more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;

    color: var(--zbcTriDesk-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.69rem;
    font-weight: 850;
    text-decoration: none;
}

.zbcTriDesk-more:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =========================================================
   ARTICLE IMAGE STANDARD
   ---------------------------------------------------------
   IMPORTANT:
   - aspect ratio is controlled by the container
   - image fills container without distortion
   - crop favours TOP-CENTRE / upper middle
   ========================================================= */

.zbcTriDesk-featureMedia,
.zbcTriDesk-supportThumb {
    display: block;
    overflow: hidden;

    background: var(--zbcTriDesk-soft);
}

.zbcTriDesk-featureMedia img,
.zbcTriDesk-supportThumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 18%;

    transition: transform 240ms ease;
}

.zbcTriDesk-featureMedia:hover img,
.zbcTriDesk-supportThumb:hover img {
    transform: scale(1.018);
}


/* =========================================================
   FEATURE STORY
   ========================================================= */

.zbcTriDesk-feature {
    min-width: 0;

    border-bottom: 1px solid var(--zbcTriDesk-border);
}

.zbcTriDesk-featureMedia {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.zbcTriDesk-featureBody {
    padding: 1rem 1rem 1.05rem;
}

.zbcTriDesk-kicker {
    display: block;

    margin-bottom: 0.3rem;

    color: var(--zbcTriDesk-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.zbcTriDesk-featureTitle {
    margin: 0;

    color: var(--zbcTriDesk-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(1.32rem, 1.45vw, 1.7rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.zbcTriDesk-featureTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcTriDesk-featureTitle a:hover {
    color: var(--zbcTriDesk-red);
}

.zbcTriDesk-summary {
    margin: 0.55rem 0 0;

    color: var(--zbcTriDesk-text);

    font-size: 0.92rem;
    line-height: 1.43;
}

.zbcTriDesk-meta {
    margin-top: 0.55rem;

    color: var(--zbcTriDesk-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.67rem;
}


/* =========================================================
   SUPPORTING STORIES
   Two rows + flex growth make all desks equal height.
   ========================================================= */

.zbcTriDesk-support {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));

    flex: 1;
}

.zbcTriDesk-supportItem {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0.8rem;

    min-width: 0;
    min-height: 118px;
    align-items: center;

    padding: 0.82rem 1rem;

    border-bottom: 1px solid var(--zbcTriDesk-border);
}

.zbcTriDesk-supportItem:last-child {
    border-bottom: 0;
}

.zbcTriDesk-supportThumb {
    width: 112px;
    aspect-ratio: 4 / 3;

    border-radius: 4px;
}

.zbcTriDesk-supportCopy {
    min-width: 0;
}

.zbcTriDesk-supportTitle {
    margin: 0;

    color: var(--zbcTriDesk-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(0.97rem, 0.3vw + 0.9rem, 1.06rem);
    font-weight: 700;
    line-height: 1.14;
    text-wrap: pretty;
}

.zbcTriDesk-supportTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcTriDesk-supportTitle a:hover {
    color: var(--zbcTriDesk-red);
}

.zbcTriDesk-supportMeta {
    margin-top: 0.3rem;

    color: var(--zbcTriDesk-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.64rem;
}


/* =========================================================
   DESK-SPECIFIC RHYTHM
   These modifiers avoid a cloned-card feeling while keeping
   identical outer dimensions and predictable balance.
   ========================================================= */

/* Arts: slightly more cinematic feature */
.zbcTriDesk-deskArts .zbcTriDesk-featureMedia {
    aspect-ratio: 16 / 9.35;
}

/* Health: softer feature surface */
.zbcTriDesk-deskHealth .zbcTriDesk-featureBody {
    background:
        color-mix(
            in srgb,
            var(--zbcTriDesk-soft) 58%,
            var(--zbcTriDesk-surface)
        );
}

/* Agriculture: stronger editorial rule */
.zbcTriDesk-deskAgriculture .zbcTriDesk-deskHead {
    border-top: 3px solid var(--zbcTriDesk-red);
    padding-top: calc(0.9rem - 3px);
}


/* =========================================================
   TABLET
   2 columns + Agriculture spanning full width.
   ========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

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

    .zbcTriDesk-deskAgriculture {
        grid-column: 1 / -1;
    }

    .zbcTriDesk-deskAgriculture {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        grid-template-areas:
            "head head"
            "feature support";
    }

    .zbcTriDesk-deskAgriculture .zbcTriDesk-deskHead {
        grid-area: head;
    }

    .zbcTriDesk-deskAgriculture .zbcTriDesk-feature {
        grid-area: feature;
        border-right: 1px solid var(--zbcTriDesk-border);
        border-bottom: 0;
    }

    .zbcTriDesk-deskAgriculture .zbcTriDesk-support {
        grid-area: support;
    }

    .zbcTriDesk-deskAgriculture .zbcTriDesk-featureMedia {
        aspect-ratio: 16 / 9;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .zbcTriDesk-shell {
        padding: 2.4rem 0;
    }

    .zbcTriDesk-heading h2 {
        font-size: clamp(1.8rem, 7vw, 2.05rem);
    }

    .zbcTriDesk-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .zbcTriDesk-desk {
        height: auto;
    }

    .zbcTriDesk-deskHead {
        min-height: 58px;
        padding: 0.82rem 0.95rem;
    }

    .zbcTriDesk-deskTitle {
        font-size: clamp(1.35rem, 5.4vw, 1.55rem);
    }

    .zbcTriDesk-featureMedia,
    .zbcTriDesk-deskArts .zbcTriDesk-featureMedia {
        aspect-ratio: 16 / 9;
    }

    .zbcTriDesk-featureBody {
        padding: 0.95rem;
    }

    .zbcTriDesk-featureTitle {
        font-size: clamp(1.45rem, 6vw, 1.78rem);
    }

    .zbcTriDesk-summary {
        font-size: clamp(0.98rem, 3.8vw, 1.05rem);
    }

    .zbcTriDesk-support {
        display: block;
    }

    .zbcTriDesk-supportItem {
        grid-template-columns: 116px minmax(0, 1fr);

        min-height: 0;

        padding: 0.9rem 0.95rem;
    }

    .zbcTriDesk-supportThumb {
        width: 116px;
    }

    .zbcTriDesk-supportTitle {
        font-size: clamp(1.03rem, 4.2vw, 1.12rem);
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479.98px) {

    .zbcTriDesk-supportItem {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 0.72rem;
    }

    .zbcTriDesk-supportThumb {
        width: 104px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 374.98px) {

    .zbcTriDesk-supportItem {
        grid-template-columns: 94px minmax(0, 1fr);
    }

    .zbcTriDesk-supportThumb {
        width: 94px;
    }

    .zbcTriDesk-supportTitle {
        font-size: 0.99rem;
    }
}


/* =========================================================
   DARK MODE
   ========================================================= */

[data-bs-theme="dark"] .zbcTriDesk-shell {
    color: var(--zbcTriDesk-text);
    background: var(--zbcTriDesk-bg);
}

[data-bs-theme="dark"] .zbcTriDesk-desk {
    background: var(--zbcTriDesk-surface);
    border-color: var(--zbcTriDesk-border);
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

.zbcTriDesk-shell a:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--zbcTriDesk-red) 35%,
            transparent
        );

    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .zbcTriDesk-featureMedia img,
    .zbcTriDesk-supportThumb img {
        transition: none !important;
    }
}

/* Source: assets/css/components/zbc-tech-education-environment.css */
/* =========================================================
   ZBC TECHNOLOGY / EDUCATION / ENVIRONMENT
   ---------------------------------------------------------
   Three deliberately different editorial desks with one
   balanced outer composition.

   Technology:
     image feature + 3 compact text stories

   Education:
     no images; typography-led desk

   Environment:
     image feature + 2 stories with right-side thumbnails

   Namespace:
     zbcTechEduEnv-*
   ========================================================= */

.zbcTechEduEnv-shell {
    --zbcTechEduEnv-red: var(--zbc-red, #d00000);
    --zbcTechEduEnv-bg: var(--zbc-page-bg, #ffffff);
    --zbcTechEduEnv-surface: var(--zbc-surface-raised, #ffffff);
    --zbcTechEduEnv-soft: var(--zbc-surface-soft, #f5f6f8);
    --zbcTechEduEnv-text: var(--zbc-text, #20242a);
    --zbcTechEduEnv-heading: var(--zbc-heading, #111111);
    --zbcTechEduEnv-muted: var(--zbc-text-muted, #6b7280);
    --zbcTechEduEnv-border: var(--zbc-border, #e2e4e7);
    --zbcTechEduEnv-shadow: var(--zbc-card-shadow, 0 10px 30px rgba(0,0,0,.05));

    padding: clamp(2.8rem, 4.5vw, 4.9rem) 0;

    color: var(--zbcTechEduEnv-text);
    background: var(--zbcTechEduEnv-bg);
}


/* =========================================================
   PACKAGE HEADING
   ========================================================= */

.zbcTechEduEnv-heading {
    margin-bottom: 1.15rem;
}

.zbcTechEduEnv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    margin-bottom: 0.25rem;

    color: var(--zbcTechEduEnv-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.zbcTechEduEnv-eyebrow::before {
    content: "";
    width: 4px;
    height: 18px;
    background: var(--zbcTechEduEnv-red);
}

.zbcTechEduEnv-heading h2 {
    margin: 0;

    color: var(--zbcTechEduEnv-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(1.9rem, 2.2vw, 2.45rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
}


/* =========================================================
   THREE-COLUMN MASTER GRID
   ========================================================= */

.zbcTechEduEnv-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;

    align-items: stretch;
}

.zbcTechEduEnv-desk {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--zbcTechEduEnv-border);
    border-radius: 5px;

    background: var(--zbcTechEduEnv-surface);
    box-shadow: var(--zbcTechEduEnv-shadow);
}


/* =========================================================
   DESK HEADERS
   ========================================================= */

.zbcTechEduEnv-deskHead {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;

    padding: 0.85rem 1rem;

    border-bottom: 1px solid var(--zbcTechEduEnv-border);
}

.zbcTechEduEnv-deskTitle {
    margin: 0;

    color: var(--zbcTechEduEnv-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(1.34rem, 1.3vw, 1.58rem);
    font-weight: 700;
    line-height: 1.04;
}

.zbcTechEduEnv-more {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex: 0 0 auto;

    color: var(--zbcTechEduEnv-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.68rem;
    font-weight: 850;
    text-decoration: none;
}

.zbcTechEduEnv-more:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =========================================================
   SHARED ARTICLE IMAGE RULE
   ---------------------------------------------------------
   Focal point deliberately biased toward upper middle.
   ========================================================= */

.zbcTechEduEnv-image,
.zbcTechEduEnv-envThumb {
    display: block;
    overflow: hidden;

    background: var(--zbcTechEduEnv-soft);
}

.zbcTechEduEnv-image img,
.zbcTechEduEnv-envThumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 18%;

    transition: transform 240ms ease;
}

.zbcTechEduEnv-image:hover img,
.zbcTechEduEnv-envThumb:hover img {
    transform: scale(1.018);
}


/* =========================================================
   SHARED TYPOGRAPHY
   ========================================================= */

.zbcTechEduEnv-kicker {
    display: block;

    margin-bottom: 0.25rem;

    color: var(--zbcTechEduEnv-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.63rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.zbcTechEduEnv-meta {
    color: var(--zbcTechEduEnv-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.65rem;
}


/* =========================================================
   TECHNOLOGY
   1 visual lead + 3 compact text stories
   ========================================================= */

.zbcTechEduEnv-techFeature {
    border-bottom: 1px solid var(--zbcTechEduEnv-border);
}

.zbcTechEduEnv-techFeature .zbcTechEduEnv-image {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.zbcTechEduEnv-techFeatureBody {
    padding: 1rem;
}

.zbcTechEduEnv-techLeadTitle {
    margin: 0;

    color: var(--zbcTechEduEnv-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(1.35rem, 1.45vw, 1.72rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.zbcTechEduEnv-techLeadTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcTechEduEnv-techLeadTitle a:hover {
    color: var(--zbcTechEduEnv-red);
}

.zbcTechEduEnv-techSummary {
    margin: 0.5rem 0 0;

    color: var(--zbcTechEduEnv-text);

    font-size: 0.91rem;
    line-height: 1.42;
}

.zbcTechEduEnv-techMeta {
    margin-top: 0.5rem;
}

.zbcTechEduEnv-techList {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));

    flex: 1;
}

.zbcTechEduEnv-techItem {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;

    padding: 0.84rem 1rem;

    border-bottom: 1px solid var(--zbcTechEduEnv-border);
}

.zbcTechEduEnv-techItem:last-child {
    border-bottom: 0;
}

.zbcTechEduEnv-techTitle {
    margin: 0;

    color: var(--zbcTechEduEnv-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(1rem, 0.3vw + 0.93rem, 1.09rem);
    font-weight: 700;
    line-height: 1.14;
}

.zbcTechEduEnv-techTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcTechEduEnv-techTitle a:hover {
    color: var(--zbcTechEduEnv-red);
}

.zbcTechEduEnv-techItem .zbcTechEduEnv-meta {
    margin-top: 0.28rem;
}


/* =========================================================
   EDUCATION
   NO IMAGES
   Strong text-only editorial desk.
   ========================================================= */

.zbcTechEduEnv-education {
    border-top: 3px solid var(--zbcTechEduEnv-red);
}

.zbcTechEduEnv-education .zbcTechEduEnv-deskHead {
    min-height: 59px;
}

.zbcTechEduEnv-eduLead {
    padding: 1.12rem 1rem 1.08rem;

    border-bottom: 1px solid var(--zbcTechEduEnv-border);

    background:
        color-mix(
            in srgb,
            var(--zbcTechEduEnv-soft) 62%,
            var(--zbcTechEduEnv-surface)
        );
}

.zbcTechEduEnv-eduLeadNumber {
    display: block;

    margin-bottom: 0.35rem;

    color: var(--zbcTechEduEnv-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.7rem;
    font-weight: 900;
}

.zbcTechEduEnv-eduLeadTitle {
    margin: 0;

    color: var(--zbcTechEduEnv-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(1.42rem, 1.55vw, 1.8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.zbcTechEduEnv-eduLeadTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcTechEduEnv-eduLeadTitle a:hover {
    color: var(--zbcTechEduEnv-red);
}

.zbcTechEduEnv-eduLeadSummary {
    margin: 0.5rem 0 0;

    color: var(--zbcTechEduEnv-text);

    font-size: 0.9rem;
    line-height: 1.42;
}

.zbcTechEduEnv-eduLead .zbcTechEduEnv-meta {
    display: block;
    margin-top: 0.5rem;
}

.zbcTechEduEnv-eduList {
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));

    flex: 1;

    margin: 0;
    padding: 0;

    list-style: none;
    counter-reset: zbcEduStory 1;
}

.zbcTechEduEnv-eduItem {
    counter-increment: zbcEduStory;

    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0.65rem;

    min-width: 0;
    align-items: center;

    padding: 0.78rem 1rem;

    border-bottom: 1px solid var(--zbcTechEduEnv-border);
}

.zbcTechEduEnv-eduItem:last-child {
    border-bottom: 0;
}

.zbcTechEduEnv-eduItem::before {
    content: "0" counter(zbcEduStory);

    align-self: start;

    padding-top: 0.1rem;

    color: var(--zbcTechEduEnv-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.67rem;
    font-weight: 900;
}

.zbcTechEduEnv-eduTitle {
    margin: 0;

    color: var(--zbcTechEduEnv-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(1rem, 0.28vw + 0.94rem, 1.09rem);
    font-weight: 700;
    line-height: 1.14;
}

.zbcTechEduEnv-eduTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcTechEduEnv-eduTitle a:hover {
    color: var(--zbcTechEduEnv-red);
}

.zbcTechEduEnv-eduItem .zbcTechEduEnv-meta {
    display: block;
    margin-top: 0.28rem;
}


/* =========================================================
   ENVIRONMENT
   1 feature + only 2 support stories because imagery uses
   more vertical space.
   Supporting thumbnails are deliberately on the RIGHT.
   ========================================================= */

.zbcTechEduEnv-envFeature {
    border-bottom: 1px solid var(--zbcTechEduEnv-border);
}

.zbcTechEduEnv-envFeature .zbcTechEduEnv-image {
    width: 100%;
    aspect-ratio: 16 / 10;
}

.zbcTechEduEnv-envFeatureBody {
    padding: 1rem;
}

.zbcTechEduEnv-envLeadTitle {
    margin: 0;

    color: var(--zbcTechEduEnv-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(1.35rem, 1.45vw, 1.72rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.zbcTechEduEnv-envLeadTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcTechEduEnv-envLeadTitle a:hover {
    color: var(--zbcTechEduEnv-red);
}

.zbcTechEduEnv-envSummary {
    margin: 0.5rem 0 0;

    color: var(--zbcTechEduEnv-text);

    font-size: 0.91rem;
    line-height: 1.42;
}

.zbcTechEduEnv-envFeature .zbcTechEduEnv-meta {
    display: block;
    margin-top: 0.5rem;
}

.zbcTechEduEnv-envList {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));

    flex: 1;
}

.zbcTechEduEnv-envItem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 0.78rem;

    min-width: 0;
    align-items: center;

    padding: 0.85rem 1rem;

    border-bottom: 1px solid var(--zbcTechEduEnv-border);
}

.zbcTechEduEnv-envItem:last-child {
    border-bottom: 0;
}

.zbcTechEduEnv-envCopy {
    min-width: 0;
}

.zbcTechEduEnv-envTitle {
    margin: 0;

    color: var(--zbcTechEduEnv-heading);

    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: clamp(1rem, 0.28vw + 0.94rem, 1.09rem);
    font-weight: 700;
    line-height: 1.14;
}

.zbcTechEduEnv-envTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcTechEduEnv-envTitle a:hover {
    color: var(--zbcTechEduEnv-red);
}

.zbcTechEduEnv-envItem .zbcTechEduEnv-meta {
    display: block;
    margin-top: 0.28rem;
}

.zbcTechEduEnv-envThumb {
    width: 96px;
    aspect-ratio: 4 / 3;

    border-radius: 4px;
}


/* =========================================================
   TABLET
   Technology + Education on top.
   Environment full width below with horizontal internal
   composition to avoid an oversized vertical card.
   ========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

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

    .zbcTechEduEnv-environment {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        grid-template-areas:
            "head head"
            "feature list";
    }

    .zbcTechEduEnv-environment .zbcTechEduEnv-deskHead {
        grid-area: head;
    }

    .zbcTechEduEnv-environment .zbcTechEduEnv-envFeature {
        grid-area: feature;

        border-right: 1px solid var(--zbcTechEduEnv-border);
        border-bottom: 0;
    }

    .zbcTechEduEnv-environment .zbcTechEduEnv-envList {
        grid-area: list;
    }

    .zbcTechEduEnv-environment .zbcTechEduEnv-image {
        aspect-ratio: 16 / 9;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .zbcTechEduEnv-shell {
        padding: 2.4rem 0;
    }

    .zbcTechEduEnv-heading h2 {
        font-size: clamp(1.8rem, 7vw, 2.05rem);
    }

    .zbcTechEduEnv-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .zbcTechEduEnv-desk {
        height: auto;
    }

    .zbcTechEduEnv-deskHead {
        min-height: 58px;
        padding: 0.82rem 0.95rem;
    }

    .zbcTechEduEnv-deskTitle {
        font-size: clamp(1.36rem, 5.3vw, 1.56rem);
    }

    .zbcTechEduEnv-techFeature .zbcTechEduEnv-image,
    .zbcTechEduEnv-envFeature .zbcTechEduEnv-image {
        aspect-ratio: 16 / 9;
    }

    .zbcTechEduEnv-techLeadTitle,
    .zbcTechEduEnv-envLeadTitle {
        font-size: clamp(1.45rem, 6vw, 1.78rem);
    }

    .zbcTechEduEnv-techSummary,
    .zbcTechEduEnv-envSummary,
    .zbcTechEduEnv-eduLeadSummary {
        font-size: clamp(0.98rem, 3.8vw, 1.05rem);
    }

    .zbcTechEduEnv-techList,
    .zbcTechEduEnv-eduList,
    .zbcTechEduEnv-envList {
        display: block;
    }

    .zbcTechEduEnv-techItem,
    .zbcTechEduEnv-eduItem,
    .zbcTechEduEnv-envItem {
        min-height: 0;
    }

    .zbcTechEduEnv-techItem {
        padding: 0.9rem 0.95rem;
    }

    .zbcTechEduEnv-eduLead {
        padding: 1rem 0.95rem;
    }

    .zbcTechEduEnv-eduLeadTitle {
        font-size: clamp(1.48rem, 6vw, 1.8rem);
    }

    .zbcTechEduEnv-eduItem {
        padding: 0.9rem 0.95rem;
    }

    .zbcTechEduEnv-envItem {
        grid-template-columns: minmax(0, 1fr) 112px;

        padding: 0.9rem 0.95rem;
    }

    .zbcTechEduEnv-envThumb {
        width: 112px;
    }

    .zbcTechEduEnv-techTitle,
    .zbcTechEduEnv-eduTitle,
    .zbcTechEduEnv-envTitle {
        font-size: clamp(1.03rem, 4.2vw, 1.12rem);
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479.98px) {

    .zbcTechEduEnv-envItem {
        grid-template-columns: minmax(0, 1fr) 100px;
        gap: 0.7rem;
    }

    .zbcTechEduEnv-envThumb {
        width: 100px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 374.98px) {

    .zbcTechEduEnv-envItem {
        grid-template-columns: minmax(0, 1fr) 90px;
    }

    .zbcTechEduEnv-envThumb {
        width: 90px;
    }

    .zbcTechEduEnv-envTitle,
    .zbcTechEduEnv-techTitle,
    .zbcTechEduEnv-eduTitle {
        font-size: 0.99rem;
    }
}


/* =========================================================
   DARK MODE
   ========================================================= */

[data-bs-theme="dark"] .zbcTechEduEnv-shell {
    color: var(--zbcTechEduEnv-text);
    background: var(--zbcTechEduEnv-bg);
}

[data-bs-theme="dark"] .zbcTechEduEnv-desk {
    background: var(--zbcTechEduEnv-surface);
    border-color: var(--zbcTechEduEnv-border);
}


/* =========================================================
   ACCESSIBILITY / MOTION
   ========================================================= */

.zbcTechEduEnv-shell a:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--zbcTechEduEnv-red) 35%,
            transparent
        );

    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .zbcTechEduEnv-image img,
    .zbcTechEduEnv-envThumb img {
        transition: none !important;
    }
}

/* Source: assets/css/components/zbc-opinion.css */
/* =========================================================
   ZBC OPINION & ANALYSIS V8
   Content-first reference layout:
   copy | image | opinion rail
   ========================================================= */

.zbcOpinion-shell {
    --zbcOpinion-red: var(--zbc-red, #d10000);
    --zbcOpinion-bg: var(--zbc-page-bg, #ffffff);
    --zbcOpinion-text: var(--zbc-text, #202124);
    --zbcOpinion-heading: var(--zbc-heading, #111111);
    --zbcOpinion-muted: var(--zbc-text-muted, #6c727a);
    --zbcOpinion-border: var(--zbc-border, #dedede);
    --zbcOpinion-soft: var(--zbc-surface-soft, #f4f4f4);

    padding: clamp(2.4rem, 3.6vw, 3.8rem) 0;

    color: var(--zbcOpinion-text);
    background: var(--zbcOpinion-bg);
}


/* =========================================================
   TOP LINE
   ========================================================= */

.zbcOpinion-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;

    margin-bottom: 0.95rem;
    padding-bottom: 0.65rem;

    border-bottom: 1px solid var(--zbcOpinion-border);
}

.zbcOpinion-heading h2 {
    flex: 0 0 auto;

    margin: 0;

    color: var(--zbcOpinion-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: clamp(1.7rem, 1.8vw, 2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.018em;
}

.zbcOpinion-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
}

.zbcOpinion-links a {
    color: var(--zbcOpinion-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.72rem;
    font-weight: 750;
    text-decoration: none;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.zbcOpinion-mainGrid {
    display: grid;
    grid-template-columns:
        minmax(220px, 0.82fr)
        minmax(360px, 1.18fr)
        minmax(330px, 1fr);

    gap: 1rem;

    align-items: stretch;
}


/* =========================================================
   LEAD COPY
   ========================================================= */

.zbcOpinion-lead {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;

    padding-right: 0.25rem;
}

.zbcOpinion-kicker {
    display: block;

    margin-bottom: 0.4rem;

    color: var(--zbcOpinion-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.63rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.zbcOpinion-leadTitle {
    margin: 0;

    color: var(--zbcOpinion-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: clamp(1.55rem, 1.7vw, 1.95rem);
    font-weight: 700;
    line-height: 1.045;
    letter-spacing: -0.023em;
    text-wrap: balance;
}

.zbcOpinion-leadTitle a {
    color: inherit;
    text-decoration: none;
}

.zbcOpinion-leadDeck {
    margin: 0.7rem 0 0;

    color: var(--zbcOpinion-text);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: 0.92rem;
    line-height: 1.4;
}

.zbcOpinion-leadMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.55rem;

    margin-top: 0.7rem;

    color: var(--zbcOpinion-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.64rem;
}

.zbcOpinion-leadMeta strong {
    color: var(--zbcOpinion-text);
}

.zbcOpinion-listen {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    width: max-content;
    margin-top: 0.65rem;

    color: var(--zbcOpinion-heading);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.68rem;
    font-weight: 750;
    text-decoration: none;
}


/* =========================================================
   LEAD MEDIA
   ========================================================= */

.zbcOpinion-leadMedia {
    display: block;

    min-width: 0;
    height: 100%;
    min-height: 355px;

    overflow: hidden;

    background: var(--zbcOpinion-soft);
}

.zbcOpinion-leadMedia img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 18%;
}


/* =========================================================
   OPINION RAIL
   ========================================================= */

.zbcOpinion-rail {
    min-width: 0;

    padding-left: 0.85rem;

    border-left: 1px solid var(--zbcOpinion-border);
}

.zbcOpinion-railHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;

    min-height: 38px;
    padding-bottom: 0.45rem;

    border-bottom: 1px solid var(--zbcOpinion-border);
}

.zbcOpinion-railHead h3 {
    margin: 0;

    color: var(--zbcOpinion-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1;
}

.zbcOpinion-railHead a {
    color: var(--zbcOpinion-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.63rem;
    font-weight: 800;
    text-decoration: none;
}

.zbcOpinion-railItem {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 0.7rem;

    min-width: 0;
    align-items: center;

    padding: 0.58rem 0;

    border-bottom: 1px solid var(--zbcOpinion-border);
}

.zbcOpinion-railItem:last-child {
    border-bottom: 0;
}

.zbcOpinion-mugshot {
    position: relative;

    width: 74px;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: var(--zbcOpinion-soft);
}

.zbcOpinion-mugshot > span {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color: var(--zbcOpinion-red);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: 0.95rem;
    font-weight: 700;
}

.zbcOpinion-mugshot img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 18%;
}

.zbcOpinion-railCopy {
    min-width: 0;
}

.zbcOpinion-railCopy h4 {
    margin: 0;

    color: var(--zbcOpinion-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: clamp(0.92rem, 0.22vw + 0.87rem, 1rem);
    font-weight: 700;
    line-height: 1.11;
}

.zbcOpinion-railCopy h4 a {
    color: inherit;
    text-decoration: none;
}

.zbcOpinion-railCopy p {
    display: flex;
    flex-wrap: wrap;
    gap: 0.12rem 0.4rem;

    margin: 0.28rem 0 0;

    color: var(--zbcOpinion-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.58rem;
    line-height: 1.25;
}

.zbcOpinion-railCopy p strong {
    width: 100%;

    color: var(--zbcOpinion-text);

    font-size: 0.61rem;
    font-weight: 750;
}


/* =========================================================
   MORE ANALYSIS
   ========================================================= */

.zbcOpinion-moreAnalysis {
    display: grid;
    grid-template-columns:
        minmax(120px, 0.5fr)
        repeat(3, minmax(0, 1fr));

    margin-top: 0.9rem;

    border-top: 2px solid var(--zbcOpinion-heading);
    border-bottom: 1px solid var(--zbcOpinion-border);
}

.zbcOpinion-moreLabel {
    display: flex;
    align-items: center;

    padding: 0.72rem 0.8rem 0.72rem 0;

    color: var(--zbcOpinion-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: 0.95rem;
    font-weight: 700;
}

.zbcOpinion-moreAnalysis article {
    min-width: 0;

    padding: 0.7rem 0.8rem;

    border-left: 1px solid var(--zbcOpinion-border);
}

.zbcOpinion-moreAnalysis article > span {
    display: block;

    margin-bottom: 0.18rem;

    color: var(--zbcOpinion-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.55rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.zbcOpinion-moreAnalysis h3 {
    margin: 0;

    color: var(--zbcOpinion-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.12;
}

.zbcOpinion-moreAnalysis h3 a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   INTERACTION
   ========================================================= */

.zbcOpinion-shell a:hover {
    color: var(--zbcOpinion-red);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199.98px) {

    .zbcOpinion-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .zbcOpinion-links {
        justify-content: flex-start;
    }

    .zbcOpinion-mainGrid {
        grid-template-columns:
            minmax(0, 0.82fr)
            minmax(0, 1.18fr);
    }

    .zbcOpinion-rail {
        grid-column: 1 / -1;

        padding: 0.4rem 0 0;

        border-left: 0;
        border-top: 1px solid var(--zbcOpinion-border);
    }

    .zbcOpinion-railList {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.1rem;
    }

    .zbcOpinion-railItem:nth-child(odd) {
        padding-right: 0.9rem;
        border-right: 1px solid var(--zbcOpinion-border);
    }

    .zbcOpinion-moreAnalysis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .zbcOpinion-moreLabel {
        grid-column: 1 / -1;
        padding-bottom: 0.45rem;
    }

    .zbcOpinion-moreAnalysis article:first-of-type {
        border-left: 0;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .zbcOpinion-shell {
        padding: 2.2rem 0;
    }

    .zbcOpinion-heading {
        align-items: flex-start;
        flex-direction: column;

        margin-bottom: 0.8rem;
    }

    .zbcOpinion-heading h2 {
        font-size: clamp(1.65rem, 6.8vw, 1.9rem);
    }

    .zbcOpinion-links {
        justify-content: flex-start;
        gap: 0.3rem 0.75rem;
    }

    .zbcOpinion-mainGrid {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .zbcOpinion-lead {
        padding-right: 0;
    }

    .zbcOpinion-leadTitle {
        font-size: clamp(1.45rem, 6vw, 1.72rem);
    }

    .zbcOpinion-leadDeck {
        font-size: 0.95rem;
    }

    .zbcOpinion-leadMedia {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .zbcOpinion-rail {
        padding: 0.3rem 0 0;

        border-left: 0;
    }

    .zbcOpinion-railItem {
        grid-template-columns: 92px minmax(0, 1fr);

        padding: 0.7rem 0;
    }

    .zbcOpinion-mugshot {
        width: 92px;
    }

    .zbcOpinion-railCopy h4 {
        font-size: clamp(0.98rem, 4vw, 1.08rem);
    }

    .zbcOpinion-moreAnalysis {
        grid-template-columns: 1fr;

        margin-top: 0.75rem;
    }

    .zbcOpinion-moreLabel {
        padding: 0.65rem 0;
    }

    .zbcOpinion-moreAnalysis article {
        padding: 0.7rem 0;

        border-left: 0;
        border-top: 1px solid var(--zbcOpinion-border);
    }

    .zbcOpinion-moreAnalysis h3 {
        font-size: 1rem;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479.98px) {

    .zbcOpinion-railItem {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    .zbcOpinion-mugshot {
        width: 80px;
    }
}


/* =========================================================
   DARK MODE
   ========================================================= */

[data-bs-theme="dark"] .zbcOpinion-shell {
    color: var(--zbcOpinion-text);
    background: var(--zbcOpinion-bg);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.zbcOpinion-shell a:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--zbcOpinion-red) 35%,
            transparent
        );

    outline-offset: 3px;
}

/* Source: assets/css/components/zbc-obituaries.css */
/* =========================================================
   ZBC OBITUARIES
   Reference-inspired horizontal editorial row.
   Content-first. Minimal decoration.
   Namespace: zbcObit-*
   ========================================================= */

.zbcObit-shell {
    --zbcObit-red: var(--zbc-red, #d10000);
    --zbcObit-bg: var(--zbc-page-bg, #ffffff);
    --zbcObit-text: var(--zbc-text, #202124);
    --zbcObit-heading: var(--zbc-heading, #111111);
    --zbcObit-muted: var(--zbc-text-muted, #6b7280);
    --zbcObit-border: var(--zbc-border, #dedede);
    --zbcObit-soft: var(--zbc-surface-soft, #f4f4f4);

    padding: clamp(2.4rem, 3.6vw, 3.8rem) 0;

    color: var(--zbcObit-text);
    background: var(--zbcObit-bg);
}

.zbcObit-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 0.9rem;
}

.zbcObit-eyebrow {
    display: block;

    margin-bottom: 0.2rem;

    color: var(--zbcObit-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.zbcObit-heading h2 {
    margin: 0;

    color: var(--zbcObit-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: clamp(1.8rem, 2vw, 2.15rem);
    font-weight: 700;
    line-height: 1;
}

.zbcObit-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    color: var(--zbcObit-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
}


/* Five-column reference-style row */

.zbcObit-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    border-top: 1px solid var(--zbcObit-border);
    border-bottom: 1px solid var(--zbcObit-border);
}

.zbcObit-card {
    min-width: 0;

    padding: 0.9rem 1rem 1rem;

    border-right: 1px solid var(--zbcObit-border);
}

.zbcObit-card:first-child {
    padding-left: 0;
}

.zbcObit-card:last-child {
    padding-right: 0;
    border-right: 0;
}

.zbcObit-media {
    position: relative;

    display: block;

    width: 100%;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: var(--zbcObit-soft);
}

.zbcObit-fallback {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    color: var(--zbcObit-muted);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: 1.35rem;
    font-weight: 700;
}

.zbcObit-media img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 15%;
}

.zbcObit-copy {
    padding-top: 0.7rem;
}

.zbcObit-category {
    display: block;

    margin-bottom: 0.25rem;

    color: var(--zbcObit-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.56rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.zbcObit-card h3 {
    margin: 0;

    color: var(--zbcObit-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: clamp(0.98rem, 0.32vw + 0.9rem, 1.08rem);
    font-weight: 700;
    line-height: 1.12;
}

.zbcObit-card h3 a {
    color: inherit;
    text-decoration: none;
}

.zbcObit-dod {
    margin: 0.45rem 0 0;

    color: var(--zbcObit-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}


/* Tablet */

@media (min-width: 768px) and (max-width: 1199.98px) {

    .zbcObit-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .zbcObit-card {
        border-bottom: 1px solid var(--zbcObit-border);
    }

    .zbcObit-card:nth-child(3) {
        border-right: 0;
    }

    .zbcObit-card:nth-child(4),
    .zbcObit-card:nth-child(5) {
        border-bottom: 0;
    }

    .zbcObit-card:nth-child(4) {
        padding-left: 0;
    }
}


/* Mobile */

@media (max-width: 767.98px) {

    .zbcObit-shell {
        padding: 2.15rem 0;
    }

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

    .zbcObit-card,
    .zbcObit-card:first-child,
    .zbcObit-card:last-child {
        padding: 0.8rem;

        border-right: 1px solid var(--zbcObit-border);
        border-bottom: 1px solid var(--zbcObit-border);
    }

    .zbcObit-card:nth-child(odd) {
        padding-left: 0;
    }

    .zbcObit-card:nth-child(even) {
        padding-right: 0;
        border-right: 0;
    }

    .zbcObit-card:last-child {
        border-bottom: 0;
    }

    .zbcObit-card h3 {
        font-size: clamp(1rem, 4vw, 1.08rem);
    }
}

@media (max-width: 479.98px) {

    .zbcObit-grid {
        grid-template-columns: 1fr;
    }

    .zbcObit-card,
    .zbcObit-card:first-child,
    .zbcObit-card:last-child,
    .zbcObit-card:nth-child(odd),
    .zbcObit-card:nth-child(even) {
        padding: 0.85rem 0;

        border-right: 0;
        border-bottom: 1px solid var(--zbcObit-border);
    }

    .zbcObit-card:last-child {
        border-bottom: 0;
    }

    .zbcObit-card {
        display: grid;
        grid-template-columns: 132px minmax(0, 1fr);
        gap: 0.8rem;
        align-items: start;
    }

    .zbcObit-media {
        width: 132px;
    }

    .zbcObit-copy {
        padding-top: 0;
    }
}


/* Dark mode */

[data-bs-theme="dark"] .zbcObit-shell {
    color: var(--zbcObit-text);
    background: var(--zbcObit-bg);
}


/* Interaction */

.zbcObit-shell a:hover {
    color: var(--zbcObit-red);
}

.zbcObit-shell a:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--zbcObit-red) 35%,
            transparent
        );

    outline-offset: 3px;
}

/* Source: assets/css/components/zbc-africa-world-history.css */
/* =========================================================
   ZBC AFRICA / WORLD / HISTORY
   Three balanced editorial desks.
   Namespace: zbcAwh-*
   ========================================================= */

.zbcAwh-shell {
    --zbcAwh-red: var(--zbc-red, #d10000);
    --zbcAwh-bg: var(--zbc-page-bg, #ffffff);
    --zbcAwh-text: var(--zbc-text, #202124);
    --zbcAwh-heading: var(--zbc-heading, #111111);
    --zbcAwh-muted: var(--zbc-text-muted, #6b7280);
    --zbcAwh-border: var(--zbc-border, #dedede);
    --zbcAwh-soft: var(--zbc-surface-soft, #f4f4f4);

    padding: 0 0 clamp(2.7rem, 4vw, 4.2rem);

    color: var(--zbcAwh-text);
    background: var(--zbcAwh-bg);
}

.zbcAwh-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid var(--zbcAwh-border);
    border-bottom: 1px solid var(--zbcAwh-border);
}

.zbcAwh-desk {
    min-width: 0;

    padding: 1rem 1.15rem 1.05rem;

    border-right: 1px solid var(--zbcAwh-border);
}

.zbcAwh-desk:first-child {
    padding-left: 0;
}

.zbcAwh-desk:last-child {
    padding-right: 0;
    border-right: 0;
}

.zbcAwh-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;

    margin-bottom: 0.75rem;
}

.zbcAwh-head h2 {
    position: relative;

    margin: 0;

    padding-left: 0.7rem;

    color: var(--zbcAwh-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: clamp(1.3rem, 1.4vw, 1.55rem);
    font-weight: 700;
    line-height: 1;
}

.zbcAwh-head h2::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 4px;
    height: 20px;

    background: var(--zbcAwh-red);
}

.zbcAwh-head a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;

    color: var(--zbcAwh-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.64rem;
    font-weight: 800;
    text-decoration: none;
}

.zbcAwh-media {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: var(--zbcAwh-soft);
}

.zbcAwh-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 15%;
}

.zbcAwh-kicker {
    display: block;

    margin: 0.65rem 0 0.22rem;

    color: var(--zbcAwh-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.57rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.zbcAwh-feature h3,
.zbcAwh-list h3 {
    margin: 0;

    color: var(--zbcAwh-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-weight: 700;
}

.zbcAwh-feature h3 {
    font-size: clamp(1.2rem, 0.55vw + 1.05rem, 1.42rem);
    line-height: 1.08;
}

.zbcAwh-feature h3 a,
.zbcAwh-list h3 a {
    color: inherit;
    text-decoration: none;
}

.zbcAwh-feature p {
    margin: 0.42rem 0 0;

    color: var(--zbcAwh-text);

    font-size: 0.86rem;
    line-height: 1.38;
}

.zbcAwh-meta,
.zbcAwh-list article > span {
    display: block;

    margin-top: 0.4rem;

    color: var(--zbcAwh-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.61rem;
}

.zbcAwh-list {
    margin-top: 0.8rem;

    border-top: 1px solid var(--zbcAwh-border);
}

.zbcAwh-list article {
    padding: 0.7rem 0;

    border-bottom: 1px solid var(--zbcAwh-border);
}

.zbcAwh-list article:last-child {
    border-bottom: 0;
}

.zbcAwh-list h3 {
    font-size: clamp(0.94rem, 0.22vw + 0.89rem, 1.02rem);
    line-height: 1.12;
}


/* History gets only a subtle archival cue */

.zbcAwh-history .zbcAwh-media img {
    filter: saturate(0.82);
}


/* Tablet */

@media (min-width: 768px) and (max-width: 991.98px) {

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

    .zbcAwh-history {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        grid-template-areas:
            "head head"
            "feature list";

        border-top: 1px solid var(--zbcAwh-border);
    }

    .zbcAwh-history .zbcAwh-head {
        grid-area: head;
    }

    .zbcAwh-history .zbcAwh-feature {
        grid-area: feature;
        padding-right: 1rem;
    }

    .zbcAwh-history .zbcAwh-list {
        grid-area: list;

        margin-top: 0;

        border-top: 0;
        border-left: 1px solid var(--zbcAwh-border);
        padding-left: 1rem;
    }
}


/* Mobile */

@media (max-width: 767.98px) {

    .zbcAwh-grid {
        grid-template-columns: 1fr;
    }

    .zbcAwh-desk,
    .zbcAwh-desk:first-child,
    .zbcAwh-desk:last-child {
        padding: 1rem 0;

        border-right: 0;
        border-bottom: 1px solid var(--zbcAwh-border);
    }

    .zbcAwh-desk:last-child {
        border-bottom: 0;
    }

    .zbcAwh-feature h3 {
        font-size: clamp(1.25rem, 5vw, 1.45rem);
    }

    .zbcAwh-feature p {
        font-size: 0.95rem;
    }

    .zbcAwh-list h3 {
        font-size: clamp(1rem, 4vw, 1.08rem);
    }
}


/* Dark mode */

[data-bs-theme="dark"] .zbcAwh-shell {
    color: var(--zbcAwh-text);
    background: var(--zbcAwh-bg);
}


/* Interaction */

.zbcAwh-shell a:hover {
    color: var(--zbcAwh-red);
}

.zbcAwh-shell a:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--zbcAwh-red) 35%,
            transparent
        );

    outline-offset: 3px;
}

/* Source: assets/css/components/zbc-must-watch.css */
/* =========================================================
   ZBC MUST WATCH / ZBC LENSES
   One-line desktop editorial video row.
   Namespace: zbcMustWatch-*
   ========================================================= */

.zbcMustWatch-shell {
    --zbcMustWatch-red: var(--zbc-red, #d10000);
    --zbcMustWatch-bg: var(--zbc-page-bg, #ffffff);
    --zbcMustWatch-text: var(--zbc-text, #202124);
    --zbcMustWatch-heading: var(--zbc-heading, #111111);
    --zbcMustWatch-muted: var(--zbc-text-muted, #6b7280);
    --zbcMustWatch-border: var(--zbc-border, #dedede);
    --zbcMustWatch-soft: var(--zbc-surface-soft, #f4f4f4);

    padding: clamp(2.4rem, 3.8vw, 4rem) 0;

    color: var(--zbcMustWatch-text);
    background: var(--zbcMustWatch-bg);
}

.zbcMustWatch-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 0.9rem;
}

.zbcMustWatch-titleGroup {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.zbcMustWatch-playMark {
    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    border-radius: 50%;

    color: #ffffff;
    background: var(--zbcMustWatch-red);

    font-size: 1.4rem;
}

.zbcMustWatch-eyebrow {
    display: block;

    margin-bottom: 0.12rem;

    color: var(--zbcMustWatch-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.59rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.zbcMustWatch-heading h2 {
    margin: 0;

    color: var(--zbcMustWatch-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: clamp(1.8rem, 2vw, 2.15rem);
    font-weight: 700;
    line-height: 1;
}

.zbcMustWatch-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    color: var(--zbcMustWatch-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
}


/* One desktop line */

.zbcMustWatch-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        repeat(4, minmax(0, 1fr));

    border-top: 1px solid var(--zbcMustWatch-border);
    border-bottom: 1px solid var(--zbcMustWatch-border);
}

.zbcMustWatch-card {
    min-width: 0;

    padding: 0.9rem 0.9rem 0.95rem;

    border-right: 1px solid var(--zbcMustWatch-border);
}

.zbcMustWatch-card:first-child {
    padding-left: 0;
}

.zbcMustWatch-card:last-child {
    padding-right: 0;
    border-right: 0;
}

.zbcMustWatch-media {
    position: relative;

    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: var(--zbcMustWatch-soft);
}

.zbcMustWatch-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 18%;
}

.zbcMustWatch-play {
    position: absolute;
    left: 0.7rem;
    bottom: 0.7rem;

    display: grid;

    width: 34px;
    height: 34px;

    place-items: center;

    border-radius: 50%;

    color: var(--zbcMustWatch-heading);
    background: rgba(255,255,255,.94);

    font-size: 1.15rem;
}

.zbcMustWatch-cardLead .zbcMustWatch-play {
    width: 42px;
    height: 42px;

    font-size: 1.35rem;
}

.zbcMustWatch-duration {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;

    padding: 0.18rem 0.28rem;

    color: #ffffff;
    background: rgba(0,0,0,.78);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.56rem;
    font-weight: 750;
}

.zbcMustWatch-copy {
    padding-top: 0.6rem;
}

.zbcMustWatch-kicker {
    display: block;

    margin-bottom: 0.2rem;

    color: var(--zbcMustWatch-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.55rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.zbcMustWatch-copy h3 {
    margin: 0;

    color: var(--zbcMustWatch-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: clamp(0.95rem, 0.25vw + 0.89rem, 1.04rem);
    font-weight: 700;
    line-height: 1.12;
}

.zbcMustWatch-cardLead .zbcMustWatch-copy h3 {
    font-size: clamp(1.1rem, 0.45vw + 1rem, 1.28rem);
}

.zbcMustWatch-copy h3 a {
    color: inherit;
    text-decoration: none;
}

.zbcMustWatch-date {
    display: block;

    margin-top: 0.4rem;

    color: var(--zbcMustWatch-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.59rem;
}


/* Tablet */

@media (min-width: 768px) and (max-width: 1199.98px) {

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

    .zbcMustWatch-cardLead {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 1rem;
    }

    .zbcMustWatch-card:nth-child(even) {
        border-right: 0;
    }
}


/* Mobile */

@media (max-width: 767.98px) {

    .zbcMustWatch-shell {
        padding: 2.15rem 0;
    }

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

    .zbcMustWatch-card,
    .zbcMustWatch-card:first-child,
    .zbcMustWatch-card:last-child {
        padding: 0.8rem;
        border-bottom: 1px solid var(--zbcMustWatch-border);
    }

    .zbcMustWatch-card:nth-child(odd) {
        padding-left: 0;
    }

    .zbcMustWatch-card:nth-child(even) {
        padding-right: 0;
        border-right: 0;
    }

    .zbcMustWatch-cardLead {
        grid-column: 1 / -1;
        padding-left: 0;
        padding-right: 0;
        border-right: 0;
    }

    .zbcMustWatch-copy h3 {
        font-size: clamp(1rem, 4vw, 1.08rem);
    }
}

@media (max-width: 479.98px) {

    .zbcMustWatch-heading {
        align-items: center;
    }

    .zbcMustWatch-grid {
        grid-template-columns: 1fr;
    }

    .zbcMustWatch-card,
    .zbcMustWatch-card:first-child,
    .zbcMustWatch-card:last-child,
    .zbcMustWatch-card:nth-child(odd),
    .zbcMustWatch-card:nth-child(even) {
        padding: 0.85rem 0;

        border-right: 0;
    }

    .zbcMustWatch-card:not(.zbcMustWatch-cardLead) {
        display: grid;
        grid-template-columns: 132px minmax(0, 1fr);
        gap: 0.8rem;
    }

    .zbcMustWatch-card:not(.zbcMustWatch-cardLead) .zbcMustWatch-media {
        width: 132px;
    }

    .zbcMustWatch-card:not(.zbcMustWatch-cardLead) .zbcMustWatch-copy {
        padding-top: 0;
    }
}


/* Dark mode / interaction */

[data-bs-theme="dark"] .zbcMustWatch-shell {
    color: var(--zbcMustWatch-text);
    background: var(--zbcMustWatch-bg);
}

.zbcMustWatch-shell a:hover {
    color: var(--zbcMustWatch-red);
}

.zbcMustWatch-shell a:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--zbcMustWatch-red) 35%,
            transparent
        );

    outline-offset: 3px;
}

/* Source: assets/css/components/zbc-podcasts.css */
/* =========================================================
   ZBC VIDEO PODCASTS
   YouTube-led podcast presentation.
   Namespace: zbcPodcast-*
   ========================================================= */

.zbcPodcast-shell {
    --zbcPodcast-red: var(--zbc-red, #d10000);
    --zbcPodcast-bg: var(--zbc-page-bg, #ffffff);
    --zbcPodcast-text: var(--zbc-text, #202124);
    --zbcPodcast-heading: var(--zbc-heading, #111111);
    --zbcPodcast-muted: var(--zbc-text-muted, #6b7280);
    --zbcPodcast-border: var(--zbc-border, #dedede);
    --zbcPodcast-soft: var(--zbc-surface-soft, #f4f4f4);

    padding: 0 0 clamp(2.6rem, 4vw, 4.1rem);

    color: var(--zbcPodcast-text);
    background: var(--zbcPodcast-bg);
}

.zbcPodcast-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 0.85rem;
}

.zbcPodcast-eyebrow {
    display: block;

    margin-bottom: 0.15rem;

    color: var(--zbcPodcast-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.59rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.zbcPodcast-heading h2 {
    margin: 0;

    color: var(--zbcPodcast-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: clamp(1.75rem, 1.9vw, 2.08rem);
    font-weight: 700;
    line-height: 1;
}

.zbcPodcast-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    color: var(--zbcPodcast-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.68rem;
    font-weight: 800;
    text-decoration: none;
}

.zbcPodcast-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    border-top: 1px solid var(--zbcPodcast-border);
    border-bottom: 1px solid var(--zbcPodcast-border);
}

.zbcPodcast-card {
    min-width: 0;

    padding: 0.85rem 0.9rem 0.95rem;

    border-right: 1px solid var(--zbcPodcast-border);
}

.zbcPodcast-card:first-child {
    padding-left: 0;
}

.zbcPodcast-card:last-child {
    padding-right: 0;
    border-right: 0;
}

.zbcPodcast-media {
    position: relative;

    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: var(--zbcPodcast-soft);
}

.zbcPodcast-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 18%;
}

.zbcPodcast-play {
    position: absolute;
    left: 50%;
    top: 50%;

    display: grid;

    width: 38px;
    height: 38px;

    place-items: center;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    color: var(--zbcPodcast-heading);
    background: rgba(255,255,255,.94);

    font-size: 1.2rem;
}

.zbcPodcast-youtube {
    position: absolute;
    left: 0.5rem;
    bottom: 0.45rem;

    display: grid;

    width: 26px;
    height: 22px;

    place-items: center;

    border-radius: 4px;

    color: #ffffff;
    background: #ff0000;

    font-size: 0.85rem;
}

.zbcPodcast-copy {
    padding-top: 0.6rem;
}

.zbcPodcast-series {
    display: block;

    margin-bottom: 0.22rem;

    color: var(--zbcPodcast-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.58rem;
    font-weight: 750;
}

.zbcPodcast-copy h3 {
    margin: 0;

    color: var(--zbcPodcast-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: clamp(0.96rem, 0.28vw + 0.9rem, 1.06rem);
    font-weight: 700;
    line-height: 1.12;
}

.zbcPodcast-copy h3 a {
    color: inherit;
    text-decoration: none;
}

.zbcPodcast-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;

    margin-top: 0.45rem;

    color: var(--zbcPodcast-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.58rem;
}


/* Tablet */

@media (min-width: 768px) and (max-width: 1199.98px) {

    .zbcPodcast-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .zbcPodcast-card {
        border-bottom: 1px solid var(--zbcPodcast-border);
    }

    .zbcPodcast-card:nth-child(3) {
        border-right: 0;
    }

    .zbcPodcast-card:nth-child(4),
    .zbcPodcast-card:nth-child(5) {
        border-bottom: 0;
    }

    .zbcPodcast-card:nth-child(4) {
        padding-left: 0;
    }
}


/* Mobile */

@media (max-width: 767.98px) {

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

    .zbcPodcast-card,
    .zbcPodcast-card:first-child,
    .zbcPodcast-card:last-child {
        padding: 0.8rem;

        border-bottom: 1px solid var(--zbcPodcast-border);
    }

    .zbcPodcast-card:nth-child(odd) {
        padding-left: 0;
    }

    .zbcPodcast-card:nth-child(even) {
        padding-right: 0;
        border-right: 0;
    }

    .zbcPodcast-copy h3 {
        font-size: clamp(1rem, 4vw, 1.08rem);
    }
}

@media (max-width: 479.98px) {

    .zbcPodcast-grid {
        grid-template-columns: 1fr;
    }

    .zbcPodcast-card,
    .zbcPodcast-card:first-child,
    .zbcPodcast-card:last-child,
    .zbcPodcast-card:nth-child(odd),
    .zbcPodcast-card:nth-child(even) {
        display: grid;
        grid-template-columns: 132px minmax(0, 1fr);
        gap: 0.8rem;

        padding: 0.85rem 0;

        border-right: 0;
    }

    .zbcPodcast-media {
        width: 132px;
    }

    .zbcPodcast-copy {
        padding-top: 0;
    }
}


/* Dark mode / interaction */

[data-bs-theme="dark"] .zbcPodcast-shell {
    color: var(--zbcPodcast-text);
    background: var(--zbcPodcast-bg);
}

.zbcPodcast-shell a:hover {
    color: var(--zbcPodcast-red);
}

.zbcPodcast-shell a:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--zbcPodcast-red) 35%,
            transparent
        );

    outline-offset: 3px;
}

/* Source: assets/css/components/zbc-faith-fact.css */
/* =========================================================
   ZBC RELIGION + FACT CHECK
   Religion 68% | Fact Check 32%
   Namespace: zbcFaithFact-*
   ========================================================= */

.zbcFaithFact-shell {
    --zbcFaithFact-red: var(--zbc-red, #d10000);
    --zbcFaithFact-bg: var(--zbc-page-bg, #ffffff);
    --zbcFaithFact-text: var(--zbc-text, #202124);
    --zbcFaithFact-heading: var(--zbc-heading, #111111);
    --zbcFaithFact-muted: var(--zbc-text-muted, #6b7280);
    --zbcFaithFact-border: var(--zbc-border, #dedede);
    --zbcFaithFact-soft: var(--zbc-surface-soft, #f4f4f4);
    --zbcFaithFact-green: #1d7a48;
    --zbcFaithFact-amber: #a95d00;

    padding: 0 0 clamp(2.7rem, 4vw, 4.2rem);

    color: var(--zbcFaithFact-text);
    background: var(--zbcFaithFact-bg);
}

.zbcFaithFact-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 2.08fr)
        minmax(330px, 1fr);

    gap: 1.25rem;

    align-items: stretch;
}


/* Shared heads */

.zbcFaithFact-head,
.zbcFaithFact-factHead {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;

    margin-bottom: 0.75rem;
    padding-bottom: 0.55rem;

    border-bottom: 1px solid var(--zbcFaithFact-border);
}

.zbcFaithFact-eyebrow {
    display: block;

    margin-bottom: 0.14rem;

    color: var(--zbcFaithFact-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.57rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.zbcFaithFact-head h2,
.zbcFaithFact-factHead h2 {
    margin: 0;

    color: var(--zbcFaithFact-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: clamp(1.5rem, 1.6vw, 1.78rem);
    font-weight: 700;
    line-height: 1;
}

.zbcFaithFact-head a,
.zbcFaithFact-factHead a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;

    color: var(--zbcFaithFact-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.64rem;
    font-weight: 800;
    text-decoration: none;
}


/* Religion */

.zbcFaithFact-religionGrid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(260px, 0.95fr);

    gap: 1rem;
}

.zbcFaithFact-leadMedia {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: var(--zbcFaithFact-soft);
}

.zbcFaithFact-leadMedia img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 18%;
}

.zbcFaithFact-kicker {
    display: block;

    margin: 0.6rem 0 0.2rem;

    color: var(--zbcFaithFact-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.57rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.zbcFaithFact-religionLead h3,
.zbcFaithFact-religionList h3,
.zbcFaithFact-factItem h3 {
    margin: 0;

    color: var(--zbcFaithFact-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-weight: 700;
}

.zbcFaithFact-religionLead h3 {
    font-size: clamp(1.3rem, 0.65vw + 1.12rem, 1.55rem);
    line-height: 1.07;
}

.zbcFaithFact-religionLead h3 a,
.zbcFaithFact-religionList h3 a,
.zbcFaithFact-factItem h3 a {
    color: inherit;
    text-decoration: none;
}

.zbcFaithFact-religionLead p {
    margin: 0.42rem 0 0;

    color: var(--zbcFaithFact-text);

    font-size: 0.88rem;
    line-height: 1.38;
}

.zbcFaithFact-meta {
    display: block;

    margin-top: 0.4rem;

    color: var(--zbcFaithFact-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.59rem;
}

.zbcFaithFact-religionList {
    border-top: 1px solid var(--zbcFaithFact-border);
}

.zbcFaithFact-religionList article {
    padding: 0.72rem 0;

    border-bottom: 1px solid var(--zbcFaithFact-border);
}

.zbcFaithFact-religionList article:last-child {
    border-bottom: 0;
}

.zbcFaithFact-religionList .zbcFaithFact-kicker {
    margin-top: 0;
}

.zbcFaithFact-religionList h3 {
    font-size: clamp(0.98rem, 0.3vw + 0.91rem, 1.08rem);
    line-height: 1.12;
}


/* Fact Check */

.zbcFaithFact-fact {
    padding-left: 1rem;

    border-left: 1px solid var(--zbcFaithFact-border);
}

.zbcFaithFact-factList {
    border-top: 1px solid var(--zbcFaithFact-border);
}

.zbcFaithFact-factItem {
    padding: 0.72rem 0;

    border-bottom: 1px solid var(--zbcFaithFact-border);
}

.zbcFaithFact-factItem:last-child {
    border-bottom: 0;
}

.zbcFaithFact-verdict {
    display: inline-flex;

    margin-bottom: 0.32rem;
    padding: 0.18rem 0.34rem;

    border: 1px solid currentColor;
    border-radius: 2px;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.53rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.zbcFaithFact-verdictFalse {
    color: var(--zbcFaithFact-red);
}

.zbcFaithFact-verdictContext,
.zbcFaithFact-verdictMisleading {
    color: var(--zbcFaithFact-amber);
}

.zbcFaithFact-verdictTrue {
    color: var(--zbcFaithFact-green);
}

.zbcFaithFact-factItem h3 {
    font-size: clamp(0.98rem, 0.28vw + 0.91rem, 1.07rem);
    line-height: 1.12;
}


/* Tablet */

@media (max-width: 991.98px) {

    .zbcFaithFact-grid {
        grid-template-columns: 1fr;
    }

    .zbcFaithFact-fact {
        padding-left: 0;

        border-left: 0;
        border-top: 1px solid var(--zbcFaithFact-border);
        padding-top: 1rem;
    }

    .zbcFaithFact-factList {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
    }

    .zbcFaithFact-factItem:nth-child(odd) {
        padding-right: 1rem;
        border-right: 1px solid var(--zbcFaithFact-border);
    }
}


/* Mobile */

@media (max-width: 767.98px) {

    .zbcFaithFact-religionGrid {
        grid-template-columns: 1fr;
    }

    .zbcFaithFact-religionLead h3 {
        font-size: clamp(1.32rem, 5vw, 1.5rem);
    }

    .zbcFaithFact-religionLead p {
        font-size: 0.95rem;
    }

    .zbcFaithFact-factList {
        display: block;
    }

    .zbcFaithFact-factItem:nth-child(odd) {
        padding-right: 0;
        border-right: 0;
    }

    .zbcFaithFact-factItem h3,
    .zbcFaithFact-religionList h3 {
        font-size: clamp(1rem, 4vw, 1.08rem);
    }
}


/* Dark mode / interaction */

[data-bs-theme="dark"] .zbcFaithFact-shell {
    color: var(--zbcFaithFact-text);
    background: var(--zbcFaithFact-bg);
}

.zbcFaithFact-shell a:hover {
    color: var(--zbcFaithFact-red);
}

.zbcFaithFact-shell a:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--zbcFaithFact-red) 35%,
            transparent
        );

    outline-offset: 3px;
}

/* Source: assets/css/components/zbc-games.css */
/* =========================================================
   ZBC GAMES V3
   Games is a PRODUCT / UTILITY module, not editorial.
   Namespace: zbcGames-*
   ========================================================= */

.zbcGames-shell {
    --zbcGames-red: var(--zbc-red, #d10000);
    --zbcGames-bg: var(--zbc-page-bg, #ffffff);
    --zbcGames-text: var(--zbc-text, #202124);
    --zbcGames-heading: var(--zbc-heading, #151515);
    --zbcGames-muted: var(--zbc-text-muted, #6b7280);
    --zbcGames-border: var(--zbc-border, #e1e3e6);
    --zbcGames-soft: var(--zbc-surface-soft, #f4f5f6);

    --zbcGames-ui:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    padding: clamp(1.9rem, 2.8vw, 2.8rem) 0;

    color: var(--zbcGames-text);
    background: var(--zbcGames-bg);

    font-family: var(--zbcGames-ui);
}

.zbcGames-heading {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin: 0;
    padding: 0 0 0.72rem 0.78rem;

    border: 0;
    border-bottom: 1px solid var(--zbcGames-border);
}

.zbcGames-heading::before {
    content: "";

    position: absolute;
    left: 0;
    top: 1px;

    width: 4px;
    height: 23px;

    background: var(--zbcGames-red);
}

.zbcGames-headingTitle {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
}

.zbcGames-heading h2 {
    margin: 0;

    color: var(--zbcGames-heading);

    font-family: var(--zbcGames-ui);
    font-size: clamp(1.42rem, 1.45vw, 1.66rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
}

.zbcGames-headingTitle > span {
    color: var(--zbcGames-muted);

    font-family: var(--zbcGames-ui);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.zbcGames-more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;

    color: var(--zbcGames-red);

    font-family: var(--zbcGames-ui);
    font-size: 0.65rem;
    font-weight: 800;
    text-decoration: none;
}

.zbcGames-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border: 0;
    border-bottom: 1px solid var(--zbcGames-border);
}

.zbcGames-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 0.72rem;

    min-height: 100px;
    align-items: center;

    padding: 0.78rem 0.9rem;

    border-right: 1px solid var(--zbcGames-border);
    border-bottom: 1px solid var(--zbcGames-border);

    background: transparent;
}

.zbcGames-card:nth-child(3n) {
    border-right: 0;
}

.zbcGames-card:nth-child(n+4) {
    border-bottom: 0;
}

.zbcGames-card:first-child,
.zbcGames-card:nth-child(4) {
    padding-left: 0;
}

.zbcGames-card:nth-child(3),
.zbcGames-card:nth-child(6) {
    padding-right: 0;
}

.zbcGames-copy {
    min-width: 0;
}

.zbcGames-copy h3 {
    margin: 0;

    color: var(--zbcGames-heading);

    font-family: var(--zbcGames-ui);
    font-size: clamp(0.96rem, 0.18vw + 0.92rem, 1.04rem);
    font-weight: 760;
    line-height: 1.16;
    letter-spacing: -0.012em;
}

.zbcGames-copy h3 a {
    color: inherit;
    text-decoration: none;
}

.zbcGames-copy p {
    max-width: 32rem;

    margin: 0.25rem 0 0;

    color: var(--zbcGames-muted);

    font-family: var(--zbcGames-ui);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.32;
}

.zbcGames-icon {
    display: grid;

    width: 38px;
    height: 38px;

    place-items: center;
    justify-self: end;

    border: 0;
    border-radius: 50%;

    color: var(--zbcGames-red);

    background:
        color-mix(
            in srgb,
            var(--zbcGames-red) 8%,
            var(--zbcGames-bg)
        );

    font-size: 1.15rem;
    text-decoration: none;

    transition:
        background-color 150ms ease,
        transform 150ms ease;
}

.zbcGames-icon:hover {
    color: var(--zbcGames-red);

    background:
        color-mix(
            in srgb,
            var(--zbcGames-red) 13%,
            var(--zbcGames-bg)
        );

    transform: translateY(-1px);
}

@media (min-width: 768px) and (max-width: 991.98px) {

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

    .zbcGames-card,
    .zbcGames-card:nth-child(3n),
    .zbcGames-card:nth-child(n+4),
    .zbcGames-card:first-child,
    .zbcGames-card:nth-child(4),
    .zbcGames-card:nth-child(3),
    .zbcGames-card:nth-child(6) {
        min-height: 96px;

        padding: 0.76rem 0.85rem;

        border-right: 1px solid var(--zbcGames-border);
        border-bottom: 1px solid var(--zbcGames-border);
    }

    .zbcGames-card:nth-child(odd) {
        padding-left: 0;
    }

    .zbcGames-card:nth-child(even) {
        padding-right: 0;
        border-right: 0;
    }

    .zbcGames-card:nth-child(n+5) {
        border-bottom: 0;
    }
}

@media (max-width: 767.98px) {

    .zbcGames-shell {
        padding: 1.75rem 0;
    }

    .zbcGames-heading {
        padding-bottom: 0.65rem;
    }

    .zbcGames-headingTitle {
        gap: 0.5rem;
    }

    .zbcGames-heading h2 {
        font-size: clamp(1.35rem, 5.7vw, 1.55rem);
    }

    .zbcGames-headingTitle > span {
        font-size: 0.61rem;
    }

    .zbcGames-grid {
        grid-template-columns: 1fr;
    }

    .zbcGames-card,
    .zbcGames-card:nth-child(3n),
    .zbcGames-card:nth-child(n+4),
    .zbcGames-card:first-child,
    .zbcGames-card:nth-child(4),
    .zbcGames-card:nth-child(3),
    .zbcGames-card:nth-child(6) {
        grid-template-columns: minmax(0, 1fr) 40px;

        min-height: 78px;

        padding: 0.66rem 0;

        border-right: 0;
        border-bottom: 1px solid var(--zbcGames-border);
    }

    .zbcGames-card:last-child {
        border-bottom: 0;
    }

    .zbcGames-copy h3 {
        font-size: 0.98rem;
    }

    .zbcGames-copy p {
        font-size: 0.78rem;
    }

    .zbcGames-icon {
        width: 36px;
        height: 36px;

        font-size: 1.08rem;
    }
}

[data-bs-theme="dark"] .zbcGames-shell {
    color: var(--zbcGames-text);
    background: var(--zbcGames-bg);
}

.zbcGames-shell a:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--zbcGames-red) 35%,
            transparent
        );

    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .zbcGames-icon {
        transition: none;
    }
}

/* Source: assets/css/components/zbc-sports.css */
/* =========================================================
   ZBC SPORTS
   Content-dense three-column sports desk.
   Namespace: zbcSports-*
   ========================================================= */

.zbcSports-shell {
    --zbcSports-red: var(--zbc-red, #d10000);
    --zbcSports-bg: var(--zbc-page-bg, #ffffff);
    --zbcSports-text: var(--zbc-text, #202124);
    --zbcSports-heading: var(--zbc-heading, #111111);
    --zbcSports-muted: var(--zbc-text-muted, #6b7280);
    --zbcSports-border: var(--zbc-border, #dcdcdc);
    --zbcSports-soft: var(--zbc-surface-soft, #f5f5f5);

    padding: clamp(2.4rem, 3.7vw, 3.9rem) 0;

    color: var(--zbcSports-text);
    background: var(--zbcSports-bg);
}


/* Heading */

.zbcSports-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 0.9rem;
    padding-bottom: 0.65rem;

    border-bottom: 1px solid var(--zbcSports-border);
}

.zbcSports-heading h2 {
    position: relative;

    margin: 0;

    padding-left: 0.72rem;

    color: var(--zbcSports-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: clamp(1.75rem, 1.9vw, 2.08rem);
    font-weight: 700;
    line-height: 1;
}

.zbcSports-heading h2::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 4px;
    height: 24px;

    background: var(--zbcSports-red);
}

.zbcSports-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
}

.zbcSports-nav a {
    color: var(--zbcSports-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.7rem;
    font-weight: 750;
    text-decoration: none;
}


/* Main grid */

.zbcSports-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    border-bottom: 1px solid var(--zbcSports-border);
}


/* Lead */

.zbcSports-lead {
    min-width: 0;

    padding-right: 1rem;

    border-right: 1px solid var(--zbcSports-border);
}

.zbcSports-leadMedia {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: var(--zbcSports-soft);
}

.zbcSports-leadMedia img,
.zbcSports-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 18%;
}

.zbcSports-kicker {
    display: block;

    margin: 0.55rem 0 0.18rem;

    color: var(--zbcSports-red);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.56rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.zbcSports-lead h3,
.zbcSports-story h3,
.zbcSports-moreList h3 {
    margin: 0;

    color: var(--zbcSports-heading);

    font-family:
        Palatino,
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-weight: 700;
}

.zbcSports-lead h3 {
    font-size: clamp(1.45rem, 1.45vw, 1.8rem);
    line-height: 1.05;
    letter-spacing: -0.018em;
}

.zbcSports-lead h3 a,
.zbcSports-story h3 a,
.zbcSports-moreList h3 a {
    color: inherit;
    text-decoration: none;
}

.zbcSports-lead p {
    margin: 0.48rem 0 0;

    color: var(--zbcSports-text);

    font-size: 0.88rem;
    line-height: 1.4;
}

.zbcSports-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.55rem;

    margin-top: 0.45rem;

    color: var(--zbcSports-muted);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.6rem;
}

.zbcSports-meta strong {
    color: var(--zbcSports-text);
}


/* Middle list */

.zbcSports-storyList {
    min-width: 0;

    padding: 0 1rem;

    border-right: 1px solid var(--zbcSports-border);
}

.zbcSports-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 0.8rem;

    min-width: 0;
    align-items: center;

    padding: 0.75rem 0;

    border-bottom: 1px solid var(--zbcSports-border);
}

.zbcSports-story:first-child {
    padding-top: 0;
}

.zbcSports-story:last-child {
    border-bottom: 0;
}

.zbcSports-story .zbcSports-kicker {
    margin-top: 0;
}

.zbcSports-storyCopy {
    min-width: 0;
}

.zbcSports-story h3 {
    font-size: clamp(0.98rem, 0.27vw + 0.92rem, 1.07rem);
    line-height: 1.12;
}

.zbcSports-thumb {
    display: block;

    width: 104px;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: var(--zbcSports-soft);
}


/* Right list */

.zbcSports-moreList {
    min-width: 0;

    padding-left: 1rem;
}

.zbcSports-moreList article {
    padding: 0.75rem 0;

    border-bottom: 1px solid var(--zbcSports-border);
}

.zbcSports-moreList article:first-child {
    padding-top: 0;
}

.zbcSports-moreList article:last-child {
    border-bottom: 0;
}

.zbcSports-moreList .zbcSports-kicker {
    margin-top: 0;
}

.zbcSports-moreList h3 {
    font-size: clamp(1rem, 0.35vw + 0.92rem, 1.11rem);
    line-height: 1.11;
}


/* Tablet */

@media (min-width: 768px) and (max-width: 1199.98px) {

    .zbcSports-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .zbcSports-nav {
        justify-content: flex-start;
    }

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

    .zbcSports-lead {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        column-gap: 1rem;

        margin-bottom: 1rem;
        padding-right: 0;
        padding-bottom: 1rem;

        border-right: 0;
        border-bottom: 1px solid var(--zbcSports-border);
    }

    .zbcSports-leadMedia {
        grid-row: 1 / 6;
    }

    .zbcSports-storyList {
        padding-left: 0;
    }
}


/* Mobile */

@media (max-width: 767.98px) {

    .zbcSports-shell {
        padding: 2.15rem 0;
    }

    .zbcSports-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .zbcSports-nav {
        justify-content: flex-start;
        gap: 0.35rem 0.75rem;
    }

    .zbcSports-grid {
        grid-template-columns: 1fr;
    }

    .zbcSports-lead {
        padding: 0 0 1rem;

        border-right: 0;
        border-bottom: 1px solid var(--zbcSports-border);
    }

    .zbcSports-lead h3 {
        font-size: clamp(1.45rem, 6vw, 1.72rem);
    }

    .zbcSports-lead p {
        font-size: 0.96rem;
    }

    .zbcSports-storyList {
        padding: 0;

        border-right: 0;
        border-bottom: 1px solid var(--zbcSports-border);
    }

    .zbcSports-story:first-child {
        padding-top: 0.85rem;
    }

    .zbcSports-story:last-child {
        padding-bottom: 0.85rem;
    }

    .zbcSports-moreList {
        padding-left: 0;
    }

    .zbcSports-moreList article:first-child {
        padding-top: 0.85rem;
    }

    .zbcSports-story h3,
    .zbcSports-moreList h3 {
        font-size: clamp(1.02rem, 4vw, 1.1rem);
    }
}

@media (max-width: 479.98px) {

    .zbcSports-story {
        grid-template-columns: minmax(0, 1fr) 92px;
    }

    .zbcSports-thumb {
        width: 92px;
    }
}


/* Dark / interaction */

[data-bs-theme="dark"] .zbcSports-shell {
    color: var(--zbcSports-text);
    background: var(--zbcSports-bg);
}

.zbcSports-shell a:hover {
    color: var(--zbcSports-red);
}

.zbcSports-shell a:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--zbcSports-red) 35%,
            transparent
        );

    outline-offset: 3px;
}

/* Source: assets/css/components/zbc-footer.css */
/* =========================================================
   ZBC FOOTER V1
   Compact broadcast-news footer.
   Namespace: zbcFooter-*
   ========================================================= */

.zbcFooter-shell {
    --zbcFooter-red: var(--zbc-red, #d10000);
    --zbcFooter-bg: #101214;
    --zbcFooter-bg-soft: #171a1d;
    --zbcFooter-text: #f6f6f6;
    --zbcFooter-muted: #aeb4bb;
    --zbcFooter-border: rgba(255,255,255,.13);

    --zbcFooter-ui:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: var(--zbcFooter-text);
    background: var(--zbcFooter-bg);

    font-family: var(--zbcFooter-ui);

    border-top: 4px solid var(--zbcFooter-red);
}


/* Quick actions */

.zbcFooter-actions {
    background: var(--zbcFooter-bg-soft);
    border-bottom: 1px solid var(--zbcFooter-border);
}

.zbcFooter-actionsGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.zbcFooter-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;

    min-height: 68px;
    padding: 0.75rem 1rem;

    color: var(--zbcFooter-text);
    text-decoration: none;

    border-right: 1px solid var(--zbcFooter-border);
}

.zbcFooter-action:last-child {
    border-right: 0;
}

.zbcFooter-actionIcon {
    display: grid;

    width: 32px;
    height: 32px;

    place-items: center;

    border-radius: 50%;

    color: #ffffff;
    background: var(--zbcFooter-red);

    font-size: 0.95rem;
}

.zbcFooter-action small,
.zbcFooter-action strong {
    display: block;
}

.zbcFooter-action small {
    margin-bottom: 0.05rem;

    color: var(--zbcFooter-muted);

    font-size: 0.56rem;
    font-weight: 650;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.zbcFooter-action strong {
    color: var(--zbcFooter-text);

    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.1;
}


/* Main grid */

.zbcFooter-main {
    display: grid;
    grid-template-columns:
        minmax(230px, 1.45fr)
        repeat(3, minmax(120px, 0.72fr))
        minmax(210px, 1fr);

    gap: 2rem;

    padding: clamp(2.2rem, 3.8vw, 3.5rem) 0;
}

.zbcFooter-brand {
    min-width: 0;
}

.zbcFooter-logoLink {
    display: inline-block;
    background: #ffffff;
}

.zbcFooter-logo {
    display: block;
    width: 116px;
    height: auto;
}

.zbcFooter-tagline {
    margin: 0.75rem 0 0;

    color: var(--zbcFooter-text);

    font-size: 0.76rem;
    font-weight: 800;
}

.zbcFooter-description {
    max-width: 300px;

    margin: 0.5rem 0 0;

    color: var(--zbcFooter-muted);

    font-size: 0.7rem;
    line-height: 1.5;
}

.zbcFooter-social {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    margin-top: 0.95rem;
}

.zbcFooter-social a {
    display: grid;

    width: 31px;
    height: 31px;

    place-items: center;

    border: 1px solid var(--zbcFooter-border);
    border-radius: 50%;

    color: var(--zbcFooter-text);

    font-size: 0.8rem;
    text-decoration: none;

    transition:
        border-color 150ms ease,
        background-color 150ms ease,
        color 150ms ease;
}

.zbcFooter-social a:hover {
    color: #ffffff;
    background: var(--zbcFooter-red);
    border-color: var(--zbcFooter-red);
}


/* Link columns */

.zbcFooter-column {
    min-width: 0;
}

.zbcFooter-column h2 {
    position: relative;

    margin: 0 0 0.78rem;
    padding-bottom: 0.5rem;

    color: var(--zbcFooter-text);

    font-family: var(--zbcFooter-ui);
    font-size: 0.69rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.zbcFooter-column h2::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 23px;
    height: 2px;

    background: var(--zbcFooter-red);
}

.zbcFooter-column > a,
.zbcFooter-column nav > a {
    display: block;

    width: max-content;
    max-width: 100%;

    margin: 0.45rem 0;

    color: var(--zbcFooter-muted);

    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
}

.zbcFooter-column > a:hover,
.zbcFooter-column nav > a:hover {
    color: #ffffff;
}


/* App buttons */

.zbcFooter-apps {
    margin-top: 1.1rem;
}

.zbcFooter-appLabel {
    display: block;

    margin-bottom: 0.48rem;

    color: var(--zbcFooter-text);

    font-size: 0.6rem;
    font-weight: 750;
}

.zbcFooter-appButtons {
    display: grid;
    gap: 0.42rem;
}

.zbcFooter-appButton {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    width: 100%;
    max-width: 165px;

    padding: 0.48rem 0.62rem;

    border: 1px solid var(--zbcFooter-border);
    border-radius: 5px;

    color: var(--zbcFooter-text);
    background: #090a0b;

    text-decoration: none;
}

.zbcFooter-appButton > i {
    font-size: 1rem;
}

.zbcFooter-appButton small,
.zbcFooter-appButton strong {
    display: block;
}

.zbcFooter-appButton small {
    color: var(--zbcFooter-muted);

    font-size: 0.46rem;
    line-height: 1;
}

.zbcFooter-appButton strong {
    margin-top: 0.08rem;

    color: #ffffff;

    font-size: 0.66rem;
    font-weight: 750;
    line-height: 1.05;
}


/* Bottom bar */

.zbcFooter-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 0.95rem 0 1.15rem;

    border-top: 1px solid var(--zbcFooter-border);
}

.zbcFooter-bottom p {
    margin: 0;

    color: var(--zbcFooter-muted);

    font-size: 0.6rem;
    line-height: 1.35;
}

.zbcFooter-legal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

.zbcFooter-legal a {
    color: var(--zbcFooter-muted);

    font-size: 0.59rem;
    text-decoration: none;
}

.zbcFooter-legal a:hover {
    color: #ffffff;
}


/* Tablet */

@media (min-width: 768px) and (max-width: 1199.98px) {

    .zbcFooter-main {
        grid-template-columns:
            minmax(230px, 1.2fr)
            repeat(3, minmax(120px, 0.7fr));

        gap: 1.5rem;
    }

    .zbcFooter-company {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;

        padding-top: 1rem;

        border-top: 1px solid var(--zbcFooter-border);
    }

    .zbcFooter-company h2 {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .zbcFooter-apps {
        margin-top: 0;
    }

    .zbcFooter-appButtons {
        grid-template-columns: repeat(2, minmax(0, 165px));
    }
}


/* Mobile */

@media (max-width: 767.98px) {

    .zbcFooter-actionsGrid {
        grid-template-columns: 1fr;
    }

    .zbcFooter-action {
        justify-content: flex-start;

        min-height: 58px;
        padding: 0.68rem 0;

        border-right: 0;
        border-bottom: 1px solid var(--zbcFooter-border);
    }

    .zbcFooter-action:last-child {
        border-bottom: 0;
    }

    .zbcFooter-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.7rem 1.2rem;

        padding: 2.1rem 0;
    }

    .zbcFooter-brand {
        grid-column: 1 / -1;

        padding-bottom: 1.15rem;

        border-bottom: 1px solid var(--zbcFooter-border);
    }

    .zbcFooter-company {
        grid-column: 1 / -1;

        padding-top: 0.6rem;

        border-top: 1px solid var(--zbcFooter-border);
    }

    .zbcFooter-appButtons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .zbcFooter-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .zbcFooter-legal {
        justify-content: flex-start;
    }
}


/* Very small mobile */

@media (max-width: 479.98px) {

    .zbcFooter-main {
        grid-template-columns: 1fr;
    }

    .zbcFooter-brand,
    .zbcFooter-company {
        grid-column: auto;
    }

    .zbcFooter-column {
        padding-bottom: 0.8rem;

        border-bottom: 1px solid var(--zbcFooter-border);
    }

    .zbcFooter-company {
        border-top: 0;
    }
}


/* Accessibility */

.zbcFooter-shell a:focus-visible {
    outline: 3px solid rgba(255,255,255,.7);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .zbcFooter-social a {
        transition: none;
    }
}

/* Source: assets/css/rgk-brand.css */
/* =========================================================
   RADIO GENERATION KENYA — BRAND OVERRIDE
   ---------------------------------------------------------
   Approved ZBC template remains structurally unchanged.
   Brand palette only:
     Navy       #141741
     Magenta    #C63690
     White      #FFFFFF
     Light Grey #E5E7EB
   ========================================================= */

:root,
[data-bs-theme="light"] {
    --rgk-navy: #141741;
    --rgk-magenta: #C63690;
    --rgk-white: #FFFFFF;
    --rgk-grey: #E5E7EB;
    --rgk-muted: rgba(20, 23, 65, 0.62);

    /* Remap the template's core ZBC tokens to RGK. */
    --zbc-red: var(--rgk-magenta);
    --zbc-red-dark: color-mix(in srgb, var(--rgk-magenta) 78%, var(--rgk-navy));
    --zbc-black: var(--rgk-navy);
    --zbc-ink: var(--rgk-navy);
    --zbc-muted: var(--rgk-muted);
    --zbc-line: var(--rgk-grey);
    --zbc-soft: color-mix(in srgb, var(--rgk-grey) 45%, var(--rgk-white));
    --zbc-deep: var(--rgk-navy);
    --zbc-white: var(--rgk-white);

    --zbc-page-bg: var(--rgk-white);
    --zbc-surface: var(--rgk-white);
    --zbc-surface-soft: color-mix(in srgb, var(--rgk-grey) 45%, var(--rgk-white));
    --zbc-surface-warm: color-mix(in srgb, var(--rgk-grey) 35%, var(--rgk-white));
    --zbc-surface-raised: var(--rgk-white);
    --zbc-text: var(--rgk-navy);
    --zbc-heading: var(--rgk-navy);
    --zbc-text-muted: var(--rgk-muted);
    --zbc-border: var(--rgk-grey);
    --zbc-border-strong: color-mix(in srgb, var(--rgk-grey) 76%, var(--rgk-navy));
    --zbc-number: var(--rgk-navy);
    --zbc-tab-bg: color-mix(in srgb, var(--rgk-grey) 55%, var(--rgk-white));
    --zbc-tab-text: var(--rgk-navy);
    --zbc-ad-bg: color-mix(in srgb, var(--rgk-grey) 32%, var(--rgk-white));
    --zbc-footer-bg: var(--rgk-navy);
}

/* Keep dark mode inside the same RGK family instead of introducing black/red. */
[data-bs-theme="dark"] {
    --zbc-page-bg: var(--rgk-navy);
    --zbc-surface: color-mix(in srgb, var(--rgk-navy) 94%, var(--rgk-white));
    --zbc-surface-soft: color-mix(in srgb, var(--rgk-navy) 88%, var(--rgk-white));
    --zbc-surface-warm: color-mix(in srgb, var(--rgk-navy) 90%, var(--rgk-white));
    --zbc-surface-raised: color-mix(in srgb, var(--rgk-navy) 84%, var(--rgk-white));
    --zbc-text: var(--rgk-white);
    --zbc-heading: var(--rgk-white);
    --zbc-text-muted: rgba(255, 255, 255, 0.70);
    --zbc-border: rgba(255, 255, 255, 0.16);
    --zbc-border-strong: rgba(255, 255, 255, 0.26);
    --zbc-number: var(--rgk-white);
    --zbc-tab-bg: rgba(255, 255, 255, 0.10);
    --zbc-tab-text: var(--rgk-white);
    --zbc-ad-bg: rgba(255, 255, 255, 0.06);
    --zbc-footer-bg: var(--rgk-navy);

    --zbc-black: var(--rgk-white);
    --zbc-ink: var(--rgk-white);
    --zbc-muted: rgba(255, 255, 255, 0.70);
    --zbc-line: rgba(255, 255, 255, 0.16);
    --zbc-soft: rgba(255, 255, 255, 0.08);
    --zbc-deep: var(--rgk-white);
    --zbc-white: var(--rgk-navy);
}

/* =========================================================
   HEADER
   ========================================================= */

.zbcHdr-shell {
    --zbcHdr-red: var(--rgk-magenta);
    --zbcHdr-red-dark: color-mix(in srgb, var(--rgk-magenta) 78%, var(--rgk-navy));
    --zbcHdr-bg: var(--rgk-white);
    --zbcHdr-surface: var(--rgk-white);
    --zbcHdr-text: var(--rgk-navy);
    --zbcHdr-muted: var(--rgk-muted);
    --zbcHdr-line: var(--rgk-grey);
    --zbcHdr-chip: color-mix(in srgb, var(--rgk-grey) 50%, var(--rgk-white));
    --zbcHdr-breaking-bg: color-mix(in srgb, var(--rgk-grey) 45%, var(--rgk-white));
}

[data-bs-theme="dark"] .zbcHdr-shell {
    --zbcHdr-bg: var(--rgk-navy);
    --zbcHdr-surface: var(--rgk-navy);
    --zbcHdr-text: var(--rgk-white);
    --zbcHdr-muted: rgba(255, 255, 255, 0.70);
    --zbcHdr-line: rgba(255, 255, 255, 0.16);
    --zbcHdr-chip: rgba(255, 255, 255, 0.09);
    --zbcHdr-breaking-bg: rgba(255, 255, 255, 0.07);
}

/* Circular RGK logo: keep it crisp and proportionate without changing the header layout. */
.zbcHdr-logo {
    width: 104px;
    max-height: 108px;
    object-fit: contain;
}

.zbcHdr-offcanvasLogo {
    width: 92px;
    height: auto;
    object-fit: contain;
}

@media (min-width: 1200px) {
    .zbcHdr-shell.zbcHdr-isScrolled .zbcHdr-logo {
        width: 58px;
        max-height: 58px;
    }
}

@media (max-width: 1199.98px) {
    .zbcHdr-logo {
        width: 86px;
        max-height: 88px;
    }
}

@media (max-width: 767.98px) {
    .zbcHdr-logo {
        width: 62px;
        max-height: 62px;
    }
}

/* Remove unrelated blue/red/yellow social/weather accents from the header. */
.zbcHdr-weather i,
.zbcHdr-socialFacebook,
.zbcHdr-socialYoutube,
.zbcHdr-socialInstagram {
    color: var(--rgk-magenta);
}

.zbcHdr-watchLive,
.zbcHdr-watchLive:hover,
.zbcBreaking-label {
    background: var(--rgk-magenta);
    box-shadow: none;
}

.zbcHdr-watchIcon {
    color: var(--rgk-magenta);
}

/* =========================================================
   COMPONENT ACCENTS
   Every section keeps the approved layout, but shares one
   RGK accent instead of becoming a multi-colour site.
   ========================================================= */

.zbcAd-shell { --zbcAd-red: var(--rgk-magenta); }
.zbcAwh-shell { --zbcAwh-red: var(--rgk-magenta); }
.zbcBusiness-shell { --zbcBusiness-red: var(--rgk-magenta); }
.zbcGames-shell { --zbcGames-red: var(--rgk-magenta); }
.zbcJustIn-shell { --zbcJustIn-red: var(--rgk-magenta); }
.zbcLocal-shell { --zbcLocal-red: var(--rgk-magenta); }
.zbcMustWatch-shell { --zbcMustWatch-red: var(--rgk-magenta); }
.zbcObit-shell { --zbcObit-red: var(--rgk-magenta); }
.zbcOpinion-shell { --zbcOpinion-red: var(--rgk-magenta); }
.zbcPodcast-shell { --zbcPodcast-red: var(--rgk-magenta); }
.zbcSports-shell { --zbcSports-red: var(--rgk-magenta); }
.zbcTechEduEnv-shell { --zbcTechEduEnv-red: var(--rgk-magenta); }
.zbcTriDesk-shell { --zbcTriDesk-red: var(--rgk-magenta); }
.zbcWatch-shell { --zbcWatch-red: var(--rgk-magenta); }

.zbcFaithFact-shell {
    --zbcFaithFact-red: var(--rgk-magenta);
    --zbcFaithFact-green: var(--rgk-magenta);
    --zbcFaithFact-amber: var(--rgk-navy);
}

/* Video/audio badges should use RGK magenta, not YouTube red. */
.zbcPodcast-youtube {
    background: var(--rgk-magenta);
}

/* Small red remnants in legacy/global pieces. */
.score-label {
    color: var(--rgk-magenta);
}

[data-bs-theme="dark"] ::selection {
    color: var(--rgk-white);
    background: var(--rgk-magenta);
}

[data-bs-theme="dark"] a:focus-visible,
[data-bs-theme="dark"] button:focus-visible,
[data-bs-theme="dark"] input:focus-visible {
    outline-color: var(--rgk-magenta);
}

/* =========================================================
   FOOTER
   ========================================================= */

.zbcFooter-shell {
    --zbcFooter-red: var(--rgk-magenta);
    --zbcFooter-bg: var(--rgk-navy);
    --zbcFooter-bg-soft: color-mix(in srgb, var(--rgk-navy) 91%, var(--rgk-white));
    --zbcFooter-text: var(--rgk-white);
    --zbcFooter-muted: rgba(255, 255, 255, 0.70);
    --zbcFooter-border: rgba(255, 255, 255, 0.15);
}

.zbcFooter-logoLink {
    background: transparent;
}

.zbcFooter-logo {
    width: 94px;
    height: auto;
    object-fit: contain;
}

/* Bootstrap/common text helpers inside the custom template should remain neutral. */
.text-danger {
    color: var(--rgk-magenta) !important;
}

/* Brand-safe focus ring. */
:focus-visible {
    outline-color: var(--rgk-magenta);
}

/* Source: assets/css/components/rgk-navigation.css */
.zbcHdr-nav { flex-wrap: wrap; }
.rgkNav-branch { display: inline-flex; align-items: center; position: relative; }
.rgkNav-toggle { border: 0; background: transparent; color: inherit; padding: .65rem .4rem; font: inherit; }
.rgkNav-toggle:focus-visible, .rgkNav-nested summary:focus-visible, .rgkNav-mobileBranch summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.rgkNav-dropdown { font: inherit; min-width: 15rem; max-width: min(24rem, 90vw); max-height: 65vh; overflow-y: auto; }
.rgkNav-dropdown .dropdown-item { white-space: normal; }
.rgkNav-nested summary { cursor: pointer; padding: .5rem 1rem; font-weight: 600; }
.rgkNav-children { padding-left: .75rem; }
.rgkNav-mobileBranch summary { cursor: pointer; padding: .9rem 0; font: inherit; font-weight: 600; }
.rgkNav-mobileChildren { padding-left: 1rem; border-left: 1px solid currentColor; }

/* Source: assets/css/components/rgk-homepage.css */
/* Only adapt grids when their optional CMS panels are absent. */
.zbcBusiness-layout:not(:has(> .zbcBusiness-sponsored)),
.zbcFaithFact-grid:has(> :only-child),
.zbcAwh-grid:has(> :only-child),
.zbcTechEduEnv-grid:has(> :only-child),
.zbcTriDesk-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
 .zbcAwh-grid:has(> :nth-child(2):last-child),
 .zbcTechEduEnv-grid:has(> :nth-child(2):last-child),
 .zbcTriDesk-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rgk-story-byline { overflow-wrap: anywhere; }
.lifestyle-card > a > img { width: 100%; object-fit: cover; aspect-ratio: 16 / 9; }

/* Source: assets/css/components/rgk-cleanup.css */
/* Keep the existing desktop/mobile breakpoint and move excess desktop links into More. */
.zbcHdr-nav[data-rgk-overflow-nav] { flex-wrap: nowrap; min-width: 0; overflow-x: auto; }
.zbcHdr-nav[data-rgk-overflow-nav].rgkNav-ready { overflow: visible; }
[data-rgk-overflow-nav] > a, [data-rgk-overflow-nav] > .rgkNav-branch, .rgkNav-more { flex: 0 0 auto; }
.rgkNav-more { display: flex; align-items: stretch; }
.rgkNav-more[hidden] { display: none !important; }
.rgkNav-moreButton { border: 0; border-radius: 0; background: transparent; gap: .4rem; }
.rgkNav-moreButton:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
.rgkNav-overflowMenu { width: min(21rem, 90vw); max-height: 65vh; overflow-y: auto; padding: .4rem; }
.rgkNav-overflowMenu > .zbcHdr-navLink { display: flex; justify-content: flex-start; padding: .8rem .65rem; white-space: normal; line-height: 1.35; }
.rgkNav-overflowMenu > .rgkNav-branch { display: flex; flex-wrap: wrap; width: 100%; }
.rgkNav-overflowMenu .rgkNav-branch > .zbcHdr-navLink { flex: 1; justify-content: flex-start; padding: .8rem .65rem; white-space: normal; line-height: 1.35; }
.rgkNav-overflowMenu .rgkNav-toggle { flex: 0 0 44px; min-height: 44px; }
.rgkNav-overflowMenu .rgkNav-dropdown { position: static !important; transform: none !important; width: 100%; min-width: 0; max-height: none; border: 0; padding-left: .5rem; }
.rgkNav-overflowMenu .zbcHdr-navLinkActive::after { display: none; }

/* Scope presentation changes to news sections, leaving advertisements and games alone. */
.rgk-home .rgk-editorial img[data-rgk-image] { object-fit: cover !important; object-position: center top !important; max-width: 100%; }
.rgk-home .rgk-editorial img.rgk-imageFallback,
.rgk-home .rgk-editorial img[src$="/rglogo.webp"],
.rgk-home .rgk-editorial img[src$="/logo.jpeg"] { object-fit: contain !important; object-position: center !important; background: #f0f1f4; }
.rgk-home .rgk-editorial :is(article, aside, section, [class*="Grid"], [class*="grid"]) { min-width: 0; }
.rgk-home .rgk-editorial :is(h2, h3, h4, p, a) { overflow-wrap: break-word; }
.rgk-home .rgk-editorial article p { text-transform: none !important; letter-spacing: normal !important; font-size: .92rem; line-height: 1.5; font-weight: 400; margin-block: .6rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.rgk-home .rgk-editorial article p:empty { display: none; }
.rgk-home .rgk-editorial :is(h3, h4) { line-height: 1.25; }
.rgk-home .rgk-editorial article :is(h3, h4), .rgk-home .rgk-editorial .lead-list-item h2 { display: block; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.rgk-home .rgk-editorial .hero-title { display: block; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.rgk-home .rgk-editorial :is([class*="Meta"], [class*="meta"]) { text-transform: none !important; letter-spacing: normal !important; font-size: .75rem; line-height: 1.4; font-weight: 400; }
.rgk-story-byline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.rgk-home .rgk-editorial .hero-summary { -webkit-line-clamp: 2; }
.rgk-home .rgk-editorial .zbcObit-fallback { display: none; }
.rgk-home .rgk-editorial .zbcOpinion-mugshot:not(:has(img)):has(> span:empty) { display: none; }
.rgk-home .rgk-editorial .zbcOpinion-railItem:has(> .zbcOpinion-mugshot:not(:has(img)) > span:empty) { grid-template-columns: minmax(0, 1fr); }
.rgk-home > .rgk-editorial { padding-top: clamp(1rem, 2vw, 1.8rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.rgk-home .zbcOpinion-mainGrid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.rgk-home .zbcOpinion-mainGrid:not(:has(> .zbcOpinion-rail)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rgk-home .zbcSports-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.rgk-home .zbcObit-grid, .rgk-home .zbcPodcast-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.rgk-home .zbcLocal-visual, .rgk-home .zbcOpinion-leadMedia { align-self: stretch; }
@media (max-width: 991.98px) {
 .rgk-home .rgk-editorial :is(.zbcLocal-panel, .zbcBusiness-layout, .zbcOpinion-mainGrid, .zbcFaithFact-grid, .zbcJustIn-layout) { grid-template-columns: minmax(0, 1fr); }
 .rgk-home .rgk-editorial :is(.zbcLocal-visual, .zbcOpinion-leadMedia) { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
 .rgk-home .rgk-editorial :is(.zbcLocal-visual, .zbcOpinion-leadMedia) img { width: 100%; height: 100%; }
 .rgk-home .rgk-editorial .zbcJustIn-discovery { min-height: 0; }
}
@media (max-width: 767.98px) {
 .rgk-home .rgk-editorial :is(.zbcTriDesk-grid, .zbcTechEduEnv-grid, .zbcAwh-grid, .zbcSports-grid, .zbcMustWatch-grid) { grid-template-columns: minmax(0, 1fr); }
 .rgk-home .rgk-editorial :is(.zbcMustWatch-cardLead, .zbcSports-lead) { grid-column: auto; grid-row: auto; }
 .rgk-home .rgk-editorial :is(.zbcAwh-desk, .zbcTechEduEnv-desk, .zbcTriDesk-desk) { border-right: 0; padding-inline: 0; }
 .rgk-home .rgk-editorial .zbcJustIn-tabs { flex-wrap: wrap; }
 .rgk-home .rgk-editorial :is(.zbcJustIn-viewAll, .zbcBusiness-more, .zbcLocal-more) { white-space: normal; }
 .rgk-home .rgk-editorial :is(.hero-card, .zbcJustIn-lead) { min-height: 380px; }
 .rgk-home .rgk-editorial .hero-title { font-size: clamp(1.5rem, 6vw, 2rem); }
}

/* Image links inherit the original card geometry and remain keyboard accessible. */
.rgk-storyImageLink { display: block; min-width: 0; max-width: 100%; }
.rgk-storyImageLink img { display: block; width: 100%; }
.rgk-home .rgk-editorial a:focus-visible { outline: 3px solid #bd3095; outline-offset: 3px; }
@media (max-width: 767.98px) {
 .rgk-home .rgk-editorial { max-width: 100%; }
 .rgk-home .rgk-editorial :is(.row > *, article, aside) { min-width: 0; }
 .rgk-home .rgk-editorial :is(.nav, [role="tablist"]) { flex-wrap: wrap; }
 .rgk-home .rgk-editorial [role="tab"] { min-height: 44px; }
 .offcanvas { max-width: 100vw; }
 .offcanvas a, .offcanvas button { min-height: 44px; }
}
.rgk-home :is(.featured-card, .zbcJustIn-lead) > .rgk-storyImageLink { position: absolute; inset: 0; }
.rgk-home :is(.featured-card, .zbcJustIn-lead) > .rgk-storyImageLink img { width: 100%; height: 100%; }
.rgk-home :is(.featured-card, .zbcJustIn-lead)::after { pointer-events: none; }
.rgk-home .zbcOpinion-mugshot > .rgk-storyImageLink { width: 100%; height: 100%; }
.rgk-home .zbcOpinion-mugshot:has(img) > span:empty { display: none; }
.rgk-home :is(.hero-overlay, .featured-card-overlay, .zbcJustIn-leadCopy) { pointer-events: none; }
.rgk-home :is(.hero-overlay, .featured-card-overlay, .zbcJustIn-leadCopy) :is(a, button) { pointer-events: auto; }

/* Source: assets/css/components/rgk-bylines.css */
/* The decorative gradient must not intercept the lead image's link. */
.hero-card::after { pointer-events: none; }
.hero-media { display: block; }
.hero-media:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.hero-overlay { pointer-events: none; }
.hero-overlay a { pointer-events: auto; }

/* Shared metadata uses its own typography across all story card designs. */
.rgk-storyDetails {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    min-width: 0;
    max-width: 100%;
    margin-top: .45rem;
    font-family: var(--font-ui, system-ui, sans-serif);
    font-size: .75rem;
    line-height: 1.5;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    color: #535966;
}
.rgk-storyDetails .rgk-authorLine {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
    color: inherit;
}
.rgk-storyDetails .rgk-publishedDate {
    display: block;
    white-space: nowrap;
    font: inherit;
    color: inherit;
}
:is(.hero-overlay, .featured-card-overlay, .zbcJustIn-leadCopy, .story-meta-light) .rgk-storyDetails {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}

/* Source: assets/css/components/rgk-thumbnails.css */
/* Match the top story list across compact editorial cards. */
/* Explicit frame overrides the legacy 92/94/243px HTML image heights. */
.rgk-home .lifestyle-card > .rgk-storyImageLink {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.rgk-home .lifestyle-card > .rgk-storyImageLink img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center top;
}
.rgk-home { --rgk-thumb-width: 110px; --rgk-thumb-height: 132px; }
.rgk-home :is(.lead-list-item, .zbcLocal-railItem, .zbcBusiness-supportItem, .zbcOpinion-railItem, .zbcJustIn-update, .latest-list article) {
    grid-template-columns: var(--rgk-thumb-width) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.rgk-home .zbcSports-story { grid-template-columns: minmax(0, 1fr) var(--rgk-thumb-width); align-items: start; }
.rgk-home :is(.lead-list-image, .zbcLocal-thumb, .zbcBusiness-supportThumb, .zbcOpinion-mugshot, .zbcJustIn-updateThumb, .zbcSports-thumb),
.rgk-home .latest-list article > .rgk-storyImageLink {
    display: block;
    width: var(--rgk-thumb-width);
    height: var(--rgk-thumb-height);
    min-height: 0;
    max-height: var(--rgk-thumb-height);
    aspect-ratio: auto;
    align-self: start;
    overflow: hidden;
    border-radius: 2px;
}
.rgk-home :is(.lead-list-image, .zbcLocal-thumb, .zbcBusiness-supportThumb, .zbcOpinion-mugshot, .zbcJustIn-updateThumb, .zbcSports-thumb) img,
.rgk-home .latest-list article > .rgk-storyImageLink img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center top;
}
/* A long sidebar must not stretch the analysis image into a tall strip. */
.rgk-home .rgk-editorial .zbcOpinion-leadMedia {
    align-self: start;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.rgk-home .rgk-editorial .zbcOpinion-leadMedia img { width: 100%; height: 100%; }
@media (max-width: 575.98px) {
    .rgk-home { --rgk-thumb-width: 88px; --rgk-thumb-height: 106px; }
}

/* Source: assets/css/components/rgk-menu-images.css */
.rgk-home .opinion-list article {
    display: grid;
    grid-template-columns: var(--rgk-thumb-width, 110px) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}
.rgk-exclusiveImage {
    display: block;
    width: var(--rgk-thumb-width, 110px);
    height: var(--rgk-thumb-height, 132px);
    overflow: hidden;
    border-radius: 2px;
}
.rgk-exclusiveImage img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Shared treatment for category dropdowns and overflow navigation. */
[data-rgk-overflow-nav] :is(.rgkNav-dropdown, .rgkNav-overflowMenu) {
    --bs-dropdown-link-active-bg: #f9edf5;
    --bs-dropdown-link-active-color: #a92380;
    --bs-dropdown-link-hover-bg: #f9edf5;
    --bs-dropdown-link-hover-color: #a92380;
    min-width: 15rem;
    padding: .4rem;
    border: 1px solid #e1e3e9;
    border-top: 3px solid #c53297;
    border-radius: 0 0 6px 6px;
    background: #fff;
    box-shadow: 0 8px 22px rgb(20 22 54 / 12%);
    font-family: var(--font-ui, system-ui, sans-serif);
    font-size: .875rem;
    line-height: 1.4;
    color: #191b43;
}
[data-rgk-overflow-nav] :is(.rgkNav-dropdown, .rgkNav-overflowMenu) :is(.dropdown-item, .zbcHdr-navLink, summary) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    padding: .65rem .8rem;
    border: 0;
    border-radius: 3px;
    font: inherit;
    font-weight: 600;
    white-space: normal;
    text-transform: none;
    text-decoration: none;
    color: #191b43;
    background: transparent;
}
[data-rgk-overflow-nav] :is(.rgkNav-dropdown, .rgkNav-overflowMenu) :is(a, summary):is(:hover, :focus-visible, .active, [aria-current="page"]) {
    color: #a92380;
    background: #f9edf5;
}
[data-rgk-overflow-nav] .rgkNav-overflowMenu .rgkNav-dropdown {
    min-width: 0;
    border: 0;
    border-left: 2px solid #eed7e7;
    border-radius: 0;
    box-shadow: none;
    margin: 0 .5rem .4rem;
    width: calc(100% - 1rem);
}
[data-rgk-overflow-nav] .rgkNav-nested summary::after { content: '+'; margin-left: auto; }
[data-rgk-overflow-nav] .rgkNav-nested[open] > summary::after { content: '−'; }
[data-rgk-overflow-nav] .rgkNav-nested summary::-webkit-details-marker { display: none; }
[data-rgk-overflow-nav] .rgkNav-toggle { min-width: 36px; min-height: 44px; }

/* Source: assets/css/components/rgk-just-in-fix.css */
/* Restore the template's compact 2-by-2 updates below its lead story. */
.rgk-home .zbcJustIn-update {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: .8rem;
    align-items: start;
}
.rgk-home .zbcJustIn-updateThumb {
    width: 112px;
    height: 84px;
    max-height: none;
    aspect-ratio: 4 / 3;
}
.rgk-home .zbcJustIn-updateThumb img { width: 100%; height: 100%; }
.rgk-home .zbcJustIn-updateTitle { margin: .25rem 0 .4rem; }
.rgk-home .zbcJustIn-tabs { flex-wrap: wrap; gap: .25rem; }
.rgk-home .zbcJustIn-tabs .nav-link { min-height: 44px; white-space: normal; }
@media (max-width: 767.98px) {
    .rgk-home .zbcJustIn-updates { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479.98px) {
    .rgk-home .zbcJustIn-update { grid-template-columns: 94px minmax(0, 1fr); }
    .rgk-home .zbcJustIn-updateThumb { width: 94px; height: 70.5px; }
}

/* Source: assets/css/components/rgk-editorial-desks.css */
.rgk-desk { min-width: 0; }
.rgk-deskHeading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; margin-bottom: 1.25rem; border-bottom: 2px solid #191b43; }
.rgk-deskHeading h2 { margin: 0; font-size: clamp(1.5rem, 2vw, 2rem); }
.rgk-deskHeading > a { flex-shrink: 0; color: #b52e8d; font: 600 .8rem/1.5 var(--font-ui, system-ui, sans-serif); }
.rgk-deskStory { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.15rem 0; border-top: 1px solid #e3e5eb; }
.rgk-deskImage { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; }
.rgk-home .rgk-deskImage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center top; }
.rgk-deskCopy { min-width: 0; }
.rgk-home .rgk-deskCopy h3 { margin: 0 0 .5rem; font-size: 1.08rem; line-height: 1.35; }
.rgk-deskStoryLead { display: block; border-top: 0; padding-top: 0; padding-bottom: 1.4rem; }
.rgk-deskStoryLead .rgk-deskImage { aspect-ratio: 16 / 9; margin-bottom: 1rem; }
.rgk-home .rgk-deskStoryLead h3 { font-size: clamp(1.35rem, 1.8vw, 1.7rem); }
.rgk-home .rgk-deskStoryLead .rgk-deskSummary { color: #535966; font-size: .95rem; line-height: 1.55; -webkit-line-clamp: 2; }
.rgk-deskStory .rgk-storyDetails { margin-top: .5rem; }
@media (max-width: 575.98px) {
    .rgk-deskStory:not(.rgk-deskStoryLead) { grid-template-columns: 88px minmax(0, 1fr); gap: .8rem; }
}

/* Source: assets/css/components/rgk-reader.css */
.rgk-reader, .rgk-insights { --reader-ink: #181b35; --reader-muted: #575e6c; --reader-line: #dfe2e8; --reader-soft: #f5f5f8; color: var(--reader-ink); }
[data-bs-theme="dark"] :is(.rgk-reader, .rgk-insights) { --reader-ink: #f0f0f5; --reader-muted: #b9bfcc; --reader-line: #363c4c; --reader-soft: #202536; }
.rgk-reader a, .rgk-insights a { color: inherit; }
.rgk-reader a:hover, .rgk-insights a:hover { color: var(--zbc-red, #c63690); text-decoration: underline; text-underline-offset: .18em; }
.rgk-reader a:focus-visible, .rgk-reader button:focus-visible, .rgk-insights a:focus-visible { outline: 3px solid #c63690; outline-offset: 4px; }
.rgk-readerCrumbs { font: .85rem/1.5 var(--font-ui, system-ui); color: var(--reader-muted); margin-bottom: 1.8rem; }
.rgk-articleHeader { max-width: 920px; margin: 0 auto 2rem; }
.rgk-articleHeader h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.12; letter-spacing: -.025em; margin: .65rem 0 1.2rem; overflow-wrap: break-word; }
.rgk-standfirst { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.55; color: var(--reader-muted); }
.rgk-reader .rgk-storyDetails, .rgk-insights .rgk-storyDetails { color: var(--reader-muted); }
.rgk-readerNote { color: var(--reader-muted); font: .8rem/1.5 var(--font-ui, system-ui); margin: .6rem 0; }
.rgk-readerTools { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--reader-line); font: .85rem/1.4 var(--font-ui, system-ui); }
.rgk-readerTools button, .rgk-pagination a, .rgk-sectionLinks a { background: var(--reader-soft); color: var(--reader-ink); border: 1px solid var(--reader-line); border-radius: 4px; padding: .65rem .9rem; min-height: 44px; }
.rgk-readerTools [role="status"]:empty { display: none; }
.rgk-articleHero { margin: 0 auto 2.5rem; max-width: 1000px; }
.rgk-articleHero img { width: 100%; height: auto; display: block; max-height: 720px; object-fit: contain; }
.rgk-readingGrid { display: grid; grid-template-columns: minmax(0, 720px) minmax(220px, 300px); gap: clamp(2rem, 5vw, 5rem); max-width: 1100px; margin: auto; align-items: start; }
.rgk-articleBody { font-size: 1.2rem; line-height: 1.75; overflow-wrap: anywhere; }
.rgk-articleBody.rgk-largeText { font-size: 1.4rem; }
.rgk-articleBody p { margin: 0 0 1.4em; }
.rgk-articleBody h2, .rgk-articleBody h3 { line-height: 1.25; margin: 1.5em 0 .65em; }
.rgk-articleBody a { color: var(--zbc-red, #c63690); text-decoration: underline; }
.rgk-articleBody blockquote { border-left: 4px solid #c63690; padding: .2rem 0 .2rem 1.4rem; margin: 1.5rem 0; font-size: 1.25em; }
.rgk-articleBody figure { margin: 2rem 0; }
.rgk-articleBody img { max-width: 100%; width: 100%; height: auto; display: block; }
.rgk-articleBody figcaption { margin-top: .5rem; font: .8rem/1.5 var(--font-ui, system-ui); color: var(--reader-muted); }
.rgk-articleBody table { display: block; overflow-x: auto; width: 100%; font-size: .9em; }
.rgk-articleBody :is(td, th) { padding: .6rem; border: 1px solid var(--reader-line); }
.rgk-articleBody pre { white-space: pre-wrap; background: var(--reader-soft); padding: 1rem; }
.rgk-articleEnd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-block: 1px solid var(--reader-line); padding: 1.4rem 0; margin: 2rem 0; font: 600 .9rem/1.5 var(--font-ui, system-ui); }
.rgk-readerCard { height: 100%; min-width: 0; padding-bottom: 1.3rem; border-bottom: 1px solid var(--reader-line); }
.rgk-readerCardImage { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: .8rem; border-radius: 3px; }
.rgk-readerCardImage img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.rgk-readerCardImage img.rgk-imageFallback, .rgk-readerCardImage img[src$="rglogo.webp"] { object-fit: contain; background: var(--reader-soft); }
.rgk-readerCard h3 { font-size: 1.3rem; line-height: 1.3; margin: .35rem 0 .6rem; }
.rgk-readerCard p { color: var(--reader-muted); line-height: 1.5; }
.rgk-related h2 { font-size: 1.4rem; border-top: 3px solid #c63690; padding-top: .8rem; margin-bottom: 1.2rem; }
.rgk-related .rgk-readerCard { height: auto; margin-bottom: 1rem; }
.rgk-related .rgk-readerCard h3 { font-size: 1.1rem; }
.rgk-listingHeading { margin-bottom: 1.8rem; padding-bottom: 1rem; border-bottom: 2px solid var(--reader-ink); }
.rgk-listingHeading h1 { font-size: clamp(2rem, 4vw, 3rem); }
.rgk-sectionLinks, .rgk-pagination { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.4rem 0 2rem; }
.rgk-pagination { justify-content: space-between; margin-top: 2.5rem; }
.rgk-insights { border-top: 1px solid var(--reader-line); background: var(--reader-soft); }
.rgk-insightsHeading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 1rem; }
.rgk-insightsHeading h3 { font-size: 1.3rem; }
.rgk-insightsHeading a { font: 600 .8rem/1.5 var(--font-ui, system-ui); color: var(--zbc-red, #c63690); }
.rgk-insights .rgk-readerCard { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 1rem; height: auto; margin-bottom: 1rem; padding-bottom: 1rem; }
.rgk-insights .rgk-readerCardImage { aspect-ratio: 4 / 3; margin: 0; }
.rgk-insights .rgk-readerCard h3 { font-size: 1.1rem; }
.rgk-insightsLead .rgk-readerCard { grid-template-columns: minmax(0, 45%) minmax(0, 1fr); align-items: start; padding-bottom: 1.5rem; }
.rgk-insightsLead .rgk-readerCardImage { aspect-ratio: 4 / 3; }
.rgk-insightsLead .rgk-readerCard h3 { font-size: 1.5rem; }
@media (max-width: 991.98px) { .rgk-readingGrid { grid-template-columns: minmax(0, 1fr); max-width: 720px; } .rgk-related { border-top: 1px solid var(--reader-line); padding-top: 1rem; } }
@media (max-width: 575.98px) { .rgk-articleBody { font-size: 1.1rem; line-height: 1.7; } .rgk-insightsLead .rgk-readerCard { display: block; } .rgk-insightsLead .rgk-readerCardImage { aspect-ratio: 16 / 9; margin-bottom: 1rem; } }

/* Source: assets/css/components/rgk-station.css */
.rgk-articleHero figcaption,.rgk-articleBody figure figcaption{font-size:.85rem;font-style:italic;line-height:1.5;margin:0;padding:.5rem 0;color:var(--bs-secondary-color,#606575);text-align:left}
.rgk-articleHero img,.rgk-articleBody figure img{display:block}
.rgk-station{max-width:960px;margin:auto;padding:2rem 1rem 4rem;font-size:1.1rem;line-height:1.8;color:var(--bs-body-color)}
.rgk-station h1{font-size:clamp(2rem,4vw,3.2rem);margin:1rem 0 1.5rem}.rgk-station h2{font-size:1.45rem;margin:2rem 0 .7rem}.rgk-station address{font-style:normal}.rgk-station a{color:#c63690}.rgk-station nav{display:flex;flex-wrap:wrap;gap:1rem}.rgk-station .rgk-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.rgk-station li{margin:.4rem 0}
.rgk-live-player{position:fixed;right:16px;bottom:16px;z-index:11000;width:min(360px,calc(100vw - 24px));background:var(--bs-body-bg,#fff);color:var(--bs-body-color,#181833);border:1px solid var(--bs-border-color,#ddd);border-radius:12px;box-shadow:0 5px 30px #0004;overflow:hidden}
.rgk-live-player[hidden]{display:none!important}.rgk-live-player header{display:flex;align-items:center;justify-content:space-between;background:#c63690;color:white;padding:8px 12px}.rgk-live-player button{border:0;background:transparent;color:inherit;min-height:44px;min-width:44px;cursor:pointer}.rgk-live-player button:focus-visible{outline:2px solid currentColor;outline-offset:-3px}.rgk-live-player header button{font-size:1.5rem}.rgk-live-player nav{display:flex;padding:4px 10px;gap:12px}.rgk-live-player nav button[aria-pressed=true]{border-bottom:3px solid #c63690}.rgk-live-player audio{width:100%;padding:8px}.rgk-live-player iframe{display:block;width:100%;height:203px;border:0}.rgk-live-player p{padding:0 12px;font-size:.85rem;margin:8px 0}.rgk-live-player.is-mini #rgk-live-controls{height:0;overflow:hidden}.rgk-live-player.is-mini{width:260px}
#rgk-browse-frame{position:fixed;inset:0;width:100%;height:100%;border:0;background:var(--bs-body-bg,#fff);z-index:1090}.rgk-browsing{overflow:hidden}
.rgk-live-player{width:min(440px,calc(100vw - 24px))}.rgk-live-player iframe{height:300px}.rgk-live-player p a{color:inherit;text-decoration:underline}
@media(max-width:575px){.rgk-station .rgk-contact-grid{grid-template-columns:1fr}.rgk-live-player{right:12px;bottom:max(12px,env(safe-area-inset-bottom))}}

/* Source: assets/css/components/rgk-refinements.css */
/* Header uses the available width; overflow remains in the accessible More menu. */
@media (min-width: 1200px) {
    .zbcHdr-grid { grid-template-columns: 122px minmax(0, 1fr); column-gap: 20px; }
    .zbcHdr-navLink { padding-inline: 10px; }
}
.zbcHdr-utilityLinks a, .zbcHdr-date { color: var(--zbcHdr-muted); }
.zbcHdr-socialLink { color: var(--zbcHdr-text); }
.zbcHdr-socialLink:hover, .zbcHdr-utilityLinks a:hover { color: var(--zbcHdr-accent, #c73591); }
.zbcHdr-socialLink:focus-visible, .zbcHdr-utilityLinks a:focus-visible { outline: 2px solid #c73591; outline-offset: 3px; }
.rgk-searchPage { max-width: 1100px; min-height: 55vh; }
.rgk-searchPage .gsc-control-cse { padding: 0; background: transparent; border: 0; font-family: inherit; }
.rgk-searchPage .gsc-search-button-v2 { background: #a52377; border-color: #a52377; border-radius: 5px; padding: 14px 24px; }
.rgk-searchPage .gsc-input-box { border-radius: 5px; }
.rgk-searchPage .gs-title, .rgk-searchPage .gs-title b { color: #a52377 !important; }
.rgk-searchPage .gsc-webResult.gsc-result { padding: 18px 0; border: 0; background: transparent; }
[data-bs-theme="dark"] .rgk-searchPage .gsc-control-cse,
[data-bs-theme="dark"] .rgk-searchPage .gsc-result-info,
[data-bs-theme="dark"] .rgk-searchPage .gs-snippet { color: #e5e5eb; }
[data-bs-theme="dark"] .rgk-searchPage .gs-title,
[data-bs-theme="dark"] .rgk-searchPage .gs-title b { color: #f38acb !important; }
@media (max-width: 575px) { .rgk-searchPage .gsc-search-button-v2 { padding: 12px; } }

/* Source: assets/css/components/rgk-topics-audio.css */
.zbcHdr-utilityRow { --rgk-utility-ink: #9b297d; }
.zbcHdr-utilityRow :is(.zbcHdr-date,.zbcHdr-utilityLinks a,.zbcHdr-socialLink,.zbcHdr-socialLink i) { color: var(--rgk-utility-ink); }
.zbcHdr-utilityRow .zbcHdr-socialLink { background: #f8edf5; }
[data-bs-theme="dark"] .zbcHdr-utilityRow { --rgk-utility-ink: #ed9dd6; }
[data-bs-theme="dark"] .zbcHdr-utilityRow .zbcHdr-socialLink { background: #35283e; }
[data-rgk-overflow-nav] > .rgkNav-branch { position: relative; }
[data-rgk-overflow-nav] > .rgkNav-branch > .rgkNav-toggle { min-width: 28px; padding-inline: 5px; }
[data-rgk-overflow-nav] .rgkNav-toggle:focus-visible { outline: 2px solid #a52c83; outline-offset: -3px; box-shadow: none; }
[data-rgk-overflow-nav] > .rgkNav-branch > .dropdown-menu { margin-top: 0; }
[data-bs-theme="dark"] [data-rgk-overflow-nav] :is(.rgkNav-dropdown,.rgkNav-overflowMenu) { background: #222137; color: #eeeaf3; border-color: #48405a; border-top-color: #cf64af; }
[data-bs-theme="dark"] [data-rgk-overflow-nav] :is(.rgkNav-dropdown,.rgkNav-overflowMenu) :is(a,summary) { color: #eeeaf3; }
[data-bs-theme="dark"] [data-rgk-overflow-nav] :is(.rgkNav-dropdown,.rgkNav-overflowMenu) :is(a,summary):hover { background: #3c2943; }
.rgk-listen { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-block: 1rem; font: 500 .85rem/1.4 var(--font-ui,system-ui,sans-serif); }
.rgk-listen[hidden], .rgk-listen [hidden] { display: none !important; }
.rgk-listen button,.rgk-listen select { border: 1px solid #bd80ad; border-radius: 6px; background: transparent; color: inherit; padding: .5rem .7rem; min-height: 44px; }
.rgk-listen [data-listen-play] { color: #982377; background: #faf0f7; font-weight: 650; }
.rgk-listen button:focus-visible,.rgk-listen select:focus-visible { outline: 2px solid #b52d8d; outline-offset: 2px; }
.rgk-listen [role="status"] { color: #666276; }
[data-bs-theme="dark"] .rgk-listen [data-listen-play] { color: #f2acd9; background: #37293b; }
[data-bs-theme="dark"] .rgk-listen [role="status"] { color: #c5bdd0; }

/* Source: assets/css/components/rgk-video.css */
.rgk-videoHero { margin: 1.5rem auto 2rem; max-width: 1100px; }
.rgk-videoPoster { position: relative; aspect-ratio: 16/9; background: #15152c; overflow: hidden; border-radius: 6px; }
.rgk-videoPoster img,.rgk-videoPoster iframe { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; border: 0; }
.rgk-videoPoster button { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; border: 0; background: linear-gradient(transparent,#0005); color: #fff; font: 700 1rem/1.4 system-ui,sans-serif; }
.rgk-videoPoster button i { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: #b72b8e; font-size: 2.4rem; }
.rgk-videoPoster button:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.rgk-videoHero figcaption { font-size: .82rem; font-style: italic; margin-top: .5rem; color: var(--bs-secondary-color,#666); }

/* Shared editorial rhythm, aligned with the article and category pages. */
.rgk-home {
    --home-ink: #181b35;
    --home-muted: #575e6c;
    --home-line: #dfe2e8;
    --home-soft: #f5f5f8;
    color: var(--home-ink);
}
[data-bs-theme="dark"] .rgk-home {
    --home-ink: #f0f0f5;
    --home-muted: #b9bfcc;
    --home-line: #363c4c;
    --home-soft: #202536;
}
.rgk-home > .rgk-editorial {
    padding-block: clamp(1.5rem, 3vw, 2.75rem);
}
.rgk-home .rgk-editorial :is(.section-heading, [class$="-heading"]) {
    gap: .75rem 1.25rem;
    flex-wrap: wrap;
    align-items: baseline;
    margin-bottom: 1.25rem;
}
.rgk-home .rgk-editorial :is(.section-heading, [class$="-heading"]) h2 {
    font-family: var(--font-editorial, Georgia, serif);
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-bottom: .25rem;
    color: var(--home-ink);
    text-wrap: balance;
}
.rgk-home .rgk-editorial article :is(h3, h4),
.rgk-home .rgk-editorial .lead-list-item h2 {
    font-family: var(--font-editorial, Georgia, serif);
    font-size: clamp(1.08rem, 1.3vw, 1.3rem);
    line-height: 1.3;
    letter-spacing: -.012em;
    margin-block: .35rem .65rem;
}
.rgk-home .rgk-editorial :is(.zbcSports-lead, .zbcBusiness-lead, .zbcLocal-copy, .rgk-insightsLead) h3 {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1.25;
}
.rgk-home .rgk-editorial article p {
    font-size: 1rem;
    line-height: 1.6;
    margin-block: .65rem .9rem;
}
.rgk-home .rgk-editorial .rgk-lead-details p {
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    color: var(--home-muted);
    display: block;
    overflow: visible;
}
.rgk-home .rgk-editorial .rgk-storyDetails {
    font-family: var(--font-ui, system-ui, sans-serif);
    font-size: .82rem;
    line-height: 1.55;
    gap: .2rem;
}
.rgk-home .rgk-editorial .story-meta:not(.story-meta-light) { color: var(--home-muted); }
.rgk-home .rgk-editorial :is(.hero-overlay, .zbcJustIn-leadCopy, .featured-card-overlay) .rgk-storyDetails { color: #fff; }
.rgk-home .rgk-editorial :is(h2, h3, h4) a:hover {
    text-decoration: underline;
    text-underline-offset: .16em;
    text-decoration-thickness: 1px;
}
.rgk-home .rgk-editorial :is(.rgk-readerCard, .lifestyle-card) {
    background: transparent;
    box-shadow: none;
}
.rgk-home .rgk-editorial .lifestyle-card { border-bottom: 1px solid var(--home-line); }
.rgk-home .rgk-editorial :is(.lifestyle-card-body, .lifestyle-card-copy) { padding: 1rem 0; }
.rgk-home .rgk-editorial [role="tab"] { min-height: 44px; }
.rgk-home .rgk-editorial :is(.section-heading, [class$="-heading"]) > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-ui, system-ui, sans-serif);
    font-size: .85rem;
}
.rgk-home .rgk-editorial :is(article, aside, [class*="Grid"], [class*="grid"]) { min-width: 0; }
.rgk-home .rgk-editorial img { max-width: 100%; }
@media (max-width: 575.98px) {
    .rgk-home .rgk-editorial > .container-xxl { padding-inline: 1rem; }
    .rgk-home .rgk-editorial :is(.hero-overlay, .zbcJustIn-leadCopy) { padding: 1.1rem; }
    .rgk-home .rgk-editorial .hero-title { font-size: clamp(1.65rem, 7vw, 2.15rem); line-height: 1.15; }
    .rgk-home .rgk-editorial .rgk-insightsHeading { flex-wrap: wrap; }
    .rgk-home .rgk-editorial .rgk-insights .rgk-readerCard { gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .rgk-home .rgk-editorial *, .rgk-home .rgk-editorial *::before, .rgk-home .rgk-editorial *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Reference sizes: matching portrait lead rail and Just In thumbnails. */
.rgk-home .rgk-editorial .lead-list-item { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; }
.rgk-home .rgk-editorial .lead-list-image { width: 110px; height: 132px; max-height: 132px; }
.rgk-home .rgk-editorial .zbcJustIn-update { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; }
.rgk-home .rgk-editorial .zbcJustIn-updateThumb { width: 110px; height: 132px; max-height: 132px; aspect-ratio: 5 / 6; }
.rgk-home .rgk-editorial :is(.lead-list-item h2, .zbcJustIn-updateTitle) { font-size: 1.25rem; line-height: 1.3; }
.rgk-home .rgk-editorial :is(.lead-list-item, .zbcJustIn-update) .rgk-storyDetails { font-size: .875rem; line-height: 1.55; }
.rgk-home .rgk-editorial :is(.lead-list-image, .zbcJustIn-updateThumb) img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
@media (max-width: 575.98px) {
    .rgk-home .rgk-editorial .lead-list-item { grid-template-columns: 88px minmax(0, 1fr); }
    .rgk-home .rgk-editorial .lead-list-image { width: 88px; height: 106px; max-height: 106px; }
    .rgk-home .rgk-editorial .zbcJustIn-update { grid-template-columns: 88px minmax(0, 1fr); }
    .rgk-home .rgk-editorial .zbcJustIn-updateThumb { width: 88px; height: 106px; max-height: 106px; }
    .rgk-home .rgk-editorial :is(.lead-list-item h2, .zbcJustIn-updateTitle) { font-size: 1.125rem; }
}

/* Deliberate phone/tablet layouts; desktop editorial grids are preserved. */
@media (max-width: 1199.98px) {
    .rgk-home { --compact-image-width: 104px; --compact-image-height: 125px; }
    .rgk-home .rgk-editorial :is(.lead-list-item, .zbcJustIn-update, .zbcLocal-railItem, .zbcBusiness-supportItem) {
        display: grid !important;
        grid-template-columns: var(--compact-image-width) minmax(0, 1fr) !important;
        align-items: start;
        gap: 14px;
    }
    .rgk-home .rgk-editorial .zbcSports-story {
        grid-template-columns: minmax(0, 1fr) var(--compact-image-width);
        gap: 14px;
    }
    /* Override legacy auto-height rules, which undo the thumbnail crop on phones. */
    .rgk-home .rgk-editorial :is(.lead-list-image, .zbcJustIn-updateThumb, .zbcLocal-thumb, .zbcBusiness-supportThumb, .zbcSports-thumb) {
        display: block;
        width: var(--compact-image-width) !important;
        height: var(--compact-image-height) !important;
        min-height: 0 !important;
        max-height: var(--compact-image-height) !important;
        aspect-ratio: auto !important;
        overflow: hidden;
        border-radius: 5px;
        align-self: start;
    }
    .rgk-home .rgk-editorial :is(.lead-list-image, .zbcJustIn-updateThumb, .zbcLocal-thumb, .zbcBusiness-supportThumb, .zbcSports-thumb) img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center top !important;
    }
    .rgk-home .rgk-editorial :is(.lead-list-item h2, .zbcJustIn-updateTitle, .zbcLocal-railTitle, .zbcBusiness-supportTitle, .zbcSports-story h3) {
        font-size: 1.125rem;
        line-height: 1.32;
        margin: .25rem 0 .55rem;
    }
    .rgk-home .rgk-editorial :is(.lead-list-item, .zbcJustIn-update, .zbcLocal-railItem, .zbcBusiness-supportItem, .zbcSports-story) .rgk-storyDetails {
        font-size: .78rem;
        line-height: 1.45;
        margin-top: .4rem;
        gap: .12rem;
    }
    .rgk-home .rgk-editorial :is(.zbcJustIn-updateMeta, .story-meta) { margin-top: .5rem; }
    .rgk-home .rgk-editorial :is(.story-kicker, .zbcJustIn-updateCategory, .zbcBusiness-supportCategory) {
        font-size: .67rem;
        line-height: 1.4;
        letter-spacing: .065em;
    }
    .rgk-home .zbcWatch-shell { min-height: 0; height: auto; padding: 1rem; }
    .rgk-home .zbcWatch-shell .tab-pane > img {
        float: left;
        width: 90px !important;
        height: 90px !important;
        margin: .25rem 1rem .5rem 0;
    }
    .rgk-home .zbcWatch-shell .tab-pane::after { content: ''; display: block; clear: both; }
    .rgk-home .zbcWatch-channelTitle { font-size: 1.2rem; margin: .75rem 0 .35rem; }
    .rgk-home .zbcWatch-shell .tab-pane > p { font-size: .95rem; line-height: 1.5; margin-bottom: .65rem; }
    .rgk-home .zbcWatch-title { font-size: 1.5rem; }
}
@media (max-width: 767.98px) {
    .rgk-home > .rgk-editorial { padding-block: 1.4rem; }
    .rgk-home .rgk-editorial > .container-xxl { padding-inline: 18px; }
    .rgk-home .rgk-editorial .lead-list-item { padding-block: 1rem !important; }
    .rgk-home .rgk-editorial .zbcJustIn-updates { grid-template-columns: minmax(0, 1fr); border-top-width: 2px; }
    .rgk-home .rgk-editorial .zbcJustIn-update { padding: 1rem 0; border-inline: 0; }
    .rgk-home .rgk-editorial .rgk-lead-details p { font-size: 1.05rem; line-height: 1.6; margin: .65rem 0; }
    .rgk-home .rgk-editorial .hero-card { min-height: 390px; }
    .rgk-home .rgk-editorial :is(.hero-title, .zbcJustIn-leadTitle) { font-size: clamp(1.55rem, 6.2vw, 2rem); line-height: 1.16; }
    .rgk-home .rgk-editorial :is(.zbcLocal-lead, .zbcBusiness-leadCopy) { padding: 1rem 0; }
    .rgk-home .rgk-editorial .rgk-insights .rgk-readerCard:not(.rgk-insightsLead .rgk-readerCard) { grid-template-columns: 104px minmax(0, 1fr); }
    .rgk-home .rgk-editorial .rgk-insights .rgk-readerCardImage { border-radius: 5px; }
    .rgk-home .rgk-editorial :is(.zbcLocal-rail, .zbcBusiness-support) { padding-inline: 0; }
}
@media (max-width: 359.98px) {
    .rgk-home { --compact-image-width: 88px; --compact-image-height: 106px; }
    .rgk-home .rgk-editorial > .container-xxl { padding-inline: 14px; }
    .rgk-home .rgk-editorial :is(.lead-list-item, .zbcJustIn-update) { gap: 12px; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .rgk-home .zbcLead-shell > .container-xxl > .row > :nth-child(1) { width: 58%; }
    .rgk-home .zbcLead-shell > .container-xxl > .row > :nth-child(2) { width: 42%; }
    .rgk-home .zbcLead-shell > .container-xxl > .row > :nth-child(3) { width: 100%; }
    .rgk-home .zbcLead-shell .lead-list { display: flex !important; flex-direction: column; gap: 0; }
    .rgk-home .zbcLead-shell .lead-list-item { width: 100%; padding-block: .85rem; }
    .rgk-home .rgk-editorial .hero-title { font-size: clamp(1.6rem, 2.9vw, 2.3rem); }
    .rgk-home .rgk-editorial .zbcWatch-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
    .rgk-home .rgk-editorial :is(.zbcTriDesk-grid, .zbcTechEduEnv-grid, .zbcAwh-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .rgk-home .rgk-editorial :is(.zbcTriDesk-grid, .zbcTechEduEnv-grid, .zbcAwh-grid) > :only-child { grid-column: 1 / -1; }
    .rgk-home .rgk-editorial .zbcJustIn-updates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}