/*
Additive rules only — nothing here changes any spacing, color or typography from
the approved design. It makes two things work correctly once real content exists:

1. .ec-media — an uploaded photo fills the exact same fixed-size box the design
   already reserves via ".ph" (e.g. ".insight-card .ph{aspect-ratio:4/3}" or
   ".split-visual .ph{aspect-ratio:4/5}"), cropped with object-fit instead of
   showing at the photo's own native size — otherwise cards with photos of
   different dimensions render at different sizes next to each other.

2. .ec-icon-fallback — a nicer "no image yet" state for placeholders real
   visitors can see (like Insight cards before a featured image is set): a
   centered icon on the same dashed background instead of small "SUSTITUIR" text.
*/

.ph.ec-media {
	background: none;
	border: none;
	padding: 0;
}
.ph.ec-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ph.ec-icon-fallback .material-symbols-outlined {
	font-size: 42px;
	color: var(--grey-500);
	opacity: 0.8;
}
.ph.dark.ec-icon-fallback .material-symbols-outlined {
	color: var(--grey-300);
}