/*
 * ILM Components -- shared foundation.
 * ============================================================================
 *
 * Loaded by every component in the library and by nothing else. It holds the
 * three things they all need and none of them should carry a copy of:
 *
 *   1. the `.ilm-component` boundary, and the typography components own;
 *   2. the spacing, alignment and grid scales, as CSS custom properties;
 *   3. the breakpoint classes that set them.
 *
 * ## Why components own their typography
 *
 * ILM Theme styles running prose under `.ilm-entry-content` -- paragraph
 * spacing, list indents, link underlines -- and deliberately stops that at
 * `.ilm-root`, because a component is not prose and should not begin by
 * undoing rules it never asked for. See ilm-theme's components/_entry.scss.
 *
 * The other half of that boundary is here: what the theme no longer supplies
 * inside a document, this file does. A Heading gets its size from
 * `basic-heading.css` and not from the theme's `h2`, which is why the same
 * document looks the same under a theme that is not ILM Theme.
 *
 * ## Theme tokens, with fallbacks
 *
 * Every measurement is `var(--ilm-space-4, 1rem)`. Under ILM Theme the token
 * resolves and a component's spacing matches the rest of the site; under any
 * other theme the fallback applies and the component still looks right. That
 * is the whole of "works with ILM Theme, does not require it".
 *
 * ## The shape of the scale classes
 *
 * A setting never reaches CSS as a value -- it selects a class, and the class
 * sets a custom property that a component stylesheet reads:
 *
 *     stored "md"  ->  class ilm-gap-md  ->  --ilm-c-gap  ->  gap: var(--ilm-c-gap)
 *
 * Breakpoints are the same classes with a token in front, inside a `min-width`
 * query, written narrowest first. `ilm-gap-sm` and `ilm-lg-gap-lg` on one
 * element means "small gap, large from 992px up" -- and between those two the
 * base is the only rule matching, which is mobile-first inheritance obtained
 * from the cascade rather than computed by anybody.
 *
 * Thresholds are `Breakpoint::minWidth()` in ILM Core, which are also
 * Bootstrap's. Nothing here depends on Bootstrap being loaded.
 *
 * ## Logical properties throughout
 *
 * `margin-block`, `padding-inline`, `text-align: start`. A right-to-left site
 * mirrors correctly with no separate stylesheet and no RTL build step, which
 * is why this file is plain CSS with no build behind it.
 *
 * The breakpoint blocks below are mechanical: every one contains the same
 * classes with its own prefix.
 */

.ilm-component {
	/* ---------------------------------------------------------------------
	 * The spacing scale. Six steps, mapped to ILM Theme's tokens where they
	 * exist. Declared on the component itself rather than on `:root`, so
	 * this plugin adds nothing to the global custom-property namespace of a
	 * page that merely has it installed.
	 * ------------------------------------------------------------------- */
	/*
	 * Each step reads a site's own spacing first (1.15.0): `--ilm-spacing-*`
	 * is what ILM Core prints when a site sets its scale in Global Styles.
	 * With none set it is undefined and the step falls through to exactly
	 * the value it had before, so nothing moves on a site that never set one.
	 */
	--ilm-c-space-xs: var(--ilm-spacing-xs, var(--ilm-space-2, 0.5rem));
	--ilm-c-space-sm: var(--ilm-spacing-sm, var(--ilm-space-4, 1rem));
	--ilm-c-space-md: var(--ilm-spacing-md, var(--ilm-space-6, 1.5rem));
	--ilm-c-space-lg: var(--ilm-spacing-lg, var(--ilm-space-10, 2.5rem));
	--ilm-c-space-xl: var(--ilm-spacing-xl, var(--ilm-space-16, 4rem));

	/* Defaults, so every `var()` below resolves even with no class set. */
	--ilm-c-gap: var(--ilm-c-space-md);
	--ilm-c-pad: var(--ilm-c-space-md);
	--ilm-c-padb: var(--ilm-c-space-lg);
	--ilm-c-space: var(--ilm-c-space-md);
	--ilm-c-height: var(--ilm-c-space-md);
	--ilm-c-align: stretch;
	--ilm-c-text: start;
	--ilm-c-span: 12;
	--ilm-c-cols: 1;

	box-sizing: border-box;

	/*
	 * No inherited margin. A component's spacing is its parent's `gap`, which
	 * is a single decision made in one place -- rather than margins on each
	 * child that collapse, interact, and depend on what happens to be next to
	 * what.
	 */
	margin: 0;
}

.ilm-component *,
.ilm-component *::before,
.ilm-component *::after {
	box-sizing: border-box;
}

/*
 * Text alignment is inherited, so setting it on the boundary is enough for
 * every component whose content is text.
 */
.ilm-component {
	text-align: var(--ilm-c-text);
}

/* ===========================================================================
 * The scale classes.
 * ======================================================================== */


