/* Kindly Edit containers (0.5.4): a div.cb-box lays its children across or down. Classes only, no inline styles, so a
   stored page stays readable and a theme can restyle everything here from its own stylesheet (the same classes) or
   through its spacing tokens (cantata-edit.json "containers": { "space": { "s", "m", "l" } }, printed on :root).
   Loaded only when the theme opts in ("containers"), with blocks.css, for visitors and in the editor. */
:where(:root) { --cb-space-s: 12px; --cb-space-m: 24px; --cb-space-l: 48px; --cb-wrap: 1200px; }

.cb-box { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: var(--cb-space-m); min-width: 0; box-sizing: border-box; }
.cb-box > * { min-width: 0; }
.cb-box--across { flex-direction: row; }
.cb-box--down { flex-direction: column; }
.cb-box--across.cb-box--reverse { flex-direction: row-reverse; }
.cb-box--down.cb-box--reverse { flex-direction: column-reverse; }
.cb-box--wrap { flex-wrap: wrap; }
.cb-box--align-start { align-items: flex-start; }
.cb-box--align-center { align-items: center; }
.cb-box--align-end { align-items: flex-end; }
.cb-box--align-stretch { align-items: stretch; }
.cb-box--spread-start { justify-content: flex-start; }
.cb-box--spread-center { justify-content: center; }
.cb-box--spread-end { justify-content: flex-end; }
.cb-box--spread-between { justify-content: space-between; }
.cb-box--gap-0 { gap: 0; }
.cb-box--gap-s { gap: var(--cb-space-s); }
.cb-box--gap-m { gap: var(--cb-space-m); }
.cb-box--gap-l { gap: var(--cb-space-l); }
.cb-box--pad-0 { padding: 0; }
.cb-box--pad-s { padding: var(--cb-space-s); }
.cb-box--pad-m { padding: var(--cb-space-m); }
.cb-box--pad-l { padding: var(--cb-space-l); }
.cb-box--w-boxed { max-width: var(--cb-wrap); margin-inline: auto; width: 100%; }
.cb-box--w-full { width: 100%; max-width: none; }
.cb-box--w-fit { width: fit-content; max-width: 100%; }
/* across: children share the row; a wrapping row lets each take what it needs */
.cb-box--across:not(.cb-box--wrap) > * { flex: 1 1 0; }
.cb-box--across.cb-box--wrap > * { flex: 1 1 240px; }

/* the plugin's own grids (columns, cards, photo and words) keep their grid: "Down" makes one column of them */
:is(.cb-cols, .cb-cards, .cb-media).cb-box--down { display: grid; grid-template-columns: minmax(0, 1fr) !important; }
:is(.cb-cols, .cb-cards, .cb-media).cb-box--down > * { grid-column: auto !important; grid-row: auto !important; }

@media (max-width: 1024px) {
	.cb-box--across.cb-box--stack-tablet { flex-direction: column; }
	:is(.cb-cols, .cb-cards, .cb-media).cb-box--stack-tablet { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 760px) {
	.cb-box--across.cb-box--stack-phone { flex-direction: column; }
	.cb-box--across.cb-box--stack-phone.cb-box--reverse { flex-direction: column-reverse; }
	/* keep across on a phone (a grid that stacks by default keeps its columns) */
	:is(.cb-cols, .cb-cards, .cb-media).cb-box--keep-phone { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; }
}