/* ============================================================
   ZOUND — blog index + articles (blog.html, blog/*.html)
   Loaded after styles.css. Generated pages: tools/blog/build.py
   ============================================================ */

/* Both languages of a bilingual title/date are in the served HTML (indexable);
   CSS shows the one that matches <html lang>, which i18n.js flips on toggle.
   .en-only = English chrome that is pointless once the visitor is in Thai. */
html[lang="th"] .l-en,
html[lang="th"] .en-only { display: none; }
html:not([lang="th"]) .l-th { display: none; }

/* Thai text keeps a Thai face even while the interface is in English
   (the article bodies are Thai in both languages). */
.blog-card-title [lang="th"], .post-title [lang="th"], .post-pager-t [lang="th"] {
  font-family: "Noto Serif Thai", "Fraunces", Georgia, serif;
  line-height: 1.4;
}
.post-body[lang="th"] {
  font-family: "Noto Sans Thai", "Inter", system-ui, sans-serif;
  line-height: 1.9;
}
.post-body[lang="th"] h2, .post-body[lang="th"] h3, .post-body[lang="th"] h4,
.post-body[lang="th"] h5, .post-body[lang="th"] h6 {
  font-family: "Noto Serif Thai", "Fraunces", Georgia, serif;
  line-height: 1.4;
}

/* ---------- index ---------- */
.blog-hero {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(124px, 18vh, 186px) clamp(20px, 5vw, 64px) clamp(36px, 6vh, 64px);
}
.blog-hero .display-2 { margin: 14px 0 0; }
.blog-hero .lead { margin-top: 20px; max-width: 52ch; }
.blog-note { margin-top: 18px; color: var(--stone); font-size: 0.92rem; }

.blog-list {
  max-width: 1180px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px) clamp(56px, 9vh, 110px);
}
.blog-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 52px) clamp(18px, 2.4vw, 32px);
}
.blog-card a { display: block; color: inherit; text-decoration: none; }
.blog-card-fig {
  margin: 0 0 16px; aspect-ratio: 628 / 555; overflow: hidden;
  border-radius: 14px; background: var(--sand);
  box-shadow: 0 24px 60px -38px rgba(28,24,19,0.5);
}
.blog-card-fig img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.blog-card a:hover .blog-card-fig img,
.blog-card a:focus-visible .blog-card-fig img { transform: scale(1.04); }
.blog-card-meta {
  margin: 0 0 6px; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra);
}
html[lang="th"] .blog-card-meta, .blog-card-meta .l-th { letter-spacing: 0.04em; text-transform: none; }
.blog-card-title {
  font-family: "Fraunces", Georgia, serif; font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.3; letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}
.blog-card a:hover .blog-card-title { color: var(--terra); }

/* ---------- article ---------- */
.post {
  max-width: 760px; margin: 0 auto;
  padding: clamp(112px, 16vh, 156px) clamp(20px, 5vw, 40px) clamp(48px, 8vh, 96px);
}
.post-head { margin-bottom: clamp(28px, 4vw, 44px); }
.post-back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px;
  font-size: 0.86rem; font-weight: 500; color: var(--stone); text-decoration: none;
  transition: color .25s;
}
.post-back::before { content: "\2190"; transition: transform .25s; }
.post-back:hover { color: var(--ink); }
.post-back:hover::before { transform: translateX(-3px); }
html[lang="th"] .post-back { font-family: "Noto Sans Thai", "Inter", sans-serif; }
.post-date { margin-bottom: 14px; }
html[lang="th"] .post-date { letter-spacing: 0.04em; text-transform: none; }
.post-title { overflow-wrap: anywhere; }
.post-note { margin-top: 18px; color: var(--stone); font-size: 0.9rem; }

.post-body { font-size: 1.06rem; overflow-wrap: anywhere; }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.15em; }
.post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
  font-family: "Fraunces", Georgia, serif; font-weight: 400; line-height: 1.28;
  letter-spacing: -0.01em; margin: 2em 0 0.65em;
}
.post-body h2 { font-size: clamp(1.55rem, 3.2vw, 1.95rem); }
.post-body h3 { font-size: clamp(1.3rem, 2.6vw, 1.5rem); }
.post-body h4 { font-size: 1.2rem; }
.post-body h5, .post-body h6 { font-size: 1.06rem; }
.post-body strong, .post-body b { font-weight: 600; }
.post-body ul, .post-body ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.post-body li { margin: 0.4em 0; }
.post-body li > p { margin: 0; }
.post-body a { color: var(--terra); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body a:hover { color: var(--ink); }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.post-body blockquote { margin: 1.4em 0; padding-left: 1.1em; border-left: 2px solid var(--terra); color: var(--stone); }

.post-fig { margin: 1.8em 0; }
.post-fig img, .post-body img {
  display: block; width: 100%; height: auto; border-radius: 12px; background: var(--sand);
}
.post-video { margin: 1.8em 0; }
.post-video video { display: block; width: 100%; height: auto; border-radius: 12px; background: #000; }

/* tables scroll inside their own box, never widen the page */
.post-table { margin: 1.6em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-table table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 0.95rem; }
.post-table th, .post-table td {
  border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top;
}
.post-table th { background: var(--sand); font-weight: 600; }

/* newer / older */
.post-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: clamp(40px, 7vw, 64px); padding-top: 28px; border-top: 1px solid var(--line);
}
.post-pager a {
  display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px;
  color: inherit; text-decoration: none;
  transition: border-color .25s, background .25s;
}
.post-pager a:hover { border-color: var(--terra); background: var(--shell); }
.post-older { text-align: right; }
.post-pager-k {
  display: block; margin-bottom: 6px; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra);
}
html[lang="th"] .post-pager-k { letter-spacing: 0.04em; text-transform: none; }
.post-pager-t {
  display: block; font-family: "Fraunces", Georgia, serif; font-size: 1.02rem; line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
  .post-body { font-size: 1rem; }
  .post-pager { grid-template-columns: 1fr; }
  .post-older { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card-fig img, .post-back::before { transition: none; }
}