/* Illinois Conservatory Layout System
 * Uses theme.json variables for consistent spacing
 * CWV-safe: no viewport calculations, no CLS issues
 */

:root {
  --gutter-l: var(--wp--style--root--padding-left, 1rem);
  --gutter-r: var(--wp--style--root--padding-right, 1rem);
  --content: var(--wp--style--global--content-size, 720px);
  --wide: var(--wp--style--global--wide-size, 1280px);
}

.section {
  display: block;
}

/* Elementor-like "Boxed" - centered with gutters */
.section--boxed {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--content);
  width: 100%;
  padding-inline: var(--gutter-l) var(--gutter-r);
}

/* Elementor-like "Wide" - wider content area */
.section--wide {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--wide);
  width: 100%;
  padding-inline: var(--gutter-l) var(--gutter-r);
}

/* Elementor-like "Full Width" - edge to edge background */
.section--full {
  /* negate root paddings only (CLS-safe) */
  margin-left: calc(var(--gutter-l, 0) * -1);
  margin-right: calc(var(--gutter-r, 0) * -1);
  max-width: none;
  width: auto;
  /* usually you won't add inner padding here; use .section__inner for boxed content inside */
}

/* Common inner wrapper: boxed content inside a full-bleed background */
.section__inner {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--content);
  width: 100%;
  padding-inline: var(--gutter-l) var(--gutter-r);
}

/* Optional: wide inner */
.section__inner--wide {
  max-width: var(--wide);
}

/* Utility classes for quick layout adjustments */
.section--narrow {
  max-width: calc(var(--content) * 0.8);
}

.section--centered {
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section--boxed,
  .section--wide,
  .section__inner,
  .section__inner--wide {
    padding-inline: calc(var(--gutter-l) * 0.5) calc(var(--gutter-r) * 0.5);
  }
}

/* Print styles */
@media print {
  .section--full {
    margin: 0;
    width: 100%;
  }
  
  .section__inner,
  .section__inner--wide {
    max-width: none;
    margin: 0;
    padding: 0;
  }
}