/* =========================================================================
 * Content Band 002 — Full-width Photo, Revealed and Closed
 *
 * One photo, full width at its own proportions, scrolling with the page.
 * pattern.js opens it from a small frame as it comes in and closes it
 * again, the same way back, as it goes out. It never stops scrolling. Once
 * open it stays open for a short stretch of the scroll
 * (--content-band-002-hold) before it starts to close.
 *
 * Opened, it is full bleed: edge to edge, its top under the header.
 * The modifier `content-band-002--framed` keeps the header's gutter all
 * round instead, its top edge at the pinned bar's foot. The modifier
 * `content-band-002--stay-open` (pattern.js) leaves it open as it goes out,
 * instead of closing it.
 * ========================================================================= */

.content-band-002 {
	/* How enlarged the photo starts (pattern.js): it zooms out to its own
	   size while it opens, so the open photo is the whole picture. */
	--content-band-002-zoom: 1.15;
	/* The margin the opened photo keeps all round, and where its top edge
	   stops: none, full bleed (the framed modifier, below, sets both). */
	--content-band-002-frame: 0px;
	--content-band-002-top-edge: 0px;

	/* How far it scrolls on, open, before it starts to close: a share of the
	   screen's height (unitless, read by pattern.js). */
	--content-band-002-hold: 0.07;

	position: relative;
}

/* Flush against the section before it: no block gap. */
.wp-block-post-content > .content-band-002.content-band-002 {
	margin-block-start: 0;
}

.content-band-002.content-band-002 > * {
	margin-block: 0;
}

/* The photo keeps its own proportions: as wide as the screen, as tall as
   that width makes it (its width and height attributes give the ratio
   before the file arrives). The frame clips the zoom (pattern.js), which
   would otherwise widen the page. */
.content-band-002 .content-band-002__photo.content-band-002__photo {
	overflow: hidden;
}

.content-band-002__photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Framed: the header's margin all round, so the photo lines up with the
   logo and the button (a phone: the page gutter, as the header has there);
   under a pinned header (inc/header.php) the top edge meets the bar's foot,
   whose real height header.js publishes. As Content Band 003. */
.content-band-002.content-band-002--framed {
	--content-band-002-frame: var(--header-gutter);
	--content-band-002-top-edge: var(--content-band-002-frame);
}

body.header-sticky .content-band-002.content-band-002--framed {
	--content-band-002-top-edge: var(--header-height);
}

@media (max-width: 40rem) {
	.content-band-002.content-band-002--framed {
		--content-band-002-frame: var(--gutter);
	}

	/* A phone's bar is the shorter one (site.css §3a, the same width). */
	body.header-sticky .content-band-002.content-band-002--framed {
		--content-band-002-top-edge: var(--wp--custom--header-height-sm);
	}
}