.ilm-gap-none { --ilm-c-gap: 0; }
.ilm-gap-xs { --ilm-c-gap: var(--ilm-c-space-xs); }
.ilm-gap-sm { --ilm-c-gap: var(--ilm-c-space-sm); }
.ilm-gap-md { --ilm-c-gap: var(--ilm-c-space-md); }
.ilm-gap-lg { --ilm-c-gap: var(--ilm-c-space-lg); }
.ilm-gap-xl { --ilm-c-gap: var(--ilm-c-space-xl); }

.ilm-pad-none { --ilm-c-pad: 0; }
.ilm-pad-xs { --ilm-c-pad: var(--ilm-c-space-xs); }
.ilm-pad-sm { --ilm-c-pad: var(--ilm-c-space-sm); }
.ilm-pad-md { --ilm-c-pad: var(--ilm-c-space-md); }
.ilm-pad-lg { --ilm-c-pad: var(--ilm-c-space-lg); }
.ilm-pad-xl { --ilm-c-pad: var(--ilm-c-space-xl); }

.ilm-padb-none { --ilm-c-padb: 0; }
.ilm-padb-xs { --ilm-c-padb: var(--ilm-c-space-xs); }
.ilm-padb-sm { --ilm-c-padb: var(--ilm-c-space-sm); }
.ilm-padb-md { --ilm-c-padb: var(--ilm-c-space-md); }
.ilm-padb-lg { --ilm-c-padb: var(--ilm-c-space-lg); }
.ilm-padb-xl { --ilm-c-padb: var(--ilm-c-space-xl); }

.ilm-space-none { --ilm-c-space: 0; }
.ilm-space-xs { --ilm-c-space: var(--ilm-c-space-xs); }
.ilm-space-sm { --ilm-c-space: var(--ilm-c-space-sm); }
.ilm-space-md { --ilm-c-space: var(--ilm-c-space-md); }
.ilm-space-lg { --ilm-c-space: var(--ilm-c-space-lg); }
.ilm-space-xl { --ilm-c-space: var(--ilm-c-space-xl); }

.ilm-height-none { --ilm-c-height: 0; }
.ilm-height-xs { --ilm-c-height: var(--ilm-c-space-xs); }
.ilm-height-sm { --ilm-c-height: var(--ilm-c-space-sm); }
.ilm-height-md { --ilm-c-height: var(--ilm-c-space-md); }
.ilm-height-lg { --ilm-c-height: var(--ilm-c-space-lg); }
.ilm-height-xl { --ilm-c-height: var(--ilm-c-space-xl); }

.ilm-align-start { --ilm-c-align: start; }
.ilm-align-center { --ilm-c-align: center; }
.ilm-align-end { --ilm-c-align: end; }
.ilm-align-stretch { --ilm-c-align: stretch; }

.ilm-text-start { --ilm-c-text: start; }
.ilm-text-center { --ilm-c-text: center; }
.ilm-text-end { --ilm-c-text: end; }

.ilm-span-1 { --ilm-c-span: 1; }
.ilm-span-2 { --ilm-c-span: 2; }
.ilm-span-3 { --ilm-c-span: 3; }
.ilm-span-4 { --ilm-c-span: 4; }
.ilm-span-5 { --ilm-c-span: 5; }
.ilm-span-6 { --ilm-c-span: 6; }
.ilm-span-7 { --ilm-c-span: 7; }
.ilm-span-8 { --ilm-c-span: 8; }
.ilm-span-9 { --ilm-c-span: 9; }
.ilm-span-10 { --ilm-c-span: 10; }
.ilm-span-11 { --ilm-c-span: 11; }
.ilm-span-12 { --ilm-c-span: 12; }

.ilm-cols-1 { --ilm-c-cols: 1; }
.ilm-cols-2 { --ilm-c-cols: 2; }
.ilm-cols-3 { --ilm-c-cols: 3; }
.ilm-cols-4 { --ilm-c-cols: 4; }
.ilm-cols-5 { --ilm-c-cols: 5; }
.ilm-cols-6 { --ilm-c-cols: 6; }


/* ---------------------------------------------------------------------------
 * Media tokens.
 *
 * Added in 1.1.0 for the media family, and kept here rather than repeated in
 * six component stylesheets: Image, Gallery, Video, Embed and Background Media
 * all read `--ilm-c-ratio`, and two definitions of one token is how they come
 * to disagree.
 *
 * None of these is responsive, which is why they sit outside the breakpoint
 * matrix below. An aspect ratio that changes at 768px is art direction, and
 * section 71 says that is not what this phase is for -- resolution is already
 * handled by the `srcset` WordPress writes.
 * ------------------------------------------------------------------------ */

.ilm-ratio-auto { --ilm-c-ratio: auto; }
.ilm-ratio-square { --ilm-c-ratio: 1 / 1; }
.ilm-ratio-standard { --ilm-c-ratio: 4 / 3; }
.ilm-ratio-wide { --ilm-c-ratio: 16 / 9; }
.ilm-ratio-cinema { --ilm-c-ratio: 21 / 9; }
.ilm-ratio-portrait { --ilm-c-ratio: 4 / 5; }

