/* ==========================================================================
   Landscape Image block – frontend styles
   ========================================================================== */

/* Primary: block is rendered directly inside .fj-body (outside .fj-body-inner)
   by loop-single.php, so width:100% naturally fills the full content column. */
.fj-body > figure.pscott-landscape-image {
	display: block;
	width: 100%;
	max-width: none;
	margin-top: 2em;
	margin-bottom: 2em;
	margin-left: 0;
	margin-right: 0;
}

/* Fallback: if rendered inside .fj-body-inner (e.g. block editor preview or
   yosemite location pages where the_content() sits inside a wrapper div),
   break out via negative margins. Descendant selector handles any depth.
   Reference width 1120px matches .fj-body-inner max-width so the centering
   offset is calculated correctly. */
.fj-body-inner figure.pscott-landscape-image {
	display: block;
	width: calc(100vw - var(--vm-width));
	max-width: none;
	/* Cap height so the full image fits in one viewport without scrolling.
	   140px accounts for the admin bar (32px) plus top/bottom margins (2em each ≈ 64px)
	   plus a small buffer. object-fit: cover fills the frame without letterboxing. */
	max-height: calc(100vh - 140px);
	overflow: hidden;
	margin-top: 2em;
	margin-bottom: 2em;
	margin-left: calc(-1 * (40px + max(0px, (100vw - var(--vm-width) - 1120px) / 2)));
	margin-right: 0;
}

/* Override for Yosemite Location posts: the_content() is inside .yl-narrative,
   which sits inside .fj-body-inner (padding: 40px) inside .container.clearfix
   (padding: 50px). The negative margin must break out of both (40px + 50px = 90px)
   to reach the sidebar edge and achieve true full-bleed. */
.yl-narrative figure.pscott-landscape-image {
	margin-left: calc(-1 * (90px + max(0px, (100vw - var(--vm-width) - 1120px) / 2)));
	margin-right: calc(-1 * (50px + max(0px, (100vw - var(--vm-width) - 1120px) / 2)));
}

.fj-body > figure.pscott-landscape-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	margin: 0;
}

.fj-body-inner figure.pscott-landscape-image img {
	display: block;
	width: 100% !important; /* override style.css: width: auto !important */
	height: 100% !important; /* fill the max-height-constrained figure */
	max-height: none !important; /* height controlled on the figure, not the img */
	object-fit: cover !important; /* crop to fill without letterboxing */
	margin: 0;
}

.fj-body > figure.pscott-landscape-image figcaption {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
	font-size: 0.875rem;
	color: #888;
	font-style: italic;
	line-height: 1.5;
}

/* Mobile: sidebar collapses at 1050px */
@media (max-width: 1050px) {
	.fj-body-inner figure.pscott-landscape-image {
		width: 100vw;
		max-width: none;
		margin-left: calc(-1 * (40px + max(0px, (100vw - 1120px) / 2)));
	}

	.yl-narrative figure.pscott-landscape-image {
		margin-left: calc(-1 * (90px + max(0px, (100vw - 1120px) / 2)));
		margin-right: calc(-1 * (50px + max(0px, (100vw - 1120px) / 2)));
	}
}