/**
 * @file
 * Bootstrap-compatible grid shim for ckeditor_bs_grid.
 *
 * The site is not Bootstrap-based (Olivero + custom DS), so the .row/.col-*
 * markup produced by the CKEditor Bootstrap Grid plugin has no styling on its
 * own. This provides just the grid: a flex .row + percentage column widths,
 * mobile-first (columns stack, then lay out at the md breakpoint, ≥768px).
 *
 * The generic .row/.col class names are SCOPED to rich-text body content and
 * the CKEditor editing root so they cannot collide with Olivero, Splide, Views
 * or the design system. Never define .row/.col unscoped here.
 *
 * Loaded on the frontend via sse_theme/global and inside the editor via the
 * theme's `ckeditor5-stylesheets` (so the WYSIWYG matches the rendered output).
 */

:where(.ck-content, .sse-action__description, .sse-event__description, .node__content, .text-content) {
  .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-inline: calc(-0.5 * var(--bs-gutter-x));
  }

  /* Mobile-first: every column is full width (stacked). */
  .row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin-top: var(--bs-gutter-y);
    padding-inline: calc(0.5 * var(--bs-gutter-x));
  }

  .col {
    flex: 1 0 0%;
  }
  .col-auto {
    flex: 0 0 auto;
    width: auto;
  }

  /* md and up: lay the columns out. */
  @media (min-width: 768px) {
    .col-md {
      flex: 1 0 0%;
    }
    .col-md-auto {
      flex: 0 0 auto;
      width: auto;
    }
    .col-md-1 { width: 8.33333%; }
    .col-md-2 { width: 16.66667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.33333%; }
    .col-md-5 { width: 41.66667%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.33333%; }
    .col-md-8 { width: 66.66667%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.33333%; }
    .col-md-11 { width: 91.66667%; }
    .col-md-12 { width: 100%; }
  }
}