/* ══════════════════════════════════════════════════════════════════════════
   news/news.css — the /news/ pages, written by /news-admin/. Loaded after
   site.css and built only from its tokens and rhythm steps, so the news
   reads as part of the same site rather than a blog bolted on.
   ══════════════════════════════════════════════════════════════════════ */

.news-head { padding-top: var(--gap-lg); }
.news-head .section-lede { margin-bottom: var(--gap-lg); }

.news-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}
.news-grid > li { display: flex; }

.news-card {
  display: flex; flex-direction: column; width: 100%;
  background: var(--color-surface); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); overflow: hidden;
  color: var(--text-body);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.news-card:hover { color: var(--text-body); box-shadow: 0 0 0 1px var(--color-accent); }
.news-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.news-card-figure { display: block; aspect-ratio: 4 / 3; background: #000; overflow: hidden; }
.news-card-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-card-body { display: block; padding: var(--space-4) var(--space-6) var(--space-6); }
.news-card-title {
  display: block; margin: var(--space-2) 0;
  font-size: calc(19px * var(--title-scale)); line-height: 1.4; font-weight: 600;
  color: var(--color-text);
}
.news-card-text {
  display: block; font-size: calc(14px * var(--text-scale)); line-height: 1.7;
  color: var(--text-muted);
}

.news-date {
  display: block;
  font-size: calc(12px * var(--text-scale)); letter-spacing: 0.06em;
  color: var(--color-accent);
}

.news-empty { color: var(--text-muted); }

/* — one story ───────────────────────────────────────────────────────────── */
/* A reading column rather than the full 1240 shell: a Thai paragraph set
   across a desktop screen is too long a line to follow back. */
.news-article { max-width: 860px; padding-top: var(--gap-lg); }
.news-back { margin: 0 0 var(--space-8); font-size: calc(13px * var(--text-scale)); }
.news-back a { color: var(--text-interactive); }
.news-back a:hover { color: var(--color-accent-100); }
.news-title {
  margin: var(--space-3) 0 var(--space-8);
  font-size: calc(34px * var(--title-scale)); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--color-text);
}
.news-photo {
  margin: 0 0 var(--space-8);
  border-radius: var(--radius-md); overflow: hidden; background: #000;
}
/* A portrait phone photo at the full column width stands taller than a
   laptop screen; held to the window height it shows whole, on black. */
.news-photo img { display: block; width: 100%; height: auto; max-height: 85vh; object-fit: contain; }
.news-body p {
  margin: 0 0 var(--space-6);
  font-size: calc(15px * var(--text-scale)); line-height: 1.85;
  color: var(--text-body);
}
.news-photos { margin-top: var(--gap-lg); }

.news-more { padding-top: 0; }
.news-more .kicker { margin-bottom: var(--space-6); }

.news-contact .section-title { margin-bottom: var(--space-6); }
.news-contact .contact-list { margin-bottom: var(--space-8); }
.news-contact-more { margin: 0; }

@media (max-width: 680px) {
  .news-title { font-size: calc(26px * var(--title-scale)); }
}