/**
 * Column layout box. A flex row that wraps to a single column on small screens.
 * The gap is a CSS variable (--dsc-gap) so the per-column flex-basis adapts to
 * any gap: a 2-col split loses gap/2 per column, a 3-col split loses 2·gap/3.
 * Ready-made .is-gap-* modifier classes just reset --dsc-gap.
 */

.directory-columns {
  --dsc-gap: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dsc-gap);
  align-items: stretch;
}

/* Ready-made column-gap presets (4px scale; matches the builder spacing tokens). */
.directory-columns.is-gap-0  { --dsc-gap: 0px; }
.directory-columns.is-gap-2  { --dsc-gap: 8px; }
.directory-columns.is-gap-4  { --dsc-gap: 16px; }
.directory-columns.is-gap-6  { --dsc-gap: 24px; }
.directory-columns.is-gap-8  { --dsc-gap: 32px; }
.directory-columns.is-gap-12 { --dsc-gap: 48px; }

.directory-column {
  flex: 1 1 auto;
  min-width: 0;
}

.directory-column.is-50 { flex-basis: calc(50% - var(--dsc-gap) / 2); }
.directory-column.is-60 { flex-basis: calc(60% - var(--dsc-gap) / 2); }
.directory-column.is-40 { flex-basis: calc(40% - var(--dsc-gap) / 2); }
.directory-column.is-70 { flex-basis: calc(70% - var(--dsc-gap) / 2); }
.directory-column.is-30 { flex-basis: calc(30% - var(--dsc-gap) / 2); }
.directory-column.is-33 { flex-basis: calc(33.333% - var(--dsc-gap) * 2 / 3); }

/* Vertical / full centering of a column's content. */
.directory-column.is-vcenter { display: flex; flex-direction: column; justify-content: center; }
.directory-column.is-center  { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

/* Sticky column (e.g. a form that stays put beside scrolling text). */
.directory-column.is-sticky { position: sticky; top: 20px; align-self: flex-start; }

/* Child blocks already carry their own .directory-sc-space spacing; drop the
   default bottom margin on the last one so columns stay balanced. */
.directory-column > .directory-sc-space:last-child { margin-bottom: 0; }

/* Child widgets such as directory_form include their own section/container.
 * Keep that nested container relative to the assigned column. */
.directory-column > .directory-sc-space > .section { padding-block: 0; }
.directory-column > .directory-sc-space > .section > .container {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

@media (max-width: 768px) {
  .directory-column { flex-basis: 100% !important; }
  .directory-column.is-sticky { position: static; }
}