/* Mampan grid utilities: use CSS variables set by theme settings */
.grid-full {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(var(--grid-col-count, 14), minmax(0, 1fr));
  column-gap: var(--grid-gap, 1.5rem);
  row-gap: var(--grid-gap, 1.5rem);
}

/* Helpers: span N columns using inline style or utility classes (optional)
   Example: <div class="col-span-6"> to span 6 columns (requires additional utilities).
*/

/* Container utilities */
.container {
  width: 100%;
  max-width: var(--max-width, 120rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-side-padding, 1.5rem);
  padding-right: var(--container-side-padding, 1.5rem);
}

.container-max-bg {
  width: 100%;
  max-width: var(--max-bg-color, 104rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-side-padding, 1.5rem);
  padding-right: var(--container-side-padding, 1.5rem);
}

/* Full-bleed utilities: push element to viewport edges */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Optional: keep inner padding when using full-bleed for content */
.full-bleed .container,
.full-bleed-padding {
  padding-left: var(--container-side-padding, 1.5rem);
  padding-right: var(--container-side-padding, 1.5rem);
}

/* If the setting disables full-bleed, utility can be overridden by checking variable in JS or server-side attach. */

/* Override Olivero's hard-coded grid-column on the layout ITEMS.
   --grid-content-start/end are injected with media queries matching
   Olivero's breakpoints (43.75rem / 62.5rem) so they automatically update
   per viewport. A single rule is enough. */
.layout--content-medium,
.layout--pass--content-medium > * {
  grid-column: var(--grid-content-start, 2) / var(--grid-content-end, -2) !important;
}