/* News and events: the event line and status mark on the news cards (home page,
   news index and the advocates' pages), the index's filter and year groups, and the
   post page. The card itself (.news-card, .news-meta, .tag) is in src/styles.css.
   Loaded by layouts/home.njk, news-index.njk, post.njk and advocate.njk. */

/* ------------------------------------------------------------ cards */
.news-card .news-meta { flex-wrap: wrap; row-gap: 8px; }
/* in the two- and three-column grids the date always sits under the tag, so every
   title in a row starts at the same height (a long Maltese or Italian tag, or a date
   across two months, would otherwise push one title down a line). Phones have one
   column and keep tag and date on one line where they fit. 760px is where
   .news-grid gets its second column (src/styles.css) */
@media (min-width: 760px) {
  .news-card .news-meta { flex-direction: column; align-items: flex-start; }
}
.news-card p.news-event {
  margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  font-size: .86rem; line-height: 1.45; color: var(--muted);
}
.news-place { display: inline-flex; align-items: center; gap: 6px; }
.news-place .icon { width: 15px; height: 15px; color: var(--navy-400); }
/* a quiet mark: small capitals, no fill; upcoming events get the orange dot */
.news-status {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 .68rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.news-status[data-status="upcoming"], .news-status[data-status="now"] { color: var(--orange-ink); }
.news-status[data-status="upcoming"]::before, .news-status[data-status="now"]::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none;
}
.news-status[hidden] { display: none; }
/* an event that is over: its tag says "Past event", in quiet limestone rather than the orange (4.5:1) */
.tag.tag-past { background: var(--stone-100); color: var(--muted); }
/* long excerpts stop after four lines (the whole text is on the post) */
.news-card p.news-excerpt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}

