/* MarketRally Theme Fixes — CSS overrides
   Loaded after the theme's own style.css so these rules win on cascade
   order; !important is used defensively in case load order ever changes. */

/* Fix: the "More From [Category]" related-posts grid (.rel-grid / .rel-card)
   and the sidebar's "Trending Now" cards (.side-story) were left out of the
   theme's original "let grid/flex items shrink properly" fix — grid items
   default to min-width:auto, which let their content force them wider or
   narrower than their actual grid track, throwing off the square image
   crop above and making it look stretched. */
.rel-grid, .rel-card, .side-story,
.rel-card > *, .side-story > * {
	min-width: 0;
}

/* Fix: aspect-ratio + height:100% on the <img> requires the .thumb
   container to have an explicitly *resolved* height — if that resolution
   fails for any reason (varies by browser/context), height:100% silently
   falls back to auto, and the image renders at its own file's native
   ratio instead of the intended square crop. Switching to the classic
   width-relative padding-top technique sidesteps this entirely: padding
   percentages always resolve against the parent's WIDTH, never its
   height, so this can't silently fail the same way. */
.bp-card .thumb,
.rel-card .thumb,
.side-story .thumb {
	position: relative !important;
	width: 100% !important;
	height: 0 !important;
	padding-top: 100% !important;
	aspect-ratio: unset !important;
	overflow: hidden !important;
}
.bp-card .thumb img,
.rel-card .thumb img,
.side-story .thumb img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* The homepage's first/"large" post uses a 16:9 image on mobile instead
   of square (a separate, intentional design choice from the theme) —
   restore that specifically, using the same reliable technique, since
   the unconditional square rule above would otherwise win here too. */
@media (max-width: 700px) {
	.bp-card.large .thumb {
		padding-top: 56.25% !important; /* 9 / 16 */
	}
}

/* Fix: the "More From [Category]" cards' navy background wasn't
   rendering, which left the white title text invisible against the
   page's white background — not literally missing, just unreadable.
   The gold category tag stayed visible either way since gold shows up
   on white too, which is why only the title looked "gone." */
.rel-card {
	background: var(--navy) !important;
}
.rel-card .panel {
	color: #fff !important;
}
.rel-card h3,
.rel-card h3 a {
	color: #fff !important;
}

/* Text-only cards: images removed from both "Trending Now" (sidebar) and
   "More From [Category]" (related-posts grid) — title and category tag
   only, no thumbnail. */
.side-story .thumb,
.rel-card .thumb {
	display: none !important;
}