/**
 * Dashboard 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-peach: #ffd9c9;

$primary: var(--eab-primary-color, #ff5b2e);
$primary-hover: #e0481f;
$primary-soft: #ffefe4;

// 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-eab-admin-dashboard-wrapper {
	.speap-qs-page {
		padding-bottom: $chat-widget-clearance;
	}

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

	.speap-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;
	}

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

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

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

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

	.speap-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). Each lifts on hover. */
	.speap-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 $primary;
		border-radius: 4px;
		color: $primary;
		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;
		}

		svg {
			display: block;
			flex-shrink: 0;
			width: 17px;
			height: 17px;
		}

		&:hover,
		&:focus {
			background: $primary-soft;
			border-color: $primary-hover;
			color: $primary-hover;
			box-shadow: 0 6px 16px rgba(255, 91, 46, 0.14);
			transform: translateY(-2px);
		}

		&:focus-visible {
			outline: 2px solid $primary;
			outline-offset: 2px;
		}

		&.is-primary {
			background: $primary;
			color: #fff;

			&:hover,
			&:focus {
				background: $primary-hover;
				border-color: $primary-hover;
				color: #fff;
				box-shadow: 0 8px 20px rgba(255, 91, 46, 0.28);
			}
		}
	}

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

	/* The thumbnail image carries the title; on hover only the play control
	   reacts — the picture itself stays still. */
	.speap-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, #fff4ef, #ffe4d7);
		border: 1px solid $hero-peach;
		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 {
			.speap-qs-play-btn {
				background: $primary;
				.dashicons {
					color: #fff;
				}
			}
		}

		&:focus-visible {
			outline: 2px solid $primary;
			outline-offset: 2px;
		}
	}

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

	.speap-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: $primary;
		}
	}

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

	.speap-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);
	}

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

	.speap-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;
	}

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

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

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

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

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

		.speap-qs-video {
			max-width: none;
		}
	}
}

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

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

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