/*
 * USNOW theme: story photos in their frames (every page, loaded after
 * main.css; enqueued and marked up in inc/images.php,
 * usnow_theme_frame_photo()).
 *
 * Whole photos: a tall or square-ish photo (a portrait of a person) in a
 * wide frame is never cut to a strip. It shows whole and centered, and a
 * blurred, darker copy of the same photo fills the rest of the frame. The
 * copy is the photo's smallest uncropped size (a small file), drawn larger
 * than the frame so the soft edges of the blur stay out of sight; it sits
 * behind the photo inside the frame (the frame isolates it), so the lead
 * story's shade and headline still lie on top.
 *
 * Photo focus: a wide photo fills its frame with its 16:9 crop, cut around
 * the photo's focus. Frames of another shape (the lead story is 3:2 or 4:3)
 * show the part around the same point (--focus-x / --focus-y, set on the
 * frame). In the lead story a photo narrower than 16:9 is drawn uncropped
 * instead, and the same variables place its focus.
 */

/* Wide photos: the part around the focus shows. */
.card__media.has-focus img,
.article-figure.has-focus .article-figure__img {
	object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}

/* Whole photos */

.photo-frame.is-framed {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.photo-frame.is-framed .photo-frame__img {
	object-fit: contain;
	object-position: 50% 50%;
}

.photo-frame .photo-frame__bg {
	position: absolute;
	top: -40px;
	left: -40px;
	z-index: -1;
	display: block;
	width: calc(100% + 80px);
	max-width: none;
	height: calc(100% + 80px);
	object-fit: cover;
	filter: blur(24px) saturate(1.1) brightness(0.7);
	transform: scale(1.15);
	pointer-events: none;
}

/* Small story-list pictures: a lighter blur keeps some of the photo's shapes. */
.card--list .photo-frame .photo-frame__bg {
	filter: blur(12px) saturate(1.1) brightness(0.7);
}

/* The copy stays put while the photo zooms under the mouse (main.css, section 20). */
.has-motion .card:hover .card__media img.photo-frame__bg {
	transform: scale(1.15);
}

/* Story and page photo: the figure's own 16:9 frame, the caption below it. */
.article-figure__frame {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	background: var(--c-placeholder);
}

.article-figure__frame .article-figure__img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
	background: none;
}

@media (max-width: 767px) {
	.article-figure__frame {
		border-radius: 0;
	}
}

@media print {
	.photo-frame .photo-frame__bg {
		display: none;
	}
}