/*
 * News single (single.php, plain `post` singulars).
 *
 * Off the inherited layer entirely — no Bootstrap, so the_content() gets no
 * typography for free any more (legacy.css/legacy-responsive.css never set
 * bare h1..h6/p/ul/a/img rules; that came from bootstrap.css's reboot). The
 * "prose" rules below under .news-single__content are that typography,
 * written from scratch, not a copy of anything inherited.
 *
 * Scoped under .news-single with its own local custom properties, same
 * isolation convention as .ud-product-page / .uds-xlink — this file does not
 * lean on the :root tokens in ud-header-footer.css.
 *
 * Also home to the news list (bottom of the file): the card
 * (component/news-item.php, .news-item — front page news block and the News
 * category) and the News category screen (category-news.php, .news-archive).
 * The card sets its own tokens too, because on the front page it sits outside
 * both screens' wrappers.
 */

.news-single,
.news-archive,
.news-item {
    --navy: #161c55;
    --accent: #2E62FF;
    --accent-soft: #F2F5FF;
    --line: #D0D0D0;
    --line-soft: #E5E5E5;
    --panel: #FCFCFC;
    --ink: #1A1A1A;
    --ink-soft: #5b5b5b;
}

.news-single {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* replaces legacy .content's role in the sticky-footer flex column */
    font-family: "Google Sans", sans-serif;
}

.news-single *,
.news-single *::before,
.news-single *::after {
    box-sizing: border-box;
}

/* ---------- head: title, date — full width ---------- */

.news-single__head {
    padding: 16px 20px 24px; /* the breadcrumbs above carry the top gap */
}

.news-single__title {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--navy);
    margin: 0 0 12px;
}

.news-single__date {
    font-size: 14px;
    color: var(--ink-soft);
}

/* ---------- body: [thumbnail + content] column + sidebar ---------- */

/* The thumbnail lives in the main column (not the head) so the sidebar
   starts level with it, right under the title. */
.news-single__thumb {
    /* Source photos can be very tall (near-square or portrait crops run to
       800-900px here at full container width) — capped to the same width as
       the content below instead of cropping, so nothing about the image
       itself is cut off. */
    max-width: 720px;
    margin-bottom: 32px;
    border-radius: 4px;
    overflow: hidden;
}

.news-single__thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.news-single__body {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 320px);
    gap: 48px;
    align-items: start;
    padding-bottom: 64px;
}

@media (max-width: 991.98px) {
    .news-single__body {
        grid-template-columns: 1fr;
    }
}

/* ---------- content: prose typography for the_content(), from scratch ---------- */

.news-single__content {
    /* max-width: 720px; */
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink);
}

.news-single__content > *:first-child {
    margin-top: 0;
}

.news-single__content > *:last-child {
    margin-bottom: 0;
}

.news-single__content h2,
.news-single__content h3,
.news-single__content h4 {
    color: var(--navy);
    font-weight: 600;
    line-height: 1.3;
    margin: 1.4em 0 .5em;
}

.news-single__content h2 { font-size: 26px; }
.news-single__content h3 { font-size: 21px; }
.news-single__content h4 { font-size: 18px; }

.news-single__content p {
    margin: 0 0 10px;
}

.news-single__content ul,
.news-single__content ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.news-single__content a {
    color: var(--accent);
    text-decoration: underline;
}

.news-single__content a:hover {
    color: var(--navy);
}

.news-single__content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    cursor: zoom-in;
}

.news-single__content blockquote {
    margin: 1.4em 0;
    padding: .2em 0 .2em 1.2em;
    border-left: 3px solid var(--line);
    color: var(--ink-soft);
}

/* ---------- shortcodes (includes/shortcodes.php) ---------- */

/* [block-image]: image ~40% / text ~60%, one column below 768px with the
   image always on top. */
.news-single__content .ud-block-image {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 28px;
    align-items: start;
    margin: 1.6em 0;
}

.news-single__content .ud-block-image--reverse {
    grid-template-columns: 3fr 2fr;
}

.news-single__content .ud-block-image--reverse .ud-block-image__media {
    order: 2;
}

.news-single__content .ud-block-image__media {
    margin: 0;
}

.news-single__content .ud-block-image__media a,
.news-single__content .ud-block-image__media picture,
.news-single__content .ud-block-image__media img {
    display: block;
}

.news-single__content .ud-block-image__media img {
    width: 100%;
    height: auto;
}

.news-single__content .ud-block-image__media figcaption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
}

.news-single__content .ud-block-image__body > *:first-child {
    margin-top: 0;
}

.news-single__content .ud-block-image__body > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .news-single__content .ud-block-image,
    .news-single__content .ud-block-image--reverse {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .news-single__content .ud-block-image--reverse .ud-block-image__media {
        order: 0;
    }

    .news-single__title {
        font-size: 24px;
    }
    .news-single__content h2 {
        font-size: 22px;
    }
    .news-single__content {
        font-size: 16px;
    }
}

