/* ─────────────────────────────────────────────────────────────────────────
   news.css — the news landing page at /news/.

   Loaded only on is_home() (see functions.php), and scoped under .ub-news so
   nothing here can reach the homepage, the program pages or the category
   archives.

   Shares the ink, rule and chrome values used by article.css and archive.css
   so a reader crossing from the section index into a category and then into a
   story never meets a visual seam. Those values are redeclared rather than
   imported: the other two sheets do not load here, and a var() pointing at an
   absent custom property computes to nothing at all.

   The page is a hierarchy, not a grid. One lead story at a size nothing else
   on the page competes with, a rail of recent briefs beside it, then topic
   bands of three. That ordering is what makes it read as an edited section
   rather than a database listing.
   ───────────────────────────────────────────────────────────────────────── */

.ub-news {
    /* Wider than the article's reading measure (46rem) and narrower than the
       site's --measure (1384px). Card grids want the width; body copy does
       not, and there is no body copy on this page. */
    --news-measure: 78rem;

    --news-ink: #1d2430;
    --news-ink-soft: #55606d;
    /* Dates, counts and reading times. #7b8794 was the natural next step down
       the ramp but measured 3.66:1 on white — under the 4.5:1 that 12-13px
       text has to clear. This value measures 4.90:1 on white and 4.71:1 on
       the tinted chip band, so it passes on both surfaces it appears over. */
    --news-ink-faint: #67727e;
    --news-rule: #e2e6ea;
    --news-surface: #fff;

    /* One shared radius. Cards, chips and media all read as the same family
       of object because they round identically. */
    --news-radius: 10px;

    /* The card lift. An offset and a soft blur, not a halo: the shadow has to
       read as the card sitting above the page, which needs a direction. */
    --news-lift: 0 1px 2px rgba(29, 36, 48, 0.05),
                 0 12px 28px -12px rgba(29, 36, 48, 0.18);
    --news-lift-hover: 0 2px 4px rgba(29, 36, 48, 0.06),
                       0 22px 44px -16px rgba(89, 45, 130, 0.28);

    --news-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    padding-bottom: clamp(3.5rem, 8vw, 6rem);
    background: var(--news-surface);
    color: var(--news-ink);
}

.ub-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Shared inner width. Every band on the page starts on the same left edge —
   the misalignment this prevents is the single most visible flaw a stacked
   layout can have. */
.ub-news__masthead-inner,
.ub-news__top-inner,
.ub-news__topics-inner,
.ub-news__section-inner {
    max-width: var(--news-measure);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2rem);
}

/* ── Masthead ───────────────────────────────────────────────────────── */

/* The section nameplate. A newspaper masthead is a scale statement, not a
   decorated box: the word is set large and quiet, with the standfirst holding
   the only supporting line. */
/* Sized so the lead story reaches the fold. At the original scale the
   nameplate and its standfirst pushed the lead image to ~770px on a 1000px
   viewport, so the section opened on a title and nothing to read. */
.ub-news__masthead {
    padding-block: clamp(1.75rem, 3.4vw, 2.75rem) clamp(1.25rem, 2.4vw, 1.75rem);
    border-bottom: 1px solid var(--news-rule);
    background:
        radial-gradient(
            60rem 24rem at 12% -10%,
            rgba(89, 45, 130, 0.07) 0%,
            rgba(89, 45, 130, 0) 70%
        ),
        #fff;
}

.ub-news__wordmark {
    margin: 0;
    /* Caps at 6rem — past that a single word stops being a nameplate and
       becomes a texture. */
    font-size: clamp(2.5rem, 1.7rem + 3.1vw, 4.5rem);
    font-weight: 800;
    /* Tracking tightens as the face grows; the floor is -0.04em. */
    letter-spacing: -0.034em;
    line-height: 0.95;
    color: var(--news-ink);
}

.ub-news__standfirst {
    max-width: 38rem;
    margin: clamp(0.55rem, 1.2vw, 0.8rem) 0 0;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
    line-height: 1.55;
    color: var(--news-ink-soft);
    text-wrap: pretty;
}

.ub-news__masthead--compact {
    padding-block: clamp(2rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 1.75rem);
}

.ub-news__wordmark--compact {
    margin-top: 0.6rem;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    letter-spacing: -0.028em;
}

/* Breadcrumb and count, matched to archive.css so paged news and a paged
   category are the same object. */
.ub-news__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--news-ink-soft);
}

.ub-news__crumbs a {
    color: var(--news-ink-soft);
    text-decoration: none;
    transition: color 0.15s var(--news-ease);
}

.ub-news__crumbs a:hover,
.ub-news__crumbs a:focus-visible {
    color: var(--ub-purple, #592d82);
    text-decoration: underline;
}

.ub-news__crumb-sep { opacity: 0.45; }

.ub-news__crumb-current {
    color: var(--news-ink);
    font-weight: 600;
}

.ub-news__count {
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ub-purple, #592d82);
}

/* ── Lead + rail ────────────────────────────────────────────────────── */

.ub-news__top {
    padding-block: clamp(1.5rem, 3.2vw, 2.5rem);
}

/* The lead takes roughly two thirds. Anything closer to half and the two
   columns start arguing about which is the story. */
.ub-news__top-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
}

