/* ============================================================================
FILE         : grid.css
FILE PATH    : /public/css/grid.css
VERSION      : 1.0.3
AUTHOR       : Oluwasegun Dayo Ogunsola
CREATED      : 2025-10-16
LAST EDITED  : 2025-10-23
DESCRIPTION  : 12-column grid system for dynamic (2/8/2) and static (2/7/3) layouts,
               plus layout-grid alignment for desktop views.
============================================================================ */

/* Base grid container */
.grid-container,
.static-page-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

/* Column wrapper */
.col {
  width: 100%;
}

/* Span utilities */
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }

/* Desktop layout grid (2/8/2) — center gets full 8 columns */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.sidebar-left {
  grid-column: span 2;
}

.center-column {
  grid-column: span 7;
  padding: 1rem;
  background-color: #fff;
}

.sidebar-right {
  grid-column: span 3;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .grid-container,
  .static-page-row,
  .layout-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .span-2,
  .span-3,
  .span-7,
  .span-8,
  .sidebar-left,
  .center-column,
  .sidebar-right {
    grid-column: span 8;
  }
}

@media (max-width: 600px) {
  .grid-container,
  .static-page-row,
  .layout-grid {
    grid-template-columns: 1fr;
  }

  .span-2,
  .span-3,
  .span-7,
  .span-8,
  .sidebar-left,
  .center-column,
  .sidebar-right {
    grid-column: auto;
  }
}

/* Developer overlay */
.dev-overlay {
  display: block;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: light blue;
/*	background: #fff; */
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid #ccc;
  z-index: 9999;
}