.ilm-fit-cover { --ilm-c-fit: cover; }
.ilm-fit-contain { --ilm-c-fit: contain; }

.ilm-minh-auto { --ilm-c-minh: 0; }
.ilm-minh-sm { --ilm-c-minh: 18rem; }
.ilm-minh-md { --ilm-c-minh: 28rem; }
.ilm-minh-lg { --ilm-c-minh: 40rem; }

/* `svh` is the viewport minus the mobile browser chrome that comes and goes;
   the `vh` before it is what a browser without `svh` uses. */
.ilm-minh-screen { --ilm-c-minh: 100vh; --ilm-c-minh: 100svh; }

.ilm-overlay-none { --ilm-c-overlay: transparent; }
.ilm-overlay-light { --ilm-c-overlay: rgba(255, 255, 255, 0.45); }
.ilm-overlay-dark { --ilm-c-overlay: rgba(0, 0, 0, 0.35); }
.ilm-overlay-strong { --ilm-c-overlay: rgba(0, 0, 0, 0.65); }

/* --- sm: from 576px --- */
@media (min-width: 576px) {
	.ilm-sm-gap-none { --ilm-c-gap: 0; }
	.ilm-sm-gap-xs { --ilm-c-gap: var(--ilm-c-space-xs); }
	.ilm-sm-gap-sm { --ilm-c-gap: var(--ilm-c-space-sm); }
	.ilm-sm-gap-md { --ilm-c-gap: var(--ilm-c-space-md); }
	.ilm-sm-gap-lg { --ilm-c-gap: var(--ilm-c-space-lg); }
	.ilm-sm-gap-xl { --ilm-c-gap: var(--ilm-c-space-xl); }

	.ilm-sm-pad-none { --ilm-c-pad: 0; }
	.ilm-sm-pad-xs { --ilm-c-pad: var(--ilm-c-space-xs); }
	.ilm-sm-pad-sm { --ilm-c-pad: var(--ilm-c-space-sm); }
	.ilm-sm-pad-md { --ilm-c-pad: var(--ilm-c-space-md); }
	.ilm-sm-pad-lg { --ilm-c-pad: var(--ilm-c-space-lg); }
	.ilm-sm-pad-xl { --ilm-c-pad: var(--ilm-c-space-xl); }

	.ilm-sm-padb-none { --ilm-c-padb: 0; }
	.ilm-sm-padb-xs { --ilm-c-padb: var(--ilm-c-space-xs); }
	.ilm-sm-padb-sm { --ilm-c-padb: var(--ilm-c-space-sm); }
	.ilm-sm-padb-md { --ilm-c-padb: var(--ilm-c-space-md); }
	.ilm-sm-padb-lg { --ilm-c-padb: var(--ilm-c-space-lg); }
	.ilm-sm-padb-xl { --ilm-c-padb: var(--ilm-c-space-xl); }

	.ilm-sm-space-none { --ilm-c-space: 0; }
	.ilm-sm-space-xs { --ilm-c-space: var(--ilm-c-space-xs); }
	.ilm-sm-space-sm { --ilm-c-space: var(--ilm-c-space-sm); }
	.ilm-sm-space-md { --ilm-c-space: var(--ilm-c-space-md); }
	.ilm-sm-space-lg { --ilm-c-space: var(--ilm-c-space-lg); }
	.ilm-sm-space-xl { --ilm-c-space: var(--ilm-c-space-xl); }

	.ilm-sm-height-none { --ilm-c-height: 0; }
	.ilm-sm-height-xs { --ilm-c-height: var(--ilm-c-space-xs); }
	.ilm-sm-height-sm { --ilm-c-height: var(--ilm-c-space-sm); }
	.ilm-sm-height-md { --ilm-c-height: var(--ilm-c-space-md); }
	.ilm-sm-height-lg { --ilm-c-height: var(--ilm-c-space-lg); }
	.ilm-sm-height-xl { --ilm-c-height: var(--ilm-c-space-xl); }

	.ilm-sm-align-start { --ilm-c-align: start; }
	.ilm-sm-align-center { --ilm-c-align: center; }
	.ilm-sm-align-end { --ilm-c-align: end; }
	.ilm-sm-align-stretch { --ilm-c-align: stretch; }

	.ilm-sm-text-start { --ilm-c-text: start; }
	.ilm-sm-text-center { --ilm-c-text: center; }
	.ilm-sm-text-end { --ilm-c-text: end; }

	.ilm-sm-span-1 { --ilm-c-span: 1; }
	.ilm-sm-span-2 { --ilm-c-span: 2; }
	.ilm-sm-span-3 { --ilm-c-span: 3; }
	.ilm-sm-span-4 { --ilm-c-span: 4; }
	.ilm-sm-span-5 { --ilm-c-span: 5; }
	.ilm-sm-span-6 { --ilm-c-span: 6; }
	.ilm-sm-span-7 { --ilm-c-span: 7; }
	.ilm-sm-span-8 { --ilm-c-span: 8; }
	.ilm-sm-span-9 { --ilm-c-span: 9; }
	.ilm-sm-span-10 { --ilm-c-span: 10; }
	.ilm-sm-span-11 { --ilm-c-span: 11; }
	.ilm-sm-span-12 { --ilm-c-span: 12; }

	.ilm-sm-cols-1 { --ilm-c-cols: 1; }
	.ilm-sm-cols-2 { --ilm-c-cols: 2; }
	.ilm-sm-cols-3 { --ilm-c-cols: 3; }
	.ilm-sm-cols-4 { --ilm-c-cols: 4; }
	.ilm-sm-cols-5 { --ilm-c-cols: 5; }
	.ilm-sm-cols-6 { --ilm-c-cols: 6; }
}

