/**
 * File: layout.css
 * Theme: PIP'N'HUB
 * Description: Système de layout - Containers, grids, sidebar
 * Author: krafsht
 */

/* ========== CONTAINER ========== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }
}

/* ========== GRID SYSTEM ========== */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.gap-sm { gap: var(--space-sm); }
.gap-lg { gap: var(--space-md); }

/* Responsive */
@media (max-width: 1023px) {
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

/* ========== FLEXBOX ========== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ========== SIDEBAR ========== */
.widget-area {
  width: 100%;
  margin-top: var(--space-2xl);
}

.sidebar-blocks {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

/* Auto-détection colonnes */
.sidebar-blocks:has(.sidebar-block:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

.sidebar-blocks:has(.sidebar-block:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}

.sidebar-blocks:has(.sidebar-block:nth-child(4)) {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1023px) {
  .sidebar-blocks:has(.sidebar-block:nth-child(3)),
  .sidebar-blocks:has(.sidebar-block:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .sidebar-blocks {
    grid-template-columns: 1fr !important;
  }
}

/* ========== SPACING ========== */
.mt-lg { margin-top: var(--space-md); }
.mb-lg { margin-bottom: var(--space-md); }
.section-lg { margin: var(--space-xl) 0; }