/*
 * Workplace Training Series page
 * Source: Figma "Workspace" > Dashboard (node 7672:11661), 1440px desktop frame.
 */

:root {
	--wts-black: #1a1a1a;
	--wts-white: #ffffff;
	--wts-light-grey: #eef3ff;
	--wts-card-border: #c8c9cb;
	--wts-font: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body.wts-body {
	margin: 0;
	font-family: var(--wts-font);
	color: var(--wts-black);
	background: var(--wts-white);
	-webkit-font-smoothing: antialiased;
}

.wts-page *,
.wts-page *::before,
.wts-page *::after {
	box-sizing: border-box;
}

/* Page background: approximation of the pastel blurred gradient in Figma. */
.wts-page {
	position: relative;
	min-height: 100vh;
	background:
		radial-gradient(55% 45% at 0% 45%, rgba(255, 140, 190, 0.55), transparent 70%),
		radial-gradient(45% 45% at 100% 100%, rgba(250, 170, 30, 0.75), transparent 70%),
		radial-gradient(50% 40% at 30% 100%, rgba(120, 170, 255, 0.6), transparent 70%),
		radial-gradient(35% 40% at 0% 100%, rgba(255, 150, 120, 0.4), transparent 70%),
		radial-gradient(40% 30% at 55% 0%, rgba(190, 235, 200, 0.6), transparent 70%),
		radial-gradient(40% 35% at 95% 5%, rgba(180, 205, 255, 0.5), transparent 70%),
		var(--wts-white);
}

/* ---------- Header ---------- */

.wts-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: 60px;
	background: var(--wts-white);
	box-shadow: 8px 7px 16px 6px rgba(0, 0, 0, 0.05);
}

.admin-bar .wts-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wts-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .wts-header {
		top: 0;
	}
}

.wts-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
	padding-inline: clamp(16px, 8.4vw, 121px);
}

.wts-brand {
	position: relative;
	flex: none;
	display: block;
	width: 171.4px;
	height: 40px;
}

.wts-brand__logo {
	position: absolute;
	left: 0;
	top: 18.25px;
	width: 142.539px;
	height: 21.844px;
	display: block;
}

.wts-brand__badge {
	position: absolute;
	left: 132.07px;
	top: 0;
	width: 39.376px;
	height: 29.173px;
}

.wts-brand__badge img {
	position: absolute;
	inset: -8.62% -6.39%;
	display: block;
	max-width: none;
	width: auto;
	height: auto;
}

.wts-support-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 10px 15px 10px 10px;
	border-radius: 85px;
	background: var(--wts-light-grey);
	color: var(--wts-black);
	font-family: var(--wts-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.2s ease;
}

.wts-support-btn:hover {
	filter: brightness(0.97);
}

.wts-support-btn:focus-visible,
.wts-card__btn:focus-visible,
.wts-brand:focus-visible {
	outline: 2px solid var(--wts-black);
	outline-offset: 2px;
}

.wts-support-btn img {
	flex: none;
	display: block;
}

.wts-support-btn__short {
	display: none;
}

/* ---------- Main ---------- */

.wts-main {
	padding: clamp(48px, 7.5vw, 108px) 16px clamp(48px, 7.6vw, 110px);
}

.wts-title {
	max-width: 940px;
	margin: 0 auto;
	font-family: var(--wts-font);
	font-size: clamp(36px, 4.72vw, 68px);
	font-weight: 900;
	line-height: 1.02;
	text-align: center;
	text-transform: capitalize;
	color: var(--wts-black);
}

.wts-intro {
	max-width: 900px;
	margin: 14px auto 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
}

.wts-intro p {
	margin: 0 0 20px;
}

.wts-intro p:last-child {
	margin-bottom: 0;
}

/* ---------- Cards ---------- */

.wts-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 339px));
	gap: 15px;
	justify-content: center;
	margin: 60px auto 0;
	padding: 0;
	list-style: none;
}

.wts-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 165px;
	padding: 24px;
	border: 0.944px solid var(--wts-card-border);
	border-radius: 23.602px;
	background: var(--card-bg);
}

.wts-card__head {
	display: flex;
	align-items: start;
	gap: 15px;
	min-height: 36px;
	margin-bottom: 28px;
	padding: 10px 0 0 8px;
	box-sizing: content-box;
}

.wts-card__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
}

.wts-card__icon img {
	display: block;
	max-width: 100%;
	height: auto;
}

