/* News module styles. */

/* News page (#51): main column (lead article + grid of cards) and a sidebar; one column on phones. */
.news-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1000px) { .news-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.news-main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.news-filter-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.news-filter-note p { margin: 0; font-weight: 600; }

/* Cards with a picture on top (no padding around the picture). */
.news-lead, .news-tile { padding: 0; overflow: hidden; display: flex; flex-direction: column; isolation: isolate; transition: box-shadow 250ms var(--ease-out); }
/* No border around cards with a picture: it showed as a light frame around the image (#61). A shadow separates them.
   The card itself does not move on hover: a moving card with rounded corners made the browser draw a thin light
   seam around the zooming picture (#61). Only the shadow changes, and the picture zooms inside its frame. */
.news-lead, .news-tile { border: 0; box-shadow: var(--shadow-sm), 0 1px 3px rgb(0 0 0 / 0.08); }
.news-lead:hover, .news-tile:hover { box-shadow: var(--shadow); transform: none; }
/* The picture fills its frame exactly (no gap from rounding), and the frame clips it with the card's corners. */
.news-lead-media, .news-tile-media { position: relative; display: block; overflow: hidden; background: var(--surface); }
.news-lead-media { aspect-ratio: 21 / 9; }
.news-tile-media { aspect-ratio: 16 / 9; }
.news-lead-image, .news-tile-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Smooth zoom: the picture is prepared as its own layer in advance (no stutter when the zoom starts). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .news-lead-image, .news-tile-image { transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
    .news-lead:hover .news-lead-image, .news-tile:hover .news-tile-image { transform: scale(1.04); }
}

.news-lead-body, .news-tile-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.news-lead-title { font-family: var(--font-serif); font-size: var(--text-2xl); margin: 0; line-height: 1.2; }
.news-tile-title { font-size: var(--text-lg); margin: 0; line-height: 1.3; }
.news-lead-title a, .news-tile-title a { color: var(--text); text-decoration: none; }
.news-lead-title a:hover, .news-tile-title a:hover { color: var(--primary); text-decoration: underline; }
.news-excerpt { color: var(--text-muted); margin: 0; }
.news-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
/* Wide screens: picture left, text right; the text decides the height (a tall photo no longer stretches the card). */
@media (min-width: 1000px) { .news-lead { flex-direction: row; } .news-lead-media { flex: 0 0 55%; aspect-ratio: auto; min-height: 300px; } }

/* Sidebar */
.news-aside { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 1000px) { .news-aside { position: sticky; top: calc(var(--header-height) + var(--space-4)); } }
.news-search { display: flex; gap: var(--space-2); padding: var(--space-3); }
.news-search input { flex: 1; min-width: 0; }
.news-aside-card { display: flex; flex-direction: column; gap: var(--space-3); }
.news-aside-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); margin: 0; }
.news-aside-title .icon { color: var(--primary); }
.news-aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.news-aside-list li { display: flex; flex-direction: column; }
.news-aside-list a { color: var(--text); text-decoration: none; font-weight: 600; }
.news-aside-list a:hover { color: var(--primary); }
.news-aside-counts a { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); margin-inline: calc(-1 * var(--space-2)); border-radius: var(--radius); font-weight: 500; }
.news-aside-counts a:hover, .news-aside-counts a[aria-current="true"] { background: var(--surface-2); }
.news-aside-counts a[aria-current="true"] { font-weight: 700; color: var(--primary); }
.news-aside-counts .count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.news-aside-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.news-aside-events a { display: flex; gap: var(--space-3); align-items: center; color: var(--text); text-decoration: none; }
.news-aside-events a:hover { color: var(--primary); }
.news-aside-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 2.8rem; height: 2.8rem; border-radius: var(--radius);
    background: color-mix(in srgb, var(--ev) 14%, var(--surface)); border-top: 3px solid var(--ev); font-size: 0.68rem; text-transform: uppercase; line-height: 1.1; }
.news-aside-date strong { font-size: 1rem; }

.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

/* Single post */
.news-post-page { max-width: 760px; }
.news-post header h1 { font-family: var(--font-serif); font-size: var(--text-3xl); margin: var(--space-2) 0 var(--space-5); }
.news-post-image { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: var(--space-5); }
.news-body { font-size: var(--text-lg); line-height: 1.7; }

/* Form */
.news-form-image { display: block; max-width: 240px; border-radius: var(--radius); margin-bottom: var(--space-2); }
.news-post > .detail-actions { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }   /* share (#75) */
.news-feed-link { margin-top: 0; align-self: flex-start; padding-inline: var(--space-2); }   /* RSS link (#75): right under the last box */