/*
 * Kotlet — layout primitives.
 *
 * Shapes only: how much room something gets and how its children are arranged.
 * No colours, no borders, no type — those belong to the component that uses the
 * primitive, so the same primitive can serve a header and a footer alike.
 *
 * The layer order is declared once in base.css and must not be repeated here.
 */
@layer layout {
	/* The horizontal frame every full-width band puts its content in. */
	.klt-container {
		width: 100%;
		max-width: var(--klt-width-wide);
		margin-inline: auto;
		padding-inline: var(--klt-gutter);
	}

	/*
	 * The wide gutter starts where the window is wider than the frame plus two
	 * full margins. Below that the frame would be capped by the window anyway and
	 * a 4rem margin would eat the text instead of framing it.
	 */
	@media (width >= 60rem) {
		:root {
			--klt-gutter: 4rem;
		}
	}

	/* Narrower frame for running text, where line length matters more than width. */
	.klt-container--content {
		max-width: var(--klt-width-content);
	}

	/*
	 * The other half of the pair: a run of sections that were not given a frame.
	 * There is nothing to declare — it is as wide as whatever holds it, which is
	 * the page on a composed home page and the column in a side zone. The class
	 * exists so the composer's two runs read the same in the markup and so the
	 * rule below has something to ask about.
	 */
	.klt-bleed {
		width: 100%;
	}

	.klt-main {
		padding-block: var(--klt-space-xl);
	}

	/*
	 * A composition opening with an edge-to-edge band starts at the header. The
	 * padding above the content is there to keep text off the header, and a
	 * photograph running to both edges is not text: left in place it would print
	 * the page background between the two, which is the seam the band exists to
	 * avoid. Asked of the wrapper rather than of :first-child, because the page's
	 * own heading is printed above the composition and is only invisible.
	 */
	.klt-main:has(> .klt-composition > .klt-bleed:first-child) {
		padding-block-start: 0;
	}

	/*
	 * Vertical rhythm without margins on the children themselves: the parent owns
	 * the spacing, so a child can be moved anywhere without carrying it along.
	 */
	.klt-stack > * + * {
		margin-block-start: var(--klt-space-m);
	}

	.klt-stack--tight > * + * {
		margin-block-start: var(--klt-space-xs);
	}

	.klt-stack--loose > * + * {
		margin-block-start: var(--klt-space-l);
	}

	.klt-composition > * + * {
		margin-block-start: var(--klt-section-gap);
	}

	.klt-composition > .klt-stack > * + * {
		margin-block-start: var(--klt-section-gap);
	}

	/*
	 * The content of a post or a page beside its side zone. A layout primitive
	 * rather than a component: what stands in the side column is a list of
	 * ordinary sections, and this only says how wide the two columns are.
	 *
	 * The side column comes second in the markup whichever side it is shown on,
	 * so a reader working through the page in order reaches the article first.
	 */
	.klt-zones {
		display: grid;
		gap: var(--klt-space-xl);
		grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
		align-items: start;
	}

	.klt-zones--side-start {
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	}

	.klt-zones--side-start .klt-zones__content {
		grid-row: 1;
		grid-column: 2;
	}

	.klt-zones--side-start .klt-zones__side {
		grid-row: 1;
		grid-column: 1;
	}

	/*
	 * One column once there is no room for two. What the side zone does then is a
	 * setting: follow the article, or go away — so nothing that has to be read
	 * belongs in a zone somebody set to hidden.
	 */
	@media (max-width: 60rem) {
		.klt-zones {
			grid-template-columns: minmax(0, 1fr);
		}

		.klt-zones--side-start .klt-zones__content,
		.klt-zones--side-start .klt-zones__side {
			grid-row: auto;
			grid-column: auto;
		}

		.klt-zones--fold-hidden .klt-zones__side {
			display: none;
		}
	}

	/* A row that wraps instead of overflowing once it runs out of room. */
	.klt-cluster {
		display: flex;
		flex-wrap: wrap;
		gap: var(--klt-space-s);
		align-items: center;
	}

	.klt-cluster--between {
		justify-content: space-between;
	}

	/*
	 * As many columns as fit, then wrap. No media queries: the column count comes
	 * from the available width, so the grid works inside any container.
	 */
	.klt-grid {
		display: grid;
		gap: var(--klt-space-m);
		grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	}
}