/*
 * News (/news) - the update log's listing, archives and post pages.
 *
 * Loaded only on the news surfaces and on search results, which share this
 * file's card (see faction_theme_scripts and the head of index.php).
 *
 * THIS FILE DECLARES NO COLOURS OF ITS OWN. Same call as ks.css and rules.css:
 * everything resolves to a brand token from main.css, and main.css is declared
 * as this file's dependency in functions.php so the tokens always exist by the
 * time these rules run.
 *
 * Two accents, and they do different jobs:
 *
 *  1. --color-rich  THE CHROME, and the one that moves. Eyebrows, the "all
 *     updates" chip, hovers, focus rings, the pager's current page. main.js
 *     rewrites it when a visitor picks an alliance, so /news recolours with the
 *     alliance like the rest of the site.
 *  2. --news-accent  THE CATEGORY, and it holds. Set per card, per chip and per
 *     post from inc/news.php's slug -> token map, never from :root. A category
 *     colour that changed with the visitor's faction would read as decoration
 *     instead of as a label. The fallback below only exists so a stray
 *     .news-card outside a listing renders in grey rather than uncoloured.
 *
 * The site header is sticky and pulls the next section up under itself with a
 * negative margin (main.css .site-header), so every first band on the page has
 * to pay the header's height back in top padding. Hence the calc()s, rather
 * than the flat 120px the older wiki header hardcodes - the CTA bar changes
 * --cta-h and this then tracks it.
 */

:root {
    --news-accent: var(--color-android);
    --news-line: rgba(255, 255, 255, 0.1);
    --news-panel: rgba(255, 255, 255, 0.03);
}

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

.news-archive-header {
    background: linear-gradient(180deg, rgba(26, 26, 46, 1) 0%, var(--bg-dark) 100%);
    padding: calc(var(--header-h) + var(--cta-h) + 60px) 0 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Search results and other fallbacks: the same spacing, none of the news
   dressing. A search is not an issue of the update log. */
.news-archive-header.is-plain {
    background: none;
}

.news-archive-header h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.news-eyebrow {
    font-family: var(--font-data);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-rich);
    margin: 0 0 14px;
}

.news-eyebrow a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.news-eyebrow a:hover {
    border-bottom-color: currentColor;
}

.news-archive-intro {
    margin-top: 16px;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}

.news-archive-intro p:last-child {
    margin-bottom: 0;
}

.news-result-count {
    font-family: var(--font-data);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-top: 14px;
}

.news-search-term {
    color: var(--color-rich);
}

/* ── Chips: the category label, and the filter row ────────────────────────── */

.news-chip {
    display: inline-block;
    font-family: var(--font-data);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 999px;
    color: var(--news-accent);
    border: 1px solid color-mix(in srgb, var(--news-accent) 40%, transparent);
    background: color-mix(in srgb, var(--news-accent) 10%, transparent);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.news-chip:hover {
    background: color-mix(in srgb, var(--news-accent) 18%, transparent);
    border-color: var(--news-accent);
}

.news-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

/* The current filter inverts rather than just brightening: on a row of five
   chips, "slightly more saturated" is not a state anyone can read at a glance. */
.news-chip.is-current {
    background: var(--news-accent);
    border-color: var(--news-accent);
    color: var(--bg-dark);
}

/* ── Listing ──────────────────────────────────────────────────────────────── */

.news-content-area {
    padding: 60px 0 90px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 26px;
}

.news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--news-panel);
    border: 1px solid var(--news-line);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.news-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--news-accent) 55%, transparent);
    background: rgba(255, 255, 255, 0.05);
}

/* The card is not a link element - the title is, and so is the chip. This
   raises the title's hit area to the whole card without nesting a second link
   inside the first, which is invalid and which breaks the chip. */
.news-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.news-card-media {
    display: block;
    aspect-ratio: 16 / 9;
    background: color-mix(in srgb, var(--news-accent) 8%, rgba(255, 255, 255, 0.02));
    border-bottom: 1px solid var(--news-line);
    overflow: hidden;
}

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

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

/* No featured image: a tinted band carrying the category's colour, not a
   placeholder graphic. It says "this post has no picture", which is true, and
   it cannot look like a failed image load. */
.news-card-media.is-empty {
    aspect-ratio: 6 / 1;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--news-accent) 22%, transparent) 0%,
            transparent 70%);
}

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

.news-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Above the card's own overlay link, so the chip stays clickable. */
.news-card-meta .news-chip {
    position: relative;
    z-index: 2;
}

.news-date {
    font-family: var(--font-data);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.news-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0;
}

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

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

.news-card-excerpt {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
    flex: 1;
}

.news-card-excerpt p {
    margin: 0;
}

.news-card-more {
    font-family: var(--font-data);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--news-accent);
}

/* The lead card: the newest update on page one. Full width, and side-by-side
   once there is room for the image to be worth showing at that size. */
.news-card.is-lead {
    grid-column: 1 / -1;
}

