/*!
 * Sentio for Elementor - bento-grid widget
 * Extracted from frontend.css during Batch 7 mechanical extraction (2026-04-19)
 */

/* ══════════════════════════════════════════════════════════════════
 * Bento Grid  ( sentio-bento-grid )
 *
 * Child containers (.e-con) are placed directly inside .sentio-bg
 * as CSS Grid items — no wrapper divs. Same nested-element pattern
 * as the Off-Canvas widget.
 *
 * Differentiators:
 *  1.  Nested Container Cells       6.  Cell Hover Effects
 *  2.  CSS Grid Layout              7.  Responsive Columns
 *  3.  Dense Auto-Packing           8.  Preset Layouts
 *  4.  Configurable Row Height      9.  Staggered Entrance Animation
 *  5.  Grid Gap Control            10.  Cell Styling
 * ══════════════════════════════════════════════════════════════════ */

/* ── Base Grid ── */
.sentio-bg {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(180px, auto);
	gap: 16px;
}

.sentio-bg--dense {
	grid-auto-flow: dense;
}

/* ── Cell defaults (child containers are direct .e-con elements) ── */
.sentio-bg > .e-con {
	position: relative;
	overflow: hidden;
	background: #ffffff;
	border-radius: 16px;
	padding: 20px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	will-change: transform;
}

/* ── Hover: Scale (Diff #6) ── */
.sentio-bg--hover-scale > .e-con:hover {
	transform: scale(1.03);
	z-index: 2;
}

/* ── Hover: Lift (Diff #6) ── */
.sentio-bg--hover-lift > .e-con:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
	z-index: 2;
}

/* ── Hover: Glow (Diff #6) ── */
.sentio-bg--hover-glow > .e-con:hover {
	box-shadow: 0 0 24px rgba(99, 102, 241, 0.4);
	z-index: 2;
}

/* ── Preset: Hero — first cell 2×2 (Diff #8) ── */
.sentio-bg--preset-hero > .e-con:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

/* ── Preset: Feature — first cell full-width (Diff #8) ── */
.sentio-bg--preset-feature > .e-con:nth-child(1) {
	grid-column: 1 / -1;
}

/* ── Preset: Mosaic — alternating tall cells (Diff #8) ── */
.sentio-bg--preset-mosaic > .e-con:nth-child(3n+1) {
	grid-row: span 2;
}

/* ── Entrance Animation (Diff #9) ── */
.sentio-bg--animate > .e-con {
	opacity: 0;
	transform: translateY(24px);
	transition-property: opacity, transform, box-shadow;
	transition-timing-function: ease;
	transition-duration: 0.3s;
}

.sentio-bg--animate > .e-con.sentio-bg__cell--visible {
	opacity: 1;
	transform: translateY(0);
}

/* Ensure hover still works after entrance completes */
.sentio-bg--hover-scale.sentio-bg--animate > .e-con.sentio-bg__cell--visible:hover {
	transform: scale(1.03);
}

.sentio-bg--hover-lift.sentio-bg--animate > .e-con.sentio-bg__cell--visible:hover {
	transform: translateY(-6px);
}

/* ── Mobile: Collapse spans (Diff #7) ── */
@media (max-width: 767px) {
	.sentio-bg > .e-con {
		grid-column: span 1 !important;
		grid-row: span 1 !important;
	}
}