/**
 * Containers, grids, and section rhythm.
 */

@layer layout {
	.dyt-container {
		width: 100%;
		max-width: var(--dyt-container);
		margin-inline: auto;
		padding-inline: var(--dyt-gutter);
	}

	.dyt-container--narrow {
		max-width: var(--dyt-container-narrow);
	}

	.dyt-container--wide {
		max-width: var(--dyt-container-wide);
	}

	.dyt-main {
		display: block;
		min-height: 50vh;
	}

	/* Section surfaces and spacing, driven by each section's Design tab. */
	.dyt-section {
		position: relative;

		/* Per-breakpoint type sizes. The section carries the three raw values
		   as custom properties; these rules pick which one is live and chain
		   the fallbacks, so an empty box simply defers to the next size up and
		   an empty set defers to the theme default. */
		--dyt-heading-size: var(--dyt-hs-d);
		--dyt-body-size: var(--dyt-bs-d);
	}

	@media (max-width: 64rem) {
		.dyt-section {
			--dyt-heading-size: var(--dyt-hs-t, var(--dyt-hs-d));
			--dyt-body-size: var(--dyt-bs-t, var(--dyt-bs-d));
		}
	}

	@media (max-width: 47.99rem) {
		.dyt-section {
			--dyt-heading-size: var(--dyt-hs-m, var(--dyt-hs-t, var(--dyt-hs-d)));
			--dyt-body-size: var(--dyt-bs-m, var(--dyt-bs-t, var(--dyt-bs-d)));
		}
	}

	/* Spacing comes from the section's Design tab as pixel values. Each falls
	   back to the fluid theme default when the editor leaves the box empty. */
	.dyt-section {
		padding-top: var(--dyt-pt, var(--dyt-section-y));
		padding-right: var(--dyt-pr, 0px);
		padding-bottom: var(--dyt-pb, var(--dyt-section-y));
		padding-left: var(--dyt-pl, 0px);
		margin-top: var(--dyt-mt, 0px);
		margin-right: var(--dyt-mr, 0px);
		margin-bottom: var(--dyt-mb, 0px);
		margin-left: var(--dyt-ml, 0px);
	}

	/* Between the two: the theme's tablet rhythm, unless the section carries a
	   figure of its own. */
	@media (max-width: 64rem) {
		.dyt-section {
			padding-top: var(--dyt-pt, var(--dyt-section-y-t, var(--dyt-section-y)));
			padding-bottom: var(--dyt-pb, var(--dyt-section-y-t, var(--dyt-section-y)));
		}
	}

	/* Hand-entered pixel values are desktop figures, so they ease off on a
	   phone; the theme's own mobile rhythm is already a phone figure and is
	   used as it stands. */
	@media (max-width: 47.99rem) {
		.dyt-section {
			padding-top: var(--dyt-pt-m, var(--dyt-section-y-m, var(--dyt-section-y-t, var(--dyt-section-y))));
			padding-right: var(--dyt-pr-m, 0px);
			padding-bottom: var(--dyt-pb-m, var(--dyt-section-y-m, var(--dyt-section-y-t, var(--dyt-section-y))));
			padding-left: var(--dyt-pl-m, 0px);
			margin-top: var(--dyt-mt-m, 0px);
			margin-right: var(--dyt-mr-m, 0px);
			margin-bottom: var(--dyt-mb-m, 0px);
			margin-left: var(--dyt-ml-m, 0px);
		}
	}

	/* Backgrounds */
	.dyt-section--bg-elevated {
		background-color: var(--dyt-bg-elevated);
	}

	/* Each of these records its own colour as well as painting it: the on-dark
	   rules re-point --dyt-bg at the section's surface, and without this they
	   would fall back to a generic near-black that does not match the band. */
	.dyt-section--bg-deep {
		--dyt-section-bg: var(--dyt-deep);

		background-color: var(--dyt-deep);
	}

	.dyt-section--bg-primary {
		--dyt-section-bg: var(--dyt-brand);

		background-color: var(--dyt-brand);
	}

	.dyt-section--bg-dark {
		--dyt-section-bg: #0b0f1a;

		background-color: #0b0f1a;
	}

	.dyt-section--bg-custom {
		background-color: var(--dyt-section-bg, transparent);
	}

	.dyt-section--bg-wash::before,
	.dyt-section--glow::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 0;
	}

	.dyt-section--bg-wash::before {
		background: var(--dyt-gradient-wash);
	}

	/* The glow is laid over whatever colour the section already has, which is
	   what lets it sit on a deep navy band without replacing it. */
	.dyt-section--glow::before {
		background: var(--dyt-section-glow);
	}

	/* Both at once share the one pseudo-element, so they stack as two layers
	   of a single background rather than one cancelling the other. */
	.dyt-section--bg-wash.dyt-section--glow::before {
		background: var(--dyt-section-glow), var(--dyt-gradient-wash);
	}

	.dyt-section--bg-wash > *,
	.dyt-section--glow > * {
		position: relative;
		z-index: 1;
	}

	/* Background image, with an optional colour laid over it. */
	.dyt-section--has-image {
		background-image: var(--dyt-section-image);
		background-size: var(--dyt-section-image-size, cover);
		background-position: var(--dyt-section-image-pos, center center);
		background-repeat: no-repeat;
	}

	.dyt-section--image-fixed {
		background-attachment: fixed;
	}

	/* Fixed attachment judders badly on touch devices, so it scrolls there. */
	@media (hover: none) {
		.dyt-section--image-fixed {
			background-attachment: scroll;
		}
	}

	/* The pattern and the image overlay share ::after, the way the wash and
	   the glow share ::before. Only the last layer of a background shorthand
	   may be a colour, which is why the overlay sits second. */
	.dyt-section--has-image::after,
	.dyt-section--pattern::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--dyt-section-pattern, none), var(--dyt-section-overlay, transparent);
		pointer-events: none;
		z-index: 0;
	}

	/* A repeating gradient cannot taper on its own, so the fade towards the
	   edges is a mask. Without it the texture reads as wallpaper rather than
	   as something placed. */
	.dyt-section--pattern::after {
		-webkit-mask-image: radial-gradient(125% 100% at 50% 0%, #000 30%, transparent 85%);
		mask-image: radial-gradient(125% 100% at 50% 0%, #000 30%, transparent 85%);
	}

	.dyt-section--has-image > *,
	.dyt-section--pattern > * {
		position: relative;
		z-index: 1;
	}

	/* A dark section redefines its own text and surface tokens, so every card,
	   border, and muted line inside it inverts without per-component rules. */
	.dyt-section--on-dark {
		--dyt-text: #ffffff;
		--dyt-text-secondary: rgba(255, 255, 255, 0.76);
		--dyt-text-muted: rgba(255, 255, 255, 0.58);
		--dyt-border: rgba(255, 255, 255, 0.14);
		--dyt-border-strong: rgba(255, 255, 255, 0.26);
		--dyt-bg-panel: rgba(255, 255, 255, 0.07);
		--dyt-bg-inset: rgba(255, 255, 255, 0.09);
		/* The lifted surface has to invert with the rest of them. Leaving it on
		   the light-scheme value is what put a white card on a navy section. */
		--dyt-bg-elevated: rgba(255, 255, 255, 0.06);
		/* Anything that paints itself in the page colour to sit over a line —
		   the timeline markers, for one — needs this section's surface, not the
		   light page behind it. */
		--dyt-bg: var(--dyt-section-bg, #0b0f1a);

		color: var(--dyt-text);
	}

	/* Per-section content width */
	.dyt-section--w-narrow .dyt-container {
		max-width: var(--dyt-container-narrow);
	}

	.dyt-section--w-wide .dyt-container {
		max-width: var(--dyt-container-wide);
	}

	.dyt-section--w-full .dyt-container {
		max-width: none;
	}

	/* Section headers */
	.dyt-section-header {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-4);
		max-width: 46rem;
		margin-bottom: var(--dyt-space-8);
	}

	.dyt-section-header--center {
		align-items: center;
		text-align: center;
		margin-inline: auto;
	}

	.dyt-section-header__title {
		font-size: var(--dyt-heading-size, var(--dyt-text-section));
	}

	/* The two-tone heading: the second half of the line, in the brand colour.
	   Every heading the theme renders has to be in this list or its <em> comes
	   out as italic body text. */
	.dyt-section-header__title em,
	.dyt-ctap__title em,
	.dyt-cta-banner__title em {
		font-style: normal;
		background: var(--dyt-gradient);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	/* A brand-coloured word on a brand-coloured band is an invisible word. */
	.dyt-section--on-dark .dyt-section-header__title em,
	.dyt-section--on-dark .dyt-ctap__title em,
	.dyt-section--on-dark .dyt-cta-banner__title em,
	.dyt-section--on-dark .dyt-hero__title em {
		background: var(--dyt-gradient-on-dark, linear-gradient(120deg, #8ec8ff 0%, #ffffff 100%));
		-webkit-background-clip: text;
		background-clip: text;
	}

	.dyt-section-header__intro {
		color: var(--dyt-text-secondary);
		font-size: var(--dyt-body-size, var(--dyt-text-lg));
	}

	.dyt-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: var(--dyt-space-2);
		font-size: var(--dyt-text-xs);
		font-weight: 600;
		letter-spacing: var(--dyt-tracking-wide);
		text-transform: uppercase;
		color: var(--dyt-brand-soft);
	}

	/* Grids — column counts are content-driven so most breakpoints disappear. */
	.dyt-grid {
		display: grid;
		gap: var(--dyt-space-5);
	}

	.dyt-grid--2 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	}

	.dyt-grid--3 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	}

	.dyt-grid--4 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	}

	.dyt-grid--6 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	}

	.dyt-split {
		display: grid;
		gap: clamp(var(--dyt-space-6), 4vw, var(--dyt-space-10));
		align-items: center;
		grid-template-columns: 1fr;
	}

	@media (min-width: 62rem) {
		.dyt-split {
			grid-template-columns: 1fr 1fr;
		}

		.dyt-split--reverse > :first-child {
			order: 2;
		}
	}

	.dyt-stack {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-4);
	}

	.dyt-cluster {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dyt-space-3);
		align-items: center;
	}

	.dyt-page-header {
		margin-bottom: var(--dyt-space-7);
	}

	.dyt-page-title {
		font-size: var(--dyt-text-3xl);
	}
}