/* Portal News (/news, /news/{slug}).
   Site CSS sizes h1 below h2, and site.css loads after this file with ".content-feature h2 { 36px }",
   so heading rules carry the .news-page prefix to win on specificity. */

/* News pages scroll with the header instead of pinning it (_Layout sets an inline position:sticky
   site-wide; this file only loads on /news pages, so other pages are unaffected). */
#headercontent { position: static !important; }

/* ---------- index header ---------- */
.news-header { text-align: center; padding: 40px 0 10px; }
.news-page .news-header h1 { font-size: 40px; font-weight: 300; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px; }
.news-header-sub { color: #777; font-size: 16px; margin: 0; }
.news-empty { text-align: center; color: #777; padding: 40px 0; }

/* Shared card frame: hero + grid cards. */
.news-hero, .news-card {
    border: 1px solid #e3e3e3; border-radius: 6px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 16px rgba(0, 0, 0, .06);
    transition: box-shadow .25s ease, transform .25s ease;
}
.news-hero:hover, .news-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, .08), 0 14px 32px rgba(0, 0, 0, .12); }
.news-card:hover { transform: translateY(-3px); }

/* ---------- index hero (newest post, page 1) ---------- */
.news-hero { display: flex; background: #f3f3f3; margin-top: 30px; min-height: 360px; }
.news-hero-text { flex: 0 0 40%; display: flex; flex-direction: column; justify-content: center; padding: 40px 45px; }
.news-label { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #777; margin-bottom: 14px; }
.news-page .news-hero-title { font-size: 32px; font-weight: 400; line-height: 1.25; margin: 0 0 12px; }
.news-page .news-hero-title a { color: #222; text-decoration: none; }
.news-page .news-hero-title a:hover { text-decoration: underline; }
.news-hero-summary { color: #555; font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.news-button { align-self: flex-start; border: 1px solid #222; color: #222; padding: 9px 20px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.news-button:hover, .news-button:focus { background: #222; color: #fff; text-decoration: none; }
.news-hero-media { flex: 1 1 60%; display: block; overflow: hidden; background: #e9e9e9; }
/* Tiles never upscale: scale-down by default; news.js switches to cover only when the image is big enough. */
.news-tile-img { display: block; width: 100%; height: 100%; object-fit: scale-down; }
.news-tile-img.news-img-cover { object-fit: cover; }

.news-page .news-section-title { font-size: 22px; font-weight: 400; margin: 50px 0 0; padding-bottom: 14px; border-bottom: 1px solid #e5e5e5; }

/* ---------- index grid (3 / 2 / 1 columns) ---------- */
.news-grid { display: flex; flex-wrap: wrap; padding-top: 30px; }
/* Bootstrap 3 .row clearfix pseudo-elements would become flex items. */
.news-grid:before, .news-grid:after { display: none; }
.news-grid > .news-grid-item { float: none; display: flex; margin-bottom: 30px; }

.news-card { display: flex; flex-direction: column; width: 100%; text-align: center; background: #fff; padding-bottom: 22px; }
/* Text sits inside the border; the image stays edge to edge. */
.news-card > :not(.news-card-media) { padding-left: 22px; padding-right: 22px; }
.news-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f3f3f3; margin-bottom: 18px; border-bottom: 1px solid #ececec; }
.news-card-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: #cfcfcf; font-size: 56px; }

.news-card-date { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #999; margin-bottom: 8px; }
.news-page .news-card-title { font-size: 20px; font-weight: 400; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; }
.news-page .news-card-title a { color: #222; text-decoration: none; }
.news-page .news-card-title a:hover { text-decoration: underline; }
.news-card-summary {
    color: #666; font-size: 14px; line-height: 1.6; margin: 0 0 16px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card-more { margin-top: auto; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #222; }
.news-card-more:hover { text-decoration: none; opacity: .7; }

/* ---------- numbered pager ---------- */
.news-pager { padding: 10px 0 50px; }
.news-pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.news-pager a, .news-pager-current, .news-pager-gap {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 10px; border-radius: 6px; font-size: 14px;
}
.news-pager a { border: 1px solid #e3e3e3; color: #222; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.news-pager a:hover, .news-pager a:focus { border-color: #222; text-decoration: none; }
.news-pager-current { background: #222; color: #fff; border: 1px solid #222; font-weight: 600; }
.news-pager-gap { color: #999; }

/* ---------- post page ---------- */
.news-post-header { max-width: 820px; margin: 0 auto; padding: 40px 0 30px; text-align: center; }
.news-breadcrumb { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.news-breadcrumb a { color: #888; }
.news-breadcrumb span { color: #ccc; padding: 0 10px; }
.news-page .news-post-header h1 { font-size: 44px; font-weight: 400; line-height: 1.2; margin: 0 0 16px; color: #1d1d1d; }
.news-post-dek { font-size: 19px; line-height: 1.55; color: #666; margin: 0 auto 24px; max-width: 680px; }

.news-byline { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.news-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; border-radius: 50%; background: #222; color: #fff;
    font-size: 15px; font-weight: 600; letter-spacing: .04em;
}
.news-byline-author { display: block; font-weight: 600; color: #222; font-size: 15px; }
.news-byline-meta { display: block; color: #888; font-size: 13px; }
.news-dot { padding: 0 6px; }

/* Natural size, only ever scaled down (fits the column, max 520px tall); the frame shrinks to the image. */
.news-featured { width: fit-content; max-width: 100%; margin: 0 auto 40px; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, .12); }
.news-featured img { display: block; max-width: 100%; max-height: 520px; width: auto; height: auto; }

.news-post-layout { padding-bottom: 60px; }

/* Reading pane: warm paper tint, same card frame as the sidebar. */
.news-reading-pane {
    background: #fbf9f5; border: 1px solid #ebe6dc; border-radius: 8px; padding: 44px 52px 36px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 6px 16px rgba(0, 0, 0, .05);
}
/* Featured image placed Left/Right: natural size, never wider than 45% of the pane. */
.news-wrap-image { width: auto; height: auto; max-width: 45%; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.news-wrap-left { float: left; margin: 6px 30px 18px 0; }
.news-wrap-right { float: right; margin: 6px 0 18px 30px; }
/* The pane contains the float and the share row starts below it. */
.news-reading-pane { display: flow-root; }
.news-share { clear: both; }
.news-reading-pane .news-share { border-top-color: #e6e0d4; }
.news-reading-pane .news-share a, .news-reading-pane .news-copy-link { background: #fff; }

.news-body { font-size: 18px; line-height: 1.8; color: #2f2f2f; max-width: 700px; }
.news-page .news-body h2 { font-size: 28px; font-weight: 600; line-height: 1.3; margin: 40px 0 14px; color: #1d1d1d; }
.news-page .news-body h3 { font-size: 22px; font-weight: 600; margin: 32px 0 10px; color: #1d1d1d; }
/* style.css sets "p, li, li a { color: #000 }" site-wide, which beats inherited color. */
.news-body p, .news-body li { color: #2f2f2f; }
.news-page .news-body > :first-child { margin-top: 0; }
.news-page .news-body > :last-child { margin-bottom: 0; }
.news-body p { margin: 0 0 22px; }
.news-body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.news-body ul, .news-body ol { margin: 0 0 22px; padding-left: 26px; }
.news-body li { margin-bottom: 6px; }
.news-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 10px 0; }
.news-body table { max-width: 100%; }
.news-body blockquote { margin: 30px 0; padding: 4px 0 4px 24px; border-left: 4px solid #222; font-size: 21px; font-style: italic; color: #444; }

/* share row */
.news-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid #e5e5e5; max-width: 700px; }
.news-share-heading { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #777; margin-right: 6px; }
.news-share a, .news-copy-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #e3e3e3; border-radius: 50px;
    background: #fff; color: #333; font-size: 16px; cursor: pointer; transition: border-color .2s, background .2s;
}
.news-share a:hover, .news-share a:focus, .news-copy-link:hover, .news-copy-link:focus { border-color: #222; text-decoration: none; }
.news-copy-link.is-copied { background: #222; border-color: #222; color: #fff; }
.news-copy-status { font-size: 13px; }
.news-copy-status:empty { display: none; }

/* sidebar */
.news-sidebar-inner { position: sticky; top: 20px; }
.news-sidebar-card {
    background: #fff; border: 1px solid #e3e3e3; border-radius: 8px; padding: 22px 22px 18px; margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 16px rgba(0, 0, 0, .06);
}
.news-page .news-sidebar-title { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #222; margin: 0 0 16px; }
.news-recent { list-style: none; margin: 0; padding: 0; }
.news-recent li + li { border-top: 1px solid #f0f0f0; }
.news-recent-link { display: flex; gap: 14px; align-items: center; padding: 12px 0; color: #222; }
.news-recent-link:hover, .news-recent-link:focus { text-decoration: none; }
.news-recent-link:hover .news-recent-title { text-decoration: underline; }
.news-recent-thumb {
    flex: none; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: #f3f3f3;
    display: flex; align-items: center; justify-content: center; color: #cfcfcf; font-size: 24px;
}
.news-recent-title { display: block; font-size: 15px; line-height: 1.35; margin-bottom: 3px; }
.news-recent time { font-size: 12px; color: #999; }
.news-sidebar-all { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #222; }

.news-cta { background: #222; border-color: #222; color: #ddd; }
.news-page .news-cta .news-sidebar-title { color: #fff; }
.news-page .news-cta p { color: #d6d6d6; font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.news-cta-button { display: inline-block; background: #fff; color: #222; padding: 10px 22px; border-radius: 50px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.news-cta-button:hover, .news-cta-button:focus { background: #e9e9e9; color: #222; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    .news-hero, .news-card { transition: none; }
    .news-card:hover { transform: none; }
}

@media (max-width: 991px) {
    /* Sidebar stacks under the article; no sticking. */
    .news-sidebar-inner { position: static; margin-top: 40px; }
    /* Stack the hero: image on top, text below. */
    .news-hero { flex-direction: column-reverse; min-height: 0; }
    .news-hero-media { aspect-ratio: 16 / 9; flex: none; }
    .news-hero-text { padding: 28px 25px; }
}

@media (max-width: 767px) {
    .news-page .news-header h1 { font-size: 30px; }
    .news-page .news-hero-title { font-size: 26px; }
    .news-page .news-post-header h1 { font-size: 30px; }
    .news-post-dek { font-size: 17px; }
    .news-reading-pane { padding: 26px 20px 22px; }
    /* Narrow screens: wrapped images sit above the text instead (still never upscaled). */
    .news-wrap-left, .news-wrap-right { float: none; display: block; max-width: 100%; margin: 0 auto 22px; }
    .news-body { font-size: 17px; }
    .news-featured { margin-bottom: 28px; }
}