/**
 * SERP Preview - Responsive Styles
 *
 * Media queries for different viewport sizes.
 * Breakpoints: side-by-side (>900px), stacked (≤900px)
 *
 * @package AgenticWP
 */

/* ============================================
   Desktop (> 900px) - Side by Side
   ============================================ */

@media (min-width: 901px) {
	.serp-preview-wrapper {
		grid-template-columns: 1fr 1fr;
	}

	/* Hide mobile-only elements */
	.device-tabs {
		display: none;
	}

	/* Both previews visible */
	.serp-preview[hidden] {
		display: flex;
	}
}

/* ============================================
   Tablet and Below (≤ 900px) - Stacked
   ============================================ */

@media (max-width: 900px) {
	/* Stack previews vertically */
	.serp-preview-wrapper {
		grid-template-columns: 1fr;
		gap: var(--tool-space-lg);
	}

	/* Center device frames */
	.serp-preview-desktop,
	.serp-preview-mobile {
		justify-self: center;
	}

	/* Show device tabs */
	.device-tabs {
		display: flex;
	}

	/* Hide inactive preview */
	.serp-preview[hidden] {
		display: none;
	}

	/* Scale down desktop frame */
	.device-frame--desktop {
		width: 100%;
		max-width: 600px;
	}

	/* Scale down mobile frame */
	.device-frame--mobile {
		width: 100%;
		max-width: 375px;
	}

	/* Form wrapper full width */
	.serp-form-wrapper {
		margin: 0 var(--tool-space-md);
		padding: var(--tool-space-lg);
	}

	/* Hero padding adjustment */
	.serp-hero {
		padding: 32px 0 24px;
	}

	/* Truncation warnings */
	.truncation-warnings {
		left: var(--tool-space-md);
		right: var(--tool-space-md);
		bottom: var(--tool-space-md);
	}

	.truncation-warning {
		max-width: 100%;
	}
}

/* ============================================
   Mobile (≤ 640px)
   ============================================ */

@media (max-width: 640px) {
	/* Reduce section padding */
	.serp-form-section,
	.serp-display-section {
		padding: var(--tool-space-lg) 0;
	}

	/* Form wrapper mobile */
	.serp-form-wrapper {
		margin: 0;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	/* Stack fetch row */
	.serp-fetch-row {
		flex-direction: column;
	}

	.serp-fetch-row .btn {
		width: 100%;
	}

	/* Stack action buttons */
	.serp-actions {
		flex-direction: column;
	}

	.serp-actions .btn {
		width: 100%;
	}

	/* Device frame scaling */
	.device-frame--desktop,
	.device-frame--mobile {
		border-radius: var(--tool-radius-md);
	}

	/* Mobile frame adjustments */
	.device-frame--mobile {
		border-radius: 32px;
	}

	.mobile-notch {
		width: 100px;
		height: 28px;
		border-radius: 14px;
	}

	/* Preview controls */
	.preview-controls {
		flex-direction: column;
		align-items: stretch;
		gap: var(--tool-space-sm);
	}

	.preview-controls-left {
		justify-content: center;
	}

	.preview-controls-right {
		justify-content: center;
	}

	/* Device tabs full width */
	.device-tabs {
		margin: 0 var(--tool-space-md) var(--tool-space-lg);
	}

	/* Character counter stack on narrow */
	.char-counter {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--tool-space-xs);
	}

	.char-counter-bar {
		width: 100%;
	}

	/* Hero title smaller */
	.serp-hero h1 {
		font-size: clamp(1.75rem, 6vw, 2.25rem);
	}
}

/* ============================================
   Extra Small Mobile (≤ 340px) - iPhone SE, small devices
   ============================================ */

@media (max-width: 340px) {
	/* Constrain desktop preview to prevent overflow */
	.device-frame--desktop {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Contain overflow from device frames */
	.serp-previews-wrapper {
		overflow: hidden;
	}
}

/* ============================================
   Small Mobile (≤ 480px)
   ============================================ */

@media (max-width: 480px) {
	/* Further reduce padding */
	.serp-form-wrapper {
		padding: var(--tool-space-md);
	}

	/* Browser chrome compact */
	.browser-chrome {
		padding: 8px 12px;
	}

	.browser-dots {
		gap: 4px;
	}

	.browser-dot {
		width: 10px;
		height: 10px;
	}

	.browser-address-bar {
		padding: 4px 10px;
		font-size: 12px;
	}

	/* SERP viewport compact */
	.serp-viewport {
		padding: var(--tool-space-md);
	}

	/* Google logo smaller */
	.google-logo {
		font-size: 20px;
	}

	.search-input-mock {
		padding: 8px 12px;
		font-size: 13px;
	}

	/* Truncation warning compact */
	.truncation-warning {
		padding: var(--tool-space-sm) var(--tool-space-md);
	}

	.truncation-warning__title {
		font-size: var(--tool-font-sm);
	}

	.truncation-warning__message {
		font-size: 12px;
	}
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
	.serp-hero {
		display: block !important;
		background: none;
		padding: 20px 0;
	}

	.serp-form-section {
		display: none;
	}

	.device-tabs,
	.preview-controls-right,
	.truncation-warnings {
		display: none;
	}

	.serp-preview-wrapper {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.serp-preview[hidden] {
		display: flex;
	}

	.device-frame--desktop,
	.device-frame--mobile {
		box-shadow: none;
		border: 1px solid #ccc;
	}
}

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