Centered Container

---
/**
 * CenteredContainer — A responsive centered container with configurable max-width.
 *
 * Provides consistent horizontal padding and centers content within a max-width constraint.
 * Uses the global container token for consistency across the library.
 *
 * @param {string} maxWidth - Maximum width of the container. Default: '1200px'.
 * @param {string} padding - Horizontal padding on each side. Default: '1.5rem'.
 * @param {string} className - Additional CSS class to apply.
 *
 * @example
 * ```astro
 * <CenteredContainer maxWidth="900px">
 *   <p>Centered content</p>
 * </CenteredContainer>
 * ```
 */
interface Props {
  maxWidth?: string;
  padding?: string;
  className?: string;
}

const { maxWidth = '1200px', padding = '1.5rem', className = '' } = Astro.props;
---

<div class="cq-centered-container-cq">
<div class:list={['centered-container', className]} style={`--container-max: ${maxWidth}; --container-pad: ${padding}`}>
  <slot />
</div>
</div>
<style>
  .cq-centered-container-cq { container-type: inline-size; }
  .centered-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  @container (max-width: 640px) {
    .centered-container {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }
</style>