/* Bento Grid Layout System */
.bento-grid {
  display: grid;
  gap: 1rem;
  width: 100%;
}

.bento-grid-2 { grid-template-columns: repeat(2, 1fr); }
.bento-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bento-grid-4 { grid-template-columns: repeat(4, 1fr); }
.bento-grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Span helpers */
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.row-span-2 { grid-row: span 2; }

/* Bento card base */
.bento-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}

.bento-card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.bento-card-sm { padding: 1rem; border-radius: var(--radius-md); }
.bento-card-lg { padding: 2rem; border-radius: var(--radius-xl); }

/* Accent glow variants */
.bento-card-purple::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(168,85,247,0.15), transparent 70%);
  pointer-events: none;
}
.bento-card-cyan::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(6,182,212,0.15), transparent 70%);
  pointer-events: none;
}
.bento-card-pink::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(236,72,153,0.15), transparent 70%);
  pointer-events: none;
}

/* Page layout */
.page-wrapper {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .bento-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .bento-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .col-span-3, .col-span-4 { grid-column: span 2; }
}

@media (max-width: 768px) {
  .bento-card { padding: 1.25rem; }
  .bento-card-lg { padding: 1.5rem; }
}

@media (max-width: 640px) {
  .bento-grid-2, .bento-grid-3, .bento-grid-4 { grid-template-columns: 1fr; }
  .col-span-2, .col-span-3, .col-span-4 { grid-column: span 1; }
  .main-content { padding: 1rem; }
  .bento-card { padding: 1rem; border-radius: var(--radius-md); }
  .bento-card-sm { padding: 0.875rem; }
}

@media (max-width: 375px) {
  .bento-card { padding: 0.875rem; }
  .bento-grid { gap: 0.75rem; }
}