.ub-lead__link,
.ub-brief,
.ub-story__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.ub-lead__media {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--news-radius);
    /* Every featured image in the corpus is 1280x720, so the ratio is the
       content's own rather than a crop imposed on it. */
    aspect-ratio: 16 / 9;
    background: #eef0f3;
}

.ub-lead__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The one authored motion on the page: images settle back as the card is
       approached. Exponential ease-out from an already-visible default, so
       nothing depends on the animation having run. */
    transition: transform 0.7s var(--news-ease);
}

.ub-lead__link:hover .ub-lead__img,
.ub-lead__link:focus-visible .ub-lead__img {
    transform: scale(1.03);
}

.ub-lead__text {
    display: block;
    padding-top: clamp(1.1rem, 2.2vw, 1.5rem);
}

/* The category label. Set in the brand purple at a small size with open
   tracking: it identifies the story's subject without competing with the
   headline directly beneath it. */
.ub-lead__cat,
.ub-brief__cat,
.ub-story__cat {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ub-purple, #592d82);
}

.ub-lead__title {
    margin: 0.55rem 0 0;
    /* Sized against a 52-character median headline: at this scale the typical
       title runs to two lines and the 101-character outlier to three. */
    font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem);
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -0.024em;
    color: var(--news-ink);
    text-wrap: balance;
    transition: color 0.2s var(--news-ease);
}

.ub-lead__link:hover .ub-lead__title,
.ub-lead__link:focus-visible .ub-lead__title {
    color: var(--ub-purple, #592d82);
}

.ub-lead__summary {
    display: block;
    max-width: 44rem;
    margin-top: 0.75rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--news-ink-soft);
    text-wrap: pretty;
}

.ub-lead__meta,
.ub-story__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    font-size: 0.8125rem;
    color: var(--news-ink-faint);
}

.ub-news__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

/* ── Rail of recent briefs ──────────────────────────────────────────── */

.ub-news__rail-title,
.ub-news__topics-label {
    margin: 0 0 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--news-rule);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--news-ink);
}

.ub-news__rail-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ub-news__rail-list li + li {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--news-rule);
}

.ub-brief {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.ub-brief__media {
    display: block;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 4 / 3;
    background: #eef0f3;
}

.ub-brief__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--news-ease);
}

.ub-brief:hover .ub-brief__img,
.ub-brief:focus-visible .ub-brief__img {
    transform: scale(1.05);
}

.ub-brief__text { display: block; min-width: 0; }

.ub-brief__cat { font-size: 0.6875rem; }

.ub-brief__title {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.32;
    letter-spacing: -0.008em;
    color: var(--news-ink);
    transition: color 0.2s var(--news-ease);
}

.ub-brief:hover .ub-brief__title,
.ub-brief:focus-visible .ub-brief__title {
    color: var(--ub-purple, #592d82);
}

.ub-brief__date {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--news-ink-faint);
}

/* ── Topic chips ────────────────────────────────────────────────────── */

.ub-news__topics {
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    border-block: 1px solid var(--news-rule);
    background: #fbfafc;
}

.ub-news__topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ub-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--news-rule);
    border-radius: 999px;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--news-ink);
    text-decoration: none;
    transition:
        border-color 0.2s var(--news-ease),
        color 0.2s var(--news-ease),
        background-color 0.2s var(--news-ease),
        transform 0.2s var(--news-ease);
}

.ub-chip:hover,
.ub-chip:focus-visible {
    border-color: var(--ub-purple, #592d82);
    color: var(--ub-purple, #592d82);
    background: #fff;
    transform: translateY(-1px);
}

.ub-chip__count {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--news-ink-faint);
    transition: color 0.2s var(--news-ease);
}

.ub-chip:hover .ub-chip__count,
.ub-chip:focus-visible .ub-chip__count {
    color: var(--ub-purple, #592d82);
}

/* ── Topic sections ─────────────────────────────────────────────────── */

.ub-news__section {
    padding-top: clamp(2.5rem, 5vw, 3.75rem);
}

.ub-news__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
    padding-bottom: 0.85rem;
    border-bottom: 2px solid var(--news-ink);
}

.ub-news__section-title {
    margin: 0;
    font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--news-ink);
}

.ub-news__section-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--ub-purple, #592d82);
    text-decoration: none;
    white-space: nowrap;
}

.ub-news__section-more:hover,
.ub-news__section-more:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ub-news__arrow {
    transition: transform 0.25s var(--news-ease);
}

.ub-news__section-more:hover .ub-news__arrow,
.ub-news__section-more:focus-visible .ub-news__arrow,
.ub-news__more-link:hover .ub-news__arrow,
.ub-news__more-link:focus-visible .ub-news__arrow {
    transform: translateX(3px);
}

