/*
 * DirectMM — single-post featured image.
 *
 * Every rule is scoped by .dmm-hero-layout, which content.php puts on .post-top only when the
 * native <img> was produced. Without it these rules are inert and the theme's own hero renders.
 *
 * Selector depth mirrors the theme's own rules on purpose — shortening one loses the cascade
 * silently, and the theme paints this title white. Do not port any of this into style.css or the
 * SCSS: the shipped style.min.css has diverged from both and is what the site loads.
 */

.single main .type-post > .large.dmm-hero-layout .entry-media-wrapper {
	min-height: 0;
}

.single main .type-post > .large.dmm-hero-layout .entry-media-wrapper .entry-content-media {
	min-height: 0;
}

.single main .type-post > .large.dmm-hero-layout .dmm-hero-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/*
 * Up to the desktop breakpoint the row becomes a column, and the two header wrappers stop
 * generating boxes so the heading and the date become siblings of the photo and can be placed on
 * either side of it.
 */
@media only screen and (max-width: 1279px) {

	.single main .type-post > .large.dmm-hero-layout {
		display: flex;
		flex-direction: column;
	}

	/* Foundation's clearfix pseudo-elements would otherwise become flex items. */
	.single main .type-post > .large.dmm-hero-layout:before,
	.single main .type-post > .large.dmm-hero-layout:after {
		display: none;
	}

	.single main .type-post > .large.dmm-hero-layout .entry-header-wrapper,
	.single main .type-post > .large.dmm-hero-layout .entry-header-wrapper .entry-header {
		display: contents;
		position: static;
	}

	.single main .type-post > .large.dmm-hero-layout .entry-header-wrapper .entry-title {
		order: 1;
		margin: 0 15px 10px 15px;
		color: #000;
	}

	.single main .type-post > .large.dmm-hero-layout .entry-media-wrapper {
		order: 2;
	}

	/*
	 * Only here: dropping the theme's 8px leaves .entry-meta's own margin-top as the single gap
	 * under the photo. Above this breakpoint the header is overlaid and that 8px still sets the
	 * height of the box everything below the hero is positioned against.
	 */
	.single main .type-post > .large.dmm-hero-layout .entry-media-wrapper .entry-content-media {
		margin-bottom: 0;
	}

	/* margin-top is left to the theme's own 9px on .entry-meta. */
	.single main .type-post > .large.dmm-hero-layout .entry-header-wrapper .entry-meta {
		order: 3;
		margin-left: 15px;
		margin-right: 15px;
		margin-bottom: 15px;
		color: #595858;
	}

	.single main .type-post > .large.dmm-hero-layout .entry-header-wrapper .entry-meta > div {
		color: inherit;
	}

	.single main .type-post > .large.dmm-hero-layout .entry-media-wrapper .entry-content-media:before {
		display: none;
	}
}

/* Phones: the photo spans the viewport; the text keeps its column. */
@media only screen and (max-width: 767px) {

	.single main .type-post > .large.dmm-hero-layout .entry-media-wrapper {
		margin-left: 0;
		margin-right: 0;
	}
}

/* From here up the hero is exactly what the site renders today. */
@media only screen and (min-width: 1280px) {

	.single main .type-post > .large.dmm-hero-layout .dmm-hero-image {
		height: 450px;
		object-fit: cover;
		object-position: 50% 80%;
	}
}

@media print {

	.single main .type-post > .large.dmm-hero-layout .dmm-hero-image {
		display: none;
	}
}