/*** Module: Demo CTA ***/

/** Style: demo-cta **/

/* No section padding on the page background — only a coloured band needs the
   breathing room. (bg-digital-blue overrides this back to 0 below: its padding
   lives on the .container so it sits inside the inset band.) */
.module.demo-cta.style-demo-cta:has(> .bg-field) {
	margin-bottom: 0;
	padding-block: var(--module-spacing-xlarge);
}

.module.demo-cta.style-demo-cta .container.grid {
	justify-items: center;
	row-gap: var(--text-spacing-xsmall);
	text-align: center;
}

.module.demo-cta.style-demo-cta .heading-2 {
	grid-column: 1 / -1;
}

.module.demo-cta.style-demo-cta .large {
	grid-column: 3 / -3;
}

.module.demo-cta.style-demo-cta .buttons {
	align-items: center;
	display: flex;
	gap: var(--text-spacing-medium);
	grid-column: 1 / -1;
	margin-top: var(--text-spacing-small);
}

/* isolate scopes the ::after z-index:-1 behind the content. */
.module.demo-cta.style-demo-cta.glow {
	isolation: isolate;
	overflow-x: clip;
	position: relative;
}

.module.demo-cta.style-demo-cta.glow::after {
	background: radial-gradient(60% 100% at 50% 100%, color-mix(in srgb, var(--orange) 35%, transparent) 0%, transparent 70%);
	bottom: 0;
	content: "";
	height: 320px;
	left: 50%;
	min-width: 768px;
	pointer-events: none;
	position: absolute;
	translate: -50% 0;
	width: 100%;
	z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {

	.module.demo-cta.style-demo-cta.glow::after {
		animation: cta-glow-breathe 8s ease-in-out infinite;
	}

}

@keyframes cta-glow-breathe {
	0%, 100% {
		opacity: 0.7;
		transform: translateY(8%) scale(0.95);
	}
	50% {
		opacity: 1;
		transform: translateY(0) scale(1.08);
	}
}

/** Style: media **/

.module.demo-cta.style-media {
	overflow-x: clip;
}

.module.demo-cta.style-media:not(:has(.media)) {
	padding-block: var(--module-spacing-xlarge);
}

.module.demo-cta.style-media .container.grid {
	align-items: center;
}

.module.demo-cta.style-media .media {
	aspect-ratio: auto;
	grid-column: 1 / span 6;
	grid-row: 1;
	margin-left: var(--container-breakout);
	padding-right: var(--text-spacing-large);
}

/* aspect-ratio:auto drops the cover crop, so let the image flow at its natural height. */
.module.demo-cta.style-media .media :is(img, video) {
	height: auto;
	position: static;
	width: 100%;
}

.module.demo-cta.style-media .text {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	grid-column: 7 / span 6;
}

.module.demo-cta.style-media .container.grid:not(:has(.media)) .text {
	align-items: center;
	grid-column: 3 / span 8;
	text-align: center;
}

.module.demo-cta.style-media .text > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.demo-cta.style-media .text > * + .buttons {
	margin-top: var(--text-spacing-large);
}

.module.demo-cta.style-media .buttons {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-medium);
	justify-content: center;
}

/* Parchment + a media renders as an inset band that bleeds off the right edge,
   so the no-media case uses the global .bg-field band instead. align-self
   overrides the grid's center alignment so the empty band fills the row height. */
.module.demo-cta.style-media.bg-parchment .band {
	align-self: stretch;
	background: var(--parchment);
	grid-column: 4 / -1;
	grid-row: 1;
	margin-right: var(--viewport-edge);
}

/* margin-block insets the media inside the band, leaving the parchment strips above and below it. */
.module.demo-cta.style-media.bg-parchment .media {
	margin-block: var(--module-spacing-small);
}

/* The base .text auto-places its row; pin it so it shares row 1 with the band instead of dropping below it. */
.module.demo-cta.style-media.bg-parchment .text {
	grid-row: 1;
}

/** Style: photo-grid **/

.module.demo-cta.style-photo-grid {
	padding-block: var(--module-spacing-xlarge);
}

.module.demo-cta.style-photo-grid .container.grid {
	align-items: center;
	row-gap: var(--text-spacing-large);
}

.module.demo-cta.style-photo-grid .text {
	display: flex;
	flex-direction: column;
	grid-column: 1 / span 6;
}

/* Explicit rhythm (no flex gap) so the button spacing below isn't doubled up. */
.module.demo-cta.style-photo-grid .text > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.demo-cta.style-photo-grid .text > .buttons {
	align-items: center;
	align-self: flex-start;
	display: flex;
	gap: var(--text-spacing-medium);
	margin-top: var(--text-spacing-medium);
}

/* aspect-ratio holds composition height so children can size off a stable box. */
.module.demo-cta.style-photo-grid .collage {
	aspect-ratio: 517 / 518;
	grid-column: 8 / span 5;
	margin-right: var(--container-breakout);
	position: relative;
}

.module.demo-cta.style-photo-grid .ring {
	border: 1px solid var(--track-gray);
	border-radius: 50%;
	height: 88%;
	left: 6%;
	position: absolute;
	top: 6%;
	width: 88%;
}

/* Overrides the global .media 16/9 + relative so both layers can absolutely position inside .collage. */
.module.demo-cta.style-photo-grid .bg,
.module.demo-cta.style-photo-grid .fg {
	aspect-ratio: 1;
	position: absolute;
}

.module.demo-cta.style-photo-grid .bg {
	left: 20%;
	top: 0;
	width: 80%;
}

