/**
 * TutorBridgePro product design layer.
 *
 * Shared visual contract derived from the approved Figma reference. This file
 * intentionally contains only cross-page rules; page-specific behavior stays
 * in each page stylesheet.
 */

:root {
	--tbp-product-navy: #0b1f3a;
	--tbp-product-blue: #1278e7;
	--tbp-product-blue-dark: #0d5fbd;
	--tbp-product-gold: #d4af37;
	--tbp-product-ink: #10213a;
	--tbp-product-muted: #617087;
	--tbp-product-surface: #ffffff;
	--tbp-product-soft: #f4f7fb;
	--tbp-product-line: #dfe6ef;
	--tbp-product-success: #16825d;
	--tbp-product-warning: #a96f09;
	--tbp-product-danger: #b43c4a;
	--tbp-product-radius-sm: .7rem;
	--tbp-product-radius: 1rem;
	--tbp-product-radius-lg: 1.45rem;
	--tbp-product-shadow: 0 16px 42px rgb(11 31 58 / 10%);
	--tbp-product-shadow-hover: 0 22px 52px rgb(11 31 58 / 16%);
}

.tbp-product-page {
	background:
		linear-gradient(180deg, rgb(18 120 231 / 3%), transparent 24rem),
		var(--tbp-product-soft);
	color: var(--tbp-product-ink);
}

.tbp-product-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 10%, rgb(18 120 231 / 36%), transparent 28rem),
		linear-gradient(135deg, #07162c, var(--tbp-product-navy) 58%, #123966);
	color: #fff;
}

.tbp-product-hero::after {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
	background-size: 42px 42px;
	content: "";
	mask-image: linear-gradient(to bottom, #000, transparent 85%);
	pointer-events: none;
}

.tbp-product-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 1.2rem;
	padding-block: clamp(3.5rem, 8vw, 7rem);
}

.tbp-product-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	width: fit-content;
	margin: 0;
	color: #f0cf68;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tbp-product-eyebrow::before {
	width: 1.75rem;
	height: 2px;
	background: currentColor;
	content: "";
}

.tbp-product-hero h1 {
	max-width: 17ch;
	margin: 0;
	color: #fff;
	font-size: clamp(2.2rem, 5vw, 4.35rem);
	line-height: 1.08;
	letter-spacing: -.035em;
}

.tbp-product-hero__lead {
	max-width: 66ch;
	margin: 0;
	color: rgb(255 255 255 / 78%);
	font-size: clamp(1rem, 1.8vw, 1.18rem);
	line-height: 1.8;
}

.tbp-product-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .55rem;
	font-size: .88rem;
}

.tbp-product-breadcrumbs a {
	color: rgb(255 255 255 / 72%);
	text-decoration: none;
}

.tbp-product-breadcrumbs span:last-child {
	color: #fff;
	font-weight: 700;
}

.tbp-product-shell {
	padding-block: clamp(2.5rem, 6vw, 5.5rem);
}

.tbp-product-card {
	border: 1px solid var(--tbp-product-line);
	border-radius: var(--tbp-product-radius-lg);
	background: var(--tbp-product-surface);
	box-shadow: var(--tbp-product-shadow);
}

.tbp-product-heading {
	max-width: 52rem;
	margin-block-end: 2rem;
}

.tbp-product-heading h2 {
	margin: 0 0 .65rem;
	color: var(--tbp-product-navy);
	font-size: clamp(1.65rem, 3vw, 2.55rem);
	line-height: 1.2;
}

.tbp-product-heading p {
	margin: 0;
	color: var(--tbp-product-muted);
	line-height: 1.75;
}

.tbp-product-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 2.9rem;
	padding: .72rem 1.15rem;
	border: 1px solid transparent;
	border-radius: .8rem;
	background: var(--tbp-product-blue);
	color: #fff !important;
	font-weight: 800;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.tbp-product-button:hover {
	background: var(--tbp-product-blue-dark);
	box-shadow: 0 12px 28px rgb(18 120 231 / 24%);
	transform: translateY(-1px);
}

.tbp-product-button--secondary {
	border-color: var(--tbp-product-line);
	background: #fff;
	color: var(--tbp-product-navy) !important;
}

.tbp-product-button--gold {
	background: var(--tbp-product-gold);
	color: #10213a !important;
}

.tbp-product-empty {
	display: grid;
	justify-items: center;
	gap: 1rem;
	padding: clamp(2rem, 7vw, 5rem);
	text-align: center;
}

.tbp-product-empty__icon {
	display: grid;
	width: 4.5rem;
	height: 4.5rem;
	place-items: center;
	border-radius: 1.25rem;
	background: rgb(18 120 231 / 10%);
	color: var(--tbp-product-blue);
}

.tbp-product-empty__icon svg {
	width: 2.2rem;
	height: 2.2rem;
}

.tbp-product-empty h2,
.tbp-product-empty h3 {
	margin: 0;
	color: var(--tbp-product-navy);
}

.tbp-product-empty p {
	max-width: 42rem;
	margin: 0;
	color: var(--tbp-product-muted);
	line-height: 1.75;
}

.tbp-product-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .75rem;
	margin-block-start: .5rem;
}

html[data-theme="dark"] .tbp-product-page {
	--tbp-product-ink: #edf4ff;
	--tbp-product-muted: #aebbd0;
	--tbp-product-surface: #10243f;
	--tbp-product-soft: #08172b;
	--tbp-product-line: #263b58;
	background: #08172b;
}

html[data-theme="dark"] .tbp-product-heading h2,
html[data-theme="dark"] .tbp-product-empty h2,
html[data-theme="dark"] .tbp-product-empty h3 {
	color: #fff;
}

html[data-theme="dark"] .tbp-product-button--secondary {
	border-color: #39506f;
	background: #142b49;
	color: #fff !important;
}

@media (max-width: 720px) {
	.tbp-product-hero__inner {
		padding-block: 3.5rem;
	}

	.tbp-product-hero h1 {
		font-size: clamp(2rem, 10vw, 3rem);
	}

	.tbp-product-actions {
		display: grid;
		width: 100%;
	}

	.tbp-product-button {
		width: 100%;
	}
}