/* General Content Media Columns (parent block) */
.gcmc {
	width: 100%;
	padding-block: 50px; /* 50px top + bottom on every block */
}

/* When a background color is set, treat the container as a padded panel. */
.gcmc--has-bg {
	padding-inline: clamp(20px, 4vw, 40px);
	border-radius: 16px;
}

/*
 * ACF wraps InnerBlocks in <div class="acf-innerblocks-container"> (and the
 * block editor adds more wrappers). Dissolve them with display:contents so the
 * columns become direct grid/flex items of .gcmc__inner.
 */
.gcmc__inner > .acf-innerblocks-container {
	display: contents;
}

/*
 * Default mode: auto-width columns share the row equally based on how many are
 * ACTUALLY present — 1 column => 100%, 2 => 50%, 3 => thirds, etc.
 */
.gcmc__inner {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--gcmc-gap, 24px);
}

/*
 * Fixed mode: as soon as ANY column has an explicit width, switch to a real
 * 12-track grid so the fractions and gutters are exact. 25 => 3 tracks,
 * 33 => 4, 50 => 6, 66 => 8, 75 => 9 (set in the child stylesheet). Auto
 * columns then span the full row.
 */
.gcmc__inner:has(.ccb--width-25, .ccb--width-33, .ccb--width-50, .ccb--width-66, .ccb--width-75) {
	grid-auto-flow: row;
	grid-template-columns: repeat(12, 1fr);
}
.gcmc__inner:has(.ccb--width-25, .ccb--width-33, .ccb--width-50, .ccb--width-66, .ccb--width-75) .ccb--width-auto {
	grid-column: 1 / -1;
}

/* Column gap */
.gcmc--gap-none   .gcmc__inner { --gcmc-gap: 0px; }
.gcmc--gap-small  .gcmc__inner { --gcmc-gap: 12px; }
.gcmc--gap-medium .gcmc__inner { --gcmc-gap: 24px; }
.gcmc--gap-large  .gcmc__inner { --gcmc-gap: 40px; }

/* Vertical alignment (stretch = equal-height columns). */
.gcmc--valign-top     .gcmc__inner { align-items: start; }
.gcmc--valign-center  .gcmc__inner { align-items: center; }
.gcmc--valign-bottom  .gcmc__inner { align-items: end; }
.gcmc--valign-stretch .gcmc__inner { align-items: stretch; }

/* Container width */
.gcmc--width-narrow  { max-width: 640px;  margin-left: auto; margin-right: auto; }
.gcmc--width-default { max-width: 1080px; margin-left: auto; margin-right: auto; }
.gcmc--width-wide    { max-width: 1280px; margin-left: auto; margin-right: auto; }
.gcmc--width-full    { max-width: none; }

/* Mobile stacking — collapse to a single column. */
@media (max-width: 600px) {
	.gcmc__inner {
		display: flex;
		flex-direction: column;
		gap: var(--gcmc-gap, 24px);
	}
	.gcmc--mobile-reverse .gcmc__inner {
		flex-direction: column-reverse;
	}
}

/* =====================================================================
 * Editor-only preview parity.
 *
 * In the editor, ACF and the block editor wrap the parent's <InnerBlocks /> in
 * extra containers, plus a "+" appender sits alongside the columns. CSS Grid
 * auto-flow would treat that appender as an equal column, so for the editor we
 * detect those wrappers and lay the columns out with FLEX instead — auto-width
 * columns share the row (the appender stays its natural size), and fixed widths
 * use the column's own size. Inert on the front end.
 * ===================================================================== */
.gcmc__inner .block-editor-inner-blocks:has(> .block-editor-block-list__layout > .block-editor-block-list__block .ccb),
.gcmc__inner .block-editor-block-list__layout:has(> .block-editor-block-list__block .ccb) {
	display: contents;
}

.gcmc__inner:has(.block-editor-block-list__block) {
	display: flex;
	flex-wrap: wrap;
	grid-template-columns: none;
}

/* Auto-width column wrappers share the row equally by actual count. */
.gcmc__inner:has(.block-editor-block-list__block) .block-editor-block-list__block:has(.ccb--width-auto) {
	flex: 1 1 0;
	min-width: 0;
}

/* Fixed-width wrappers keep their own size. */
.gcmc__inner:has(.block-editor-block-list__block) .block-editor-block-list__block:has(.ccb--width-25) { flex: 0 0 calc(25%     - var(--gcmc-gap, 24px) / 2); }
.gcmc__inner:has(.block-editor-block-list__block) .block-editor-block-list__block:has(.ccb--width-33) { flex: 0 0 calc(33.333% - var(--gcmc-gap, 24px) / 2); }
.gcmc__inner:has(.block-editor-block-list__block) .block-editor-block-list__block:has(.ccb--width-50) { flex: 0 0 calc(50%     - var(--gcmc-gap, 24px) / 2); }
.gcmc__inner:has(.block-editor-block-list__block) .block-editor-block-list__block:has(.ccb--width-66) { flex: 0 0 calc(66.666% - var(--gcmc-gap, 24px) / 2); }
.gcmc__inner:has(.block-editor-block-list__block) .block-editor-block-list__block:has(.ccb--width-75) { flex: 0 0 calc(75%     - var(--gcmc-gap, 24px) / 2); }

/* Editor: stretch each column's panel to the full row height. */
.gcmc--valign-stretch .block-editor-block-list__block:has(> .ccb) {
	display: flex;
}
.gcmc--valign-stretch .block-editor-block-list__block:has(> .ccb) > .ccb {
	flex: 1 1 auto;
}