/* --- md: from 768px --- */
@media (min-width: 768px) {
	.ilm-md-gap-none { --ilm-c-gap: 0; }
	.ilm-md-gap-xs { --ilm-c-gap: var(--ilm-c-space-xs); }
	.ilm-md-gap-sm { --ilm-c-gap: var(--ilm-c-space-sm); }
	.ilm-md-gap-md { --ilm-c-gap: var(--ilm-c-space-md); }
	.ilm-md-gap-lg { --ilm-c-gap: var(--ilm-c-space-lg); }
	.ilm-md-gap-xl { --ilm-c-gap: var(--ilm-c-space-xl); }

	.ilm-md-pad-none { --ilm-c-pad: 0; }
	.ilm-md-pad-xs { --ilm-c-pad: var(--ilm-c-space-xs); }
	.ilm-md-pad-sm { --ilm-c-pad: var(--ilm-c-space-sm); }
	.ilm-md-pad-md { --ilm-c-pad: var(--ilm-c-space-md); }
	.ilm-md-pad-lg { --ilm-c-pad: var(--ilm-c-space-lg); }
	.ilm-md-pad-xl { --ilm-c-pad: var(--ilm-c-space-xl); }

	.ilm-md-padb-none { --ilm-c-padb: 0; }
	.ilm-md-padb-xs { --ilm-c-padb: var(--ilm-c-space-xs); }
	.ilm-md-padb-sm { --ilm-c-padb: var(--ilm-c-space-sm); }
	.ilm-md-padb-md { --ilm-c-padb: var(--ilm-c-space-md); }
	.ilm-md-padb-lg { --ilm-c-padb: var(--ilm-c-space-lg); }
	.ilm-md-padb-xl { --ilm-c-padb: var(--ilm-c-space-xl); }

	.ilm-md-space-none { --ilm-c-space: 0; }
	.ilm-md-space-xs { --ilm-c-space: var(--ilm-c-space-xs); }
	.ilm-md-space-sm { --ilm-c-space: var(--ilm-c-space-sm); }
	.ilm-md-space-md { --ilm-c-space: var(--ilm-c-space-md); }
	.ilm-md-space-lg { --ilm-c-space: var(--ilm-c-space-lg); }
	.ilm-md-space-xl { --ilm-c-space: var(--ilm-c-space-xl); }

	.ilm-md-height-none { --ilm-c-height: 0; }
	.ilm-md-height-xs { --ilm-c-height: var(--ilm-c-space-xs); }
	.ilm-md-height-sm { --ilm-c-height: var(--ilm-c-space-sm); }
	.ilm-md-height-md { --ilm-c-height: var(--ilm-c-space-md); }
	.ilm-md-height-lg { --ilm-c-height: var(--ilm-c-space-lg); }
	.ilm-md-height-xl { --ilm-c-height: var(--ilm-c-space-xl); }

	.ilm-md-align-start { --ilm-c-align: start; }
	.ilm-md-align-center { --ilm-c-align: center; }
	.ilm-md-align-end { --ilm-c-align: end; }
	.ilm-md-align-stretch { --ilm-c-align: stretch; }

	.ilm-md-text-start { --ilm-c-text: start; }
	.ilm-md-text-center { --ilm-c-text: center; }
	.ilm-md-text-end { --ilm-c-text: end; }

	.ilm-md-span-1 { --ilm-c-span: 1; }
	.ilm-md-span-2 { --ilm-c-span: 2; }
	.ilm-md-span-3 { --ilm-c-span: 3; }
	.ilm-md-span-4 { --ilm-c-span: 4; }
	.ilm-md-span-5 { --ilm-c-span: 5; }
	.ilm-md-span-6 { --ilm-c-span: 6; }
	.ilm-md-span-7 { --ilm-c-span: 7; }
	.ilm-md-span-8 { --ilm-c-span: 8; }
	.ilm-md-span-9 { --ilm-c-span: 9; }
	.ilm-md-span-10 { --ilm-c-span: 10; }
	.ilm-md-span-11 { --ilm-c-span: 11; }
	.ilm-md-span-12 { --ilm-c-span: 12; }

	.ilm-md-cols-1 { --ilm-c-cols: 1; }
	.ilm-md-cols-2 { --ilm-c-cols: 2; }
	.ilm-md-cols-3 { --ilm-c-cols: 3; }
	.ilm-md-cols-4 { --ilm-c-cols: 4; }
	.ilm-md-cols-5 { --ilm-c-cols: 5; }
	.ilm-md-cols-6 { --ilm-c-cols: 6; }
}

