/* Container layouts */
.content-container {
  background: var(--container-bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-xxl);
  box-shadow: var(--shadow-complex);
  backdrop-filter: blur(15px);
  position: relative;
  overflow: hidden;
  padding: var(--spacing-lg);
  z-index: 3;
  color: var(--text-primary);
}
.content-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-standard);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  padding: var(--spacing-md);
  margin: var(--spacing-md) 0;
  z-index: 2;
}
.content-detail {
  background: var(--gradient-bg-standard);
  border: 1px solid rgba(78, 148, 80, 0.3);
  border-radius: var(--border-radius-md);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(78, 148, 80, 0.1);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  padding: var(--spacing-sm);
}
.spacing-lg {
  margin: var(--spacing-lg) 0;
}
.spacing-md {
  margin: var(--spacing-md) 0;
}
.spacing-sm {
  margin: var(--spacing-sm) 0;
}
.spacing-xl {
  margin: var(--spacing-xl) 0;
}
.padding-lg {
  padding: var(--spacing-lg);
}
.padding-md {
  padding: var(--spacing-md);
}
.padding-sm {
  padding: var(--spacing-sm);
}
.container-light {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
}
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}
.container--narrow {
  max-width: var(--content-max-width);
}
.container--wide {
  max-width: var(--wide-max-width);
}
.container--component {
  max-width: var(--component-max-width);
}
.container--narrow-component {
  max-width: var(--narrow-max-width);
}
.container--full {
  max-width: none;
}
.container--tight {
  padding: 0 var(--spacing-sm);
}
.container--loose {
  padding: 0 var(--spacing-lg);
}
.container--no-padding {
  padding: 0;
}
.content-panel {
  background: var(--gradient-bg-standard);
  border: 1px solid rgba(78, 148, 80, 0.3);
  border-radius: var(--border-radius-md);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(78, 148, 80, 0.1);
  backdrop-filter: blur(8px);
  padding: var(--spacing-lg);
  margin: var(--spacing-md) 0;
}
.content-panel--minimal {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  padding: var(--spacing-md);
}
.content-panel--emphasis {
  background: var(--gradient-bg-emphasis);
  border: 2px solid rgba(78, 148, 80, 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(78, 148, 80, 0.2);
}
.container-spacing--none {
  margin: 0;
}
.container-spacing--sm {
  margin: var(--spacing-sm) 0;
}
.container-spacing--md {
  margin: var(--spacing-md) 0;
}
.container-spacing--lg {
  margin: var(--spacing-lg) 0;
}
.container-spacing--xl {
  margin: var(--spacing-xl) 0;
}
.hero-content-grid {
  display: grid;
  gap: var(--spacing-xl);
  grid-template-columns: 1fr;
}
.content-card-grid {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: 1fr;
}
.content-card-grid--2-col {
  grid-template-columns: repeat(2, 1fr);
}
.content-card-grid--4-col {
  grid-template-columns: repeat(4, 1fr);
}