/* Blog: the list page /blog/ and the articles /blog/<slug>/ (see README, "Blog") */
.blog-hero { padding: 64px 0 40px; background-color: var(--light_navy); }
.blog-wrap { max-width: 800px; margin: 0 auto; }
.blog-kicker { display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: 30px; background-color: #e800451a; color: #c4003a; font-size: 14px; font-weight: 600; text-decoration: none; }
a.blog-kicker:hover { background-color: #e8004529; }
.blog-hero h1 { margin: 0 0 16px; color: var(--primary-color); font-size: 48px; font-weight: 600; line-height: 115%; }
.blog-meta, .blog-lead { margin: 0; color: #4a5070; font-size: 16px; line-height: 160%; }
.blog-lead { font-size: 20px; }

/* article body */
.blog-body { padding: 40px 0 96px; color: var(--primary-color); }
.blog-body p, .blog-body li { font-size: 18px; line-height: 170%; }
.blog-body p { margin: 0 0 20px; }
.blog-body h2 { margin: 56px 0 16px; font-size: 32px; font-weight: 600; line-height: 125%; scroll-margin-top: 110px; }
.blog-body h3 { margin: 32px 0 10px; font-size: 22px; font-weight: 600; line-height: 135%; }
.blog-body a { color: #c4003a; text-decoration: underline; text-underline-offset: 3px; }
.blog-body a:hover { color: var(--primary-color); }
.blog-body ul, .blog-body ol { margin: 0 0 24px; padding-left: 24px; }
.blog-body li { margin-bottom: 8px; }
.blog-figure { margin: 8px 0 32px; }
.blog-figure img { display: block; width: 100%; height: auto; border-radius: 16px; }
.blog-answer { margin: 0 0 24px; padding: 20px 24px; border-left: 4px solid var(--2nd-color); border-radius: 0 16px 16px 0; background-color: var(--light_navy); }
.blog-answer p { margin: 0; }
.blog-box { margin: 0 0 32px; padding: 24px 28px; border-radius: 16px; background-color: var(--light_navy); }
.blog-body .blog-box-title { margin: 0 0 12px; font-size: 20px; font-weight: 600; line-height: 140%; }
.blog-box ul, .blog-box ol { margin: 0; }
.blog-box li:last-child { margin-bottom: 0; }
.blog-table-wrap { margin: 8px 0 32px; overflow-x: auto; border: 1px solid #dfe5fb; border-radius: 16px; }
.blog-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; line-height: 150%; }
.blog-table th, .blog-table td { padding: 12px 16px; border-bottom: 1px solid #dfe5fb; text-align: left; vertical-align: top; }
.blog-table th { background-color: var(--light_navy); font-weight: 600; }
.blog-table tbody tr:last-child td { border-bottom: 0; }
.blog-faq-item { padding: 20px 0 4px; border-top: 1px solid #dfe5fb; }
.blog-body .blog-faq-q { margin-bottom: 8px; font-weight: 600; }
.blog-more { margin-top: 64px; }

/* list page */
.blog-list { padding: 56px 0 96px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 1100px; margin: 0 auto; }
.blog-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dfe5fb; border-radius: 20px; background-color: var(--white); color: var(--primary-color); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.blog-card:hover { box-shadow: 0 12px 32px #00008014; transform: translateY(-2px); }
.blog-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-card-body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 24px; }
.blog-card h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 135%; }
.blog-card p { margin: 0; color: #4a5070; font-size: 16px; line-height: 160%; }
.blog-card-more { margin-top: auto; padding-top: 4px; color: #c4003a; font-size: 16px; font-weight: 600; }

@media screen and (max-width: 767px) {
  .blog-hero { padding: 40px 0 28px; }
  .blog-hero h1 { font-size: 34px; }
  .blog-lead { font-size: 18px; }
  .blog-body { padding: 28px 0 64px; }
  .blog-body p, .blog-body li { font-size: 16px; }
  .blog-body h2 { margin-top: 44px; font-size: 26px; }
  .blog-body h3 { font-size: 19px; }
  .blog-box { padding: 20px; }
  .blog-answer { padding: 16px 18px; }
  .blog-list { padding: 36px 0 64px; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media screen and (max-width: 479px) {
  .blog-hero h1 { font-size: 30px; }
}