/**
 * Picture frame sizes.
 *
 * Each rule restates a height that style.css hard-codes, reading it from a
 * custom property instead. inc/photo-frames.php prints those properties on
 * :root; the fallbacks below repeat style.css's original values so that if this
 * sheet ever loads without them, nothing moves.
 *
 * This sheet is enqueued after style.css and the selectors match its own, so
 * equal specificity resolves in this file's favour. Nothing here needs !important.
 */

/* Round menu thumbnail — one value drives both axes so it stays a circle. */
.menu-item-image {
	width: var(--smr-frame-menu, 100px);
	height: var(--smr-frame-menu, 100px);
}

/* Recipe and shop cards. */
.recipe-image,
.product-image {
	height: var(--smr-frame-card, 220px);
}

/* Gallery tiles — style.css puts the height on the image itself. */
.gallery-item img {
	height: var(--smr-frame-gallery, 250px);
}

/* Team portraits — likewise on the image. */
.team-image img {
	height: var(--smr-frame-team, 320px);
}

/* Blog list cards. */
.blog-post-image {
	height: var(--smr-frame-blogcard, 240px);
}

/* Single post header image. style.css sets object-fit on the wrapper, where it
   does nothing, so the crop is normalised onto the image here — this is also
   what lets a focal point and zoom work on a post header. */
.post-thumbnail {
	height: var(--smr-frame-post, 400px);
	overflow: hidden;
}

.post-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Frames are fixed heights, which is fine down to tablet width but wasteful on
   a phone, where the card is narrow and a tall picture pushes the text away.
   Capping by viewport width keeps the proportions sane without another setting
   to manage. */
@media (max-width: 600px) {
	.recipe-image,
	.product-image,
	.blog-post-image {
		height: min(var(--smr-frame-card, 220px), 52vw);
	}

	.gallery-item img {
		height: min(var(--smr-frame-gallery, 250px), 52vw);
	}

	.post-thumbnail {
		height: min(var(--smr-frame-post, 400px), 62vw);
	}
}