/* ==========================================================================
   OSSA — blog list page and blog post page
   ========================================================================== */

.blog-page { padding-top: 120px; }

.blog-post {
  padding: 120px var(--gutter) 60px;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}
.bp-main { flex: 1 1 66%; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bp-cover { overflow: hidden; }
.bp-cover img { width: 100%; height: auto; }
.bp-content { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.bp-content img { margin: 14px 0; }
.bp-content h5 { margin-top: 16px; color: var(--c-dark); }

.bp-side { flex: 1 1 30%; max-width: 380px; position: sticky; top: 110px; display: flex; flex-direction: column; gap: 18px; }
.bp-side h5 { color: var(--c-dark); margin-bottom: 6px; }
.bp-side-item { display: flex; gap: 14px; align-items: center; }
.bp-side-item img { width: 96px; height: 68px; object-fit: cover; flex: none; }
.bp-side-item span { display: flex; flex-direction: column; gap: 4px; }
.bp-side-item .t-small { color: var(--c-text); transition: color 0.2s ease; }
.bp-side-item:hover .t-small { color: var(--c-orange); }
.bp-side-item .t-meta { color: var(--c-text-70); }

@media (max-width: 1199px) {
  .blog-post { flex-direction: column; padding-top: 100px; }
  .bp-side { position: static; max-width: none; }
  .blog-page { padding-top: 100px; }
}