/* News pages — editorial styling for the public news index and post detail.
   Token-driven, so they inherit each theme's palette/fonts/radius. Rendered on
   the base shell; the shared header/footer/container come from public-shell.css
   (linked just before this), which also defines the --ps-* vars consumed here.
   Linked only on /news/ pages; nothing here depends on JS. */

.section--news, .section--news-detail { padding-block: clamp(3rem, 7vw, 6rem); }
.section--news .container { max-width: 60rem; }
.section--news-detail .container { max-width: 44rem; }
.section--news .section__heading, .section--news-detail .section__heading { font-family: var(--ps-display); line-height: 1.1; }
.section--news .section__heading {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0 0 2.25rem; padding-bottom: 1.4rem; border-bottom: var(--ps-line);
}

/* --- News index: an editorial list of posts ------------------------------ */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-card { padding-block: clamp(1.75rem, 4vw, 2.75rem); border-top: var(--ps-line); }
.news-card:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 40rem) {
  .news-card { display: flex; gap: clamp(1.5rem, 4vw, 2.75rem); align-items: flex-start; }
  /* No cover? flex lets the body take the full row, so the layout never breaks. */
  .news-card__cover { flex: 0 0 clamp(13rem, 30vw, 20rem); margin: 0; }
}
.news-card__cover { display: block; overflow: hidden; margin: 0 0 1.1rem; border-radius: var(--radius); }
.news-card__cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.news-card__cover:hover img { transform: scale(1.04); }
.news-card__body { flex: 1; display: flex; flex-direction: column; }
.news-card__date { order: -1; margin: 0 0 0.6rem; font-family: var(--ps-sans); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-muted); }
.news-card__title { font-family: var(--ps-display); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; margin: 0; }
.news-card__title a {
  color: var(--color-text); text-decoration: none;
  background: linear-gradient(var(--color-primary), var(--color-primary)) 0 100% / 0% 1px no-repeat;
  padding-bottom: 2px; transition: background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s ease;
}
.news-card__title a:hover, .news-card__title a:focus-visible { color: var(--color-primary); background-size: 100% 1px; }
.news-empty { color: var(--color-muted); text-align: center; border: 1px dashed var(--color-border); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.25rem); }

/* --- News detail: a clean reading column --------------------------------- */
.news-detail__back { margin: 0 0 1.75rem; }
.news-detail__back a { font-family: var(--ps-sans); font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-primary); text-decoration: none; }
.news-detail__back a:hover, .news-detail__back a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.section--news-detail .section__heading { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 0.75rem; }
.news-detail__date { margin: 0 0 2rem; font-family: var(--ps-sans); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-muted); }
.news-detail__cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin: 0 0 2.25rem; }

/* Article body: markdown rendered server-side (injection-safe). The base shell
   loads no prose styles, so style the long-form content here. */
.news-detail__body { font-size: 1.075rem; line-height: 1.75; color: var(--color-text); }
.news-detail__body > :first-child { margin-top: 0; }
.news-detail__body p { margin: 0 0 1.25rem; }
.news-detail__body h2 { font-family: var(--ps-display); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin: 2.25rem 0 0.8rem; }
.news-detail__body h3 { font-family: var(--ps-display); font-size: 1.35rem; line-height: 1.25; margin: 1.8rem 0 0.6rem; }
.news-detail__body a { color: var(--color-primary); text-underline-offset: 3px; }
.news-detail__body ul, .news-detail__body ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.news-detail__body li { margin: 0 0 0.5rem; }
.news-detail__body img { width: 100%; height: auto; border-radius: var(--radius); margin: 1.75rem 0; }
.news-detail__body blockquote {
  margin: 1.75rem 0; padding: 0.3rem 0 0.3rem 1.5rem; border-left: 2px solid var(--color-primary);
  font-family: var(--ps-display); font-size: 1.4rem; line-height: 1.4; font-style: italic; color: var(--color-text);
}
.news-detail__body blockquote p:last-child { margin-bottom: 0; }
.news-detail__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); padding: 0.12em 0.4em; border-radius: 0.3rem; }
.news-detail__body pre { overflow: auto; background: color-mix(in srgb, var(--color-text) 5%, var(--color-surface)); border: var(--ps-line); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.news-detail__body pre code { background: none; padding: 0; }
.news-detail__body hr { border: 0; border-top: var(--ps-line); margin: 2.5rem 0; }