/* --- lg: from 992px --- */
@media (min-width: 992px) {
	.ilm-lg-gap-none { --ilm-c-gap: 0; }
	.ilm-lg-gap-xs { --ilm-c-gap: var(--ilm-c-space-xs); }
	.ilm-lg-gap-sm { --ilm-c-gap: var(--ilm-c-space-sm); }
	.ilm-lg-gap-md { --ilm-c-gap: var(--ilm-c-space-md); }
	.ilm-lg-gap-lg { --ilm-c-gap: var(--ilm-c-space-lg); }
	.ilm-lg-gap-xl { --ilm-c-gap: var(--ilm-c-space-xl); }

	.ilm-lg-pad-none { --ilm-c-pad: 0; }
	.ilm-lg-pad-xs { --ilm-c-pad: var(--ilm-c-space-xs); }
	.ilm-lg-pad-sm { --ilm-c-pad: var(--ilm-c-space-sm); }
	.ilm-lg-pad-md { --ilm-c-pad: var(--ilm-c-space-md); }
	.ilm-lg-pad-lg { --ilm-c-pad: var(--ilm-c-space-lg); }
	.ilm-lg-pad-xl { --ilm-c-pad: var(--ilm-c-space-xl); }

	.ilm-lg-padb-none { --ilm-c-padb: 0; }
	.ilm-lg-padb-xs { --ilm-c-padb: var(--ilm-c-space-xs); }
	.ilm-lg-padb-sm { --ilm-c-padb: var(--ilm-c-space-sm); }
	.ilm-lg-padb-md { --ilm-c-padb: var(--ilm-c-space-md); }
	.ilm-lg-padb-lg { --ilm-c-padb: var(--ilm-c-space-lg); }
	.ilm-lg-padb-xl { --ilm-c-padb: var(--ilm-c-space-xl); }

	.ilm-lg-space-none { --ilm-c-space: 0; }
	.ilm-lg-space-xs { --ilm-c-space: var(--ilm-c-space-xs); }
	.ilm-lg-space-sm { --ilm-c-space: var(--ilm-c-space-sm); }
	.ilm-lg-space-md { --ilm-c-space: var(--ilm-c-space-md); }
	.ilm-lg-space-lg { --ilm-c-space: var(--ilm-c-space-lg); }
	.ilm-lg-space-xl { --ilm-c-space: var(--ilm-c-space-xl); }

	.ilm-lg-height-none { --ilm-c-height: 0; }
	.ilm-lg-height-xs { --ilm-c-height: var(--ilm-c-space-xs); }
	.ilm-lg-height-sm { --ilm-c-height: var(--ilm-c-space-sm); }
	.ilm-lg-height-md { --ilm-c-height: var(--ilm-c-space-md); }
	.ilm-lg-height-lg { --ilm-c-height: var(--ilm-c-space-lg); }
	.ilm-lg-height-xl { --ilm-c-height: var(--ilm-c-space-xl); }

	.ilm-lg-align-start { --ilm-c-align: start; }
	.ilm-lg-align-center { --ilm-c-align: center; }
	.ilm-lg-align-end { --ilm-c-align: end; }
	.ilm-lg-align-stretch { --ilm-c-align: stretch; }

	.ilm-lg-text-start { --ilm-c-text: start; }
	.ilm-lg-text-center { --ilm-c-text: center; }
	.ilm-lg-text-end { --ilm-c-text: end; }

	.ilm-lg-span-1 { --ilm-c-span: 1; }
	.ilm-lg-span-2 { --ilm-c-span: 2; }
	.ilm-lg-span-3 { --ilm-c-span: 3; }
	.ilm-lg-span-4 { --ilm-c-span: 4; }
	.ilm-lg-span-5 { --ilm-c-span: 5; }
	.ilm-lg-span-6 { --ilm-c-span: 6; }
	.ilm-lg-span-7 { --ilm-c-span: 7; }
	.ilm-lg-span-8 { --ilm-c-span: 8; }
	.ilm-lg-span-9 { --ilm-c-span: 9; }
	.ilm-lg-span-10 { --ilm-c-span: 10; }
	.ilm-lg-span-11 { --ilm-c-span: 11; }
	.ilm-lg-span-12 { --ilm-c-span: 12; }

	.ilm-lg-cols-1 { --ilm-c-cols: 1; }
	.ilm-lg-cols-2 { --ilm-c-cols: 2; }
	.ilm-lg-cols-3 { --ilm-c-cols: 3; }
	.ilm-lg-cols-4 { --ilm-c-cols: 4; }
	.ilm-lg-cols-5 { --ilm-c-cols: 5; }
	.ilm-lg-cols-6 { --ilm-c-cols: 6; }
}

