/* Y Blog ---------------------------------------------------------------- */
/* Scoped overrides of the shared .stories-* / .y-moments-* styles.        */
/* Loaded via {% block extrahead %} in the y_blog templates; the .y-blog   */
/* prefix wins on specificity so load order vs style.css does not matter.  */

/* Thumbnails keep their colour (no grayscale filter). */
.y-blog .stories-featured-image img {
    -webkit-filter: none;
    filter: none;
}

/* Summary uses the Mont font instead of Playfair, and is not a quote.
   height: auto overrides the shared .stories-block .testimonial fixed
   height: 90px (set at >=992px) so longer summaries aren't clipped and
   don't overlap the "Read the post" button. The flex-wrap listing already
   copes with the resulting uneven card heights. */
.y-blog .stories-block .testimonial {
    font-family: mont-regular, sans-serif;
    font-style: normal;
    font-size: 18px;
    height: auto;
}

/* Listing intro heading ({{ page.content }}) uses the standard Mont site
   font instead of the shared .stories-listing Playfair heading. */
.y-blog .stories-listing h1,
.y-blog .stories-listing h2,
.y-blog .stories-listing h3,
.y-blog .stories-listing h4,
.y-blog .stories-listing h5,
.y-blog .stories-listing h6 {
    font-family: mont-semibold, sans-serif;
    font-style: normal;
}

.y-blog .ysh-heading .ysh-featured p,
.y-blog .yss-page-heading .summary {
    font-family: mont-regular, sans-serif;
    font-style: normal;
}

/* List view: flex-wrap row so uneven summary heights never leave gaps
   (the empty-space issue seen in Y Moments). */
.y-blog-listing {
    display: flex;
    flex-wrap: wrap;
}

/* Bootstrap 3 adds display:table clearfix pseudo-elements to .row; hide them
   so they don't become phantom flex items. */
.y-blog-listing::before,
.y-blog-listing::after {
    display: none;
}

.y-blog-listing > [class*="col-"] {
    display: flex;
}

.y-blog-listing .stories-block {
    width: 100%;
}

/* Post page: title heading uses Mont instead of Playfair. */
.y-blog .yss-page-heading h1 {
    font-family: mont-bold, sans-serif;
    font-style: normal;
}

.y-blog .yss-page-heading .summary {
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

/* Featured video at the top of a post. */
.y-blog .yss-featured-video {
    margin-bottom: 20px;
}