/* =================================================================
 * ZA Framework — Layout Utilities
 *
 * Opt-in layout helpers. Apply manually via Elementor's
 * Advanced → CSS Classes field. Nothing here is auto-injected.
 *
 * Classes in this file:
 *   za-section      — vertical section spacing
 *   za-container    — max-width + horizontal padding
 *   za-grid-2       — 2-column responsive grid
 *   za-grid-3       — 3-column responsive grid
 *   za-grid-4       — 4-column responsive grid
 *   za-flex-center  — flex row, centered both axes
 *   za-flex-between — flex row, space-between
 *   za-gap-sm       — 1rem gap
 *   za-gap-md       — 2rem gap
 *   za-gap-lg       — 3rem gap
 * ================================================================= */

/* -----------------------------------------------------------------
 * SECTION SPACING
 * ----------------------------------------------------------------- */
.za-section {
  padding-top:    clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* -----------------------------------------------------------------
 * CONTAINER
 * ----------------------------------------------------------------- */
.za-container {
  max-width:     1440px;
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  1.25rem;
  padding-right: 1.25rem;
}

/* -----------------------------------------------------------------
 * GRID UTILITIES
 * Gap reads from --za-gap so the gap utilities below can override
 * it cleanly without compound selectors or specificity hacks.
 * ----------------------------------------------------------------- */
.za-grid-2,
.za-grid-3,
.za-grid-4 {
  display: grid;
  gap:     var(--za-gap, clamp(1rem, 3vw, 2rem));
}

.za-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.za-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.za-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

/* -----------------------------------------------------------------
 * FLEX UTILITIES
 * Same --za-gap variable — consistent override behaviour across
 * both grid and flex containers.
 * ----------------------------------------------------------------- */
.za-flex-center {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             var(--za-gap, 1rem);
}

.za-flex-between {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--za-gap, 1rem);
}

/* -----------------------------------------------------------------
 * GAP UTILITIES
 * Sets --za-gap on the element. Any grid or flex container that
 * reads var(--za-gap) picks it up automatically — no compound
 * selectors, no specificity fights.
 *
 * Usage: add za-grid-3 + za-gap-lg in the same CSS Classes field.
 * ----------------------------------------------------------------- */
.za-gap-sm { --za-gap: 1rem; }
.za-gap-md { --za-gap: 2rem; }
.za-gap-lg { --za-gap: 3rem; }