.wts-card__title {
	flex: 1 1 auto;
	max-width: 212px;
	margin: 0;
	font-family: var(--wts-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: var(--wts-black);
}

.wts-card__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border: 1px solid var(--wts-white);
	border-radius: 100px;
	position: relative;
	isolation: isolate;
	background: var(--btn-bg);
	color: var(--wts-white);
	font-family: var(--wts-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}


/*
 * Hover (Figma "Variant2"): gradient colours reverse, button size stays the same.
 * Gradients can't be transitioned, so the reversed gradient fades in on a
 * pseudo-element behind the label.
 */
.wts-card__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--btn-bg-hover);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.wts-card__btn:hover,
.wts-card__btn:focus,
.wts-card__btn:active,
.wts-card__btn:visited {
	color: var(--wts-white);
	text-decoration: none;
}

.wts-card__btn:hover::before,
.wts-card__btn:focus-visible::before {
	opacity: 1;
}

/* Colour variants (Glass + button gradients from Figma styles) */

.wts-card--blue {
	--card-bg: linear-gradient(133.896deg, rgba(66, 133, 244, 0.2) 10.959%, rgba(66, 133, 244, 0) 58.786%, rgba(66, 133, 244, 0.2) 98.222%);
	--btn-bg: linear-gradient(130.615deg, #1ba7ff 2.986%, #ae7dff 84.52%);
	--btn-bg-hover: linear-gradient(130.615deg, #ae7dff 2.986%, #1ba7ff 84.52%);
}

.wts-card--green-blue,
.wts-card--green {
	--card-bg: linear-gradient(157.865deg, rgba(73, 220, 111, 0.07) 1.379%, rgba(17, 170, 255, 0.07) 77.237%);
}

.wts-card--green-blue {
	--btn-bg: linear-gradient(173.122deg, #49dc6f 24.72%, #11aaff 77.237%);
	--btn-bg-hover: linear-gradient(173.122deg, #11aaff 24.72%, #49dc6f 77.237%);
}

.wts-card--green {
	--btn-bg: linear-gradient(130.615deg, #fbbc04 2.986%, #35a853 84.52%);
	--btn-bg-hover: linear-gradient(130.615deg, #35a853 2.986%, #fbbc04 84.52%);
}

.wts-card--red {
	--card-bg: linear-gradient(133.896deg, rgba(227, 82, 70, 0.2) 10.959%, rgba(227, 82, 70, 0) 58.786%, rgba(227, 82, 70, 0.2) 98.222%);
	--btn-bg: linear-gradient(170.889deg, #fbbc04 4.7368%, #e35246 100%);
	--btn-bg-hover: linear-gradient(170.889deg, #e35246 4.7368%, #fbbc04 100%);
}

.wts-card--yellow {
	--card-bg: linear-gradient(133.896deg, rgba(251, 188, 4, 0.2) 10.959%, rgba(251, 188, 4, 0) 58.786%, rgba(251, 188, 4, 0.2) 98.222%);
	--btn-bg: linear-gradient(170.889deg, #fbbc04 4.7368%, #e35246 100%);
	--btn-bg-hover: linear-gradient(170.889deg, #e35246 4.7368%, #fbbc04 100%);
}

.wts-card--pink {
	--card-bg: linear-gradient(133.896deg, rgba(255, 125, 149, 0.2) 10.959%, rgba(255, 125, 149, 0) 58.786%, rgba(255, 125, 149, 0.2) 98.222%);
	--btn-bg: linear-gradient(130.615deg, #b07eff 2.986%, #f56fbc 84.52%);
	--btn-bg-hover: linear-gradient(130.615deg, #f56fbc 2.986%, #b07eff 84.52%);
}

/* ---------- Responsive ---------- */

/* Tablet: 2 columns */
@media (max-width: 1100px) {
	.wts-cards {
		grid-template-columns: repeat(2, minmax(0, 339px));
	}
}

/* Mobile: 1 column */
@media (max-width: 720px) {
	.wts-cards {
		grid-template-columns: minmax(0, 420px);
		margin-top: 40px;
	}

	.wts-intro {
		font-size: 15px;
	}
}

@media (max-width: 560px) {
	.wts-support-btn__full {
		display: none;
	}

	.wts-support-btn__short {
		display: inline;
	}
}

@media (max-width: 380px) {
	.wts-card {
		padding: 20px 16px;
	}

	.wts-card__head {
		padding-left: 0;
		gap: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wts-support-btn,
	.wts-card__btn::before {
		transition: none;
	}
}