/* ============================================================
   BLOG
   ============================================================ */

.blog {
  padding: var(--sp-7) 0 var(--sp-9);
}

.blog__loading {
  text-align: center;
  padding: var(--sp-7) 0;
  color: var(--sand-500);
}

/* ----- LIST ----- */
.blog__list {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.blog__card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-asym-1);
  padding: var(--sp-5);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  text-decoration: none;
  color: inherit;
}
.blog__grid > .blog__card:nth-child(even) { border-radius: var(--r-asym-2); }
.blog__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.blog__card h2 {
  font-size: var(--fs-xl);
  margin: 0 0 var(--sp-2);
  line-height: 1.25;
}
.blog__card .blog__meta {
  font-size: var(--fs-sm);
  color: var(--sand-500);
  margin-bottom: var(--sp-3);
}
.blog__card p {
  flex: 1;
  margin: 0;
  color: var(--sand-700);
}
.blog__empty {
  text-align: center;
  padding: var(--sp-7) 0;
  color: var(--sand-500);
}

/* ----- DETAIL ----- */
.blog__article {
  max-width: 720px;
  margin: 0 auto;
}
.blog__article .blog__back {
  display: inline-block;
  margin-bottom: var(--sp-5);
  color: var(--blue-700);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.blog__article .blog__back:hover { text-decoration: underline; }
.blog__article h1 {
  font-size: var(--fs-3xl);
  line-height: 1.15;
  margin: 0 0 var(--sp-3);
}
.blog__article .blog__meta {
  color: var(--sand-500);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-6);
}
.blog__body {
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--sand-800);
}
.blog__body h2 {
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-2xl);
}
.blog__body h3 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xl);
}
.blog__body p { margin: 0 0 var(--sp-4); }
.blog__body ul, .blog__body ol {
  margin: 0 0 var(--sp-4) var(--sp-5);
  padding: 0;
}
.blog__body li { margin-bottom: var(--sp-2); }
.blog__body a {
  color: var(--blue-700);
}
.blog__body code {
  background: var(--sand-100);
  padding: 0 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.blog__body pre {
  background: var(--sand-100);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  overflow-x: auto;
  margin: 0 0 var(--sp-4);
}
.blog__body pre code {
  background: none;
  padding: 0;
}
.blog__body blockquote {
  border-left: 4px solid var(--blue-300);
  padding: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-4);
  color: var(--sand-700);
  font-style: italic;
}

.blog__cta {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  background: var(--blue-50);
  border-radius: var(--r-lg);
  text-align: center;
}
.blog__cta h3 {
  margin: 0 0 var(--sp-3);
}