/* static/css/blog.css
   Blog-specific typography and layout. Applied only on pages with
   type=blog (see head.html conditional). */

:root {
  /* Match the corporate site (M PLUS 1, loaded site-wide via head.html). */
  --blog-font-body: "M PLUS 1", -apple-system, BlinkMacSystemFont,
                    "Hiragino Sans", "Yu Gothic", "Noto Sans JP",
                    system-ui, sans-serif;
  --blog-font-mono: "JetBrains Mono", "Consolas", "SFMono-Regular", monospace;
  --blog-measure: 680px;
  --blog-body-size: 17px;
  --blog-line-height: 1.75;
}

.blog-article {
  font-family: var(--blog-font-body);
  font-size: var(--blog-body-size);
  line-height: var(--blog-line-height);
  max-width: var(--blog-measure);
  margin: 2rem auto;
  padding: 0 1rem;
}

.blog-article h2 { margin-top: 2.5em; font-size: 1.6rem; }
.blog-article h3 { margin-top: 1.8em; font-size: 1.25rem; }
.blog-article pre,
.blog-article code { font-family: var(--blog-font-mono); }
.blog-article pre {
  background: #f6f8fa;
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
}
.blog-article ul,
.blog-article ol {
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.blog-list {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: var(--blog-font-body);
}
.blog-list-header { margin-bottom: 2.5rem; }
.blog-list-intro {
  line-height: 1.8;
  color: #555;
  max-width: 820px;
}
.blog-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 800px) {
  .blog-list-grid { grid-template-columns: 1fr; }
}

/* Related articles: narrower than the main list, smaller cards. Lives below
   the article body so it should align with the article column visually. */
.blog-related {
  max-width: 920px;
  margin: 4rem auto 2rem;
  padding: 0 1rem;
  font-family: var(--blog-font-body);
}
.blog-related h2 {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 1rem;
  font-weight: 600;
}
.blog-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.blog-related-grid .blog-card-title { font-size: .95rem; line-height: 1.4; }
.blog-related-grid .blog-card-meta  { font-size: .8rem; }
.blog-related-grid .blog-card-summary { font-size: .8rem; -webkit-line-clamp: 2; }
.blog-related-grid .blog-card-body { padding: .7rem !important; }
@media (max-width: 800px) {
  .blog-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .blog-related-grid { grid-template-columns: 1fr; }
}
.blog-card {
  display: flex; flex-direction: column;
  border-radius: 8px; overflow: hidden;
  background: var(--blog-card-bg, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.blog-card-img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.blog-card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-tag-chip {
  display: inline-block; padding: .2em .6em; border-radius: 999px;
  font-size: .85em; background: #eef2f7; color: #334; margin-right: .4em;
}

.blog-search { display: flex; align-items: center; margin-left: 8px; }
.blog-search-trigger {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; padding: 8px 10px; line-height: 1;
  color: var(--color-text, #222); border-radius: 4px;
}
.blog-search-trigger:hover { background: rgba(0,0,0,0.06); }
#pagefind-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.4);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 10vh 16px 16px;
}
#pagefind-modal[hidden] { display: none; }
#pagefind-modal #search {
  background: #fff; border-radius: 8px; width: min(640px, 100%);
  max-height: 80vh; overflow-y: auto; padding: 1.25rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.blog-notice {
  border-left: 4px solid var(--blog-notice-color, #2a6df4);
  background: var(--blog-notice-bg, #eef4ff);
  padding: .8em 1em; margin: 1em 0; border-radius: 4px;
}
.blog-notice.info    { --blog-notice-color: #2a6df4; --blog-notice-bg: #eef4ff; }
.blog-notice.warning { --blog-notice-color: #e0a52b; --blog-notice-bg: #fff6e0; }
.blog-notice.danger  { --blog-notice-color: #d94545; --blog-notice-bg: #fdecec; }
.blog-textbox  { border: 1px solid #ccd; padding: 1em; margin: 1em 0; border-radius: 4px; }
.blog-whitebox { background: #fff; border: 1px solid #ddd; padding: 1em; margin: 1em 0; border-radius: 4px; }