/* Blog and News listing chrome.

   Loaded by those two routes only. They are the two CMS routes that render no
   page_content at all (views/page.php gates the echo on the title), so nothing
   in the corpus competes with these rules and the unqualified selectors below
   cannot reach any other page. Linked last so it keeps the position the rules
   held when they were emitted into the body. */

.top-banner {
  background: url("/images/2018/07/Blog-Banner.png");
  background-size: cover;
  padding-top: 300px;
  padding-bottom: 300px;
  text-align: center;
}

.background-section {
  background: url("/images/2018/07/Blog-background.png");
  background-size: 30%;
  background-repeat: no-repeat;
}

.blog-details {
  max-width: 100%;
  width: 100%;
  display: block;
  margin-top: 35px;
}

.blog-title {
  color: #464445;
  font-weight: bold;
  text-transform: uppercase;
  text-align: left;
  font-size: 35px;
}

.blog-img {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* One ratio for every hero in the listing, defined once. The stills come from
   page_content and are whatever shape their author uploaded -- 4:3, square,
   panoramic -- so before this each row was two different heights. */
.post-listing {
  --post-hero-ratio: 16 / 10;
}

/* A still is an <img> and a video is the facade's <div>, so the shared
   treatment is a class both carry rather than a descendant selector, which
   could only ever reach one of them. object-fit does nothing on the div; the
   poster inside it is already cover-fitted to the box. */
.post-hero-media {
  aspect-ratio: var(--post-hero-ratio, 16 / 10);
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  /* Shows only where a still is narrower than the box after cropping. */
  background-color: #192837;
  box-shadow:
    0 1px 3px rgb(0 0 0 / 0.12),
    0 1px 2px rgb(0 0 0 / 0.24);
}

/* Two classes, so this outranks .video-facade's own 16/9 default in common.css
   by specificity rather than by which stylesheet happens to be linked last. */
.video-facade.post-hero-media {
  aspect-ratio: var(--post-hero-ratio, 16 / 10);
}

/* hqdefault letterboxes the 16:9 frame inside a 4:3 still, so the bars are 12.5%
   of its height at each end. A 16/9 box happens to crop exactly that much and
   they vanish; a 16/10 box crops only 10%, leaving a black edge top and bottom.
   1.112 is the scale at which the crop reaches 12.5% again. */
.video-facade.post-hero-media .video-facade-poster {
  scale: 1.112;
}

@media (width <= 767px) {
  .top-banner {
    padding-top: 160px;
    padding-bottom: 90px;
  }

  /* The !important here is inherited from the island this replaces and has no
     identified competitor -- at (0,3,0) it already outranks Bootstrap's
     .container. Kept so the move changes nothing; a candidate for the same
     sweep as the date-circle !important in page-inner.css. */
  .container.background-section.text-center {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-top: 45px !important;
  }

  .blog-title {
    font-size: 25px;
  }
}