/* ATPACT-BLOG-MAIN-SITE-DESIGN-INTEGRATION-016
   Blog-only styles. Article readability inside the main site's visual
   language. No separate blog brand, no theme colours of its own - it
   inherits typography and palette from style.css / build.css / my.css.
   Loaded only on /blog and /blog/{slug}. */

/* The site header is fixed; give blog pages the same clearance the
   main-site templates use via .margin-top-146 on their banner. */
.blog-shell{padding-top:146px}
@media (max-width:991px){.blog-shell{padding-top:120px}}
@media (max-width:767px){.blog-shell{padding-top:96px}}

.blog-wrap{max-width:1170px;margin:0 auto;padding:0 15px 40px}

/* Section head */
.blog-masthead{padding:18px 0 10px;border-bottom:1px solid #e5e5e5;margin-bottom:28px}
.blog-masthead h1{margin:0 0 8px}
.blog-crumbs{font-size:13px;color:#777;margin-bottom:12px}
.blog-crumbs a{color:#777}
.blog-crumbs a:hover{color:#c1272d}

/* Listing cards - built from the site's existing panel/greyscale language */
.blog-card{border:1px solid #e8e8e8;border-radius:3px;background:#fff;margin-bottom:30px;overflow:hidden}
.blog-card .bc-body{padding:18px}
.blog-card h2{font-size:19px;line-height:1.35;margin:0 0 10px}
.blog-card h2 a{color:#222;text-decoration:none}
.blog-card h2 a:hover{color:#c1272d}
.blog-card img{width:100%;height:auto;display:block}
.blog-meta{color:#888;font-size:13px;margin-bottom:10px}

/* Article */
.blog-article{max-width:820px;margin:0 auto}
.blog-article h1{font-size:31px;line-height:1.27;margin:0 0 12px}
.blog-featured{margin:18px 0}
.blog-featured img{width:100%;height:auto;border-radius:3px}
.blog-body{font-size:16.5px;line-height:1.78;color:#333;word-wrap:break-word}
.blog-body p{margin:0 0 18px}
.blog-body h2{font-size:24px;margin:34px 0 12px}
.blog-body h3{font-size:20px;margin:26px 0 10px}
.blog-body h4{font-size:17px;margin:22px 0 8px}
.blog-body ul,.blog-body ol{margin:0 0 18px;padding-left:22px}
.blog-body li{margin-bottom:8px}
.blog-body img{max-width:100%;height:auto}
.blog-body a{color:#c1272d}
.blog-body blockquote{border-left:4px solid #c1272d;padding:6px 0 6px 16px;color:#555;margin:22px 0;font-size:16px}
.blog-body table{width:100%;margin:20px 0;border-collapse:collapse;display:block;overflow-x:auto}
.blog-body th,.blog-body td{border:1px solid #ddd;padding:9px 10px;font-size:15px;text-align:left}
.blog-body thead th{background:#f5f5f5}

.blog-empty{padding:30px 0 50px;color:#555}

@media (max-width:767px){
  .blog-article h1{font-size:24px}
  .blog-body{font-size:16px}
  .blog-body h2{font-size:21px}
}