/* ============================================
   Lucky Tea (鹊茶) News / Article System
   Standardized layout for /{lang}/news/ — list cards,
   article hero, prose body, and supporting blocks.
   Loaded globally (Layout.astro) so every new article
   published via /tea-sa inherits it automatically.
   Uses --font-display / --font-body (lang-agnostic tokens
   set per [lang]/[dir] in tokens.css) and logical CSS
   properties so Arabic (RTL) mirrors without extra rules.
   Kept in sync at public/styles/article.css (see tokens.css).
   ============================================ */

/* ---------- List page: card grid ---------- */
.news-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.news-card {
  display: block;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.news-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.news-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.news-card-body {
  padding: var(--space-5);
}

.news-card-body time,
.news-eyebrow {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.news-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--space-2);
}

.news-card-desc {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* ---------- Article hero ---------- */
.news-hero {
  /* header is position:fixed at --header-height; offset so the title
     never sits underneath it (matches Hero.astro / privacy.astro) */
  padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-6);
}

.news-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.news-meta a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.news-meta a:hover {
  color: var(--color-accent-warm);
}

.news-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  max-width: 900px;
}

/* ---------- Article body shell ---------- */
.news-body {
  max-width: 760px;
  padding-bottom: var(--space-14);
}

.news-body > figure img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.news-body > figure figcaption {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

/* ---------- Prose: table of contents ---------- */
.news-post .toc {
  background: var(--color-bg-wash-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-8) 0;
}

.news-post .toc strong {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.news-post .toc ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.news-post .toc a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.news-post .toc a:hover {
  color: var(--color-accent-warm);
}

/* ---------- Prose: sections + headings ---------- */
.news-post section + section,
.news-post section + aside,
.news-post section {
  margin-top: var(--space-10);
}

.news-post > section:first-of-type,
.news-post > .toc + section {
  margin-top: 0;
}

.news-post h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text-primary);
  padding-inline-start: var(--space-3);
  border-inline-start: 4px solid var(--color-accent-gold);
  margin-bottom: var(--space-4);
}

.news-post h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-accent-warm);
  margin-bottom: var(--space-3);
}

.news-post p {
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
}

.news-post p:last-child {
  margin-bottom: 0;
}

.news-post ul,
.news-post ol:not(.toc ol) {
  margin: var(--space-4) 0;
  padding-inline-start: var(--space-6);
}

.news-post li + li {
  margin-top: var(--space-2);
}

.news-post blockquote {
  border-inline-start: 3px solid var(--color-border);
  padding-inline-start: var(--space-4);
  color: var(--color-text-secondary);
  font-style: italic;
  margin: var(--space-4) 0;
}

/* ---------- Prose: visit-us CTA ---------- */
.news-post .visit-us,
.visit-us {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border-inline-start: 3px solid var(--color-accent-gold);
  padding: var(--space-5);
}

.news-post .visit-us ul,
.visit-us ul {
  list-style: none;
  margin-top: var(--space-2);
  padding-inline-start: 0;
}

.news-post .visit-us a,
.visit-us a {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.news-post .visit-us a:hover,
.visit-us a:hover {
  color: var(--color-accent-warm);
}

/* ---------- Prose: sources ---------- */
.news-post .sources {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}

.news-post .sources h3 {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

.news-post .sources ol {
  padding-inline-start: var(--space-5);
}

.news-post .sources li {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.news-post .sources a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--color-text-secondary);
}

.news-post .sources a:hover {
  color: var(--color-accent-warm);
}

/* ---------- FAQ ---------- */
.faq h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-5);
}

.faq dl {
  display: flex;
  flex-direction: column;
}

.faq dt {
  font-weight: 700;
  color: var(--color-text-primary);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.faq dt:first-child {
  padding-top: 0;
  border-top: none;
}

.faq dd {
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  padding-bottom: var(--space-5);
}

/* ---------- Share buttons ---------- */
.share-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.share-buttons .share-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.share-buttons .share-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: white;
  color: var(--color-text-secondary);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.share-btn svg {
  width: 16px;
  height: 16px;
}

.share-btn:hover,
.share-btn:focus-visible {
  color: var(--color-accent-warm);
  border-color: var(--color-accent-warm);
  background: var(--color-bg-wash-light);
}

.share-btn.copied {
  color: var(--color-matcha);
  border-color: var(--color-matcha);
}

/* ---------- More articles ---------- */
.more-articles {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-10) 0 var(--space-14);
}

.more-articles h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.more-articles-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.more-article-card {
  display: block;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.more-article-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.more-article-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.more-article-body time {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}