/* Graphics Idea — fixes for issues found during real-browser QA.
 * Loaded last so it can correct the imported design CSS without editing
 * those files (keeping them a clean copy of the approved design).
 * Every rule here exists because a specific measured bug required it.
 */

/* BUG: the .ghost hero watermark uses white-space:nowrap with a
 * clamp() font-size up to 26vw, so at <=768px it renders wider than the
 * viewport and pushes the page into horizontal scroll. It's a decorative
 * absolutely-positioned element (pointer-events:none, aria-hidden), so
 * clipping it at the hero boundary is the correct containment and does
 * not alter the intended look at any width where it already fitted.
 * Measured: 768px viewport -> ghost right edge 795px before this fix. */
.hero-v2-in {
	overflow: hidden;
}

/* Belt-and-braces: keep any decorative overflow inside the hero section
 * itself rather than the document. */
.hero.hero-v2 {
	overflow-x: clip;
}

/* BUG: the testimonial track is a CSS grid of N viewport-width columns
 * moved with translateX. It must be clipped by an overflow:hidden parent
 * (.tm-view in the design CSS). The markup now includes .tm-view; this
 * rule guarantees the clip even if a page is built with the widget
 * dropped into an Elementor container that resets overflow.
 * Measured: 1920px viewport -> card right edge 1993px before this fix. */
.tm-carousel {
	overflow: hidden;
}

/* The carousel control row was added by this theme (the design generated
 * it from JS); give it the same layout the design's .tm-ctrl had. */
.tm-controls {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

.tm-controls button.tm-prev,
.tm-controls button.tm-next {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--border-default);
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--text-heading);
	transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.tm-controls button.tm-prev:hover,
.tm-controls button.tm-next:hover {
	background: var(--color-primary-soft);
	border-color: var(--gi-blue-200);
	color: var(--color-primary);
}

/* Final safety net: nothing should ever scroll the document sideways. */
html,
body {
	overflow-x: clip;
}