/*
 * Subsite Modkit — global utility classes.
 *
 * Applied through the block editor's "Additional CSS class(es)" field, with
 * CSS Class Manager providing autocomplete. Works on core and third-party
 * blocks alike, since these are plain class selectors.
 *
 * Adding a class here is only half the job — register it in
 * Settings > Modkit > Utility Classes so it shows up in the autocomplete.
 * Class names must match exactly.
 *
 * These are unscoped by design: they are meant to be composed onto any block.
 * Keep specificity at a single class so block-level styles can still win.
 */

/* Multi-column text ------------------------------------------------------ */

.column-count-2 {
	column-count: 2;
}

.column-count-3 {
	column-count: 3;
}

.column-count-4 {
	column-count: 4;
}

.column-gap-sm {
	column-gap: 1rem;
}

.column-gap-lg {
	column-gap: 3rem;
}

.no-break {
	break-inside: avoid;
}

/* Single column below the small breakpoint — multi-column body text is
 * unreadable on narrow viewports. */
@media (max-width: 767px) {
	.column-count-2,
	.column-count-3,
	.column-count-4 {
		column-count: 1;
	}
}

/* Typography ------------------------------------------------------------- */

.balance-text {
	text-wrap: balance;
}

.hanging-punct {
	hanging-punctuation: first last;
}

/* Layout ----------------------------------------------------------------- */

/* Escapes a constrained container to full viewport width. Uses 100vw, so it
 * can overflow by the scrollbar width on desktop; pair with
 * `overflow-x: hidden` on a wrapper if that matters. */
.full-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Media ------------------------------------------------------------------ */

.aspect-square {
	aspect-ratio: 1 / 1;
}

.aspect-square img,
.aspect-square video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}