/**
 * Featured Media tiles in the PLP grid.
 *
 * Width: the tile carries `product-col`, so it inherits the theme's column width
 * (`.has-ccols > * { width: var(--porto-cw) }`) and gutters
 * (`li.product-col { padding }`) exactly like a product card. span=2 doubles the
 * column var, clamped to 100% so it never overflows a 1-column mobile grid.
 *
 * Height: the tile fills the full card footprint. `ul.products` is a flex-wrap
 * row with the default `align-items: stretch`, so the tile stretches to the row
 * height (the tallest product card); the inner stretches with it and
 * object-fit:cover fills it with any media size, no gaps, no distortion. The
 * ::before padding (one product image tall, via --ritika-fm-pad) is only the
 * intrinsic-height fallback for a tile that lands alone on a wrapped row.
 */

.ritika-fm-tile {
	/* Make the inner a flex child so it stretches to the (row-stretched) tile
	   height. The tile itself is a flex item of ul.products and stretches there. */
	display: flex;
}

.ritika-fm-tile[data-fm-span="2"] {
	width: min(calc(var(--porto-cw, 50%) * 2), 100%);
}

.ritika-fm__inner {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	overflow: hidden;
}

/* Intrinsic-height fallback (one product image tall) for a lone tile on a row;
   when a product card is present the flex stretch makes the inner taller and the
   absolutely-positioned media fills it. */
.ritika-fm__inner::before {
	content: "";
	display: block;
	padding-top: var(--ritika-fm-pad, 100%);
}

.ritika-fm__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}