/**
 * Zenith — layout system
 *
 * Container + auto-fitting grid. Deliberately small: Elementor handles
 * most page layout, this covers the custom widgets so they behave
 * consistently whatever column the client drops them into.
 */

.zen-container {
  width: 100%;
  max-width: var(--zen-container);
  margin-inline: auto;
  padding-inline: var(--zen-gutter);
}

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

.zen-section { padding-block: var(--zen-section-y); }
.zen-section--tint { background: var(--zen-blue-050); }
.zen-section--sunk { background: var(--zen-sunk); }

/* ---- Auto grid ------------------------------------------------------
 * Wraps on its own from the item's min width — no breakpoint soup, and
 * it adapts to whatever width the Elementor column gives it.
 * -------------------------------------------------------------------- */

.zen-grid {
  display: grid;
  gap: var(--zen-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--zen-col, 16rem), 100%), 1fr));
}

.zen-grid--2 { --zen-col: 22rem; }
.zen-grid--3 { --zen-col: 18rem; }
.zen-grid--4 { --zen-col: 14rem; }
.zen-grid--tight { gap: var(--zen-space-4); }

/* Container queries where supported, so a widget in a narrow sidebar
   stacks even when the viewport is wide. */
@supports (container-type: inline-size) {
  .zen-cq { container-type: inline-size; }

  @container (max-width: 34rem) {
    .zen-grid { grid-template-columns: 1fr; }
  }
}

/* ---- Simple flex helpers ------------------------------------------- */

.zen-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zen-space-3);
  align-items: center;
}

.zen-cluster--between { justify-content: space-between; }
.zen-cluster--center { justify-content: center; }

.zen-stack { display: flex; flex-direction: column; gap: var(--zen-space-4); }
.zen-stack--tight { gap: var(--zen-space-2); }

/* ---- Split (text beside media) -------------------------------------- */

.zen-split {
  display: grid;
  gap: var(--zen-space-7);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}