.module.demo-cta.style-photo-grid .fg {
	left: 0;
	top: 40%;
	width: 60%;
}

@media (prefers-reduced-motion: no-preference) {

	.module.demo-cta.style-photo-grid .ring,
	.module.demo-cta.style-photo-grid .bg,
	.module.demo-cta.style-photo-grid .fg {
		opacity: 0;
		transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.module.demo-cta.style-photo-grid .ring {
		transform: scale(0.85);
	}

	.module.demo-cta.style-photo-grid .bg,
	.module.demo-cta.style-photo-grid .fg {
		transform: translateY(24px);
	}

	.module.demo-cta.style-photo-grid .fg {
		transition-delay: 0.18s;
	}

	.module.demo-cta.style-photo-grid .collage.animated-in .ring,
	.module.demo-cta.style-photo-grid .collage.animated-in .bg,
	.module.demo-cta.style-photo-grid .collage.animated-in .fg {
		opacity: 1;
		transform: none;
	}

}

/** Background variations **/

/* Parchment paints an inset .bg-field band (24px side gutters), not a full-bleed
   section fill — the style-media + media case still uses the right-bleeding .band. */
.module.demo-cta.bg-parchment .bg-field {
	background: var(--parchment);
}

/* Digital blue paints the .bg-field for EVERY style, not just style-demo-cta:
   cta.php renders the field (and switches the buttons to .light) whenever the colour
   is digital_blue, so scoping the paint to one style left style-media with a
   transparent field, dark text and a white-on-white button. Matches how
   .module.demo-cta.bg-parchment above paints style-agnostically. */
.module.demo-cta.bg-digital-blue {
	color: var(--white);
}

.module.demo-cta.bg-digital-blue .bg-field {
	background: var(--euphoric-blue);
	background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%;
}

@media (prefers-reduced-motion: no-preference) {

	.module.demo-cta.bg-digital-blue .bg-field {
		animation: euphoria-drift var(--euphoria-drift-duration) ease-in-out infinite;
	}

}

/* The centered band is a card — inset on all four sides — and moves its breathing
   room onto the .container so the padding sits inside it. style-media keeps the
   global side-gutter-only inset instead: its media runs the full section height, so
   a top/bottom inset would leave the media hanging past the band. */
.module.demo-cta.style-demo-cta.bg-digital-blue {
	padding-block: 0;
}

.module.demo-cta.style-demo-cta.bg-digital-blue .bg-field {
	inset: var(--text-spacing-small);
}

.module.demo-cta.style-demo-cta.bg-digital-blue .container {
	padding-block: calc(var(--text-spacing-small) + var(--module-spacing-large));
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1400rem / 16)) {

	.module.demo-cta.style-demo-cta.bg-digital-blue .bg-field {
		inset: 0;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	/* The band is full-bleed by now (.bg-field inset drops to 0 at 1400), so the
	   24px the base adds to clear the side gutters has nothing left to clear. */
	.module.demo-cta.style-demo-cta.bg-digital-blue .container {
		padding-block: var(--module-spacing-large);
	}

	.module.demo-cta.style-demo-cta .large {
		grid-column: 2 / -2;
	}

	.module.demo-cta.style-media .media,
	.module.demo-cta.style-media .text {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	/* Echo the no-media guard — the base .container.grid:not(:has(.media)) .text (0,6,0)
	   otherwise outranks the generic override above (0,3,0) and keeps its 3 / span 8. */
	.module.demo-cta.style-media .container.grid:not(:has(.media)) .text {
		grid-column: 1 / -1;
	}

	/* Snap the breakout flush once the media is full-width. */
	.module.demo-cta.style-media .media {
		margin-left: 0;
		padding-right: 0;
	}

	.module.demo-cta.style-media .text > * + .buttons {
		margin-top: var(--text-spacing-medium);
	}

	.module.demo-cta.style-media.bg-parchment:has(.media) {
		background: var(--parchment);
		padding-block: var(--module-spacing-medium) var(--text-spacing-medium);
	}

	.module.demo-cta.style-media.bg-parchment .band {
		display: none;
	}

	.module.demo-cta.style-media.bg-parchment .media {
		margin-block: 0;
	}

	/* Drop the desktop row pin (it outranks the generic reset above) so media + text stack in source order. */
	.module.demo-cta.style-media.bg-parchment .text {
		align-items: center;
		grid-row: auto;
		text-align: center;
	}

	.module.demo-cta.style-photo-grid {
		padding-block: var(--module-spacing-large);
	}

	.module.demo-cta.style-photo-grid .text,
	.module.demo-cta.style-photo-grid .collage {
		grid-column: 1 / -1;
	}

	.module.demo-cta.style-photo-grid .text > .buttons {
		align-self: flex-start;
		margin-top: var(--text-spacing-small);
	}

	.module.demo-cta.style-photo-grid .collage {
		justify-self: center;
		margin: var(--text-spacing-small) auto 0;
		max-width: 517px;
		width: 100%;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.demo-cta.style-demo-cta .large {
		grid-column: 1 / -1;
	}

	.module.demo-cta.style-demo-cta .buttons {
		flex-direction: column;
	}

	/* Only the media layout stacks its buttons left — the no-media case stays centered
	   under its centered copy. */
	.module.demo-cta.style-media:has(.media) .buttons {
		align-items: flex-start;
		flex-direction: column;
	}

	.module.demo-cta.style-photo-grid .text > .buttons {
		align-items: flex-start;
		flex-direction: column;
	}

}