@charset "UTF-8";

/**
 * columns.css 1.2.0
 *
 * One-line responsive flex layout.
 * Columns share available space equally by default (flex-grow: 1).
 * Stacks vertically on mobile (< 760px).
 *
 * CLASSES
 * .columns              — flex row, wraps, aligns top, full width
 * .columns.centered     — justify center + text-align center on children
 * .columns.vertical-centered — align-items center
 * .columns.reversed     — flex-direction row-reverse
 * .columns.fit          — gap: 0
 * .columns.large        — larger gap
 * .columns.full         — children fill 100% width and height
 *
 * CHILD SIZES
 * .min    — flex-grow: 0 (shrink to content)
 * .short  — flex-grow: 0.5 (half growth)
 * .large  — flex-grow: 2 (double growth)
 *
 * GUTTER (separator line between columns)
 * .columns.has-gutter   — border on all children except last
 * .columns > *.has-gutter — border on a single child
 *
 * COLUMN COUNT LIMIT
 * .columns[data-columns="2"] — caps at 2 equal columns on desktop
 *
 * LIMITED WIDTH
 * .columns.is-limited > *    — max-width on each child
 * .columns > .is-limited > * — max-width + margin-right auto
 */


/* ============================================== */
/* ==================== VARS ==================== */
/* ============================================== */

/**
 * Global variables expected from the theme (not defined here):
 * --gutter-gap          — column gap and gutter padding
 * --gutter-gap-large    — larger column gap (.large modifier)
 * --stroke-width        — gutter border width
 *
 * Column-specific variables — scoped to their breakpoint,
 * override per project or per context selector.
 */

:root {
	--column-min-width: 0;
	--column-short-width: 0.5;
	--column-large-width: 2;
}

@media (min-width: 760px) {
	:root {
		--columns-min-width: 15rem;
		--columns-limited-max-width: 20rem;
		--columns-limited-max-width-large: 60rem;
	}
}

@media (min-width: 1600px) {
	:root {
		--columns-limited-max-width-wide: 30rem;
	}
}


/* ================================================= */
/* ==================== COLUMNS ==================== */
/* ================================================= */


/* ========== DEFAULT ========== */

.columns {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 100%;
	max-width: none;
	gap: var(--gutter-gap);
}
.columns > * {
	margin: 0;
	list-style-type: none;
}


/* ========== MODIFIERS ========== */

.columns.fit {
	gap: 0;
}
.columns.large {
	gap: var(--gutter-gap-large);
}
.columns.reversed {
	flex-direction: row-reverse;
}
.columns.full > * {
	width: 100%;
	height: 100%;
}


/* ========== SIZES ========== */

.columns > .min {
	flex-grow: var(--column-min-width);
}
.columns > .short {
	flex-grow: var(--column-short-width);
}
.columns > .large {
	flex-grow: var(--column-large-width);
}


/* ========== ALIGNMENT ========== */

.columns.centered {
	justify-content: center;
}
.columns.centered > * {
	text-align: center;
}
.columns.centered ul,
.columns.centered ol {
	text-align: left;
}

.columns.vertical-centered {
	align-items: center;
}
.columns.vertical-centered > * {
	margin-top: auto;
	margin-bottom: auto;
}


/* ========== LIMITED ========== */

@media (min-width: 760px) {
	.columns.is-limited > * {
		max-width: var(--columns-limited-max-width);
	}
	.columns > .is-limited > * {
		max-width: var(--columns-limited-max-width);
		margin-right: auto;
	}
	.columns > .is-limited.large > * {
		max-width: var(--columns-limited-max-width-large);
	}
	.columns > * + .is-limited > * {
		margin-left: auto;
		margin-right: 0;
	}
}
@media (min-width: 1600px) {
	.columns.is-limited > *,
	.wp-block-columns > .is-limited > *,
	.columns > .is-limited > * {
		max-width: var(--columns-limited-max-width-wide);
		margin-right: auto;
	}
	.wp-block-columns > * + .is-limited > *,
	.columns > * + .is-limited > * {
		margin-left: auto;
		margin-right: 0;
	}
}


/* ========== GUTTER ========== */

@media (min-width: 760px) {
	.columns.has-gutter > *:not(:last-child) {
		border-right: solid var(--stroke-width);
		padding-right: var(--gutter-gap);
		margin-bottom: var(--gutter-gap);
	}
	.columns > *.has-gutter {
		border-left: solid var(--stroke-width);
		padding-left: var(--gutter-gap);
	}
}


/* ================================================ */
/* ==================== @MEDIA ==================== */
/* ================================================ */


/* ========== MOBILE ========== */

@media (max-width: 759px) {
	.columns > * {
		flex-grow: 1;
		width: 100%;
	}
	.columns.has-gutter > *:not(:last-child) {
		border-bottom: solid var(--stroke-width);
		padding-bottom: var(--gutter-gap);
	}
}


/* ========== DESKTOP ========== */

@media (min-width: 760px) {
	.columns > * {
		flex-grow: 1;
		flex-basis: 0 !important;
		min-width: var(--columns-min-width);
	}
	.columns[data-columns='2'] > * {
		flex-basis: calc(50% - var(--gutter-gap) / 2) !important;
		max-width: calc(50% - var(--gutter-gap) / 2);
	}
}

/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */


/* ========== IS-LAST ========== */

.is-last {
	margin-left: auto !important;
}
.columns .is-last {
	margin-left: auto !important;
	min-width: auto;
	white-space: nowrap;
	flex-grow: 0;
}


/* ========== COLUMNIZER ========== */

/**
 * CSS multi-column text layout.
 * data-columns="2" (default) / "3" / "4"
 */

.columnizer * + * {
	padding: 0;
	margin: 1rem 0 0 0;
}
.columnizer p + p {
	padding: 0;
	margin: 0 0 1rem 0;
}
.columnizer p:not(:last-child) {
	margin-bottom: 1rem;
}
.columnizer .break {
	break-before: always;
	padding-top: 0;
}

@media (min-width: 760px) {
	.columnizer {
		column-count: 2;
		column-gap: 2rem;
	}
}
@media (min-width: 1000px) {
	.columnizer[data-columns="3"] {
		column-count: 3;
	}
	.columnizer[data-columns="4"] {
		column-count: 4;
	}
}