/*
 * News V3 demo.
 * Presentation only: news-feed.js and the live /news/ page remain unchanged.
 */

.news-page-v3 {
    width: min(calc(100% - 2rem), 1880px);
    margin: 0 auto;
    padding: .8rem 0 clamp(4rem, 7vw, 7rem);
    background: var(--v3-paper);
    color: var(--v3-ink);
}

/* Page title — same type hierarchy as the approved homepage. */
.news-page-v3 .news-page-header {
    display: block;
    margin: 0 0 1.2rem;
    padding: 1.05rem 0 1rem;
    border-top: 3px solid var(--v3-ink);
    border-bottom: 1px solid var(--v3-rule);
}

.news-page-v3 .news-page-heading {
    display: block;
    max-width: none;
}

.news-page-v3 .news-page-heading h1,
.news-page-v3 .news-section-heading h2,
.news-page-v3 .news-latest-header h2,
.news-page-v3 .otd-compact-title,
.news-page-v3 .news-matlock-copy h2,
.news-page-v3 .news-lead-card h2,
.news-page-v3 .news-latest-title,
.news-page-v3 .news-card h3,
.news-page-v3 .otd-compact-item-title {
    font-family: "Herkey", Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -.012em;
    text-transform: none;
}

.news-page-v3 .news-page-heading h1 {
    margin: 0;
    color: var(--v3-ink);
    font-size: clamp(2rem, 3.25vw, 3.35rem);
    line-height: .92;
}


/* Latest Matlock article becomes an editorial rail, not a dark utility box. */
.news-page-v3 .news-matlock-latest {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    margin: 0 0 1.7rem;
    padding: .8rem 0 .9rem;
    border: 0;
    border-bottom: 1px solid var(--v3-rule);
    background: transparent;
}

.news-page-v3 .news-matlock-label {
    padding-top: .22rem;
    color: var(--v3-red);
    font: 800 .58rem/1.1 var(--v3-sans);
    letter-spacing: .06em;
}

.news-page-v3 .news-matlock-copy h2 {
    color: var(--v3-ink);
    font-size: clamp(1.35rem, 2.1vw, 2rem);
    line-height: .97;
}

