/* ==========================================================================
   News post (single-news.php). Builds on css/looc-ui.css; the article body
   reuses the editor-content styles from css/page.css (.looc-page-content).
   ========================================================================== */

.looc-news__header { padding-bottom: 32px; }
.looc-news__kicker { color: inherit !important; text-decoration: none !important; }
.looc-news__kicker:hover { color: var(--looc-gold-soft) !important; }
.looc-news__title { max-width: 920px; margin-left: auto !important; margin-right: auto !important; font-size: clamp(32px, 5vw, 56px) !important; line-height: 1.12 !important; text-wrap: balance; }

.looc-news__photo { width: fit-content; max-width: min(1040px, 100%); margin: 0 auto 40px; border-radius: var(--looc-radius-lg); overflow: hidden; box-shadow: var(--looc-shadow-art), 0 0 0 1px var(--looc-line); }
/* Shown whole (no cropping) so text in campaign graphics isn't cut off. */
.looc-news__photo img { display: block; width: auto; max-width: 100%; height: auto !important; max-height: 640px; }

.looc-news__body { max-width: 740px; font-size: 18px; }
.looc-news__body > p:first-child { font-size: 21px; color: var(--looc-ink); }
.looc-news__body h1 { font-size: clamp(26px, 3.4vw, 34px) !important; line-height: 1.2 !important; margin: 8px 0 16px !important; }

.looc-news__pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 740px; margin: 48px auto 0; }
.looc-news__pager-link {
  display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--looc-line); border-radius: var(--looc-radius);
  background: var(--looc-surface); text-decoration: none !important; transition: border-color 0.2s, transform 0.2s;
}
.looc-news__pager-link:hover, .looc-news__pager-link:focus-visible { border-color: var(--looc-gold); transform: translateY(-2px); }
.looc-news__pager-link--next { grid-column: 2; text-align: right; }
.looc-news__pager-dir { color: var(--looc-gold-soft); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.looc-news__pager-title { color: var(--looc-ink); font-family: var(--looc-font-display); font-size: 18px; font-weight: 700; line-height: 1.25; }

.looc-news__more { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

@media (max-width: 640px) {
  .looc-news__pager { grid-template-columns: minmax(0, 1fr); }
  .looc-news__pager-link--next { grid-column: auto; }
  .looc-news__body { font-size: 17px; }
}