/* ----------------------------------------------------------------
	Custom CSS — site-specific overrides, kept separate from the
	template's own stylesheet so it stays easy to diff/update later.
-----------------------------------------------------------------*/

/* Article imagery comes in mixed sizes and orientations (scraped from Getty/
   Unsplash by the AI image pipeline) — the old site's card grid just let
   <img> render at its natural size inside a fixed-width column, so cards in
   the same row ended up different heights depending on each photo's aspect
   ratio. Crop everything into the same 16:9 frame instead. */
.ratio-hd {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	/* object-fit:cover always fills 100% of this box, so a background color
	   alone is never visible behind it — the image itself needs real
	   opacity so this gray tints through, giving light/white-background
	   photos a visible edge against the page's own white background.
	   #b0b0b0 + opacity .85 (the value used on liabilitycases/liabilityclaim,
	   where it reads fine) turned out too subtle here: this site is BOTH a
	   white-background template AND a lot of its imagery (Getty/Unsplash
	   photos, and especially the stock icon-illustration fallbacks) is
	   itself near-white — blending a near-white pixel at 85% opacity over
	   #b0b0b0 lands around #f3f3f3, indistinguishable from the page's own
	   white background. Darker backdrop + more opacity reduction gives a
	   visible edge on this site's imagery specifically; not meant as the
	   new default for every site (a dark-background template wouldn't have
	   this problem at all, and wouldn't want its photos this muted). */
	background-color: #ababab;
}

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

/* The homepage video embed also uses .ratio-hd (for a consistent, fixed
   aspect-ratio box) but with an <iframe>, not an <img> — needs its own
   fill rule since iframes don't pick up width/height:100% by default the
   way a block-level <img> does; without this it renders at the browser's
   native default iframe size (~300x150) floating inside the box instead
   of filling it. */
.ratio-hd iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}