/* AdGrow section graphics.
   Inline SVG diagrams that sit inside the existing band system. They inherit
   the band's text colour through currentColor, so one piece of markup works
   on both the light and the dark bands. */

#adgrow-page .adg-svg {
	margin: clamp(30px, 4vw, 52px) 0 0;
	padding: clamp(16px, 2.2vw, 28px) clamp(14px, 2vw, 26px) clamp(12px, 1.6vw, 20px);
	border: 1px solid var(--ink-faint);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.55);
	color: var(--ink);
}

#adgrow-page .band-dark .adg-svg {
	border-color: var(--paper-faint);
	background: rgba(243, 241, 236, 0.035);
	color: var(--paper);
}

#adgrow-page .adg-svg svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

#adgrow-page .adg-svg figcaption {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--ink-faint);
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--ink-soft);
}

#adgrow-page .band-dark .adg-svg figcaption {
	border-top-color: var(--paper-faint);
	color: var(--paper-dim);
}

/* The diagrams carry real labels, so below roughly a tablet they need to be
   readable rather than shrunk into nothing. Let them scroll sideways instead
   of collapsing the type to six pixels. */
@media (max-width: 780px) {
	#adgrow-page .adg-svg {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: clamp(14px, 3vw, 20px);
	}
	#adgrow-page .adg-svg svg {
		min-width: 660px;
	}
	#adgrow-page .adg-svg figcaption {
		min-width: 0;
		position: sticky;
		left: 0;
	}
}

/* Nothing is hidden before the animation runs unless the animation can
   actually run, so a JS failure still leaves a complete, readable diagram. */
#adgrow-page .adg-svg svg text { opacity: 1; }