/*
 * Page structure: the container, the section band and its themes, the grid.
 *
 * A section theme is a class stored by the Panel as the class name itself
 * (ADR-0003). White is the default and has no class. Each theme reassigns the
 * semantic tokens, so every component inside a purple band reads white text,
 * white hairlines and a white filled button without a single per-component
 * override.
 */

@layer vdt.layout {
	.vdt-main {
		display: flex;
		flex-direction: column;
	}

	.vdt-container {
		width: 100%;
		max-width: calc(var(--vdt-container) + var(--vdt-gutter) * 2);
		margin-inline: auto;
		padding-inline: var(--vdt-gutter);
	}

	/* ————————————————————————— Section band ————————————————————————— */

	.vdt-section {
		padding-block: var(--vdt-section-y);
		background: var(--vdt-ground);
		color: var(--vdt-text);
	}

	/*
	 * A compact strip: a thin band with a rule above and below, for a row of
	 * logos or a single line of links between two full sections.
	 */
	.vdt-section--compact {
		padding-block: var(--vdt-space-32);
		border-block: var(--vdt-rule-width) solid var(--vdt-hairline);
	}

	/* A section that bleeds an image or a panel to the page edge keeps its text in a container. */
	.vdt-section--bleed {
		padding-block: 0;
	}

	/* ————————————————————————— Section themes ————————————————————————— */

	.section-theme-lightgrey {
		--vdt-ground:      var(--vdt-grey-50);
		--vdt-surface:     var(--vdt-white);
		--vdt-surface-alt: var(--vdt-white);
	}

	/*
	 * Purple (A3): the closing band before the footer, or wherever the editor
	 * puts it. White text at the audited alphas, white hairlines, a white
	 * filled button with purple text, an outlined button in white .5.
	 */
	.section-theme-purple,
	.section-theme-dark,
	.vdt-on-dark {
		--vdt-ground:       var(--vdt-purple);
		--vdt-surface:      var(--vdt-white-alpha-10);
		--vdt-surface-alt:  var(--vdt-white-alpha-10);
		--vdt-well:         var(--vdt-white-alpha-10);

		--vdt-text-heading: var(--vdt-on-dark-heading);
		--vdt-text-lead:    var(--vdt-on-dark-lead);
		--vdt-text:         var(--vdt-on-dark-text);
		--vdt-text-muted:   var(--vdt-on-dark-muted);
		--vdt-text-brand:   var(--vdt-on-dark-heading);
		--vdt-text-soft:    var(--vdt-on-dark-soft);

		--vdt-rule:         var(--vdt-white);
		--vdt-hairline:     var(--vdt-on-dark-hairline);
		--vdt-border-tag:   var(--vdt-on-dark-outline);
		--vdt-stroke-faint: var(--vdt-on-dark-separator);

		--vdt-link:           var(--vdt-white);
		--vdt-link-hover:     var(--vdt-on-dark-hover);
		--vdt-link-underline: var(--vdt-on-dark-underline);

		--vdt-button-fill:          var(--vdt-white);
		--vdt-button-fill-hover:    var(--vdt-grey-50);
		--vdt-button-fill-text:     var(--vdt-purple);
		--vdt-button-outline:       var(--vdt-on-dark-outline);
		--vdt-button-outline-text:  var(--vdt-white);
		--vdt-button-outline-hover: var(--vdt-white-alpha-10);

		--vdt-focus-ring:    var(--vdt-on-dark-focus);
		--vdt-icon-active:   var(--vdt-white);
		--vdt-icon-inactive: var(--vdt-on-dark-muted);

		color-scheme: dark;
	}

	.section-theme-purple {
		background: var(--vdt-gradient-band);
	}

	/* The footer ground, and anything else that sits on the deepest purple. */
	.section-theme-dark {
		--vdt-ground: var(--vdt-purple-deepest);
	}

	/* ————————————————————————— Grid ————————————————————————— */

	.vdt-grid {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
    /* On mobile 12x gap can be wider than screen */
    gap: var(--vdt-size-32) min(var(--vdt-gap-grid), calc(100% / 12));
	}

	/*
	 * Columns centred vertically: the row's column alignment setting. On
	 * Automatic, snippets/modules centres a row that is exactly "1/2, 1/2"
	 * (the text-beside-image and text-beside-panel sections); every other
	 * row aligns to the top.
	 */
	.vdt-grid--center {
		align-items: center;
	}

	/*
	 * A full-width column above the others is a heading over them: it stands
	 * off them by the h2 → grid distance (D13), not the grid's own gap.
	 */
	.vdt-grid--headed > .vdt-column:first-child {
		margin-bottom: calc(var(--vdt-flow-grid) - var(--vdt-gap-grid));
	}

	.vdt-column {
		grid-column: span 12;
	}

	@media (min-width: 60rem) {
		.vdt-column {
			grid-column: span var(--span, 12);
		}
	}

	/* The blocks inside one column. */
	.vdt-blocks > * + * {
		margin-top: var(--flow-space, var(--vdt-space-24));
	}
}