/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* Article/topic imagery comes in mixed sizes and orientations (source
   photos are portrait, landscape, whatever the article batch used).
   Every thumbnail and hero gets cropped into the same 16:9 "HD" frame
   instead of stretching or leaving letterboxed gaps. */
.ratio-hd {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.ratio-hd img {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover !important;
	object-position: 50% 50%;
}

/* Percentage heights on a plain block child of an aspect-ratio box are
   inconsistently resolved across browsers — absolute-position the iframe
   against the box's own relative positioning instead (same approach
   Bootstrap's .ratio uses), rather than trusting height:100% alone. */
.ratio-hd iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}