/*
The Enterprise page: one reading column (hero, the homepage ledger of
services, terms) beside a contact card. It reuses home.css components
(.site-home, .ledger, .section-title); these rules only lay out the page.
*/
@layer pages {
	/* Enterprise: one reading column (hero, the homepage ledger of services,
	terms) and a contact card that stays beside it on wide screens, so the
	way to reach a developer never scrolls away. On a narrow screen the card
	follows the terms. */
	.enterprise-layout {
		display: grid;
		gap: var(--space-7);

		@media (min-width: 72rem) {
			grid-template-columns: minmax(0, 1fr) 22rem;
			align-items: start;
			gap: var(--space-6);
		}
	}

	/* The column is a container: in it the ledger and the terms row take their
	three columns from the column's width, not the window's, since the contact
	card beside it narrows the column. */
	.enterprise-main {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-7);
		min-inline-size: 0;
		container: enterprise-main / inline-size;
	}

	/* The hero's type fits its panel as the homepage hero's does: cqi is 1% of
	the panel, the fallback size for <fit-text> without JavaScript. */
	.enterprise-hero {
		container-type: inline-size;
		display: grid;
		/* minmax(0, 1fr), not auto: an auto track grows to the fitted line's
		unwrapped width, so the line could never get narrower than its last fit. */
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-5);
		padding: var(--space-4);

		@media (min-width: 44rem) {
			padding: var(--space-6);
		}

		h1 {
			font-size: clamp(1.5rem, 9cqi, 4rem);
			line-height: 1.05;

			.hero-accent {
				color: var(--color-action);
				text-shadow: 0 0 18px rgb(var(--ch-action) / 35%);
			}
		}

		.lede {
			max-inline-size: 44rem;
		}
	}

	/* What Stardust is, set apart from the hero's promise by a rule rather
	than a second panel, so the call to action has no competing frame. */
	.enterprise-context {
		display: grid;
		gap: var(--space-3);
		max-inline-size: 44rem;
		border-inline-start: 2px solid var(--color-action);
		padding: var(--space-4) var(--space-5);

		p {
			margin: 0;
		}
	}

	.enterprise-contact {
		display: grid;
		gap: var(--space-4);
		padding: var(--space-5);

		:is(h2, p) {
			margin: 0;
		}

		/* A narrow card: the heading keeps to two lines. */
		h2 {
			font-size: 1.25rem;
		}

		@media (min-width: 72rem) {
			position: sticky;
			inset-block-start: calc(var(--topbar-height) + var(--space-5));
		}
	}

	/* The button and the rest of its sentence stay together: on one line when
	they fit, otherwise the words sit close under the button. */
	.enterprise-cta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2) var(--space-3);
	}

	/* Licensing and support closes the services ledger as its last row: the same
	columns, with the heading in the title column and the terms in the
	description column, so the page keeps one grid instead of another card. */
	.enterprise-terms {
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr);
		align-items: baseline;
		gap: var(--space-2) var(--space-5);
		margin-block-start: calc(-1 * var(--space-4));
		border-block-end: 1px solid var(--color-line);
		padding: var(--space-5) var(--space-3);

		@container enterprise-main (min-width: 52rem) {
			grid-template-columns: 4rem minmax(12rem, 0.7fr) minmax(0, 1.3fr);
		}

		h2 {
			grid-column: 2;
			margin: 0;
			color: var(--color-action);
			font-size: 1rem;
		}

		p {
			grid-column: 2;
			margin: 0;

			@container enterprise-main (min-width: 52rem) {
				grid-column: 3;
			}
		}
	}

	/* The homepage ledger, laid out by this column rather than the window. */
	.enterprise-main .ledger li {
		grid-template-columns: 3rem minmax(0, 1fr);

		@container enterprise-main (min-width: 52rem) {
			grid-template-columns: 4rem minmax(12rem, 0.7fr) minmax(0, 1.3fr);
		}
	}

	.enterprise-main .ledger p {
		grid-column: 2;

		@container enterprise-main (min-width: 52rem) {
			grid-column: auto;
		}
	}
}