/**
 * Box – item grid layout (frontend and editor).
 *
 * <div class="box cols-1-2 middle">
 *   <div class="item">…</div>
 *   <div class="item">…</div>
 * </div>
 *
 * Columns (on the box): cols-2 … cols-5 (equal; items may span more of them);
 *   ratios: cols-1-2, cols-2-1, cols-1-3,
 *   cols-3-1, cols-2-3, cols-3-2, cols-1-1-2, cols-1-2-1, cols-2-1-1;
 *   content sized: cols-fill-auto, cols-auto-fill; flexible: cols-auto.
 * Responsive states by the width of the box's container (container queries,
 *   not the window): wide, medium / tablet, narrow / mobile. The breakpoints
 *   are set on the module's settings page (defaults: wide from 50em, 4–5
 *   columns from 1.24 times that, tablet from 35em); the module writes the
 *   container query rules into public://ckeditor5_div_widget/
 *   box-breakpoints.css, loaded after this file.
 *   Wide always shows the edited layout; medium and narrow show one of these
 *   layouts:
 *   - edited layout (the columns above);
 *   - 3 columns: 4–5 columns become 3, span-2 / span-3 take one column,
 *     span-4 a full row; boxes with fewer columns keep their layout;
 *   - 2 columns: 3+ columns become 2, span-2 takes one column, span-3 /
 *     span-4 a full row; 2 column boxes keep their layout;
 *   - 1 column.
 *   Defaults: medium 2 columns, narrow 1 column. Override classes: mid-full,
 *   mid-3, mid-1; narrow-full, narrow-3, narrow-2.
 * Items in a row are equally high. Alignment of the item content: top
 *   (default), middle, bottom; of the items: left, center, right.
 * Gap: gap-0, gap-sm, gap-lg.
 * Item: col-full (full row), span-2 … span-4 (in the edited layout).
 *   On medium (not in 1 column): mid-span-1 (one column), mid-span-2 (two
 *   columns), mid-col-full (full row); they override the rules above.
 *
 * Themes can override the spacing with these custom properties:
 * --box-gap-default, --box-gap-sm, --box-gap-lg, --box-margin, --box-min.
 *
 * In the editor the div widget puts an inner element between the box and its
 * items (.box > .div-widget-inner > .item); that inner element is the grid
 * there, so every rule is written for both structures. The container is the
 * parent of the box on the frontend and the box itself in the editor (a
 * container query always looks at an ancestor of the styled element).
 */

.box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--box-gap, var(--box-gap-default, 24px));
  margin: var(--box-margin, 0 0 24px);
}
.box > .div-widget-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: inherit;
  justify-items: inherit;
  gap: inherit;
}
.box:has(> .div-widget-inner) {
  display: block;
  container-type: inline-size;
}
/* Frontend: the parent of the box is the container (not in the editor). */
:not(.ck-content):not(.ck-content *):has(> .box) {
  container-type: inline-size;
}

.box > .item,
.box > .div-widget-inner > .item {
  min-width: 0;
}
.box > .item > :first-child,
.box > .div-widget-inner > .item > :first-child {
  margin-top: 0;
}
.box > .item > :last-child,
.box > .div-widget-inner > .item > :last-child {
  margin-bottom: 0;
}
.box > .col-full,
.box > .div-widget-inner > .col-full {
  grid-column: 1 / -1;
}

/* Columns */
.box.cols-2 { --box-cols: repeat(2, minmax(0, 1fr)); }
.box.cols-3 { --box-cols: repeat(3, minmax(0, 1fr)); }
.box.cols-4 { --box-cols: repeat(4, minmax(0, 1fr)); }
.box.cols-5 { --box-cols: repeat(5, minmax(0, 1fr)); }
.box.cols-1-2 { --box-cols: minmax(0, 1fr) minmax(0, 2fr); }
.box.cols-2-1 { --box-cols: minmax(0, 2fr) minmax(0, 1fr); }
.box.cols-1-3 { --box-cols: minmax(0, 1fr) minmax(0, 3fr); }
.box.cols-3-1 { --box-cols: minmax(0, 3fr) minmax(0, 1fr); }
.box.cols-2-3 { --box-cols: minmax(0, 2fr) minmax(0, 3fr); }
.box.cols-3-2 { --box-cols: minmax(0, 3fr) minmax(0, 2fr); }
.box.cols-1-1-2 { --box-cols: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
.box.cols-1-2-1 { --box-cols: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
.box.cols-2-1-1 { --box-cols: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.box.cols-fill-auto { --box-cols: minmax(0, 1fr) auto; }
.box.cols-auto-fill { --box-cols: auto minmax(0, 1fr); }
/* 2 column layout: 3+ columns become 2 equal ones; 2 columns stay as they are. */
.box.cols-3, .box.cols-4, .box.cols-5,
.box.cols-1-1-2, .box.cols-1-2-1, .box.cols-2-1-1 { --box-cols-2: repeat(2, minmax(0, 1fr)); }
/* 3 column layout: 4–5 columns become 3; fewer columns stay as they are. */
.box.cols-4, .box.cols-5 { --box-cols-3: repeat(3, minmax(0, 1fr)); }
/* Flexible: as many columns as fit; wraps by itself at any width. */
.box.cols-auto { --box-cols: repeat(auto-fit, minmax(min(var(--box-min, 240px), 100%), 1fr)); }

/* Alignment: the items keep their equal height, their content moves. */
.box.middle > .item,
.box.bottom > .item,
.box.middle > .div-widget-inner > .item,
.box.bottom > .div-widget-inner > .item {
  display: flex;
  flex-direction: column;
}
.box.middle > .item,
.box.middle > .div-widget-inner > .item {
  justify-content: center;
}
.box.bottom > .item,
.box.bottom > .div-widget-inner > .item {
  justify-content: flex-end;
}
.box.left { justify-items: start; }
.box.center { justify-items: center; }
.box.right { justify-items: end; }

/* Gap */
.box.gap-0 { --box-gap: 0; }
.box.gap-sm { --box-gap: var(--box-gap-sm, 12px); }
.box.gap-lg { --box-gap: var(--box-gap-lg, 48px); }

/*
 * Embedded media in an item (entity embed, media embed, figure): always the
 * full item width, without floating. The width options (half, one third …)
 * are meant for running text; in an item the item already limits the width.
 * Images fill the item at most up to their own width, they are not enlarged.
 */
.box .item .embedded-entity,
.box .item .drupal-entity,
.box .item .drupal-media,
.box .item figure {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.box .item .embedded-entity img,
.box .item .drupal-entity img,
.box .item .drupal-media img,
.box .item figure img {
  width: auto;
  max-width: 100%;
  height: auto;
}