/* ============================================================
   AMBIZ — Utilities
   Helpers de layout (containers, flex, grid),
   sections, alignements, visibilité.
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1. CONTAINERS
   ════════════════════════════════════════════════════════════ */

.ambiz-container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.ambiz-container--narrow {
  max-width: var(--container-md);
}

.ambiz-container--wide {
  max-width: var(--container-2xl);
}

.ambiz-container--full {
  max-width: 100%;
}

@media (max-width: 768px) {
  .ambiz-container,
  .ambiz-container--narrow,
  .ambiz-container--wide {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}


/* ════════════════════════════════════════════════════════════
   2. SECTIONS
   ════════════════════════════════════════════════════════════ */

.ambiz-section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.ambiz-section--sm {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.ambiz-section--lg {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

@media (max-width: 768px) {
  .ambiz-section {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }
  .ambiz-section--lg {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }
}

/* Backgrounds */
.ambiz-section--light {
  background: var(--ambiz-bg-light);
}

.ambiz-section--navy {
  background: var(--ambiz-navy);
  color: var(--ambiz-text-inverse);
}

.ambiz-section--navy-dark {
  background: var(--ambiz-navy-dark);
  color: var(--ambiz-text-inverse);
}

.ambiz-section--red-tint {
  background: var(--ambiz-red-tint);
}

/* Inversion automatique des couleurs de texte sur fonds sombres */
.ambiz-section--navy h1,
.ambiz-section--navy h2,
.ambiz-section--navy h3,
.ambiz-section--navy h4,
.ambiz-section--navy-dark h1,
.ambiz-section--navy-dark h2,
.ambiz-section--navy-dark h3,
.ambiz-section--navy-dark h4 {
  color: var(--ambiz-text-inverse);
}

.ambiz-section--navy p,
.ambiz-section--navy-dark p {
  color: rgba(255, 255, 255, 0.85);
}


/* ════════════════════════════════════════════════════════════
   3. FLEX
   ════════════════════════════════════════════════════════════ */

.ambiz-flex {
  display: flex;
}

.ambiz-flex--col { flex-direction: column; }
.ambiz-flex--row { flex-direction: row; }

.ambiz-flex--center {
  align-items: center;
  justify-content: center;
}

.ambiz-flex--between {
  justify-content: space-between;
  align-items: center;
}

.ambiz-flex--around {
  justify-content: space-around;
  align-items: center;
}

.ambiz-flex--wrap { flex-wrap: wrap; }

.ambiz-flex--gap-xs { gap: var(--space-2xs); }
.ambiz-flex--gap-sm { gap: var(--space-xs); }
.ambiz-flex--gap-md { gap: var(--space-md); }
.ambiz-flex--gap-lg { gap: var(--space-lg); }


/* ════════════════════════════════════════════════════════════
   4. GRID
   ════════════════════════════════════════════════════════════ */

.ambiz-grid {
  display: grid;
  gap: var(--space-md);
}

.ambiz-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ambiz-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ambiz-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Grid auto-fit pour responsive automatique sans media queries */
.ambiz-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ambiz-grid--gap-sm { gap: var(--space-sm); }
.ambiz-grid--gap-md { gap: var(--space-md); }
.ambiz-grid--gap-lg { gap: var(--space-lg); }

/* Adaptations responsive */
@media (max-width: 1024px) {
  .ambiz-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .ambiz-grid--cols-2,
  .ambiz-grid--cols-3,
  .ambiz-grid--cols-4 {
    grid-template-columns: 1fr;
  }
}


/* ════════════════════════════════════════════════════════════
   5. ALIGNEMENT DE TEXTE
   ════════════════════════════════════════════════════════════ */

.ambiz-text-center { text-align: center; }
.ambiz-text-left { text-align: left; }
.ambiz-text-right { text-align: right; }


/* ════════════════════════════════════════════════════════════
   6. VISIBILITÉ RESPONSIVE
   ════════════════════════════════════════════════════════════ */

.ambiz-hide-mobile {
  display: revert;
}
@media (max-width: 768px) {
  .ambiz-hide-mobile {
    display: none !important;
  }
}

.ambiz-hide-desktop {
  display: none !important;
}
@media (max-width: 768px) {
  .ambiz-hide-desktop {
    display: revert !important;
  }
  .ambiz-burger.ambiz-hide-desktop {
    display: flex !important;
  }
}


/* ════════════════════════════════════════════════════════════
   7. ACCESSIBILITÉ — Screen reader only
   ════════════════════════════════════════════════════════════ */

.ambiz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}