/* --- xl: from 1200px --- */
@media (min-width: 1200px) {
	.ilm-xl-gap-none { --ilm-c-gap: 0; }
	.ilm-xl-gap-xs { --ilm-c-gap: var(--ilm-c-space-xs); }
	.ilm-xl-gap-sm { --ilm-c-gap: var(--ilm-c-space-sm); }
	.ilm-xl-gap-md { --ilm-c-gap: var(--ilm-c-space-md); }
	.ilm-xl-gap-lg { --ilm-c-gap: var(--ilm-c-space-lg); }
	.ilm-xl-gap-xl { --ilm-c-gap: var(--ilm-c-space-xl); }

	.ilm-xl-pad-none { --ilm-c-pad: 0; }
	.ilm-xl-pad-xs { --ilm-c-pad: var(--ilm-c-space-xs); }
	.ilm-xl-pad-sm { --ilm-c-pad: var(--ilm-c-space-sm); }
	.ilm-xl-pad-md { --ilm-c-pad: var(--ilm-c-space-md); }
	.ilm-xl-pad-lg { --ilm-c-pad: var(--ilm-c-space-lg); }
	.ilm-xl-pad-xl { --ilm-c-pad: var(--ilm-c-space-xl); }

	.ilm-xl-padb-none { --ilm-c-padb: 0; }
	.ilm-xl-padb-xs { --ilm-c-padb: var(--ilm-c-space-xs); }
	.ilm-xl-padb-sm { --ilm-c-padb: var(--ilm-c-space-sm); }
	.ilm-xl-padb-md { --ilm-c-padb: var(--ilm-c-space-md); }
	.ilm-xl-padb-lg { --ilm-c-padb: var(--ilm-c-space-lg); }
	.ilm-xl-padb-xl { --ilm-c-padb: var(--ilm-c-space-xl); }

	.ilm-xl-space-none { --ilm-c-space: 0; }
	.ilm-xl-space-xs { --ilm-c-space: var(--ilm-c-space-xs); }
	.ilm-xl-space-sm { --ilm-c-space: var(--ilm-c-space-sm); }
	.ilm-xl-space-md { --ilm-c-space: var(--ilm-c-space-md); }
	.ilm-xl-space-lg { --ilm-c-space: var(--ilm-c-space-lg); }
	.ilm-xl-space-xl { --ilm-c-space: var(--ilm-c-space-xl); }

	.ilm-xl-height-none { --ilm-c-height: 0; }
	.ilm-xl-height-xs { --ilm-c-height: var(--ilm-c-space-xs); }
	.ilm-xl-height-sm { --ilm-c-height: var(--ilm-c-space-sm); }
	.ilm-xl-height-md { --ilm-c-height: var(--ilm-c-space-md); }
	.ilm-xl-height-lg { --ilm-c-height: var(--ilm-c-space-lg); }
	.ilm-xl-height-xl { --ilm-c-height: var(--ilm-c-space-xl); }

	.ilm-xl-align-start { --ilm-c-align: start; }
	.ilm-xl-align-center { --ilm-c-align: center; }
	.ilm-xl-align-end { --ilm-c-align: end; }
	.ilm-xl-align-stretch { --ilm-c-align: stretch; }

	.ilm-xl-text-start { --ilm-c-text: start; }
	.ilm-xl-text-center { --ilm-c-text: center; }
	.ilm-xl-text-end { --ilm-c-text: end; }

	.ilm-xl-span-1 { --ilm-c-span: 1; }
	.ilm-xl-span-2 { --ilm-c-span: 2; }
	.ilm-xl-span-3 { --ilm-c-span: 3; }
	.ilm-xl-span-4 { --ilm-c-span: 4; }
	.ilm-xl-span-5 { --ilm-c-span: 5; }
	.ilm-xl-span-6 { --ilm-c-span: 6; }
	.ilm-xl-span-7 { --ilm-c-span: 7; }
	.ilm-xl-span-8 { --ilm-c-span: 8; }
	.ilm-xl-span-9 { --ilm-c-span: 9; }
	.ilm-xl-span-10 { --ilm-c-span: 10; }
	.ilm-xl-span-11 { --ilm-c-span: 11; }
	.ilm-xl-span-12 { --ilm-c-span: 12; }

	.ilm-xl-cols-1 { --ilm-c-cols: 1; }
	.ilm-xl-cols-2 { --ilm-c-cols: 2; }
	.ilm-xl-cols-3 { --ilm-c-cols: 3; }
	.ilm-xl-cols-4 { --ilm-c-cols: 4; }
	.ilm-xl-cols-5 { --ilm-c-cols: 5; }
	.ilm-xl-cols-6 { --ilm-c-cols: 6; }
}

