/**
 * SERP Preview - Preview Layout
 *
 * Side-by-side desktop and mobile preview container layout.
 *
 * @package AgenticWP
 */

/* ============================================
   Display Section Container
   ============================================ */

.serp-display-section {
	padding: var(--tool-space-xl) 0 var(--tool-space-2xl);
	background: var(--tool-bg-subtle);
}

/* ============================================
   Preview Wrapper (Side-by-Side Layout)
   ============================================ */

.serp-preview-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--tool-space-xl);
	align-items: start;
}

/* ============================================
   Individual Preview Container
   ============================================ */

.serp-preview {
	display: flex;
	flex-direction: column;
}

.serp-preview-desktop {
	justify-self: end;
}

.serp-preview-mobile {
	justify-self: start;
}

/* ============================================
   Viewport Container
   ============================================ */

.serp-viewport {
	padding: var(--tool-space-lg);
	background: var(--serp-viewport-bg);
	min-height: 200px;
}

/* Reduced motion styles consolidated in accessibility.css */