/* Layout Utilities */

/* Content width constraint utility */

/* Page container utility - standardizes page-level containers */
.content-page {
  width: min(95%, var(--size-page));
  margin: 0 auto;
  padding: 0 1rem;
}

/* Content grid utility - standardizes 3-column responsive grids */
.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-6);
  margin-bottom: var(--size-7);
}

.content-grid--responsive {
  @media (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--size-4);
  }
  
  @media (max-width: 480px) {
    grid-template-columns: 1fr;
    gap: var(--size-5);
  }
}

/* Content header utility - standardizes page headers */
.content-header {
  margin-bottom: var(--size-6);
  text-align: center;
}

.content-header__subtitle {
  margin-bottom: var(--size-4);
  font-size: var(--font-size-2);
  color: var(--text-2);
}

/* Empty state utility - standardizes empty content messages */
.content-empty {
  text-align: center;
  padding: var(--size-8) var(--size-4);
  color: var(--text-2);
}

/* Community section utility - standardizes community features layout */
.community-wrapper {
  margin-top: var(--size-8);
  border-top: 1px solid var(--surface-3);
  padding-top: var(--size-6);
}

/* Newsletter section utility - standardizes newsletter spacing */
.newsletter-section {
  margin-bottom: var(--size-8);
}