/**
 * SSA - GLOBAL LAYOUT & CONTAINER SYSTEM (ssa-layout.css)
 * ARCHITECTURE MODE: STRICT GLOBAL DESIGN SYSTEM
 */

/* ==========================================================================
   1. GLOBAL CONTAINER (Root Alignment Anchor)
   ========================================================================== */
.ssa-container,
.ssa-container {
  width: min(calc(100% - 48px), var(--ssa-container-max, 1200px));
  margin-inline: auto;
  padding-inline: 0;
}

.ssa-container--wide,
.ssa-container-wide {
  width: min(calc(100% - 48px), var(--ssa-container-wide, 1400px));
  margin-inline: auto;
}

.ssa-container--narrow,
.ssa-container-narrow,
.ssa-container--inner,
.ssa-container--medium {
  width: min(calc(100% - 48px), var(--ssa-container-narrow, 840px));
  margin-inline: auto;
}

/* ==========================================================================
   2. GLOBAL GRID PRIMITIVES
   ========================================================================== */
.ssa-grid,
.ssa-grid {
  display: grid;
  gap: var(--ssa-grid-gap, clamp(20px, 2vw, 32px));
}

.ssa-grid--2,
.ssa-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ssa-grid--3,
.ssa-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ssa-grid-gap, clamp(20px, 2vw, 32px));
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.ssa-grid--4,
.ssa-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ssa-grid-gap, clamp(20px, 2vw, 32px));
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.ssa-grid--lg,
.ssa-grid--lg {
  gap: var(--ssa-grid-gap-lg, clamp(24px, 2.5vw, 32px));
}

/* Brand rhythm for otherwise identical card grids. The sequence follows the
   SSA English navy → green → orange identity without changing content hierarchy. */
.ssa-grid--3 > .ssa-card:nth-child(3n + 1),
.ssa-grid--4 > .ssa-card:nth-child(4n + 1) {
  --ssa-card-accent: var(--ssa-primary);
  --ssa-card-accent-rgb: var(--ssa-navy-rgb);
}

.ssa-grid--3 > .ssa-card:nth-child(3n + 2),
.ssa-grid--4 > .ssa-card:nth-child(4n + 2) {
  --ssa-card-accent: var(--ssa-secondary);
  --ssa-card-accent-rgb: var(--ssa-green-rgb);
}

.ssa-grid--3 > .ssa-card:nth-child(3n),
.ssa-grid--4 > .ssa-card:nth-child(4n + 3) {
  --ssa-card-accent: var(--ssa-accent);
  --ssa-card-accent-rgb: var(--ssa-orange-rgb);
}

.ssa-grid--4 > .ssa-card:nth-child(4n) {
  --ssa-card-accent: var(--ssa-primary);
  --ssa-card-accent-rgb: var(--ssa-navy-rgb);
}

/* Editorial grid: standard 3-column balanced cards matching ssa-resources-grid */
.ssa-grid--editorial {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ssa-grid-gap, clamp(20px, 2vw, 32px));
}

@media (max-width: 1024px) {
  .ssa-grid--4,
  .ssa-grid--editorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ==========================================================================
   3. GLOBAL FLEX UTILITIES
   ========================================================================== */
.ssa-flex {
  display: flex;
}

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

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

.ssa-flex--align-center {
  display: flex;
  align-items: center;
}

.ssa-flex--column {
  display: flex;
  flex-direction: column;
}