/* ============================================================
   Kobe International Counseling — blog styles (Pelican theme)
   Builds on colors_and_type.css + site.css. Matches the design's
   BlogCard list and adds long-form article typography.
   ============================================================ */

/* ===== Blog list ========================================== */
.blog-list { background: var(--bg-soft); padding: 80px 32px; }
.blog-list__inner { max-width: 1100px; margin: 0 auto; }
.blog-list__head { margin-bottom: 28px; }
.blog-list__eyebrow {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--forest-700); margin-bottom: 12px;
}
.blog-list__h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 52px; letter-spacing: -0.01em; line-height: 1.1;
  color: var(--forest-900); margin: 0; max-width: 20ch;
}
.blog-list__empty {
  font-family: var(--font-serif); font-size: 18px; color: var(--ink-700);
}

/* ===== Filter chips + search ============================== */
.blog-filter {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px 24px; flex-wrap: wrap; margin-bottom: 36px;
}
.blog-filter__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-chip {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--ink-700); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.blog-chip:hover { border-color: var(--forest-400); color: var(--forest-900); }
.blog-chip.is-active {
  background: var(--forest-900); border-color: var(--forest-900); color: var(--cream-50);
}
.blog-search {
  font-family: var(--font-serif); font-size: 15px;
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-elevated); color: var(--ink-900);
  min-width: 220px; outline: none;
}
.blog-search:focus { border-color: var(--forest-500); }
.blog-empty {
  display: none;
  font-family: var(--font-serif); font-size: 17px; color: var(--ink-600);
  padding: 24px 0;
}

/* ===== Post cards ========================================= */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
  background: var(--bg-elevated); border: 1px solid var(--border-soft);
  border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blog-card__imglink { display: block; }
.blog-card__img {
  width: 100%; height: 200px; object-fit: cover; display: block;
  background: var(--cream-100);
}
.blog-card__body { padding: 20px 22px 24px; }
.blog-card__eyebrow {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--forest-700); margin-bottom: 10px;
}
.blog-card__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.2; color: var(--forest-900); margin: 0 0 12px;
}
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__title a:hover { color: var(--forest-700); }
.blog-card__excerpt {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.6;
  color: var(--ink-700); margin: 0 0 18px;
}
.blog-card__meta {
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-500);
  letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: auto;
}
.blog-card__dot { color: var(--clay-500); }

/* ===== Single post ======================================== */
.post { background: var(--cream-50); padding: 72px 32px 88px; }
.post__inner { max-width: 720px; margin: 0 auto; }
.post__back {
  font-family: var(--font-sans); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--forest-700); text-decoration: none; display: inline-block; margin-bottom: 36px;
}
.post__back:hover { color: var(--forest-900); }
.post__eyebrow {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--forest-700); margin-bottom: 16px;
}
.post__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 46px; line-height: 1.12; letter-spacing: -0.01em;
  color: var(--forest-900); margin: 0 0 18px;
}
.post__meta {
  font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-500); margin-bottom: 36px;
}
.post__cover {
  width: 100%; max-height: 420px; object-fit: cover;
  border-radius: 10px; box-shadow: var(--shadow-md); margin-bottom: 40px;
}

/* Long-form body: markdown-rendered HTML */
.post__body { font-family: var(--font-serif); font-size: 18px; line-height: 1.75; color: var(--ink-800); }
.post__body > * { max-width: none; }
.post__body p { font-family: var(--font-serif); font-size: 18px; line-height: 1.75; color: var(--ink-800); margin: 0 0 24px; max-width: none; }
.post__body h2 {
  font-family: var(--font-display); font-weight: 500; font-size: 32px;
  line-height: 1.2; letter-spacing: -0.01em; color: var(--forest-900);
  margin: 44px 0 16px;
}
.post__body h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 24px;
  line-height: 1.25; color: var(--forest-900); margin: 36px 0 12px;
}
.post__body ul, .post__body ol { margin: 0 0 24px; padding-left: 24px; }
.post__body li { margin-bottom: 8px; }
.post__body blockquote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 24px; line-height: 1.4; color: var(--forest-900);
  border-left: 2px solid var(--clay-500); padding-left: 28px; margin: 32px 0;
}
.post__body blockquote p { font-family: inherit; font-size: inherit; font-style: inherit; color: inherit; margin: 0; }
.post__body a { color: var(--link); }
.post__body img { border-radius: 10px; box-shadow: var(--shadow-sm); margin: 16px 0; }
.post__body hr { border: 0; border-top: 1px solid var(--border-soft); margin: 40px 0; }
.post__body code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--cream-100); padding: 2px 6px; border-radius: 4px;
}

/* ===== Responsive ========================================= */
@media (max-width: 960px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-list__h1 { font-size: 40px; }
}
@media (max-width: 640px) {
  .blog-list, .post { padding: 56px 20px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-filter { flex-direction: column; align-items: stretch; }
  .blog-search { min-width: 0; width: 100%; }
  .post__title { font-size: 34px; }
}