/* --- xxl: from 1400px --- */
@media (min-width: 1400px) {
	.ilm-xxl-gap-none { --ilm-c-gap: 0; }
	.ilm-xxl-gap-xs { --ilm-c-gap: var(--ilm-c-space-xs); }
	.ilm-xxl-gap-sm { --ilm-c-gap: var(--ilm-c-space-sm); }
	.ilm-xxl-gap-md { --ilm-c-gap: var(--ilm-c-space-md); }
	.ilm-xxl-gap-lg { --ilm-c-gap: var(--ilm-c-space-lg); }
	.ilm-xxl-gap-xl { --ilm-c-gap: var(--ilm-c-space-xl); }

	.ilm-xxl-pad-none { --ilm-c-pad: 0; }
	.ilm-xxl-pad-xs { --ilm-c-pad: var(--ilm-c-space-xs); }
	.ilm-xxl-pad-sm { --ilm-c-pad: var(--ilm-c-space-sm); }
	.ilm-xxl-pad-md { --ilm-c-pad: var(--ilm-c-space-md); }
	.ilm-xxl-pad-lg { --ilm-c-pad: var(--ilm-c-space-lg); }
	.ilm-xxl-pad-xl { --ilm-c-pad: var(--ilm-c-space-xl); }

	.ilm-xxl-padb-none { --ilm-c-padb: 0; }
	.ilm-xxl-padb-xs { --ilm-c-padb: var(--ilm-c-space-xs); }
	.ilm-xxl-padb-sm { --ilm-c-padb: var(--ilm-c-space-sm); }
	.ilm-xxl-padb-md { --ilm-c-padb: var(--ilm-c-space-md); }
	.ilm-xxl-padb-lg { --ilm-c-padb: var(--ilm-c-space-lg); }
	.ilm-xxl-padb-xl { --ilm-c-padb: var(--ilm-c-space-xl); }

	.ilm-xxl-space-none { --ilm-c-space: 0; }
	.ilm-xxl-space-xs { --ilm-c-space: var(--ilm-c-space-xs); }
	.ilm-xxl-space-sm { --ilm-c-space: var(--ilm-c-space-sm); }
	.ilm-xxl-space-md { --ilm-c-space: var(--ilm-c-space-md); }
	.ilm-xxl-space-lg { --ilm-c-space: var(--ilm-c-space-lg); }
	.ilm-xxl-space-xl { --ilm-c-space: var(--ilm-c-space-xl); }

	.ilm-xxl-height-none { --ilm-c-height: 0; }
	.ilm-xxl-height-xs { --ilm-c-height: var(--ilm-c-space-xs); }
	.ilm-xxl-height-sm { --ilm-c-height: var(--ilm-c-space-sm); }
	.ilm-xxl-height-md { --ilm-c-height: var(--ilm-c-space-md); }
	.ilm-xxl-height-lg { --ilm-c-height: var(--ilm-c-space-lg); }
	.ilm-xxl-height-xl { --ilm-c-height: var(--ilm-c-space-xl); }

	.ilm-xxl-align-start { --ilm-c-align: start; }
	.ilm-xxl-align-center { --ilm-c-align: center; }
	.ilm-xxl-align-end { --ilm-c-align: end; }
	.ilm-xxl-align-stretch { --ilm-c-align: stretch; }

	.ilm-xxl-text-start { --ilm-c-text: start; }
	.ilm-xxl-text-center { --ilm-c-text: center; }
	.ilm-xxl-text-end { --ilm-c-text: end; }

	.ilm-xxl-span-1 { --ilm-c-span: 1; }
	.ilm-xxl-span-2 { --ilm-c-span: 2; }
	.ilm-xxl-span-3 { --ilm-c-span: 3; }
	.ilm-xxl-span-4 { --ilm-c-span: 4; }
	.ilm-xxl-span-5 { --ilm-c-span: 5; }
	.ilm-xxl-span-6 { --ilm-c-span: 6; }
	.ilm-xxl-span-7 { --ilm-c-span: 7; }
	.ilm-xxl-span-8 { --ilm-c-span: 8; }
	.ilm-xxl-span-9 { --ilm-c-span: 9; }
	.ilm-xxl-span-10 { --ilm-c-span: 10; }
	.ilm-xxl-span-11 { --ilm-c-span: 11; }
	.ilm-xxl-span-12 { --ilm-c-span: 12; }

	.ilm-xxl-cols-1 { --ilm-c-cols: 1; }
	.ilm-xxl-cols-2 { --ilm-c-cols: 2; }
	.ilm-xxl-cols-3 { --ilm-c-cols: 3; }
	.ilm-xxl-cols-4 { --ilm-c-cols: 4; }
	.ilm-xxl-cols-5 { --ilm-c-cols: 5; }
	.ilm-xxl-cols-6 { --ilm-c-cols: 6; }
}

