/* Dose featured-image scores: static feedback, native crops and image links. */
.dose-featured-image {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	container: dose-review-image / inline-size;
}

/* Legacy media uses a padding-ratio box with absolutely positioned artwork.
 * Keep that box as the containing block; an extra relative span has zero height.
 */
.img:has(.dose-featured-score) { container: dose-review-image / inline-size; }
.img span.dose-featured-image { position: static; display: contents; container: none; }
.img > a:has(> span.dose-featured-image) { position: absolute; inset: 0; display: block; }

.dose-featured-score {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--dose-review-score-background, #085dff);
	color: var(--dose-review-score-color, #fff);
	font-family: inherit;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	pointer-events: none;
}

.dose-featured-score strong { font-size: 24px; font-weight: 800; }
.dose-featured-score small { margin-top: 8px; font-size: 11px; font-weight: 400; }

/* Retain saved native metric blocks and old review templates without two tiles. */
.dose-card__media:has(.dose-featured-score) > .dose-metric--review,
.dose-review-media:has(.dose-featured-score) > .dose-review-field--score,
.dose-badge-media:has(.dose-featured-score) > .rate-label { display: none; }

/* The single-post view-count flag otherwise overlaps the upper-right score. */
.blog_detail_head .head_detail .dose-badge-media:has(.dose-featured-score) > .view-label {
	top: auto;
	right: 16px;
	bottom: 16px;
}

@container dose-review-image (max-width: 180px) {
	.dose-featured-score { width: 40px; height: 40px; }
	.dose-featured-score strong { font-size: 20px; }
	.dose-featured-score small { font-size: 10px; }
}

@container dose-review-image (min-width: 400px) {
	.dose-featured-score { top: 16px; right: 16px; width: 64px; height: 64px; }
	.dose-featured-score strong { font-size: 32px; }
	.dose-featured-score small { font-size: 13px; }
}

@container dose-review-image (min-width: 700px) {
	.blog_detail_head .dose-featured-score { width: 96px; height: 96px; }
	.blog_detail_head .dose-featured-score strong { font-size: 48px; }
	.blog_detail_head .dose-featured-score small { font-size: 16px; }
}

/* Generic Halo title badges yield only when this card already has an image tile. */
.dose-card:has(.dose-featured-score) .halo-review-card-score,
.dose-review-card:has(.dose-featured-score) .halo-review-card-score { display: none; }