@media (min-width: 900px) {
    .news-card.is-lead {
        flex-direction: row;
        align-items: stretch;
    }

    /* The aspect ratio stays. Dropping it and letting the media stretch to the
       row made a 630px-wide panel 540px tall, and object-fit then cropped a
       16:9 photo to nearly square - the lead image is the one picture on the
       page and it should not be the one that loses its edges. Keeping the ratio
       lets the media set the row height instead, and the body centres in it. */
    .news-card.is-lead .news-card-media {
        flex: 0 0 55%;
        border-bottom: none;
        border-right: 1px solid var(--news-line);
    }

    /* The empty-media panel has no image to set its own height, so in a row
       layout it needs to stop claiming half the card. */
    .news-card.is-lead .news-card-media.is-empty {
        flex-basis: 34%;
    }

    .news-card.is-lead .news-card-body {
        justify-content: center;
        padding: 40px;
        gap: 16px;
    }

    .news-card.is-lead .news-card-title {
        font-size: 2rem;
    }

    .news-card.is-lead .news-card-excerpt {
        font-size: 1.05rem;
        flex: initial;
    }
}

.news-empty {
    text-align: center;
    padding: 60px 20px;
    border: 1px dashed var(--news-line);
    border-radius: 12px;
    color: var(--text-secondary);
}

.news-empty h2 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin: 0 0 12px;
}

.news-empty a {
    color: var(--color-rich);
}

/* ── Pager ────────────────────────────────────────────────────────────────── */

.news-pagination {
    margin-top: 50px;
}

.news-pagination .nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.news-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--news-line);
    border-radius: 8px;
    font-family: var(--font-data);
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.news-pagination .page-numbers:hover {
    color: var(--text-primary);
    border-color: var(--color-rich);
}

.news-pagination .page-numbers.current {
    color: var(--bg-dark);
    background: var(--color-rich);
    border-color: var(--color-rich);
}

/* ── Single post ──────────────────────────────────────────────────────────── */

.news-single-header {
    background: linear-gradient(180deg, rgba(26, 26, 46, 1) 0%, var(--bg-dark) 100%);
    padding: calc(var(--header-h) + var(--cta-h) + 50px) 0 40px;
    margin-bottom: 40px;
}

.news-single-header .news-chip {
    margin-bottom: 18px;
}

/* main.css styles every h1 as a masthead: 5rem, weight 900, uppercase, 5px of
   tracking and a drop shadow. That is right for "NEWS" and "FACTIONS", which
   are labels. A post headline is a sentence - "The campaign page is locked, and
   here is what is in the box" set in caps at 3rem runs six lines on a phone and
   reads as shouting - and the listing already shows these same headlines in
   sentence case, so matching the card is worth more than matching the labels.
   Everything the global rule imposes is therefore undone here, deliberately. */
.news-single-title {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 4.5vw, 2.9rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    margin: 0 0 20px;
}

.news-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: var(--font-data);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.news-single-meta .sep {
    opacity: 0.5;
}

.news-single-media {
    margin: 0 0 40px;
}

.news-single-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    border: 1px solid var(--news-line);
}

.news-single-media figcaption {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
}

/* main.css already styles .entry-content; these are the parts a long-form post
   needs that a page body does not. */
.news-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.news-single-content a {
    color: var(--news-accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--news-accent) 40%, transparent);
    transition: border-color 0.15s ease;
}

.news-single-content a:hover {
    border-bottom-color: var(--news-accent);
}

.news-single-content blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--news-accent);
    color: var(--text-primary);
    font-size: 1.15rem;
}

.news-single-content figcaption {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.news-single-content hr {
    border: none;
    border-top: 1px solid var(--news-line);
    margin: 2.5em 0;
}

.news-page-links,
.news-tags {
    font-family: var(--font-data);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-top: 30px;
}

.news-tags a {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--news-line);
    margin-left: 8px;
}

.news-tags a:hover {
    color: var(--text-primary);
}

/* ── Post foot: the list, then the neighbours ─────────────────────────────── */

.news-post-cta {
    margin: 60px 0 0;
}

.news-post-cta-panel {
    background: var(--news-panel);
    border: 1px solid var(--news-line);
    border-radius: 12px;
    padding: 34px;
    text-align: center;
}

.news-post-cta-panel h2 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.news-post-cta-panel p {
    color: var(--text-secondary);
    margin: 0 0 22px;
}

.news-post-cta-alt {
    text-align: center;
    margin-top: 18px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.news-post-cta-alt a {
    color: var(--color-rich);
    text-decoration: none;
}

.news-post-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 50px 0 90px;
}

.news-post-nav-link {
    display: block;
    padding: 22px;
    border: 1px solid var(--news-line);
    border-radius: 12px;
    background: var(--news-panel);
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.news-post-nav-link:hover {
    border-color: var(--color-rich);
    transform: translateY(-3px);
}

/* "Next" sits on the right of the pair and reads right-aligned, so the two
   labels frame the gap between them rather than both hugging the left. */
.news-post-nav-link.is-next {
    text-align: right;
}

.news-post-nav-label {
    display: block;
    font-family: var(--font-data);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-rich);
    margin-bottom: 8px;
}

.news-post-nav-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.35;
    color: var(--text-primary);
}

/* ── Narrow screens ───────────────────────────────────────────────────────── */

@media screen and (max-width: 768px) {
    .news-content-area {
        padding: 40px 0 60px;
    }

    .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .news-post-cta-panel {
        padding: 26px 20px;
    }

    .news-post-nav-link.is-next {
        text-align: left;
    }
}