/* Blog index and Post pages (#41). Site colours: #039 blue, #4ac450 green. */

.blog { padding-bottom: 30px; }
.blog .breadcrumb { margin-top: 15px; padding-left: 0; background: none; }

/* Index: one entry per Post, picture on the left */
.blog-summary { padding-bottom: 18px; border-bottom: 1px solid #e5e5e5; }
.blog-summary h2 { margin-top: 0; font-size: 1.35em; }
/* max-width: none undoes the site-wide img { max-width: 100% }, which collapses an image inside .media-left to ~0px. */
.blog-summary .media-object { width: 160px; height: 110px; max-width: none; object-fit: cover; border: 1px solid #ddd; }
.blog-no-image { display: flex; align-items: center; justify-content: center; background: #eaf3fb; color: #039; font-size: 40px; }

/* Post body */
.blog-body { font-size: 17px; line-height: 1.7; }
.blog-body h2 { margin-top: 1.6em; font-size: 1.5em; }
.blog-body h3 { margin-top: 1.4em; font-size: 1.2em; }
.blog-body ul, .blog-body ol { margin-bottom: 1em; padding-left: 1.4em; }
.blog-body li { margin-bottom: .3em; }
.blog-body blockquote { margin: 1.2em 0; padding: 10px 18px; border-left: 4px solid #4ac450; background: #effef1; font-size: 1.05em; font-style: italic; }
.blog-body blockquote p { margin: 0; }
/* Images keep their own size, shrink to fit, and are centred. */
.blog-body img { display: block; max-width: 100%; height: auto; margin: 1.2em auto; border: 1px solid #ddd; }

/* Sidebar */
.blog-sidebar { margin-top: 20px; }
.blog-trial { padding: 20px; border-radius: 4px; }
.blog-trial h4 { color: #fff; }

@media (max-width: 480px) {
  .blog-summary .media-object { width: 90px; height: 70px; }
  .blog-no-image { font-size: 28px; }
}