/* ===========================================================================
 * Spacer.
 *
 * The one component whose entire appearance is a value from the scale above,
 * which is why it ships no stylesheet of its own and its single rule lives
 * here instead. A file holding three lines would be a second HTTP request for
 * a height.
 *
 * `block-size` rather than `height`, and `flex: none` so that a Spacer inside
 * a flex column -- which every Container, Section and Column is -- keeps the
 * height it was given instead of being squashed to fit.
 * ======================================================================== */

.ilm-component--layout-spacer {
	block-size: var(--ilm-c-height);
	flex: none;
}

/*
 * Text for screen readers only.
 * ----------------------------------------------------------------------------
 *
 * Added in 1.2.0 for the Interactive family, whose controls are drawn rather
 * than written: a carousel's previous and next are arrows in CSS, and an
 * accessible name has to exist somewhere a screen reader will find it.
 *
 * It lives here rather than in each component's stylesheet because three of
 * them need the identical rule, and because it is a boundary utility -- a page
 * that never loads a component that uses it does not get it either, since
 * nothing loads this file without a component.
 *
 * The clip-path/1px arrangement rather than `display: none`, which removes the
 * text from the accessibility tree, and rather than a negative text-indent,
 * which breaks in right-to-left. It stays focusable, so a skip link written
 * with it still works.
 */

.ilm-visually-hidden {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * The card treatment: lift, hover shadow and the transition that carries them.
 * ----------------------------------------------------------------------------
 *
 * Added in 1.15.0 with `Design::hover()`. Classes from closed lists, set only
 * on a box whose author chose them -- `ilm-lift-*`, `ilm-hshadow-*`, and
 * `ilm-hover`, which a box gets whenever any hover setting is present,
 * including the two colours Core compiles into its generated class.
 *
 * The lift and shadow also apply while focus is inside the box, so a keyboard
 * reader reaching a card's link sees the card answer. None of this touches
 * `outline`, so the link's own focus ring is unchanged.
 *
 * The shadows are the theme's scale, with the values ILM Theme ships as the
 * fallbacks, so a site that sets `--ilm-shadow-md` restyles every hover
 * shadow at once.
 */

.ilm-hover {
	transition-property: transform, box-shadow, background-color, border-color;
	transition-duration: var(--ilm-transition-base, 200ms);
	transition-timing-function: var(--ilm-easing-standard, cubic-bezier(0.2, 0, 0.2, 1));
}

.ilm-lift-sm:hover,
.ilm-lift-sm:focus-within { transform: translateY(-2px); }
.ilm-lift-md:hover,
.ilm-lift-md:focus-within { transform: translateY(-4px); }

.ilm-hshadow-sm:hover,
.ilm-hshadow-sm:focus-within { box-shadow: var(--ilm-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)); }
.ilm-hshadow-md:hover,
.ilm-hshadow-md:focus-within { box-shadow: var(--ilm-shadow-md, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)); }
.ilm-hshadow-lg:hover,
.ilm-hshadow-lg:focus-within { box-shadow: var(--ilm-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175)); }

/*
 * A reader who asked for less motion gets no movement and no easing: the
 * box does not rise, and the shadow and colours change at once. The
 * affordance is kept; only the motion is removed.
 */
@media (prefers-reduced-motion: reduce) {
	.ilm-hover {
		transition: none;
	}

	.ilm-lift-sm:hover,
	.ilm-lift-sm:focus-within,
	.ilm-lift-md:hover,
	.ilm-lift-md:focus-within {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Placeholder (1.27.0).
 *
 * The frame Featured Image and Posts grid draw for a record with no image,
 * when the author asks for one (`Markup::placeholder()`). Decorative: the
 * shape the image would have had (`--ilm-c-ratio`; square where the shape is
 * the image's own, which an absent image has not got), a quiet surface from
 * the theme's tokens, a hairline edge and an optional icon in the muted text
 * colour. It inherits the radius of whatever clips it.
 * ------------------------------------------------------------------------ */

.ilm-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: 100%;
	aspect-ratio: var(--ilm-c-ratio, 1 / 1);
	border: 1px solid var(--ilm-color-border, rgba(127, 127, 127, 0.25));
	border-radius: inherit;
	background: linear-gradient(135deg, var(--ilm-color-bg-subtle, #f1f3f5), var(--ilm-color-bg-strong, #e3e7eb));
	color: var(--ilm-color-fg-muted, #5c6670);
}

.ilm-ratio-auto .ilm-placeholder {
	aspect-ratio: 1 / 1;
}

/*
 * The frame with a name set in it (1.40.0, `Markup::namePlaceholder()`): the
 * record's name in the heading face, centred, balanced over at most three
 * lines -- decorative, the name is also written beside it.
 */
.ilm-placeholder--name {
	padding: 0.75em;
	text-align: center;
}

.ilm-placeholder__name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-family: var(--ilm-font-family-heading, inherit);
	font-size: 1.25em;
	font-weight: var(--ilm-font-weight-bold, 700);
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.ilm-placeholder__icon {
	inline-size: clamp(1.5rem, 22%, 4rem);
	block-size: auto;
	aspect-ratio: 1 / 1;
	opacity: 0.6;
}