/**
 * NIYAPRESS: TRIO GRID NUCLEAR FIX
 * ABSOLUTE PRIORITY - FORCE 3 COLUMNS
 * This file MUST load last to override all other styles
 * Version: 1.0.0 - Critical Fix
 */

/* ========================================
   NUCLEAR FORCE 3-COLUMN GRID
   ======================================== */

.np-trio-section {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}

.np-trio-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	grid-template-rows: auto !important;
	gap: 35px !important;
	width: 100% !important;
	max-width: var(--np-container, 1280px) !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
	direction: rtl !important;
	/* Remove any flex or block display */
	flex-direction: initial !important;
	flex-wrap: initial !important;
}

.np-trio-column {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	/* Ensure columns don't break grid */
	grid-column: auto !important;
	grid-row: auto !important;
}

/* ========================================
   RESPONSIVE - MAINTAIN GRID
   ======================================== */

/* Tablet: 2 columns + 1 full-width */
@media (max-width: 1024px) {
	.np-trio-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 28px !important;
		padding: 0 15px !important;
	}
	
	/* Third column spans full width */
	.np-trio-column:nth-child(3) {
		grid-column: 1 / -1 !important;
		max-width: 650px !important;
		margin: 0 auto !important;
	}
}

/* Mobile: 1 column stack */
@media (max-width: 768px) {
	.np-trio-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
		padding: 0 12px !important;
	}
	
	.np-trio-column:nth-child(3) {
		grid-column: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}
}

/* Small mobile */
@media (max-width: 480px) {
	.np-trio-grid {
		gap: 20px !important;
	}
}

/* ========================================
   OVERRIDE ANY CONFLICTING STYLES
   ======================================== */

/* Remove any display:flex that might break grid */
.np-trio-grid[style*="flex"],
.np-trio-grid[style*="display: flex"],
.np-trio-grid[style*="display:flex"] {
	display: grid !important;
}

/* Remove any display:block that might break grid */
.np-trio-grid[style*="display: block"],
.np-trio-grid[style*="display:block"] {
	display: grid !important;
}

/* Ensure columns are visible */
.np-trio-column {
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
}

/* ========================================
   DEBUG HELPERS (remove in production)
   ======================================== */

/* Uncomment to debug grid layout */
/*
.np-trio-grid {
	outline: 3px solid red !important;
}

.np-trio-column {
	outline: 2px solid blue !important;
}

.np-trio-grid::before {
	content: 'TRIO GRID: ' attr(style) !important;
	display: block !important;
	background: yellow !important;
	color: black !important;
	padding: 5px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
}
*/