@charset "UTF-8";

/**
 * columns.css 1.5.0
 * Author: hybrid.
 *
 * One-line responsive flex layout.
 * Columns share available space equally by default (flex-grow: 1).
 * Stacks vertically on mobile (< 760px).
 * Extends alignment.css utilities in .columns context.
 *
 * Classes
 * .columns                   — flex row, wraps, aligns top, full width
 * .columns.reversed          — flex-direction row-reverse
 * .columns.fit               — gap: 0
 * .columns.small             — smaller gap
 * .columns.large             — larger gap
 * .columns.items-middle      — align-items center
 * .columns.items-bottom      — align-items flex-end
 * .columns.items-stretch     — children fill equal height
 * .columns.has-gutter        — border on all children except last
 * .columns > *.has-gutter    — border on a single child
 *
 * Child sizes
 * .min    — flex-grow: 0 (shrink to content)
 * .short  — flex-grow: 0.5 (half growth)
 * .large  — flex-grow: 2 (double growth)
 *
 * Column count
 * .columns[data-columns="2|3|4|5|6"] — caps columns per row on desktop
 *
 * Limited width
 * .columns.is-limited > *          — behaves as if a sibling fills the remaining space (no extra markup needed)
 * .columns.is-limited > .short     — short proportion
 * .columns.is-limited > .large     — large proportion
 * .columns > .is-limited > *       — caps inner content width, right-aligned by default
 * .columns > .is-limited.short > *
 * .columns > .is-limited.large > *
 *
 * Tokens
 * --column-min-width               flex-grow for .min children (default: 0)
 * --column-short-width             flex-grow for .short children (default: 0.5)
 * --column-large-width             flex-grow for .large children (default: 2)
 * --columns-min-width              min-width on desktop children (default: 15rem)
 * --columns-limited-default-width  max-width for default limited children (50%)
 * --columns-limited-short-width    derived from --column-short-width
 * --columns-limited-large-width    derived from --column-large-width
 * --columns-per-row                columns per row when data-columns is set
 *
 * Dependencies
 * alignment.css                    — .is-stretch, .is-middle, .is-bottom, .items-*
 * --gutter-gap                     defined in structure.css
 * --stroke-width                   defined in structure.css
 * --content-spacing                defined in structure.css
 *
 * TODO
 * — @container pour .columnizer (remplace les @media viewport, projet par projet)
 * — breakpoints en variables (nécessite SCSS ou PostCSS — hors scope core)
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */

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


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

:root {
	--column-min-width: 0;
	--column-short-width: .5;
	--column-large-width: 2;

	--columns-limited-default-width: 50%;
	--columns-limited-short-width: calc(var(--column-short-width) / (var(--column-short-width) + 1) * 100%);
	--columns-limited-large-width: calc(var(--column-large-width) / (var(--column-large-width) + 1) * 100%);
}

@media (min-width: 760px) {
	:root {
		--columns-min-width: 15rem;
	}
}


/* ============================== GUTTERS ============================== */

:root {
	--columns-gap: var(--gutter-gap);
	--columnizer-gap: var(--content-spacing);
}

.columns.fit { --columns-gap: 0; }
.columns.small { --columns-gap: calc(var(--gutter-gap) / 2); }
.columns.large { --columns-gap: calc(var(--gutter-gap) * 2); }



/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */


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

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


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

.columns.reversed {
	flex-direction: row-reverse;
}


/* ============================== 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.items-stretch > *,
.columns > .is-stretch {
	align-self: stretch;
}
.columns.items-middle.items-stretch > *,
.columns.items-stretch > .is-middle {
	display: flex;
	align-items: center;
}
.columns.items-stretch > .is-bottom {
	display: flex;
	align-items: flex-end;
}


/* ============================== RESPONSIVE ============================== */

.columns > * {
	flex-grow: 1;
	width: 100%;
}

@media (min-width: 760px) {
	.columns > * {
		flex-grow: 1;
		flex-basis: 0;
		min-width: var(--columns-min-width);
	}
}


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

@media (min-width: 760px) {
	.columns.is-limited > *      { max-width: var(--columns-limited-default-width); }
	.columns.is-limited > .short { max-width: var(--columns-limited-short-width); }
	.columns.is-limited > .large { max-width: var(--columns-limited-large-width); }

	.columns > .is-limited > * {
		max-width: var(--columns-limited-default-width);
		margin-right: auto;
	}
	.columns > .is-limited.short > * {
		max-width: var(--columns-limited-short-width);
	}
	.columns > .is-limited.large > * {
		max-width: var(--columns-limited-large-width);
	}
	.columns > * + .is-limited > * {
		margin-left: auto;
		margin-right: 0;
	}
}


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

.columns.has-gutter > *:not(:last-child) {
	border-bottom: solid var(--stroke-width);
	padding-bottom: var(--columns-gap);
}

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


/* ============================== ROWS ============================== */

@media (min-width: 760px) {
	.columns[data-columns='2'] { --columns-per-row: 2; }
	.columns[data-columns='3'] { --columns-per-row: 3; }
	.columns[data-columns='4'] { --columns-per-row: 4; }
	.columns[data-columns='5'] { --columns-per-row: 5; }
	.columns[data-columns='6'] { --columns-per-row: 6; }
	.columns[data-columns] > * {
		flex-basis: calc((100% - (var(--columns-per-row) - 1) * var(--columns-gap)) / var(--columns-per-row));
		max-width: calc((100% - (var(--columns-per-row) - 1) * var(--columns-gap)) / var(--columns-per-row));
	}
}


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

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

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

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



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */

/* here for project-specific media overrides */