/* KSM Theme 01 — Block Builder layout (Stage B5).
 *
 * Mobile-first: every layout stacks to a single column by default, in
 * DOM order, with no rule needed for that — the ratio rules below only
 * ever apply at the theme's own desktop breakpoint (993px). A preset
 * class with no matching rule here (a typo, a future preset added to
 * ksm_block_ratio_presets() but not mirrored here) degrades to a
 * stacked single column, never to broken output.
 *
 * Theme tokens only, never hex — colours and spacing here must follow
 * Shane's live Site Settings the same way the rest of the theme does.
 *
 * This file styles ONLY the grid and gallery introduced in Stage B4.
 * It never touches .ksm-block itself — that wrapper's width/padding
 * belongs to style.css's existing utility layer (set-width, pad--xs,
 * width--100 etc.) and must stay there.
 */

.ksm-block__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s);
	align-items: start;
}

/* R-B11: without this, a wide table, a long URL or a [ksm_maps] embed
 * in a narrow column bursts its grid track instead of wrapping. Cheap,
 * easy to forget, visible the moment it is missing. */
.ksm-block__col {
	min-width: 0;
}

@media (min-width: 993px) {
	.ksm-block__cols--2.ksm-block__ratio--50-50 { grid-template-columns: 1fr 1fr; }
	.ksm-block__cols--2.ksm-block__ratio--70-30 { grid-template-columns: 7fr 3fr; }
	.ksm-block__cols--2.ksm-block__ratio--30-70 { grid-template-columns: 3fr 7fr; }
	.ksm-block__cols--2.ksm-block__ratio--60-40 { grid-template-columns: 3fr 2fr; }
	.ksm-block__cols--2.ksm-block__ratio--40-60 { grid-template-columns: 2fr 3fr; }
	.ksm-block__cols--2.ksm-block__ratio--75-25 { grid-template-columns: 3fr 1fr; }
	.ksm-block__cols--2.ksm-block__ratio--25-75 { grid-template-columns: 1fr 3fr; }

	.ksm-block__cols--3.ksm-block__ratio--33-33-33 { grid-template-columns: 1fr 1fr 1fr; }
	.ksm-block__cols--3.ksm-block__ratio--50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
	.ksm-block__cols--3.ksm-block__ratio--25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
	.ksm-block__cols--3.ksm-block__ratio--25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
}

/* Gallery grid — base is 2 columns; --cols-1 always collapses to one;
 * --cols-3/--cols-4 only apply their real count at 768px and above,
 * falling back to the 2-column base below that; everything collapses
 * to a single column below 480px, the theme's own smallest breakpoint,
 * regardless of the chosen images-per-row setting. */
.ksm-block__gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-s);
}

.ksm-block__gallery--cols-1 {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.ksm-block__gallery--cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.ksm-block__gallery--cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 480px) {
	.ksm-block__gallery {
		grid-template-columns: 1fr;
	}
}

.ksm-block__gallery-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Process steps block (2026-09-07). Applied by giving a 3-column block
 * the custom class `ksm-steps`. Each column's text holds two .ksm-step
 * cards; the column wrappers become display:contents so all six cards
 * sit directly on the block's own 3-column grid — reading 01 02 03 on
 * the first row and 04 05 06 on the second, with row tops aligned.
 * Below 993px the grid is already a single column, so the cards simply
 * stack 01 to 06 in order. Theme tokens only, no hex. */
.ksm-steps .ksm-block__col {
	display: contents;
}

.ksm-steps .ksm-block__cols {
	align-items: stretch;
	row-gap: var(--space-s);
}

.ksm-step {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
	padding: var(--space-s);
	background: var(--light);
	border-top: 4px solid var(--accent);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.ksm-step__num {
	font-size: var(--text-l);
	font-weight: 700;
	line-height: 1;
	color: var(--accent);
}

.ksm-step__title {
	margin: 0;
	font-size: var(--text-s);
	color: var(--dark);
}

.ksm-step p {
	margin: 0;
	color: var(--secondary);
}

/* Optional block title — rendered only when "Show the block title" is
 * ticked on the block (2026-09-07). */
.ksm-block__title {
	margin: 0 0 var(--space-s);
	text-align: center;
}