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

/* ══════════════════════════════════════════════════════════════════
 * Asymmetrical Grid  ( sentio-asym-grid )
 *
 * Editorial-style asymmetric layouts. Child containers (.e-con)
 * are placed directly inside .sentio-ag as CSS Grid items.
 * Preset determines column structure — no user column count.
 *
 * Differentiators:
 *  1.  Nested Container Cells       6.  Cell Hover Effects
 *  2.  Asymmetric Presets           7.  Cell Styling
 *  3.  Dense Auto-Packing           8.  Staggered Entrance Animation
 *  4.  Configurable Row Height      9.  Responsive Collapse
 *  5.  Grid Gap Control            10.  Preset-Driven Columns
 * ══════════════════════════════════════════════════════════════════ */

/* ── Base Grid ── */
.sentio-ag {
	display: grid;
	grid-auto-rows: minmax(180px, auto);
	gap: 16px;
}

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

/* ── Cell defaults (child containers are direct .e-con elements) ── */
.sentio-ag > .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 ── */
.sentio-ag--hover-scale > .e-con:hover {
	transform: scale(1.03);
	z-index: 2;
}

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

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

/* ═══════════════════════════════════════════════════
 * Preset 1: Editorial — hero left + sidebar right
 *
 * ┌──────────┬─────┐
 * │          │  2  │
 * │    1     ├─────┤
 * │          │  3  │
 * ├─────┬────┴─────┤
 * │  4  │    5     │
 * └─────┴──────────┘
 * ═══════════════════════════════════════════════════ */
.sentio-ag--preset-editorial {
	grid-template-columns: 2fr 1fr;
}

.sentio-ag--preset-editorial > .e-con:nth-child(1) {
	grid-row: span 2;
}

/* ═══════════════════════════════════════════════════
 * Preset 2: Sidebar — content left + tall sidebar
 *
 * ┌──────────┬─────┐
 * │    1     │     │
 * ├────┬─────┤  2  │
 * │ 3  │  4  │     │
 * └────┴─────┴─────┘
 * ═══════════════════════════════════════════════════ */
.sentio-ag--preset-sidebar {
	grid-template-columns: 1fr 1fr 1fr;
}

.sentio-ag--preset-sidebar > .e-con:nth-child(1) {
	grid-column: span 2;
}

.sentio-ag--preset-sidebar > .e-con:nth-child(2) {
	grid-row: span 2;
}

/* ═══════════════════════════════════════════════════
 * Preset 3: Showcase — center focal point
 *
 * ┌────┬──────────┬────┐
 * │ 1  │          │ 3  │
 * ├────┤    2     ├────┤
 * │ 4  │          │ 5  │
 * └────┴──────────┴────┘
 * ═══════════════════════════════════════════════════ */
.sentio-ag--preset-showcase {
	grid-template-columns: 1fr 2fr 1fr;
}

.sentio-ag--preset-showcase > .e-con:nth-child(2) {
	grid-row: span 2;
}

/* ═══════════════════════════════════════════════════
 * Preset 4: Zigzag — alternating wide-narrow
 *
 * ┌──────────┬─────┐
 * │    1     │  2  │
 * ├─────┬────┴─────┤
 * │  3  │    4     │
 * ├─────┴────┬─────┤
 * │    5     │  6  │
 * └──────────┴─────┘
 * ═══════════════════════════════════════════════════ */
.sentio-ag--preset-zigzag {
	grid-template-columns: 1fr 1fr 1fr;
}

/* Odd rows: first cell spans 2 columns */
.sentio-ag--preset-zigzag > .e-con:nth-child(4n+1) {
	grid-column: span 2;
}

/* Even rows: last cell spans 2 columns */
.sentio-ag--preset-zigzag > .e-con:nth-child(4n) {
	grid-column: span 2;
}

/* ═══════════════════════════════════════════════════
 * Preset 5: Gallery — tall left + stacked right
 *
 * ┌─────┬──────────┐
 * │     │    2     │
 * │     ├────┬─────┤
 * │  1  │ 3  │  4  │
 * │     ├────┴─────┤
 * │     │    5     │
 * └─────┴──────────┘
 * ═══════════════════════════════════════════════════ */
.sentio-ag--preset-gallery {
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
}

.sentio-ag--preset-gallery > .e-con:nth-child(1) {
	grid-row: span 3;
}

.sentio-ag--preset-gallery > .e-con:nth-child(2) {
	grid-column: span 2;
}

.sentio-ag--preset-gallery > .e-con:nth-child(5) {
	grid-column: span 2;
}

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

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

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

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

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