/* =============================================================================
   Theme container system — Figma-aligned (.main-container + bleed variants).
   Tokens: --layout-container-* set in layout.jinja from theme settings.
   ============================================================================= */

:root {
  --theme-container-max-width: var(--layout-container-max-width, 1600px);
  --theme-main-container-gutter-x: var(--layout-container-gutter-mobile, 16px);
  --theme-container-gutter-x: var(--theme-main-container-gutter-x);
  --theme-container-gap: var(--layout-container-gap, 16px);
}

@media (min-width: 576px) {
  :root {
    --theme-main-container-gutter-x: clamp(16px, 3.5vw, 40px);
    --theme-container-gutter-x: var(--theme-main-container-gutter-x);
  }
}

@media (min-width: 768px) {
  :root {
    --theme-main-container-gutter-x: clamp(20px, 4.5vw, 56px);
    --theme-container-gutter-x: var(--theme-main-container-gutter-x);
  }
}

@media (min-width: 992px) {
  :root {
    --theme-main-container-gutter-x: clamp(28px, 5vw, 72px);
    --theme-container-gutter-x: var(--theme-main-container-gutter-x);
  }
}

@media (min-width: 1200px) {
  :root {
    --theme-main-container-gutter-x: clamp(48px, 6vw, var(--layout-container-gutter-desktop, 96px));
    --theme-container-gutter-x: var(--theme-main-container-gutter-x);
  }
}

@media (min-width: 1400px) {
  :root {
    --theme-main-container-gutter-x: var(--layout-container-gutter-desktop, 96px);
    --theme-container-gutter-x: var(--theme-main-container-gutter-x);
  }
}

.main-container {
  width: 100%;
  max-width: var(--theme-container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--theme-main-container-gutter-x);
  padding-right: var(--theme-main-container-gutter-x);
  box-sizing: border-box;
}

/* Full-bleed section shell — background edge-to-edge; opt-in per section */
.theme-container-bleed {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Bleed background but inner content aligns with site gutters */
.theme-container-bleed--gutter {
  padding-left: var(--theme-main-container-gutter-x);
  padding-right: var(--theme-main-container-gutter-x);
}

.theme-container-bleed--gutter > .theme-container-inner {
  width: 100%;
  max-width: var(--theme-container-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Vertical stack with Figma gap */
.theme-container-stack {
  display: flex;
  flex-direction: column;
  gap: var(--theme-container-gap);
}

.theme-container-gap {
  gap: var(--theme-container-gap);
}

/* Header row inside main container */
.hdr-container-pad {
  padding-top: 12px;
  padding-bottom: 12px;
}

@media (min-width: 992px) {
  .hdr-container-pad {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}