/* /css/grid.css - Ambient Pixels v2.3 - April 11, 2025 */

/* Grid Container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12 equal-width columns */
  gap: 20px; /* Consistent spacing */
  max-width: 1200px; /* Matches nav-container */
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Column Spans */
.grid-col-12 {
  grid-column: span 12; /* Full-width (100%) */
}

.grid-col-6 {
  grid-column: span 6; /* Half-width (50%) */
}

.grid-col-8 {
  grid-column: span 8; /* Two-thirds width (~66.67%) */
}

.grid-col-4 {
  grid-column: span 4; /* One-third width (~33.33%) */
}

.grid-col-3 {
  grid-column: span 3; /* One-quarter width (25%) */
}

.grid-col-2 {
  grid-column: span 2; /* One-sixth width (~16.67%) */
}

/* Responsive Breakpoints */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet: 8-column grid for flexibility */
  .grid-container {
    grid-template-columns: repeat(8, 1fr);
    padding: 20px 15px;
    width: calc(100% - 30px);
  }

  .grid-col-12 {
    grid-column: span 8; /* Full-width on tablet */
  }

  .grid-col-6 {
    grid-column: span 4; /* Half-width */
  }

  .grid-col-4 {
    grid-column: span 4; /* Maintain ~33% */
  }

  .grid-col-3 {
    grid-column: span 2; /* Adjust for smaller grid */
  }

  .grid-col-2 {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  /* Mobile: 1-column stack */
  .grid-container {
    grid-template-columns: 1fr;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
  }

  .grid-col-12,
  .grid-col-6,
  .grid-col-4,
  .grid-col-3,
  .grid-col-2 {
    grid-column: span 1; /* Full-width stack */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Content Section Styling */
.content-section {
  background: rgba(255, 255, 255, 0.05); /* Frosted glass */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

@media (max-width: 480px) {
  .content-section {
    padding: 15px;
    border-radius: 6px;
  }
}

.content-section:hover {
  box-shadow: 0 4px 12px rgba(90, 228, 255, 0.2); /* Glitch Blue glow */
}

body[data-theme="light"] .content-section {
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

body[data-theme="light"] .content-section:hover {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); /* Light theme blue glow */
}