/* ----------------------------------------------------------------
	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 — crop everything
   into the same 16:9 frame instead of stretching or leaving 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%;
	border-radius: 0 !important;
}

.ratio-hd iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Loan-type cards on the homepage (see views/section.php) */
.loan-card:hover {
	border-top-color: var(--cnvs-themecolor, #1e6faf) !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

/* Leaflet map used by the broker finder (map.php) needs an explicit
   height — Leaflet doesn't size itself from a parent with no set height. */
#broker-map {
	height: 100%;
	min-height: 320px;
}

/* Hero "read the full update" toggle (see views/section.php): swaps its own
   label based on Bootstrap's own .collapsed class, which it already adds/
   removes on the trigger element automatically — no extra JS needed. */
.cast-toggle .cast-toggle-less { display: none; }
.cast-toggle:not(.collapsed) .cast-toggle-more { display: none; }
.cast-toggle:not(.collapsed) .cast-toggle-less { display: inline; }