/* =========================================================
   NYHETER (Front Stage) — arkiv + artikkel
   Lastes av public/news.php (med ?v=filemtime, ellers cache).

   Erstattet den sidelokale <style>-blokka som brukte gamle fargenavn
   (--neon-cyan, --pink, --yellow). Alt her er Theme Engine V4-variabler,
   og synlighetsmerkene er den delte .hub-tag (ADR-0049) — ikke lokale badges.
   ========================================================= */

.news-wrap { max-width: 900px; margin: 0 auto; padding: 4px 0 20px 0; }

.news-wrap .header-section h1 { color: var(--brand-primary); margin-bottom: 5px; }
.news-wrap .header-section p  { margin: 0; color: var(--text-muted); }

/* ---------- Tilbake-lenka over artikkelen ---------- */
.news-back { margin-bottom: 14px; }
.news-back a {
    color: var(--text-muted); text-decoration: none;
    font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
    display: inline-flex; align-items: center; gap: 8px;
}
.news-back a:hover { color: var(--brand-primary); }

/* ---------- ARKIVET ---------- */
.news-list { display: flex; flex-direction: column; gap: 18px; }

/* Bildet er ALLTID 1,91:1 (1200×630, som «Banner» i fokusvelgeren) — tidligere fylte det en 200 px-kolonne
   i kortets høyde og viste bare en stripe fra midten av et 1,91:1-bilde. Nå står det helt, innfelt øverst
   i en smal kolonne, og forsidesaken (.is-hoved, nyeste sak på side 1) har det i full bredde over teksten. */
.news-item {
    display: grid; grid-template-columns: 280px 1fr; gap: 0;
    padding: 0; overflow: hidden;
}
.news-item:not(:has(.news-item-img)) { grid-template-columns: 1fr; }

.news-item-img { display: block; align-self: start; padding: 22px 0 22px 22px; }
.news-item-img img {
    width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block;
    border-radius: 8px; background: var(--nav-hover);
}

.news-item.is-hoved { grid-template-columns: 1fr; }
.news-item.is-hoved .news-item-img { padding: 0; }
.news-item.is-hoved .news-item-img img { border-radius: 0; }
.news-item.is-hoved h2 { font-size: 1.5em; }

.news-item-body { padding: 22px 24px; min-width: 0; }
.news-item-tag { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; }

.news-item h2 { margin: 0 0 8px 0; font-size: 1.25em; line-height: 1.3; }
.news-item h2 a { color: var(--text-main); text-decoration: none; }
.news-item h2 a:hover { color: var(--brand-primary); }

.news-item-excerpt {
    margin: 10px 0 14px 0; color: var(--text-muted);
    font-size: 0.95em; line-height: 1.55;
}

.news-item-link {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--brand-primary); text-decoration: none;
    font-size: 0.85em; font-weight: 700;
}
.news-item-link:hover { text-decoration: underline; }

/* ---------- FELLES META-LINJE ---------- */
.news-meta {
    display: flex; flex-wrap: wrap; gap: 16px;
    color: var(--text-muted); font-size: 0.8em;
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
}
.news-meta i { color: var(--brand-primary); }

/* ---------- ARTIKKELEN ---------- */
.news-article { padding: 0; overflow: hidden; }

.news-article-head {
    padding: 36px 40px 28px 40px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}
.news-article-tag { margin-bottom: 14px; }
.news-article-head h1 {
    font-size: 2.1em; line-height: 1.2; margin: 0 0 14px 0; color: var(--text-main);
}
.news-article-head .news-meta { justify-content: center; }

/* Samme format som delingsbildet og «Banner · 1,91:1» i fokusvelgeren (1200×630, ADR-0071), så det
   Nyhetssentralen viser er det leseren ser. max-height: 420px skar 1,91:1-bilder i topp og bunn så
   snart kortet var bredere enn 800 px. Andre format beskjæres rundt fokuspunktet (object-position). */
.news-article-img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }

.news-content { padding: 32px 40px 40px 40px; font-size: 1.05em; line-height: 1.65; color: var(--text-main); }

/* Bevarer Quill.js sin formatering (overskrifter, lister, sitater) */
.news-content h1, .news-content h2, .news-content h3 { color: var(--text-main); margin-top: 1.5em; }
.news-content a { color: var(--brand-primary); text-decoration: none; }
.news-content a:hover { text-decoration: underline; }
.news-content img { max-width: 100%; border-radius: 8px; margin: 20px 0; }
.news-content blockquote {
    margin: 20px 0; padding: 10px 20px;
    border-left: 3px solid var(--brand-primary);
    color: var(--text-muted);
}

/* ---------- TOM TILSTAND ---------- */
.news-empty { text-align: center; padding: 56px 30px; }
.news-empty > i { font-size: 3em; color: var(--text-muted); opacity: 0.5; margin-bottom: 18px; display: block; }
.news-empty h2 { margin: 0 0 8px 0; color: var(--text-main); }
.news-empty p  { margin: 0 0 22px 0; color: var(--text-muted); }
.news-empty p:last-child { margin-bottom: 0; }

/* ---------- SIDEBLA ---------- */
.news-pager {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: 28px; flex-wrap: wrap;
}
.news-pager-pos { color: var(--text-muted); font-size: 0.85em; }

/* ---------- MOBIL ---------- */
@media (max-width: 700px) {
    .news-item { grid-template-columns: 1fr; }
    .news-item-img { padding: 0; }
    .news-item-img img { border-radius: 0; }
    .news-item-body { padding: 18px 18px; }
    .news-article-head { padding: 26px 22px 22px 22px; }
    .news-article-head h1 { font-size: 1.5em; }
    .news-content { padding: 24px 22px 30px 22px; font-size: 1em; }
}