/* ===== Generic section container ===== */
.layout{
  margin-block:1.5rem;
  position:relative;           /* create a local stacking context */
  z-index:0;
  isolation:isolate;           /* prevents theme overlays from painting over content */
}

/* ===== One column ===== */
.layout--onecol{ display:block; }

/* ===== Two columns ===== */
.layout--twocol-section{
  display:grid;
  grid-template-columns:1fr 1fr; /* fallback */
  gap:1.5rem;
  align-items:start;
}
.layout--twocol-section--50-50{ grid-template-columns:1fr 1fr; }
.layout--twocol-section--33-67{ grid-template-columns:1fr 2fr; }
.layout--twocol-section--67-33{ grid-template-columns:2fr 1fr; }
.layout--twocol-section--25-75{ grid-template-columns:1fr 3fr; }
.layout--twocol-section--75-25{ grid-template-columns:3fr 1fr; }

/* ===== Three columns ===== */
.layout--threecol-section{
  display:grid;
  grid-template-columns:1fr 1fr 1fr; /* fallback */
  gap:1.5rem;
  align-items:start;
}
.layout--threecol-section--25-50-25{ grid-template-columns:1fr 2fr 1fr; }
.layout--threecol-section--33-34-33{ grid-template-columns:1fr 1.03fr 1fr; }
.layout--threecol-section--50-25-25{ grid-template-columns:2fr 1fr 1fr; }
.layout--threecol-section--25-25-50{ grid-template-columns:1fr 1fr 2fr; }

/* ===== Four columns ===== */
.layout--fourcol-section{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  align-items:start;
}

/* ===== Regions ===== */
.layout__region{
  min-width:0;                 /* prevents overflow with long content */
  overflow-wrap:anywhere;      /* avoid text pushing layout wide on mobile */
}

/* ===== Utilities ===== */
.layout--gap-sm{ gap:.75rem; }
.layout--gap-lg{ gap:2.5rem; }
.layout--align-start{ align-items:start; }
.layout--align-center{ align-items:center; }

/* ===== Responsive: stack on smaller screens ===== */
@media (max-width:900px){
  /* Stack ALL multi-column variants to a single column that can shrink */
  .layout--twocol-section,
  .layout--twocol-section--50-50,
  .layout--twocol-section--33-67,
  .layout--twocol-section--67-33,
  .layout--twocol-section--25-75,
  .layout--twocol-section--75-25,
  .layout--threecol-section,
  .layout--threecol-section--25-50-25,
  .layout--threecol-section--33-34-33,
  .layout--threecol-section--50-25-25,
  .layout--threecol-section--25-25-50,
  .layout--fourcol-section{
    grid-template-columns:minmax(0,1fr);  /* minmax stops overflow/overlay on narrow screens */
  }

  /* Slightly tighter vertical rhythm on mobile */
  .layout{ margin-block:1rem; }
}

/* ===== Optional: helper for wide widgets (tables, galleries) ===== */
/* apply this class to a region or wrapper if you need horizontal scroll */
.layout--scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }