/**
 * Bento Grid System
 *
 * Shared 12-column grid layout used across dashboard and images pages.
 *
 * @package AgenticWP
 */

/* ==========================================================================
   Bento Grid Container
   ========================================================================== */

.agenticwp-bento-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 24px;
	auto-rows: min-content;
}

/* ==========================================================================
   Grid Spans
   ========================================================================== */

.agenticwp-span-12 { grid-column: span 12; }
.agenticwp-span-8  { grid-column: span 8; }
.agenticwp-span-7  { grid-column: span 7; }
.agenticwp-span-6  { grid-column: span 6; }
.agenticwp-span-5  { grid-column: span 5; }
.agenticwp-span-4  { grid-column: span 4; }
.agenticwp-span-3  { grid-column: span 3; }
.agenticwp-span-2  { grid-column: span 2; }

/* ==========================================================================
   Grid Card (Bento Cell)
   ========================================================================== */

.agenticwp-bento-card {
	background: var(--agenticwp-bg-white);
	border-radius: var(--agenticwp-radius-lg);
	padding: var(--agenticwp-space-xl);
	border: 1px solid var(--agenticwp-border-light);
	box-shadow: var(--agenticwp-shadow-xs);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media screen and (max-width: 960px) {
	.agenticwp-span-7,
	.agenticwp-span-5 {
		grid-column: span 12;
	}

	.agenticwp-span-8,
	.agenticwp-span-6 {
		grid-column: span 12;
	}
}

@media screen and (max-width: 782px) {
	.agenticwp-bento-grid {
		gap: 16px;
	}

	.agenticwp-span-4,
	.agenticwp-span-3 {
		grid-column: span 6;
	}

	.agenticwp-bento-card {
		padding: var(--agenticwp-space-lg);
	}
}

@media screen and (max-width: 480px) {
	.agenticwp-span-4,
	.agenticwp-span-3,
	.agenticwp-span-6 {
		grid-column: span 12;
	}
}
