/**
 * Dashboard Overview page styles — the welcome card and the intro video
 * modal. The placements table below it has its own sheet (placements.scss).
 *
 * The welcome card wraps: copy and start buttons take the room, and the video
 * poster sits beside them at up to 380px, dropping underneath when the copy
 * would fall under 520px.
 */

$hero-btn-height: 46px;
$hero-ink: #1d2327;
$hero-muted: #646970;
$hero-body: #50575e;
$hero-tint: #d6e4f7;

// Room at the foot of the page so the Crisp chat bubble, fixed bottom-right,
// never lands on top of the last card.
$chat-widget-clearance: 90px;

.sp-real-admin-dashboard-wrapper {
	.sp-real-qs-page {
		padding-bottom: $chat-widget-clearance;
	}

	/* ====================
	   Welcome card
	   ==================== */

	.sp-real-qs-hero {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: clamp(24px, 3vw, 40px);
		padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px);
		background: #fff;
		border: 1px solid #e5e5e7;
		border-radius: 10px;
	}

	.sp-real-qs-hero__text {
		flex: 999 1 520px;
		min-width: 0;
	}

	.sp-real-qs-greeting {
		margin: 0 0 6px;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.45;
		color: $hero-muted;
	}

	.sp-real-qs-title {
		margin: 0 0 12px;
		padding: 0;
		font-size: 22px;
		font-weight: 700;
		line-height: 1.3;
		color: $hero-ink;
	}

	.sp-real-qs-lead {
		margin: 0 0 26px;
		font-size: 16px;
		line-height: 1.45;
		color: $hero-body;
	}

	.sp-real-qs-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 18px;
	}

	/* The ways to start: 46px tall, brand outline. The first one shown is
	   filled (primary); Build with AI keeps a soft tint. Each lifts on hover. */
	.sp-real-qs-start-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		height: $hero-btn-height;
		padding: 0 22px;
		background: #fff;
		border: 1px solid var(--sp-real-primary-color);
		border-radius: 4px;
		color: var(--sp-real-primary-color);
		font-size: 15px;
		font-weight: 600;
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;
		transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;

		.dashicons {
			display: block;
			width: 17px;
			height: 17px;
			font-size: 17px;
			line-height: 17px;
		}

		// Build with AI's mark, sized like the dashicons beside it.
		svg {
			display: block;
			flex-shrink: 0;
			width: 17px;
			height: 17px;
		}

		&:hover,
		&:focus {
			background: color-mix(in srgb, var(--sp-real-primary-color) 6%, #fff);
			border-color: var(--sp-real-primary-color-hover);
			color: var(--sp-real-primary-color-hover);
			box-shadow: 0 6px 16px rgba(30, 103, 216, 0.14);
			transform: translateY(-2px);
		}

		&:focus-visible {
			outline: 2px solid var(--sp-real-primary-color);
			outline-offset: 2px;
		}

		&.is-primary {
			background: var(--sp-real-primary-color);
			color: #fff;

			&:hover,
			&:focus {
				background: #135cb0;
				border-color: #135cb0;
				color: #fff;
				box-shadow: 0 8px 20px rgba(30, 103, 216, 0.28);
			}
		}
	}

	/* Build with AI keeps its soft tint even when it is the first (primary)
	   button shown. */
	.sp-real-qs-start-btn--ai,
	.sp-real-qs-start-btn--ai.is-primary {
		background: color-mix(in srgb, var(--sp-real-primary-color) 8%, #fff);
		border-color: var(--sp-real-primary-color);
		color: var(--sp-real-primary-color);

		&:hover,
		&:focus {
			background: color-mix(in srgb, var(--sp-real-primary-color) 14%, #fff);
			border-color: var(--sp-real-primary-color-hover);
			color: var(--sp-real-primary-color-hover);
			box-shadow: 0 6px 16px rgba(30, 103, 216, 0.18);
		}
	}

	/* ====================
	   Intro video poster
	   ==================== */

	/* The thumbnail image carries the title; on hover only the play control
	   reacts — the picture itself stays still. */
	.sp-real-qs-video {
		position: relative;
		display: block;
		flex: 1 1 300px;
		max-width: 380px;
		aspect-ratio: 16 / 9;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background: linear-gradient(135deg, #f0f6ff, #dfeafb);
		border: 1px solid $hero-tint;
		border-radius: 8px;
		box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
		cursor: pointer;

		// Simple tint over the thumbnail, under the play button (z-index 1).
		// Light enough that the title baked into the image stays readable.
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(16, 24, 40, 0.2);
			pointer-events: none;
		}

		&:hover,
		&:focus-visible {
			.sp-real-qs-play-btn {
				background: var(--sp-real-primary-color);

				.dashicons {
					color: #fff;
				}
			}
		}

		&:focus-visible {
			outline: 2px solid var(--sp-real-primary-color);
			outline-offset: 2px;
		}
	}

	.sp-real-qs-video__thumb {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.sp-real-qs-play-btn {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		background: #fff;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		transition: all 0.4s ease-in-out;

		.dashicons {
			display: block;
			width: 26px;
			height: 26px;
			margin-left: 3px;
			font-size: 26px;
			line-height: 26px;
			color: var(--sp-real-primary-color);
		}
	}

	/* ====================
	   Video modal
	   ==================== */

	.sp-real-qs-modal {
		position: fixed;
		inset: 0;
		z-index: 100000;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px;
		background: rgba(0, 0, 0, 0.8);
	}

	.sp-real-qs-modal__content {
		position: relative;
		width: 100%;
		max-width: 900px;
		background: #fff;
		border-radius: 12px;
		overflow: hidden;
	}

	.sp-real-qs-modal__close {
		position: absolute;
		top: 12px;
		right: 12px;
		z-index: 2;
		width: 36px;
		height: 36px;
		border: 0;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
	}

	.sp-real-qs-modal__video {
		aspect-ratio: 16 / 9;

		iframe {
			width: 100%;
			height: 100%;
			border: 0;
		}
	}

	/* ====================
	   Responsive
	   ==================== */

	@media (max-width: 782px) {
		.sp-real-qs-actions {
			width: 100%;
		}

		.sp-real-qs-start-btn {
			flex: 1 1 100%;
		}

		.sp-real-qs-video {
			max-width: none;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-real-admin-dashboard-wrapper {
		.sp-real-qs-start-btn,
		.sp-real-qs-play-btn {
			transition: none;
		}

		.sp-real-qs-start-btn:hover,
		.sp-real-qs-start-btn:focus {
			transform: none;
		}

		.sp-real-qs-video:hover .sp-real-qs-play-btn {
			transform: translate(-50%, -50%);
		}
	}
}