/**
 * Flavors Bento Grid - base layout & cell styling.
 * Per-instance values (base columns, gap, row height, colors, spacing, overlay)
 * are injected by Elementor control `selectors` as CSS custom properties /
 * scoped rules. Per-cell spans and background images arrive via a `--span-col`,
 * `--span-row` and `--bento-bg` inline CSS-variable attribute set in render().
 * This file stays static and HTTP-cacheable (no per-render inline <style>).
 */

.flavor-bento {
	display: grid;
	grid-template-columns: repeat(var(--flavor-bento-cols, 4), minmax(0, 1fr));
	grid-auto-rows: var(--flavor-bento-row, 180px);
	grid-auto-flow: dense;
	gap: var(--flavor-bento-gap, 16px);
}

/* Cell */
.flavor-bento-cell {
	position: relative;
	display: flex;
	overflow: hidden;
	min-width: 0;
	grid-column: span min(var(--span-col, 1), var(--flavor-bento-cols, 4));
	grid-row: span var(--span-row, 1);
	background-size: cover;
	background-position: center;
	transition: transform .35s ease, box-shadow .35s ease;
}

/* Background-image layer (separate node so it can be zoomed independently) */
.flavor-bento-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--bento-bg, none);
	background-size: cover;
	background-position: center;
	transition: transform .5s ease;
}

/* Overlay (gradient/colour driven by Elementor background group control) */
.flavor-bento-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	transition: opacity .35s ease;
}

/* Content block */
.flavor-bento-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: flex-end;
}

.flavor-bento-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.flavor-bento-icon svg {
	width: 1em;
	height: 1em;
}

.flavor-bento-title {
	margin: 0 0 6px;
	line-height: 1.25;
}

.flavor-bento-text {
	margin: 0;
	line-height: 1.5;
}

/* Stretched link (no JS) */
.flavor-bento-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	font-size: 0;
}

/* Hover: Zoom (scales the image media layer) */
.flavor-bento-hover-zoom .flavor-bento-cell:hover .flavor-bento-media {
	transform: scale(1.08);
}

/* Hover: Lift (raises the whole cell) */
.flavor-bento-hover-lift .flavor-bento-cell:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

/* On very small screens, let cells stack to full width for readability. */
@media (max-width: 479px) {
	.flavor-bento-cell {
		grid-column: 1 / -1;
	}
}