/* ── Story cards ────────────────────────────────────────────────────── */

.ub-news__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.4vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ub-news__card-item { display: flex; }

.ub-story {
    display: flex;
    flex: 1;
    flex-direction: column;
    border: 1px solid var(--news-rule);
    border-radius: var(--news-radius);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--news-lift);
    transition:
        transform 0.3s var(--news-ease),
        box-shadow 0.3s var(--news-ease),
        border-color 0.3s var(--news-ease);
}

.ub-story:hover,
.ub-story:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--news-lift-hover);
    border-color: #d6d0e2;
}

.ub-story__link {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.ub-story__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #eef0f3;
}

.ub-story__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--news-ease);
}

.ub-story:hover .ub-story__img,
.ub-story:focus-within .ub-story__img {
    transform: scale(1.04);
}

/* Holds the card's proportions when a post has no featured image. */
.ub-story__media-fallback {
    display: block;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, rgba(89, 45, 130, 0.1) 0%, rgba(0, 167, 224, 0.08) 100%);
}

.ub-story__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(1rem, 2vw, 1.35rem);
}

/* Clamped to three lines. Headlines run to 101 characters in this corpus, and
   the longest one would otherwise stretch every card in its row. */
.ub-story__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin: 0.5rem 0 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.012em;
    color: var(--news-ink);
    text-wrap: pretty;
    transition: color 0.2s var(--news-ease);
}

.ub-story__link:hover .ub-story__title,
.ub-story__link:focus-visible .ub-story__title {
    color: var(--ub-purple, #592d82);
}

.ub-story__summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Three lines, not a word budget: a 22-word trim renders as two lines on
       one card and four on the next, and margin-top:auto then opened a
       different-sized hole above every date in the row. */
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin-top: 0.55rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--news-ink-soft);
    text-wrap: pretty;
}


/* Pushed to the card's foot so the date sits on one line across a row of
   cards whose summaries differ in length. */
.ub-story__meta {
    margin-top: auto;
    padding-top: 0.9rem;
}

/* ── Footer link and pagination ─────────────────────────────────────── */

.ub-news__more {
    display: flex;
    justify-content: center;
    margin-top: clamp(2rem, 4vw, 2.75rem);
}

.ub-news__more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    border: 1px solid var(--news-rule);
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--news-ink);
    text-decoration: none;
    transition:
        border-color 0.2s var(--news-ease),
        color 0.2s var(--news-ease),
        transform 0.2s var(--news-ease);
}

.ub-news__more-link:hover,
.ub-news__more-link:focus-visible {
    border-color: var(--ub-purple, #592d82);
    color: var(--ub-purple, #592d82);
    transform: translateY(-1px);
}

.ub-news__section-inner--paged {
    max-width: var(--news-measure);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2rem);
    padding-top: clamp(2rem, 4vw, 2.75rem);
}

.ub-news__empty {
    padding-block: clamp(3rem, 8vw, 5rem);
    text-align: center;
}

.ub-news__empty h2 {
    margin: 0 0 0.6rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--news-ink);
}

.ub-news__empty p {
    margin: 0 0 1.5rem;
    color: var(--news-ink-soft);
}

/* ── Focus ──────────────────────────────────────────────────────────── */

/* Every interactive element on the page gets the same visible ring. Card
   links are given it on the card rather than the anchor so the outline traces
   the object the reader is actually about to activate. */
.ub-news a:focus-visible {
    outline: 2px solid var(--ub-purple, #592d82);
    outline-offset: 3px;
    border-radius: 4px;
}

.ub-story__link:focus-visible {
    outline-offset: -3px;
    border-radius: var(--news-radius);
}

/* ── Responsive ─────────────────────────────────────────────────────── */

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

@media (max-width: 900px) {
    /* The rail stops being a sidebar and becomes the next thing you read. */
    .ub-news__top-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(1.75rem, 5vw, 2.25rem);
    }

    .ub-news__rail-title {
        margin-top: 0;
    }
}

@media (max-width: 640px) {
    .ub-news__cards {
        grid-template-columns: minmax(0, 1fr);
    }

    /* At one card per row the image no longer needs to be the widest thing on
       screen; a 3:2 crop keeps more of the list visible per scroll. */
    .ub-story__media {
        aspect-ratio: 3 / 2;
    }

    .ub-lead__title {
        line-height: 1.14;
    }

    .ub-brief {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        gap: 0.8rem;
    }
}

/* ── Motion preference ──────────────────────────────────────────────── */

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

    .ub-story:hover,
    .ub-story:focus-within,
    .ub-chip:hover,
    .ub-news__more-link:hover {
        transform: none;
    }

    .ub-lead__link:hover .ub-lead__img,
    .ub-story:hover .ub-story__img,
    .ub-brief:hover .ub-brief__img {
        transform: none;
    }
}