/* ============================================================
   Ink Windows — Image Control (front-end)
   Per-image focal point + fit, and in-body image alignment.
   ============================================================ */

/* ---- Focal point --------------------------------------------------------
   The plugin writes `object-position` inline on each <img>; these rules are
   the defaults and the object-fit context the focal point needs to work.
   The theme's crop containers below relied on hard-cropped sub-sizes for
   their shape — now that those are soft crops, the container has to clip. */
img.iw-img {
	object-position: 50% 50%;
}

img.iw-img--contain {
	object-fit: contain;
}

.card-item .card-image img,
.pdp-gallery-main img,
.pdp-gallery-thumbs img,
.review-hero img,
.featured-article .card-image img,
.article-card .card-image img,
.about-hero img,
.hero-split img,
.nib-grid .nib-cell img {
	width: 100%;
	object-fit: cover;
}

/* ---- Zoom / rotate / flip / background ----------------------------------
   Values arrive as inline custom properties (plus a transform-origin at the
   focal point). Applied only inside the clipped frames below — never to an
   in-body image, which would spill out of its box. The background fills
   contain-letterboxing (background-color) and any gap left by zooming out or
   rotating (a large spread shadow, clipped by the frame). */
.card-item .card-image img.iw-img--tx,
.pdp-gallery-main img.iw-img--tx,
.pdp-gallery-thumb img.iw-img--tx,
.featured-article .card-image img.iw-img--tx,
.article-card .card-image img.iw-img--tx {
	transform: scale(var(--iw-zoom, 1)) rotate(var(--iw-rot, 0deg)) scale(var(--iw-fx, 1), var(--iw-fy, 1));
}

.card-item .card-image img.iw-img--bg,
.pdp-gallery-main img.iw-img--bg,
.pdp-gallery-thumb img.iw-img--bg,
.featured-article .card-image img.iw-img--bg,
.article-card .card-image img.iw-img--bg {
	background-color: var(--iw-bg);
	box-shadow: 0 0 0 200vmax var(--iw-bg);
}

/* Fit width / fit height: size the image by one edge of the frame (the other
   edge overflows and is clipped, or leaves a gap for the background), with
   the focal point lined up like object-position would. Frames are
   position:relative (theme). Zoom/rotate still apply via `transform`. */
.card-item .card-image img.iw-img--fit-w,
.pdp-gallery-main img.iw-img--fit-w,
.pdp-gallery-thumb img.iw-img--fit-w,
.featured-article .card-image img.iw-img--fit-w,
.article-card .card-image img.iw-img--fit-w {
	position: absolute;
	inset: auto;
	left: 0;
	top: var(--iw-y, 50%);
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: auto;
	object-fit: fill;
	translate: 0 calc(-1 * var(--iw-y, 50%));
}

.card-item .card-image img.iw-img--fit-h,
.pdp-gallery-main img.iw-img--fit-h,
.pdp-gallery-thumb img.iw-img--fit-h,
.featured-article .card-image img.iw-img--fit-h,
.article-card .card-image img.iw-img--fit-h {
	position: absolute;
	inset: auto;
	top: 0;
	left: var(--iw-x, 50%);
	width: auto;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	object-fit: fill;
	translate: calc(-1 * var(--iw-x, 50%)) 0;
}

/* Containers with a fixed pixel/ratio box: image fills it. */
.card-item .card-image img,
.pdp-gallery-main img,
.pdp-gallery-thumbs img,
.review-hero img,
.featured-article .card-image img,
.article-card .card-image img,
.hero-split img {
	height: 100%;
}

/* Containers that size themselves purely by aspect-ratio on the <img>:
   keep height auto so the ratio holds, object-fit does the cropping. */
.about-hero img,
.nib-grid .nib-cell img {
	height: auto;
}

/* ---- In-body image alignment -----------------------------------------
   Scoped to the three wrappers the theme renders the_content() into
   (.content-page, .review-body, .about-body) so nothing else is touched.
   Covers both the block markup (figure.wp-block-image.alignX) and the
   legacy inline classes (img.alignX). */
.content-page .alignleft,
.review-body .alignleft,
.about-body .alignleft {
	float: left;
	margin: 6px 32px 20px 0;
	max-width: 50%;
}

.content-page .alignright,
.review-body .alignright,
.about-body .alignright {
	float: right;
	margin: 6px 0 20px 32px;
	max-width: 50%;
}

.content-page .aligncenter,
.review-body .aligncenter,
.about-body .aligncenter {
	clear: both;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.content-page .aligncenter img,
.review-body .aligncenter img,
.about-body .aligncenter img {
	margin-left: auto;
	margin-right: auto;
}

.content-page .alignnone,
.review-body .alignnone,
.about-body .alignnone {
	clear: both;
}

/* Wide / full break out of the constrained text column, centered on the
   viewport via a transform so no horizontal-scroll math is required. */
.content-page .alignwide,
.review-body .alignwide,
.about-body .alignwide {
	width: min(1100px, 92vw);
	max-width: min(1100px, 92vw);
	margin-left: 50%;
	transform: translateX(-50%);
}

.content-page .alignfull,
.review-body .alignfull,
.about-body .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.content-page .alignwide img,
.review-body .alignwide img,
.about-body .alignwide img,
.content-page .alignfull img,
.review-body .alignfull img,
.about-body .alignfull img {
	width: 100%;
}

/* The theme zeroes all <figure> margins; give in-body images breathing room. */
.content-page figure.wp-block-image,
.review-body figure.wp-block-image,
.about-body figure.wp-block-image {
	margin: 0 0 24px;
}

.content-page figure.wp-block-image figcaption,
.review-body figure.wp-block-image figcaption,
.about-body figure.wp-block-image figcaption {
	font-size: 12.5px;
	line-height: 1.5;
	margin-top: 6px;
	color: color-mix(in srgb, var(--color-text) 60%, transparent);
	text-align: center;
}

/* Contain floats within each content wrapper. */
.content-page::after,
.review-body::after,
.about-body::after {
	content: "";
	display: table;
	clear: both;
}

@media (max-width: 600px) {
	.content-page .alignleft,
	.review-body .alignleft,
	.about-body .alignleft,
	.content-page .alignright,
	.review-body .alignright,
	.about-body .alignright {
		float: none;
		margin: 16px auto;
		max-width: 100%;
	}
}