/* ==================================================================
   layout.css — Site container, grid utilities, common patterns
   ================================================================== */

/* Main container — replaces the legacy .container_20 */
.container {
  max-width: var(--site-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
  width: 100%;
}

/* Full-bleed sections (backgrounds that span viewport, content still constrained) */
.full-bleed {
  width: 100%;
}
.full-bleed > .container {
  max-width: var(--site-width);
  margin: 0 auto;
  padding-left: var(--site-padding);
  padding-right: var(--site-padding);
}

/* Flex row helpers */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

/* Grid helpers */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 960px) {
  .grid-4, .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

/* White card pattern (replaces legacy .white-box) */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

/* Section spacing */
.section { padding: var(--sp-8) 0; }
.section-sm { padding: var(--sp-4) 0; }
.section-lg { padding: var(--sp-12) 0; }

/* Hide on desktop / mobile */
@media (min-width: 769px) { .mobile-only { display: none !important; } }
@media (max-width: 768px) { .desktop-only { display: none !important; } }

/* Clearfix — for any remaining float-based layouts during migration */
.clearfix::after { content: ''; display: table; clear: both; }