.news-page-v3 .news-matlock-copy h2 a:hover,
.news-page-v3 .news-matlock-copy h2 a:focus-visible {
    color: var(--v3-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.news-page-v3 .news-matlock-meta {
    max-width: 80ch;
    margin: .32rem 0 0;
    color: var(--v3-muted);
    font: 600 .66rem/1.35 var(--v3-sans);
}

.news-page-v3 .news-matlock-action {
    min-height: 0;
    padding: .25rem 0;
    border: 0;
    background: transparent;
    color: var(--v3-red);
    font: 800 .58rem/1 var(--v3-sans);
    text-transform: uppercase;
}

.news-page-v3 .news-matlock-action:hover,
.news-page-v3 .news-matlock-action:focus-visible {
    border: 0;
    color: var(--v3-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Top news composition. */
.news-page-v3 .news-lead,
.news-page-v3 .news-more {
    margin-top: 0;
}

.news-page-v3 .news-lead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.78fr) minmax(300px, .72fr);
    gap: clamp(1.3rem, 2.4vw, 2.4rem);
    align-items: start;
}

.news-page-v3 .news-top-story {
    display: block;
    min-width: 0;
}

.news-page-v3 .news-lead-card {
    display: block;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.news-page-v3 .news-lead-card::before {
    display: none;
}

.news-page-v3 .news-lead-media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    background: var(--v3-paper-deep);
}

.news-page-v3 .news-lead-media::after {
    display: none;
}

.news-page-v3 .news-lead-media img {
    filter: none;
    transition: opacity 180ms ease;
}

.news-page-v3 .news-lead-card:hover .news-lead-media img {
    opacity: .94;
    transform: none;
}

.news-page-v3 .news-lead-placeholder {
    color: var(--v3-muted);
    font-family: "Herkey", Georgia, serif;
    font-size: clamp(3rem, 8vw, 7rem);
    transform: translate(-50%, -50%);
}

.news-page-v3 .news-image-credit {
    top: auto;
    right: .45rem;
    bottom: .42rem;
    padding: .22rem .36rem;
    border: 0;
    border-radius: 0;
    background: rgba(0,0,0,.72);
    color: #fff;
    font-size: .52rem;
    backdrop-filter: none;
}

.news-page-v3 .news-lead-content {
    display: block;
    min-height: 0;
    padding: .8rem 0 0;
}

.news-page-v3 .news-lead-meta,
.news-page-v3 .news-card-meta {
    gap: .55rem;
}

.news-page-v3 .news-top-label,
.news-page-v3 .news-source-chip,
.news-page-v3 .news-time-chip,
.news-page-v3 .news-coverage-chip {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--v3-muted);
    font: 800 .57rem/1.2 var(--v3-sans);
    letter-spacing: .04em;
    backdrop-filter: none;
    transform: none;
}

.news-page-v3 .news-top-label {
    color: var(--v3-red);
}

.news-page-v3 .news-source-chip:hover,
.news-page-v3 .news-source-chip:focus-visible {
    background: transparent;
    color: var(--v3-red);
}

.news-page-v3 .news-coverage-chip {
    color: var(--v3-muted);
}

.news-page-v3 .news-lead-card h2 {
    max-width: 16ch;
    margin: .55rem 0 0;
    color: var(--v3-ink);
    font-size: clamp(2.45rem, 4.7vw, 4.9rem);
    line-height: .9;
}

.news-page-v3 .news-lead-card h2 a:hover,
.news-page-v3 .news-lead-card h2 a:focus-visible {
    color: var(--v3-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.news-page-v3 .news-lead-excerpt,
.news-page-v3 .news-lead-read {
    display: none;
}

/* Latest column mirrors the homepage's right editorial rail. */
.news-page-v3 .news-latest-panel {
    min-height: 0;
    padding: 0 0 0 clamp(1rem, 1.7vw, 1.45rem);
    border: 0;
    border-left: 1px solid var(--v3-rule);
    border-radius: 0;
    background: transparent;
}

.news-page-v3 .news-latest-header {
    padding: 0 0 .58rem;
    border-bottom: 1px solid var(--v3-rule);
}

.news-page-v3 .news-latest-header h2 {
    color: var(--v3-ink);
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    line-height: .95;
}

.news-page-v3 .news-latest-list {
    display: grid;
}

.news-page-v3 .news-latest-row {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: .85rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--v3-rule);
}

.news-page-v3 .news-latest-row:last-child {
    border-bottom: 0;
}

.news-page-v3 .news-latest-thumb {
    aspect-ratio: 4 / 3;
    border-radius: 0;
    background: var(--v3-paper-deep);
}

.news-page-v3 .news-latest-thumb--empty::after {
    background: var(--v3-paper-deep);
    color: var(--v3-muted);
    font-family: var(--v3-sans);
}

.news-page-v3 .news-latest-meta {
    gap: .3rem;
    margin-bottom: .32rem;
    color: var(--v3-muted);
    font: 800 .53rem/1.15 var(--v3-sans);
}

.news-page-v3 .news-latest-title {
    color: var(--v3-ink);
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    line-height: 1.04;
}

.news-page-v3 .news-latest-title a::after {
    display: none;
}

.news-page-v3 .news-latest-title a:hover,
.news-page-v3 .news-latest-title a:focus-visible {
    color: var(--v3-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* On This Day becomes another newspaper section rather than a card deck. */
.news-page-v3 .otd-compact {
    margin: clamp(2.8rem, 5vw, 4.5rem) 0 0;
    padding: .85rem 0 1rem;
    border-top: 3px solid var(--v3-ink);
    border-bottom: 0;
}

.news-page-v3 .otd-compact-header {
    margin-bottom: 1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--v3-rule);
}

.news-page-v3 .otd-compact-title {
    color: var(--v3-ink);
    font-size: clamp(1.7rem, 2.7vw, 2.7rem);
    line-height: .95;
}

.news-page-v3 .otd-compact-title::after {
    display: none;
}

.news-page-v3 .otd-compact-date {
    color: var(--v3-muted);
    font-family: var(--v3-sans);
}

.news-page-v3 .otd-compact-list {
    gap: clamp(1rem, 2vw, 1.7rem);
}

.news-page-v3 .otd-compact-item,
.news-page-v3 .otd-compact-item--lead {
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--v3-rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.news-page-v3 .otd-compact-media {
    border: 0;
    background: var(--v3-paper-deep);
}

.news-page-v3 .otd-compact-media::after {
    display: none;
}

.news-page-v3 .otd-compact-media img {
    filter: none;
}

.news-page-v3 .otd-compact-item:hover .otd-compact-media img {
    filter: none;
    transform: none;
}

.news-page-v3 .otd-compact-copy {
    padding: .65rem 0 0;
}

.news-page-v3 .otd-year,
.news-page-v3 .otd-kind,
.news-page-v3 .otd-promotion,
.news-page-v3 .otd-age {
    color: var(--v3-muted);
    font-family: var(--v3-sans);
}

.news-page-v3 .otd-year,
.news-page-v3 .otd-kind--signing,
.news-page-v3 .otd-kind--debut,
.news-page-v3 .otd-kind--title {
    color: var(--v3-red);
}

.news-page-v3 .otd-kind--fight {
    color: var(--v3-ink);
}

.news-page-v3 .otd-compact-item-title {
    color: var(--v3-ink);
    font-size: clamp(1.05rem, 1.45vw, 1.35rem);
    line-height: 1.02;
}

.news-page-v3 .otd-compact-item-title a:hover,
.news-page-v3 .otd-compact-item-title a:focus-visible {
    color: var(--v3-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* More stories: image + headline grid, no floating AI-card treatment. */
.news-page-v3 .news-more {
    margin-top: clamp(3rem, 6vw, 5.5rem);
    padding-top: .85rem;
    border-top: 3px solid var(--v3-ink);
}

.news-page-v3 .news-section-heading {
    align-items: end;
    margin-bottom: 1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--v3-rule);
}

.news-page-v3 .news-section-heading h2 {
    color: var(--v3-ink);
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: .95;
}

.news-page-v3 .news-source-filter {
    min-width: 180px;
    color: var(--v3-muted);
    font-family: var(--v3-sans);
    font-size: .56rem;
}

.news-page-v3 .news-source-filter select {
    min-height: 34px;
    padding: .42rem 2rem .42rem .6rem;
    border: 1px solid var(--v3-rule);
    border-radius: 0;
    background: var(--v3-paper);
    color: var(--v3-ink);
    font-size: .68rem;
}

.news-page-v3 .news-more-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem clamp(1.3rem, 2.6vw, 2.5rem);
}

.news-page-v3 .news-card {
    display: block;
    overflow: visible;
    padding-top: .8rem;
    border: 0;
    border-top: 1px solid var(--v3-rule);
    border-radius: 0;
    background: transparent;
    transition: none;
}

.news-page-v3 .news-card:hover {
    border-color: var(--v3-rule);
    box-shadow: none;
    transform: none;
}

.news-page-v3 .news-card-media {
    aspect-ratio: 16 / 9;
    background: var(--v3-paper-deep);
}

.news-page-v3 .news-card-media img {
    filter: none;
    transition: opacity 180ms ease;
}

.news-page-v3 .news-card:hover .news-card-media img {
    opacity: .94;
    transform: none;
}

.news-page-v3 .news-card-placeholder {
    color: var(--v3-muted);
    font-family: "Herkey", Georgia, serif;
    transform: translate(-50%, -50%);
}

.news-page-v3 .news-card-body {
    display: block;
    padding: .72rem 0 0;
}

.news-page-v3 .news-card-meta {
    margin-bottom: .55rem;
}

.news-page-v3 .news-card-meta .news-source-chip,
.news-page-v3 .news-card-meta .news-time-chip,
.news-page-v3 .news-card-meta .news-coverage-chip {
    min-height: 0;
    padding: 0;
    background: transparent;
    font-size: .54rem;
}

.news-page-v3 .news-card h3 {
    color: var(--v3-ink);
    font-size: clamp(1.35rem, 1.8vw, 1.75rem);
    line-height: 1;
}

.news-page-v3 .news-card h3 a:hover,
.news-page-v3 .news-card h3 a:focus-visible {
    color: var(--v3-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.news-page-v3 .news-card-excerpt,
.news-page-v3 .news-card-related,
.news-page-v3 .news-card-read {
    display: none;
}

.news-page-v3 .news-more-actions {
    justify-content: flex-start;
    margin-top: 1.8rem;
}

.news-page-v3 .news-show-more {
    min-width: 0;
    min-height: 0;
    padding: .6rem .85rem;
    border: 1px solid var(--v3-ink);
    border-radius: 0;
    background: transparent;
    color: var(--v3-ink);
    font: 800 .62rem/1 var(--v3-sans);
    text-transform: uppercase;
}

.news-page-v3 .news-show-more:hover,
.news-page-v3 .news-show-more:focus-visible {
    background: var(--v3-ink);
    color: var(--v3-paper);
}

.news-page-v3 .news-loading-card,
.news-page-v3 .news-loading-row {
    border-color: var(--v3-rule);
    border-radius: 0;
    background: var(--v3-paper-deep);
}

.news-page-v3 .news-loading-card--lead {
    min-height: min(52vw, 650px);
}

.news-page-v3 .news-empty,
.news-page-v3 .news-noscript {
    border-color: var(--v3-rule);
    border-radius: 0;
    color: var(--v3-muted);
}

/* Dark mode: use the same palette as the homepage demo. */
html[data-theme="dark"] .news-page-v3,
html[data-theme="dark"] .news-page-v3 .news-source-filter select {
    background: var(--v3-paper);
    color: var(--v3-ink);
}

html[data-theme="dark"] .news-page-v3 .news-lead-media,
html[data-theme="dark"] .news-page-v3 .news-latest-thumb,
html[data-theme="dark"] .news-page-v3 .news-card-media,
html[data-theme="dark"] .news-page-v3 .otd-compact-media,
html[data-theme="dark"] .news-page-v3 .news-loading-card,
html[data-theme="dark"] .news-page-v3 .news-loading-row {
    background: #121212;
}

html.v3-theme-transitioning .news-page-v3,
html.v3-theme-transitioning .news-page-v3 .news-source-filter select,
html.v3-theme-transitioning .news-page-v3 .news-card,
html.v3-theme-transitioning .news-page-v3 .news-latest-panel,
html.v3-theme-transitioning .news-page-v3 .otd-compact-item {
    transition:
        background-color 360ms ease,
        color 360ms ease,
        border-color 360ms ease;
}

@media (max-width: 980px) {
    .news-page-v3 .news-lead-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, .78fr);
    }

    .news-page-v3 .news-more-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-page-v3 .otd-compact-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .news-page-v3 {
        width: min(calc(100% - 1.4rem), 1380px);
    }

    .news-page-v3 .news-page-header {
        padding-top: .8rem;
    }

    .news-page-v3 .news-page-heading h1 {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }

    .news-page-v3 .news-matlock-latest {
        grid-template-columns: 1fr auto;
        gap: .5rem 1rem;
    }

    .news-page-v3 .news-matlock-label {
        grid-column: 1 / -1;
    }

    .news-page-v3 .news-lead-grid {
        grid-template-columns: 1fr;
    }

    .news-page-v3 .news-lead-card h2 {
        max-width: 18ch;
        font-size: clamp(2.15rem, 8.5vw, 3.4rem);
    }

    .news-page-v3 .news-latest-panel {
        padding: 1.1rem 0 0;
        border-top: 1px solid var(--v3-rule);
        border-left: 0;
    }

    .news-page-v3 .news-latest-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1rem;
    }

    .news-page-v3 .news-latest-row:nth-child(odd) {
        padding-right: 1rem;
        border-right: 1px solid var(--v3-rule);
    }
}

@media (max-width: 580px) {
    .news-page-v3 .news-matlock-latest {
        grid-template-columns: 1fr;
    }

    .news-page-v3 .news-matlock-action {
        justify-self: start;
    }

    .news-page-v3 .news-latest-list,
    .news-page-v3 .news-more-grid,
    .news-page-v3 .otd-compact-list {
        grid-template-columns: 1fr;
    }

    .news-page-v3 .news-latest-row:nth-child(odd) {
        padding-right: 0;
        border-right: 0;
    }

    .news-page-v3 .news-section-heading,
    .news-page-v3 .news-section-heading--more {
        align-items: stretch;
    }

    .news-page-v3 .news-source-filter {
        width: 100%;
    }
}


/* =========================================================
   WIDE EDITORIAL CANVAS — LEAD STORIES SHOULD READ HORIZONTALLY
   ========================================================= */

@media (min-width: 761px) {
    .news-page-v3 .news-lead-card h2 {
        max-width: none;
        text-wrap: balance;
    }
}

@media (min-width: 1600px) {
    .news-page-v3 {
        width: min(calc(100% - 10vw), 1880px);
    }

    .news-page-v3 .news-lead-grid {
        grid-template-columns: minmax(0, 2.25fr) minmax(340px, .72fr);
        gap: clamp(1.8rem, 2.5vw, 3rem);
    }

    .news-page-v3 .news-lead-card h2 {
        font-size: clamp(3rem, 3.25vw, 4.8rem);
        line-height: .91;
    }

    .news-page-v3 .news-matlock-copy h2 {
        max-width: none;
    }
}