/* ------------------------------------------------------------ index: filter and years */
.news-archive { padding-top: clamp(48px, 6vw, 80px); }
.news-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  margin-bottom: clamp(44px, 6vw, 72px); padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
.news-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.news-filter {
  display: inline-flex; gap: 3px; padding: 3px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.news-filter-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 2px; cursor: pointer;
  background: transparent; color: var(--navy); font: 600 .9rem/1 var(--sans); letter-spacing: .01em;
  transition: background-color .25s ease, color .25s ease;
}
.news-filter-btn:hover { background: var(--stone-100); }
.news-filter-btn[aria-pressed="true"] { background: var(--navy-900); color: #fff; }
.news-filter-n { font-weight: 500; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; transform: translateY(1px); }
.news-filter-btn[aria-pressed="true"] .news-filter-n { color: var(--navy-200); }
.news-count { font-size: .9rem; color: var(--muted); }
.news-years { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.news-years-label { font: 600 .72rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.news-years ul { list-style: none; display: flex; flex-wrap: wrap; }
.news-years a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 0 4px;
  font: 500 1.2rem/1 var(--serif); color: var(--navy); text-decoration: none; font-variant-numeric: lining-nums;
  text-decoration-color: var(--orange); text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.news-years a:hover { color: var(--ink); text-decoration-line: underline; }
/* without JavaScript every post shows: there is nothing to filter with. With it, the
   buttons keep their place but stay invisible until news.js has wired them, so they
   never show without working and nothing moves when they appear */
.no-js .news-filter-row { display: none; }
.news-filter-row:not(.is-ready) { visibility: hidden; }

.news-year + .news-year { margin-top: clamp(56px, 7vw, 96px); }
.news-year-title {
  display: flex; align-items: center; gap: 22px; margin-bottom: 28px;
  font-size: clamp(1.9rem, 1.45rem + 1.3vw, 2.6rem); line-height: 1; font-variant-numeric: lining-nums;
}
.news-year-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* the filter: data-show on the list ("news" or "events", set from the address before
   the cards are drawn, then by news.js) hides the other type, and any year (and its
   link) with nothing of that type */
.news-archive[data-show="news"] li[data-type="events"],
.news-archive[data-show="events"] li[data-type="news"],
.news-archive[data-show="news"] [data-has-news="false"],
.news-archive[data-show="events"] [data-has-events="false"] { display: none; }
/* the first year shown keeps the usual distance from the toolbar (a hidden year before
   it would otherwise give it the gap between two years) */
.news-archive[data-show] .news-year + .news-year { margin-top: 0; }
.news-archive[data-show="news"] .news-year[data-has-news="true"] ~ .news-year,
.news-archive[data-show="events"] .news-year[data-has-events="true"] ~ .news-year { margin-top: clamp(56px, 7vw, 96px); }
/* the filter must not rebuild the toolbar. Below the widest screens the years keep
   their own row whatever is shown (a shorter list would fit beside the filter and the
   archive would jump). The Maltese toolbar needs about 1111px on one row and each new
   year adds 48px, so this runs to 1279px: room for an eighth year (raise it again
   when a ninth appears) */
@media (min-width: 760px) and (max-width: 1279px) {
  .news-years { flex-basis: 100%; }
}
/* phones: a filtered-out year keeps its place, invisible, at the end of the list, so
   the list wraps to the same number of rows whichever type is shown */
@media (max-width: 759px) {
  .news-archive[data-show="news"] .news-years [data-has-news="false"],
  .news-archive[data-show="events"] .news-years [data-has-events="false"] { display: block; visibility: hidden; order: 1; }
}

@media (max-width: 759px) {
  .news-tools { flex-direction: column; align-items: stretch; }
  .news-filter-row { flex-direction: column; align-items: stretch; }
  .news-filter { display: flex; }
  /* equal segments, unless a label needs more room */
  .news-filter-btn { flex: 1 1 0; padding: 0 12px; }
  .news-years { flex-direction: column; align-items: flex-start; gap: 4px; }
  .news-years ul { margin-left: -4px; }
}
/* phones: the archive is a compact list. An event card's summary only repeats its
   title ("… will be attending …"), so it goes; a news card keeps three lines of its
   summary. The home page keeps the full cards. */
@media (max-width: 759px) {
  .news-archive .news-card { min-height: 0; padding: 22px 22px 24px; }
  .news-archive .news-card-title { margin-top: 14px; font-size: 1.3rem; line-height: 1.22; }
  .news-archive li[data-type="events"] .news-card p.news-excerpt,
  .news-archive .news-more { display: none; }
  .news-archive .news-card p.news-excerpt { -webkit-line-clamp: 3; line-clamp: 3; }
  .news-archive .news-card p.news-event { margin-top: 10px; }
  .news-archive .news-grid { gap: 14px; }
}
/* the Maltese labels are long: the counts stay in the status line on small phones */
@media (max-width: 419px) {
  .news-filter-n { display: none; }
  .news-filter-btn { padding: 0 8px; font-size: .86rem; }
}

/* ------------------------------------------------------------ post */
/* a calmer title than the inner pages' display size: some migrated titles are a
   sentence long, and the post under them is often a paragraph */
.post-hero h1 { max-width: 30ch; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.3rem); line-height: 1.08; text-wrap: balance; }
.post-hero h1.post-title-long { max-width: 38ch; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.12; }
@media (max-width: 419px) {
  .post-hero h1 { font-size: 1.8rem; }
  .post-hero h1.post-title-long { font-size: 1.55rem; }
}
.post-event {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 30px;
  font-size: clamp(1rem, .96rem + .2vw, 1.1rem); color: var(--navy-200);
}
.post-event-item { display: inline-flex; align-items: center; gap: 10px; }
.post-event-item .icon { width: 18px; height: 18px; color: var(--orange); }
.post-hero .news-status {
  padding: 6px 10px 5px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 2px; color: var(--navy-200);
}
.post-hero .news-status[data-status="upcoming"], .post-hero .news-status[data-status="now"] { color: #fff; border-color: rgba(229, 96, 42, .7); }

/* a post is often a paragraph or two: less air above it than a full section */
.post-body { padding-block: clamp(56px, 7vw, 104px) clamp(64px, 8vw, 112px); }
.prose .post-posted { margin-top: 2em; font-size: .92rem; color: var(--muted); }
.post-body .prose li + li { margin-top: .6em; }

.post-nav {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 56px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.prose .post-nav-link {
  display: flex; flex-direction: column; gap: 10px; min-height: 44px; padding: 26px 28px 28px 0;
  color: var(--ink); text-decoration: none;
}
.prose .post-nav-newer { grid-column: 2; align-items: flex-end; text-align: right; padding: 26px 0 28px 28px; border-left: 1px solid var(--line); }
/* the newest and the oldest post have one neighbour: it takes the whole row, with no
   rule beside an empty half (the newer link stays on the right) */
.prose .post-nav-older:only-child, .prose .post-nav-newer:only-child { grid-column: 1 / -1; border-left: 0; border-top: 0; }
.post-nav-dir {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 .72rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.post-nav-dir .icon { width: 16px; height: 16px; color: var(--orange-ink); transition: transform .35s var(--ease); }
.post-nav-older .post-nav-dir .icon { transform: scaleX(-1); }
.post-nav-older:hover .post-nav-dir .icon { transform: scaleX(-1) translateX(4px); }
.post-nav-newer:hover .post-nav-dir .icon { transform: translateX(4px); }
.post-nav-title { font: 500 1.22rem/1.3 var(--serif); color: var(--ink); text-wrap: balance; }
.post-nav-link:hover .post-nav-title {
  text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.post-nav + .prose-back { margin-top: 24px; }
@media (max-width: 599px) {
  .post-nav { grid-template-columns: 1fr; }
  .prose .post-nav-link { padding: 22px 0; }
  .prose .post-nav-newer { grid-column: auto; align-items: flex-start; text-align: left; padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* more news: a short list under the article */
.post-more { padding-block: clamp(64px, 8vw, 104px); }
.post-more-heading { margin-bottom: clamp(28px, 4vw, 44px); font-size: var(--h2-inner); }
.post-more-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.post-more-list li { position: relative; padding-top: 24px; border-top: 1px solid rgba(20, 26, 51, .2); }
.post-more-list .news-meta { flex-wrap: wrap; row-gap: 8px; }
.post-more-title { margin-top: 16px; font-size: 1.32rem; line-height: 1.25; }
.post-more-title a { text-decoration: none; }
.post-more-title a::after { content: ""; position: absolute; inset: 0; }
.post-more-title a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post-more-title a:focus-visible { outline: none; }
.post-more-title a:focus-visible::after { outline: 2px solid var(--orange); outline-offset: 6px; border-radius: 2px; }
@media (max-width: 859px) {
  .post-more-list { grid-template-columns: 1fr; gap: 28px; }
}

/* ------------------------------------------------------------ forced colours, print */
@media (forced-colors: active) {
  /* the pressed button's fill is dropped in forced colours: mark it with a frame and an underline */
  .news-filter-btn[aria-pressed="true"] { outline: 2px solid ButtonText; outline-offset: -4px; text-decoration: underline; text-underline-offset: 4px; }
  .news-year-title::after { background: CanvasText; }
}
@media print {
  .news-tools, .post-nav, .post-more { display: none !important; }
  .news-card p.news-excerpt { display: block; -webkit-line-clamp: none; line-clamp: none; }
}