.bnp-featured,
.bnp-featured *,
.bnp-breaking,
.bnp-breaking *,
.bnp-videos,
.bnp-videos *,
.bnp-singlevideo,
.bnp-singlevideo *,
.bnp-title,
.bnp-title * {
    font-family: inherit;
    box-sizing: border-box;
}

.bnp-featured,
.bnp-videos,
.bnp-singlevideo,
.bnp-title {
    position: relative;
}

.bnp-featured::before,
.bnp-featured::after,
.bnp-videos::before,
.bnp-videos::after,
.bnp-singlevideo::before,
.bnp-singlevideo::after,
.bnp-title::before,
.bnp-title::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #dedede;
    pointer-events: none;
}

.bnp-featured::before,
.bnp-videos::before,
.bnp-singlevideo::before,
.bnp-title::before {
    top: -16px;
}

.bnp-featured::after,
.bnp-videos::after,
.bnp-singlevideo::after,
.bnp-title::after {
    bottom: -16px;
}


.bnp-featured {
    background: var(--bnp-bg, #f7f5f1);
    color: var(--bnp-text, #000000);
    padding: 40px 0;
    margin: 32px 0;
    border-radius: 14px;
    border-top: var(--bnp-border-width, 3px) solid var(--bnp-border-color, #fa5a07);
    border-bottom: var(--bnp-border-width, 3px) solid var(--bnp-border-color, #fa5a07);
    /* Transparent side borders of the same width: without them, border-radius
       wraps the top/bottom border colour around the corners and down the
       sides, which reads as stray left/right borders. */
    border-left: var(--bnp-border-width, 3px) solid transparent;
    border-right: var(--bnp-border-width, 3px) solid transparent;
}

.bnp-featured__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 1;
}

.bnp-featured__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.bnp-featured__bar {
    width: 6px;
    height: 32px;
    background: var(--bnp-accent, #dd9933);
    border-radius: 3px;
    flex-shrink: 0;
}

.bnp-featured__title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--bnp-accent, #dd9933);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
}

.bnp-featured__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.bnp-featured__card {
    background: var(--bnp-card, #e8e6e0);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.25s ease, filter 0.25s ease;
    display: flex;
    flex-direction: column;
}

.bnp-featured__card:hover {
    transform: translateY(-3px);
    filter: brightness(0.97);
}

.bnp-featured__link {
    display: flex;
    flex-direction: column;
    color: inherit !important;
    text-decoration: none !important;
    height: 100%;
}

.bnp-featured__image {
    position: relative;
    width: 100%;
    /* Fixed 16:9 box for every card regardless of the source image size.
       padding-top (not aspect-ratio) so a theme rule like
       `img { height: auto }` cannot collapse the box and leave a grey strip. */
    padding-top: 56.25%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.08);
}

.bnp-featured__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.bnp-featured__card:hover .bnp-featured__image img {
    transform: scale(1.04);
}

.bnp-featured__content {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.bnp-featured__eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--bnp-accent, #dd9933);
    margin: 0;
    line-height: 1.2;
}

.bnp-featured__heading {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: var(--bnp-text, #000000);
}

.bnp-featured__excerpt {
    font-size: 0.92rem;
    margin: 0;
    opacity: 0.85;
    line-height: 1.5;
    flex: 1;
}

.bnp-featured__date {
    font-size: 0.7rem;
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: block;
    font-weight: 600;
    margin-top: auto;
}

@media (max-width: 1024px) {
    .bnp-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .bnp-featured { padding: 28px 0; margin: 20px 0; border-radius: 10px; }
    .bnp-featured__inner { padding: 0 16px; }
    .bnp-featured__title { font-size: 1.2rem; }
    .bnp-featured__heading { font-size: 1rem; }
}

@media (max-width: 480px) {
    .bnp-featured__grid { grid-template-columns: 1fr; }
}


.bnp-breaking {
    width: 100%;
    height: 30px;
    margin-top: 0;
    background: var(--bnp-bb-bg, #1c1c1c);
    color: var(--bnp-bb-text, #ffffff);
    display: flex;
    align-items: center;
    z-index: 9998;
    border-radius: 0 0 5px 5px;
}

/* Full-width: break out of the theme container so the bar never looks
   narrow/short on tablets and phones.
   --bnp-scrollbar (set by frontend.js) is the vertical scrollbar width.
   100vw includes that scrollbar, so we subtract it to avoid horizontal
   overflow (the stray white strip on the right). It falls back to 0px
   if the script has not run yet (e.g. mobile overlay scrollbars). */
.bnp-breaking--full {
    border-radius: 0 0 5px 5px;
    margin-top: 0;
    margin-left: calc((100% - 100vw + var(--bnp-scrollbar, 0px)) / 2);
    margin-right: calc((100% - 100vw + var(--bnp-scrollbar, 0px)) / 2);
    width: calc(100vw - var(--bnp-scrollbar, 0px));
    max-width: calc(100vw - var(--bnp-scrollbar, 0px));
}

.bnp-breaking--full .bnp-breaking__inner {
    border-radius: 0 0 5px 5px;
}

/* The bar is built to sit flush under a site header. Neutralise any top
   spacing the page-builder wrapper adds above it, so there is no gap
   between the header and the bar. Browsers without :has() simply ignore
   this; the bar's own margin-top is already 0. */
.elementor-widget-shortcode:has(.bnp-breaking),
.elementor-widget-shortcode:has(.bnp-breaking) > .elementor-widget-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.bnp-breaking__prefix-text--short { display: none; }

.bnp-breaking__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 0 0 5px 5px;
}

.bnp-breaking__prefix {
    flex-shrink: 0;
    background: var(--bnp-bb-prefix-bg, rgba(0, 0, 0, 0.32));
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    color: var(--bnp-bb-text, #ffffff);
    white-space: nowrap;
}

.bnp-breaking__pulse {
    width: 7px;
    height: 7px;
    background: var(--bnp-bb-text, #ffffff);
    border-radius: 50%;
    animation: bnp-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes bnp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}

.bnp-breaking__ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

/* The fade only makes sense while scrolling (content enters/exits the
   edges). For static content it would just fade the start of the text,
   so JS adds this class only when the ticker actually scrolls. */
.bnp-breaking__ticker--scroll {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.bnp-breaking__track {
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    will-change: transform;
    /* Static content fills the ticker and stays left-aligned. */
    width: 100%;
    padding: 0 20px;
}

/* Short content that fits: no animation. The trailing separator is only
   needed for the seamless marquee, so hide it here. */
.bnp-breaking__track:not(.bnp-breaking__track--scroll) > .bnp-breaking__sep:last-child {
    display: none;
}

/* Long content: JS duplicates the track and adds this class to scroll. */
.bnp-breaking__track--scroll {
    width: max-content;
    padding: 0 0 0 20px;
    animation: bnp-marquee var(--bnp-bb-speed, 30s) linear infinite;
}

.bnp-breaking__track--scroll:hover { animation-play-state: paused; }

@keyframes bnp-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.bnp-breaking__item {
    color: var(--bnp-bb-text, #ffffff) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.82rem;
    transition: opacity 0.15s ease;
}

.bnp-breaking__item:hover { text-decoration: underline !important; opacity: 0.92; }
.bnp-breaking__sep { opacity: 0.55; font-weight: 400; font-size: 0.78rem; }

.bnp-breaking__item-title { font-weight: 600; }

/* Excerpt (single marked entry) and relative time (custom text): muted,
   lighter weight so the headline/custom line still reads first. */
.bnp-breaking__excerpt,
.bnp-breaking__time {
    font-weight: 400;
    opacity: 0.72;
    margin-left: 7px;
}

.bnp-breaking__time { font-style: italic; }

/* Short custom line that fits without scrolling: stretch the item across
   the ticker and pin the timestamp to the right edge, so the leftover
   space reads as an intentional newsroom layout instead of dead space. */
.bnp-breaking__track:not(.bnp-breaking__track--scroll) .bnp-breaking__item--custom {
    display: flex;
    width: 100%;
    align-items: baseline;
}

.bnp-breaking__track:not(.bnp-breaking__track--scroll) .bnp-breaking__item--custom .bnp-breaking__time {
    margin-left: auto;
    padding-left: 24px;
}

@media (max-width: 600px) {
    .bnp-breaking__prefix { padding: 0 10px; font-size: 0.65rem; letter-spacing: 0.4px; gap: 6px; }
    .bnp-breaking__pulse { width: 6px; height: 6px; }
    .bnp-breaking__item { font-size: 0.74rem; }
    .bnp-breaking__prefix-text--full  { display: none; }
    .bnp-breaking__prefix-text--short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    .bnp-breaking__track--scroll { animation: none; }
    .bnp-breaking__pulse { animation: none; }
}


.bnp-videos {
    background: var(--bnp-vb-bg, #f7f5f1);
    color: var(--bnp-vb-text, #000000);
    padding: 44px 0;
    margin: 32px 0;
    border-radius: 14px;
    border-top: var(--bnp-border-width, 3px) solid var(--bnp-border-color, #fa5a07);
    border-bottom: var(--bnp-border-width, 3px) solid var(--bnp-border-color, #fa5a07);
    /* See .bnp-featured: transparent side borders stop border-radius from
       wrapping the border colour down the left/right edges. */
    border-left: var(--bnp-border-width, 3px) solid transparent;
    border-right: var(--bnp-border-width, 3px) solid transparent;
}

.bnp-videos__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 1;
}

.bnp-videos__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
}

.bnp-videos__bar {
    width: 6px;
    height: 32px;
    background: var(--bnp-vb-accent, #dd9933);
    border-radius: 3px;
    flex-shrink: 0;
}

.bnp-videos__title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--bnp-vb-accent, #dd9933);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
}

.bnp-videos__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.bnp-videos__grid--cols-1 { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; }
.bnp-videos__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bnp-videos__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bnp-videos__grid--compact {
    margin-top: 22px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    justify-content: start;
}
.bnp-videos__card--compact .bnp-videos__content { padding: 10px 12px 12px; gap: 6px; }
.bnp-videos__card--compact .bnp-videos__heading { font-size: 0.85rem; line-height: 1.3; }
.bnp-videos__card--compact .bnp-videos__eyebrow { font-size: 0.58rem; letter-spacing: 1px; }
.bnp-videos__card--compact .bnp-videos__eyebrow::before { width: 10px; height: 10px; }
.bnp-videos__btn--small { padding: 5px 12px; font-size: 0.72rem; gap: 5px; }
.bnp-videos__btn--small::after { font-size: 0.85rem; }

.bnp-videos__card {
    background: var(--bnp-vb-card, #e8e6e0);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.bnp-videos__card:hover {
    transform: translateY(-3px);
    filter: brightness(0.97);
}

.bnp-videos__embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
    overflow: hidden;
}

.bnp-videos__embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
    max-width: 100%;
}

.bnp-videos__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--bnp-vb-accent, #dd9933);
    margin: 0;
}

.bnp-videos__eyebrow::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z'/></svg>") no-repeat center / contain;
}

.bnp-videos__content {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.bnp-videos__heading {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--bnp-vb-text, #000000);
}

.bnp-videos__btn {
    align-self: flex-start;
    margin-top: auto;
    background: var(--bnp-vb-accent, #dd9933);
    color: #ffffff !important;
    border-radius: 999px;
    padding: 9px 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

.bnp-videos__btn::after {
    content: "→";
    font-weight: 800;
    transition: transform 0.2s ease;
}

.bnp-videos__btn:hover { transform: translateY(-1px); }
.bnp-videos__btn:hover::after { transform: translateX(3px); }

@media (max-width: 1024px) {
    .bnp-videos__grid,
    .bnp-videos__grid--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bnp-videos__grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .bnp-videos { padding: 28px 0; margin: 20px 0; border-radius: 10px; }
    .bnp-videos__inner { padding: 0 16px; }
    .bnp-videos__grid,
    .bnp-videos__grid--cols-2,
    .bnp-videos__grid--cols-3 { grid-template-columns: 1fr !important; gap: 16px; }
    .bnp-videos__grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
    .bnp-videos__title { font-size: 1.15rem; }
}

@media (max-width: 380px) {
    .bnp-videos__grid--compact { grid-template-columns: 1fr !important; }
}


.bnp-singlevideo {
    background: var(--bnp-sv-bg, #f7f5f1);
    color: var(--bnp-sv-text, #000000);
    padding: 36px;
    margin: 32px 0;
    border-radius: 18px;
    border-top: var(--bnp-border-width, 3px) solid var(--bnp-border-color, #fa5a07);
    border-bottom: var(--bnp-border-width, 3px) solid var(--bnp-border-color, #fa5a07);
    /* See .bnp-featured: transparent side borders stop border-radius from
       wrapping the border colour down the left/right edges. */
    border-left: var(--bnp-border-width, 3px) solid transparent;
    border-right: var(--bnp-border-width, 3px) solid transparent;
}

.bnp-singlevideo__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 32px;
    align-items: center;
}

.bnp-singlevideo__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.bnp-singlevideo__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--bnp-sv-accent, #dd9933);
    margin: 0;
}

.bnp-singlevideo__eyebrow::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z'/></svg>") no-repeat center / contain;
}

.bnp-singlevideo__title {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.22;
    margin: 0;
    color: var(--bnp-sv-text, #000000);
    letter-spacing: -0.2px;
}

.bnp-singlevideo__excerpt {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--bnp-sv-text, #000000);
    opacity: 0.82;
}

.bnp-singlevideo__embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.bnp-singlevideo__embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
    max-width: 100%;
}

@media (max-width: 768px) {
    .bnp-singlevideo {
        padding: 24px;
        margin: 20px 0;
        border-radius: 14px;
    }
    .bnp-singlevideo__layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .bnp-singlevideo__title { font-size: 1.2rem; }
    .bnp-singlevideo__text { display: contents; }
    .bnp-singlevideo__eyebrow { order: 1; }
    .bnp-singlevideo__title   { order: 2; }
    .bnp-singlevideo__excerpt { order: 3; }
    .bnp-singlevideo__embed   { order: 4; }
}

@media (max-width: 480px) {
    .bnp-singlevideo { padding: 18px; border-radius: 12px; }
    .bnp-singlevideo__title { font-size: 1.08rem; }
    .bnp-singlevideo__eyebrow { font-size: 0.65rem; }
}


.bnp-title {
    background: var(--bnp-t-bg, #ffffff);
    padding: 44px 28px;
    margin: 28px 0;
    border-radius: 12px;
    text-align: center;
}

.bnp-title__inner { max-width: 980px; margin: 0 auto; }

.bnp-title__link {
    display: inline-block;
    color: inherit !important;
    text-decoration: none !important;
}

.bnp-title__eyebrow {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bnp-t-eyebrow, #dd9933);
    margin: 0 0 16px;
    line-height: 1.2;
}

.bnp-title__heading {
    font-size: 2.2rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--bnp-t-title, #0b0b0b);
    margin: 0;
    transition: opacity 0.2s ease;
}

.bnp-title__link:hover .bnp-title__heading { opacity: 0.82; }

@media (max-width: 768px) {
    .bnp-title { padding: 32px 20px; }
    .bnp-title__heading { font-size: 1.5rem; }
    .bnp-title__eyebrow { font-size: 1.2rem; }
}

@media (max-width: 480px) {
    .bnp-title { padding: 26px 16px; }
    .bnp-title__heading { font-size: 1.2rem; }
    .bnp-title__eyebrow { font-size: 1rem; }
}


/* See the .bnp-breaking--full note above: subtracting --bnp-scrollbar
   keeps the full-bleed blocks exactly the width of the visible content
   area, so they never push a horizontal scrollbar / white strip. */
.bnp-featured--full,
.bnp-videos--full,
.bnp-singlevideo--full {
    border-radius: 0;
    margin-left: calc((100% - 100vw + var(--bnp-scrollbar, 0px)) / 2);
    margin-right: calc((100% - 100vw + var(--bnp-scrollbar, 0px)) / 2);
    width: calc(100vw - var(--bnp-scrollbar, 0px));
    max-width: calc(100vw - var(--bnp-scrollbar, 0px));
}

/* Featured + Videos already have an .__inner with max-width:1280px and
   padding: 0 28px; that wrapper handles content centering on its own.
   We deliberately do NOT override .__inner here so the content stays in
   the same horizontal slot as when full-width is off. Only the section
   background extends edge-to-edge. */

/* Single Video has no .__inner — its layout grid is the direct child.
   Reset the section's horizontal padding (it absorbed the gutter when not
   full-bleed) and re-center the layout grid within a 1280px max. */
.bnp-singlevideo--full {
    padding-left: 0;
    padding-right: 0;
}
.bnp-singlevideo--full .bnp-singlevideo__layout {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 28px;
    padding-right: 28px;
}

@media (max-width: 768px) {
    .bnp-singlevideo--full .bnp-singlevideo__layout {
        padding-left: 16px;
        padding-right: 16px;
    }
}