/* [highlight-text]: the closing "read next" line. */
.news-single__content .ud-highlight {
    margin: 2em 0 0;
    padding: 20px 24px;
    background: var(--accent-soft);
    border-radius: 14px;
}

.news-single__content .ud-highlight > *:first-child {
    margin-top: 0;
}

.news-single__content .ud-highlight > *:last-child {
    margin-bottom: 0;
}

/* [slider] (component/news-slider.php): one 16:9 slide at a time. The track
   scrolls natively with snap; js/ud-news-single.js wires the arrows and
   builds the dots. No lightbox, so no zoom cursor. */
.news-single__content .ud-slider {
    margin: 2em 0;
}

/* Track + arrows: the arrows centre on the image, whatever the dots do. */
.news-single__content .ud-slider__stage {
    position: relative;
}

.news-single__content .ud-slider__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-radius: 4px;
}

.news-single__content .ud-slider__track::-webkit-scrollbar {
    display: none;
}

.news-single__content .ud-slider__slide {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.news-single__content .ud-slider__slide picture,
.news-single__content .ud-slider__slide img {
    display: block;
}

.news-single__content .ud-slider__slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
    cursor: auto;
}

.news-single__content .ud-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(22, 28, 85, .12);
    cursor: pointer;
    display: none;
    transition: opacity .3s, border-color .3s;
}

.news-single__content .ud-slider.is-ready .ud-slider__nav {
    display: block;
}

.news-single__content .ud-slider__nav:hover {
    border-color: var(--accent);
}

.news-single__content .ud-slider__nav[disabled] {
    opacity: 0;
    pointer-events: none;
}

.news-single__content .ud-slider__nav::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--navy);
    border-right: 2px solid var(--navy);
}

.news-single__content .ud-slider__nav.prev {
    left: 12px;
}

.news-single__content .ud-slider__nav.next {
    right: 12px;
}

.news-single__content .ud-slider__nav.prev::after {
    transform: translate(-30%, -50%) rotate(-135deg);
}

.news-single__content .ud-slider__nav.next::after {
    transform: translate(-70%, -50%) rotate(45deg);
}

/* 16 dots must fit 280px (320 minus the container gutters): 16px hit area
   each, no gap. */
.news-single__content .ud-slider__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 10px;
}

.news-single__content .ud-slider__dot {
    position: relative;
    width: 16px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.news-single__content .ud-slider__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
    transform: translate(-50%, -50%);
    transition: background-color .3s, transform .3s;
}

.news-single__content .ud-slider__dot:hover::after {
    background: var(--ink-soft);
}

.news-single__content .ud-slider__dot[aria-current="true"]::after {
    background: var(--accent);
    transform: translate(-50%, -50%) scale(1.25);
}

@media (max-width: 767.98px) {
    .news-single__content .ud-slider__nav {
        width: 34px;
        height: 34px;
    }

    .news-single__content .ud-slider__nav.prev {
        left: 8px;
    }

    .news-single__content .ud-slider__nav.next {
        right: 8px;
    }
}

/* ---------- sidebar: call + brochure CTAs ---------- */

.news-single__sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 992px) {
    /* Sticky needs room to move within: by default the grid gives this column
       only its own content's height (align-items:start on .news-single__body),
       so there was nothing for the cards to travel down through. .sidebar is
       the "territory" — stretched to the row's full height, driven by the
       longer content column, itself static. .sidebar-inner is the actual
       sticky element, holding the cards; it travels down inside .sidebar's
       tall box as the page scrolls, then stops when it hits the bottom.
       (Sticky + align-self:stretch on one and the same flex element is
       unreliable across browsers — splitting the "tall box" from the "sticky
       box" is the standard, dependable pattern.) */
    .news-single__sidebar {
        align-self: stretch;
    }

    .news-single__sidebar-inner {
        position: sticky;
        /* .ud-header is itself position:sticky, ~103px tall on inner pages
           (20px+17px padding, 47.5px logo, 17px+1px rule underneath) — this
           clears it plus a bit of breathing room. Check against the live
           header height and adjust if it drifts. */
        top: 120px;
    }
}

.news-single__cta {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px;
}

.news-single__cta-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 8px;
}

.news-single__cta-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 18px;
}

.news-single__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    transition: background .2s, color .2s;
}

.news-single__cta-btn:hover {
    background: var(--navy);
    border-color: var(--navy);
}

.news-single__cta-btn--ghost {
    background: transparent;
    color: var(--accent);
}

.news-single__cta-btn--ghost:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

/* ---------- "Other news" rail ---------- */

/* The section itself is full width; .ud-container inside it gives the
   gutters, and the rule sits on the inner wrapper so it stays content-wide
   instead of running edge to edge. */
.news-single__more {
    padding-bottom: 64px;
}

.news-single__more-inner {
    padding-top: 56px;
    border-top: 1px solid var(--line);
}

.news-single__more-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 28px;
}

.news-single__more-rail {
    position: relative;
}

.news-single__more-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 280px;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 16px;
}

