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

/* ══════════════════════════════════════════════════════════════════
 * Alphabet Layout  ( sentio-alpha-grid )
 *
 * Cells are explicitly positioned on a 3×3 CSS grid to form
 * recognizable letter and symbol shapes. Intentional negative
 * space (empty grid areas) defines the letter silhouette.
 *
 * Differentiators:
 *  1.  Letter-Shaped Compositions   5.  Cell Hover Effects
 *  2.  Canvas Color                 6.  Staggered Entrance Animation
 *  3.  Explicit Cell Placement      7.  Cell Styling
 *  4.  Consistent 3×3 Grid         8.  Responsive Collapse
 * ══════════════════════════════════════════════════════════════════ */

/* ── Base Grid ── */
.sentio-alg {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(140px, auto));
	gap: 12px;
}

/* ── Cell defaults ── */
.sentio-alg > .e-con {
	position: relative;
	overflow: hidden;
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	will-change: transform;
}

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

/* ── Hover: Lift ── */
.sentio-alg--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-alg--hover-glow > .e-con:hover {
	box-shadow: 0 0 24px rgba(99, 102, 241, 0.4);
	z-index: 2;
}

/* ═══════════════════════════════════════════════════
 * Preset 1: L-Shape (5 cells)
 *
 * ┌────┐. . . . . .
 * │ 1  │
 * ├────┤
 * │ 2  │
 * ├────┼────┬────┐
 * │ 3  │ 4  │ 5  │
 * └────┴────┴────┘
 * ═══════════════════════════════════════════════════ */
.sentio-alg--letter-l > .e-con:nth-child(1) { grid-column: 1; grid-row: 1; }
.sentio-alg--letter-l > .e-con:nth-child(2) { grid-column: 1; grid-row: 2; }
.sentio-alg--letter-l > .e-con:nth-child(3) { grid-column: 1; grid-row: 3; }
.sentio-alg--letter-l > .e-con:nth-child(4) { grid-column: 2; grid-row: 3; }
.sentio-alg--letter-l > .e-con:nth-child(5) { grid-column: 3; grid-row: 3; }

/* ═══════════════════════════════════════════════════
 * Preset 2: T-Shape (5 cells)
 *
 * ┌────┬────┬────┐
 * │ 1  │ 2  │ 3  │
 * └────┼────┼────┘
 * . . .│ 4  │. . .
 * . . .├────┤. . .
 * . . .│ 5  │. . .
 * . . .└────┘. . .
 * ═══════════════════════════════════════════════════ */
.sentio-alg--letter-t > .e-con:nth-child(1) { grid-column: 1; grid-row: 1; }
.sentio-alg--letter-t > .e-con:nth-child(2) { grid-column: 2; grid-row: 1; }
.sentio-alg--letter-t > .e-con:nth-child(3) { grid-column: 3; grid-row: 1; }
.sentio-alg--letter-t > .e-con:nth-child(4) { grid-column: 2; grid-row: 2; }
.sentio-alg--letter-t > .e-con:nth-child(5) { grid-column: 2; grid-row: 3; }

/* ═══════════════════════════════════════════════════
 * Preset 3: U-Shape (5 cells)
 *
 * ┌────┐. . .┌────┐
 * │    │     │    │
 * │ 1  │     │ 2  │
 * │    │     │    │
 * ├────┼────┼────┤
 * │ 3  │ 4  │ 5  │
 * └────┴────┴────┘
 * ═══════════════════════════════════════════════════ */
.sentio-alg--letter-u > .e-con:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.sentio-alg--letter-u > .e-con:nth-child(2) { grid-column: 3; grid-row: 1 / span 2; }
.sentio-alg--letter-u > .e-con:nth-child(3) { grid-column: 1; grid-row: 3; }
.sentio-alg--letter-u > .e-con:nth-child(4) { grid-column: 2; grid-row: 3; }
.sentio-alg--letter-u > .e-con:nth-child(5) { grid-column: 3; grid-row: 3; }

/* ═══════════════════════════════════════════════════
 * Preset 4: F-Shape (5 cells)
 *
 * ┌────┬────┬────┐
 * │ 1  │ 2  │ 3  │
 * ├────┼────┼────┘
 * │    │ 5  │. . .
 * │ 4  ├────┘. . .
 * │    │. . . . . .
 * └────┘. . . . . .
 * ═══════════════════════════════════════════════════ */
.sentio-alg--letter-f > .e-con:nth-child(1) { grid-column: 1; grid-row: 1; }
.sentio-alg--letter-f > .e-con:nth-child(2) { grid-column: 2; grid-row: 1; }
.sentio-alg--letter-f > .e-con:nth-child(3) { grid-column: 3; grid-row: 1; }
.sentio-alg--letter-f > .e-con:nth-child(4) { grid-column: 1; grid-row: 2 / span 2; }
.sentio-alg--letter-f > .e-con:nth-child(5) { grid-column: 2; grid-row: 2; }

/* ═══════════════════════════════════════════════════
 * Preset 5: Plus / Cross (5 cells)
 *
 * . . .┌────┐. . .
 * . . .│ 1  │. . .
 * ┌────┼────┼────┐
 * │ 2  │ 3  │ 4  │
 * └────┼────┼────┘
 * . . .│ 5  │. . .
 * . . .└────┘. . .
 * ═══════════════════════════════════════════════════ */
.sentio-alg--letter-plus > .e-con:nth-child(1) { grid-column: 2; grid-row: 1; }
.sentio-alg--letter-plus > .e-con:nth-child(2) { grid-column: 1; grid-row: 2; }
.sentio-alg--letter-plus > .e-con:nth-child(3) { grid-column: 2; grid-row: 2; }
.sentio-alg--letter-plus > .e-con:nth-child(4) { grid-column: 3; grid-row: 2; }
.sentio-alg--letter-plus > .e-con:nth-child(5) { grid-column: 2; grid-row: 3; }

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

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

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

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

/* ── Mobile: Collapse to single column ── */
@media (max-width: 767px) {
	.sentio-alg {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.sentio-alg > .e-con {
		grid-column: auto !important;
		grid-row: auto !important;
	}
}