/* CDL Pro — Layout */
.container { max-width: var(--cdl-container); margin: 0 auto; padding: 0 1.5rem; }
.container--sm { max-width: var(--cdl-container-sm); margin: 0 auto; padding: 0 1.5rem; }
.container--wide { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }

.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

/* Grid utilities */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 2rem; }

/* Content + Sidebar */
.content-sidebar { display: grid; grid-template-columns: 1fr 360px; gap: 3rem; align-items: start; }
.content-full    { max-width: 860px; margin: 0 auto; }

/* Sections */
section { padding: 5rem 0; }
.section--sm { padding: 3rem 0; }
.section--lg { padding: 7rem 0; }
.section--bg-light  { background: var(--cdl-off-white); }
.section--bg-dark   { background: var(--cdl-primary); color: var(--cdl-white); }
.section--bg-accent { background: var(--cdl-accent); color: var(--cdl-white); }

.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header .section-tag {
  display: inline-block;
  background: var(--cdl-accent);
  color: var(--cdl-white);
  font-family: var(--cdl-font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}
.section-header h2 { margin-bottom: 1rem; }
.section-header p  { color: var(--cdl-text-light); font-size: 1.125rem; max-width: 600px; margin: 0 auto; }
.section--bg-dark .section-header h2 { color: var(--cdl-white); }
.section--bg-dark .section-header p  { color: rgba(255,255,255,0.75); }

/* Page header */
.page-header {
  background: linear-gradient(135deg, var(--cdl-primary) 0%, var(--cdl-primary-dark) 100%);
  color: var(--cdl-white);
  padding: 4rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-header h1 { color: var(--cdl-white); margin-bottom: 0.75rem; }
.page-header p  { color: rgba(255,255,255,0.8); font-size: 1.125rem; max-width: 700px; }

/* Responsive */
@media (max-width: 1024px) {
  .content-sidebar { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  section { padding: 3.5rem 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .section-header { margin-bottom: 2.5rem; }
}