/*
 * RSA Featured Image Controls — shared styles.
 * Enqueued in both editor iframe (live preview) and front-end (rendered output).
 *
 * Wrapper height/width use real fallbacks (auto / 100%) so untouched blocks
 * behave like the figure default. The inner <img> intentionally does NOT have
 * unconditional width/height — that would beat theme rules like
 * `.rsa-single-hero-image img { width: 100% }` even when our system isn't
 * actively sizing the wrapper. Instead, the conditional rules below force the
 * img to fill the figure ONLY when the figure has an explicit dimension var
 * set (detected via the [style*=...] attribute selector). The `style*` match
 * covers `--rsa-pfi-h`, `--rsa-pfi-h-tablet`, `--rsa-pfi-h-mobile` (and same
 * for `-w`).
 *
 * Var cascade for object-fit / object-position: mobile → tablet → desktop →
 * hardcoded default. Same chain on the wrapper for height / width.
 */

.wp-block-post-featured-image.has-rsa-img-vars {
	height: var( --rsa-pfi-h, auto );
	width:  var( --rsa-pfi-w, 100% );
}

.wp-block-post-featured-image.has-rsa-img-vars img {
	object-fit:      var( --rsa-pfi-fit, cover );
	object-position: var( --rsa-pfi-pos, top );
}

.wp-block-post-featured-image.has-rsa-img-vars[style*="--rsa-pfi-h"] img {
	height: 100%;
}

.wp-block-post-featured-image.has-rsa-img-vars[style*="--rsa-pfi-w"] img {
	width: 100%;
}

@media ( max-width: 1024px ) {
	.wp-block-post-featured-image.has-rsa-img-vars {
		height: var( --rsa-pfi-h-tablet, var( --rsa-pfi-h, auto ) );
		width:  var( --rsa-pfi-w-tablet, var( --rsa-pfi-w, 100% ) );
	}
	.wp-block-post-featured-image.has-rsa-img-vars img {
		object-fit:      var( --rsa-pfi-fit-tablet, var( --rsa-pfi-fit, cover ) );
		object-position: var( --rsa-pfi-pos-tablet, var( --rsa-pfi-pos, top ) );
	}
}

@media ( max-width: 768px ) {
	.wp-block-post-featured-image.has-rsa-img-vars {
		height: var( --rsa-pfi-h-mobile, var( --rsa-pfi-h-tablet, var( --rsa-pfi-h, auto ) ) );
		width:  var( --rsa-pfi-w-mobile, var( --rsa-pfi-w-tablet, var( --rsa-pfi-w, 100% ) ) );
	}
	.wp-block-post-featured-image.has-rsa-img-vars img {
		object-fit:      var( --rsa-pfi-fit-mobile, var( --rsa-pfi-fit-tablet, var( --rsa-pfi-fit, cover ) ) );
		object-position: var( --rsa-pfi-pos-mobile, var( --rsa-pfi-pos-tablet, var( --rsa-pfi-pos, top ) ) );
	}
}