// ============================================================
// Layout mixins (container width / alignment)
// Split from _mixin so the dependency graph stays acyclic under @use:
// these use col-width() (grid) + sm (media-queries).
// ============================================================
@use 'grid' as *;
@use 'media-queries' as *;

// Largeur d'un container en colonnes, avec fallback mobile (12 cols).
// @include layout-container-width(10);
@mixin layout-container-width($cols, $mobile-cols: 12) {
  width: col-width($cols);

  @include sm {
    width: col-width($mobile-cols);
  }
}

// Alignement horizontal d'un container avec marges gap.
// @include layout-container-x-align(left | center | right);
@mixin layout-container-x-align($align: center) {
  @if $align == left {
    margin-left: var(--space-gap);
    margin-right: auto;

    @include sm {
      margin-left: auto;
    }
  } @else if $align == right {
    margin-left: auto;
    margin-right: var(--space-gap);

    @include sm {
      margin-right: auto;
    }
  } @else {
    margin-left: auto;
    margin-right: auto;
  }
}