.news-single__more-track::-webkit-scrollbar {
    display: none;
}

.news-single__more-card {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.news-single__more-card-image {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    background: var(--panel);
}

.news-single__more-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

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

.news-single__more-card-date {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 12px 0 6px;
}

.news-single__more-card-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 8px;
}

.news-single__more-card-title a {
    color: var(--ink);
    text-decoration: none;
}

.news-single__more-card-title a:hover {
    color: var(--accent);
}

.news-single__more-card-excerpt {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
}

.news-single__more-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(22, 28, 85, .12);
    cursor: pointer;
    display: none;
    transition: opacity .3s, border-color .3s;
}

@media (max-width: 768px) {
    .news-single__more-nav {
        top: 42%;
    }
}

.news-single__more-rail.has-nav .news-single__more-nav {
    display: block;
}

.news-single__more-nav:hover {
    border-color: var(--accent);
}

.news-single__more-nav[disabled] {
    opacity: 0;
    pointer-events: none;
}

.news-single__more-nav::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--navy);
    border-right: 2px solid var(--navy);
}

.news-single__more-nav.prev {
    left: -16px;
}

.news-single__more-nav.next {
    right: -16px;
}

.news-single__more-nav.prev::after {
    transform: translate(-30%, -50%) rotate(-135deg);
}

.news-single__more-nav.next::after {
    transform: translate(-70%, -50%) rotate(45deg);
}

@media (max-width: 1279.98px) {
    .news-single__more-nav.prev {
        left: 6px;
    }

    .news-single__more-nav.next {
        right: 6px;
    }
}

@media (max-width: 767.98px) {
    .news-single__more-track {
        grid-auto-columns: 240px;
    }
}

/* ============================================================
 * News list
 * ============================================================ */

/* ---------- News category screen (category-news.php) ---------- */

.news-archive {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* fills the sticky-footer flex column, as .news-single */
    font-family: "Google Sans", sans-serif;
}

/* Vertical padding only — .ud-container's own side gutters stay as they are. */
.news-archive__head {
    padding-top: 16px; /* the breadcrumbs above carry the top gap */
    padding-bottom: 32px;
}

.news-archive__title {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--navy);
    margin: 0;
}

.news-archive__desc {
    max-width: 720px;
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.news-archive__desc > * {
    margin: 0;
}

.news-archive__body {
    padding-bottom: 64px;
}

.news-archive__empty {
    margin: 0;
    font-size: 16px;
    color: var(--ink-soft);
}

@media (max-width: 767.98px) {
    .news-archive__title {
        font-size: 24px;
    }
}

/* ---------- card (component/news-item.php) ----------
   Every margin, size and colour is set here on purpose: on the front page
   Bootstrap's reboot still loads underneath and would otherwise hand the
   heading and the paragraph its own. */

.news-item {
    display: grid;
    grid-template-columns: 140px 260px 1fr auto;
    gap: 32px;
    align-items: center;
    padding: 40px 0;
    border-top: 1px solid var(--line-soft);
    font-family: "Google Sans", sans-serif;
}

.news-item:last-child {
    border-bottom: 1px solid var(--line-soft);
}

.news-item__date {
    font-size: 14px;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* One frame for every photo so the rows line up, whatever the source crop. */
.news-item__image {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    background: var(--panel);
}

.news-item__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.news-item:hover .news-item__image img {
    transform: scale(1.04);
}

/* No thumbnail: the brand logo strip, contained rather than cropped. */
.news-item__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    background: #F5F5F5;
}

.news-item__image--placeholder img {
    height: auto;
    object-fit: contain;
}

.news-item:hover .news-item__image--placeholder img {
    transform: none;
}

.news-item__content {
    max-width: 520px;
}

.news-item__headline {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.news-item__headline a {
    color: var(--ink);
    text-decoration: none;
    transition: color .3s ease;
}

.news-item:hover .news-item__headline a {
    color: var(--accent);
}

.news-item__excerpt {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* Out of the tab order (it repeats the headline link), so it answers to the
   card's hover rather than its own. */
.news-item__more {
    position: relative;
    display: inline-flex;
    font-size: 14px;
    line-height: 20px;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: transform .3s ease;
}

.news-item__more::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    width: 20px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.news-item:hover .news-item__more,
.news-item__more:hover {
    color: var(--ink-soft);
    transform: translateY(-2px);
}

.news-item:hover .news-item__more::before {
    transform: scaleX(1);
}

/* Tablet: "Read more" drops under the text column. */
@media (max-width: 1023.98px) {
    .news-item {
        grid-template-columns: 120px 220px 1fr;
        row-gap: 16px;
    }

    .news-item__more {
        grid-column: 3;
        justify-self: start;
    }
}

/* Phone: one column, in source order — date, photo, text, link. */
@media (max-width: 767.98px) {
    .news-item {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 32px 0;
    }

    .news-item__content {
        max-width: none;
    }

    .news-item__more {
        grid-column: auto;
    }
}