/*
 * File: wizard-container.css
 * Main responsibility: Define the responsive shell used across wizard steps.
 * Related files: wizard.css, step-common.css, components/main.css
 */

@import url('../settings/_variables.css');

:root {
  --wizard-shell-max-width: min(100%, 2220px);
  --wizard-shell-padding-inline: clamp(var(--space-4), 3vw, var(--space-7));
  --wizard-shell-padding-block: clamp(var(--space-4), 3.5vw, var(--space-7));
}

.wizard-container {
  --wizard-container-max-width: var(--wizard-shell-max-width);
  --wizard-container-padding-inline: var(--wizard-shell-padding-inline);
  --wizard-container-padding-block: var(--wizard-shell-padding-block);

  width: 100%;
  max-width: var(--wizard-container-max-width);
  margin-inline: auto;
  padding-inline: var(--wizard-container-padding-inline);
  padding-block: var(--wizard-container-padding-block);
  display: block;
}

.wizard-container--compact {
  padding-bottom: clamp(var(--space-3), 2.5vw, var(--space-5));
}

@media (min-width: 768px) {
  .wizard-container {
    --wizard-container-padding-inline: clamp(var(--space-5), 4vw, var(--space-8));
    --wizard-container-padding-block: clamp(var(--space-5), 4vw, var(--space-8));
  }
}

@media (min-width: 1200px) {
  :root {
    --wizard-shell-max-width: min(100%, 2160px);
  }

  .wizard-container {
    --wizard-container-padding-inline: clamp(var(--space-6), 3.5vw, var(--space-8));
  }
}

@media (min-width: 1536px) {
  :root {
    --wizard-shell-max-width: min(100%, 2280px);
  }
}