/* Shared base for the Teceze Event plugins: design tokens from the Figma file, typography, buttons. */

.tce,
.tce-page {
	--tce-ink: #0d1b3e;
	--tce-slate: #475569;
	--tce-accent: #119c99;
	--tce-cyan: #49e1d4;
	--tce-line: #e6ebf3;
	--tce-mist: #f5f7fb;
	--tce-paper: #ffffff;
	--tce-panel: #071544;
	--tce-deep: #000a2d;
	--tce-hero-muted: #c9d3ea;
	--tce-glass-fill: rgba(255, 255, 255, 0.07);
	--tce-glass-stroke: rgba(255, 255, 255, 0.12);
	--tce-gradient: linear-gradient(90deg, #13c5b8 0%, #2a44b0 100%);
	--tce-head-font: "Plus Jakarta Sans", system-ui, sans-serif;
	--tce-body-font: "Inter", system-ui, sans-serif;
	--tce-gutter: max(24px, calc((100% - 1248px) / 2));
	font-family: var(--tce-body-font);
	color: var(--tce-ink);
	box-sizing: border-box;
}

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

.tce :where(p, h1, h2, h3, figure, blockquote, ul) {
	margin: 0;
	padding: 0;
}

.tce :where(ul) {
	list-style: none;
}

.tce img {
	max-width: 100%;
}

.tce a {
	text-decoration: none;
}

.tce-head {
	margin-bottom: 32px;
}

.tce-head__title {
	font-family: var(--tce-head-font);
	font-weight: 800;
	font-size: 40px;
	line-height: 1.16;
	letter-spacing: -1.2px;
	color: var(--tce-ink);
}

.tce-head__lead {
	margin-top: 12px;
	max-width: 600px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--tce-slate);
}

.tce-head--small {
	margin-bottom: 18px;
}

.tce-head--small .tce-head__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.2px;
}

.tce-head--small .tce-head__lead {
	margin-top: 6px;
	font-size: 16px;
}

.tce-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 22px;
	border-radius: 999px;
	background: var(--tce-gradient);
	color: #fff !important;
	font-family: var(--tce-body-font);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.5;
	white-space: nowrap;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.tce-btn:hover,
.tce-btn:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.tce-btn--outline {
	background: transparent;
	border: 2px solid var(--tce-accent);
	color: var(--tce-ink) !important;
	padding: 11px 20px;
}

.tce-btn--outline:hover,
.tce-btn--outline:focus-visible {
	background: var(--tce-accent);
	color: #fff !important;
	filter: none;
}

.tce-arrows {
	display: flex;
	gap: 10px;
}

.tce-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 0 3px;
	border: 1.5px solid var(--tce-line);
	border-radius: 999px;
	background: var(--tce-paper);
	color: var(--tce-ink);
	font-family: var(--tce-body-font);
	font-weight: 600;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.tce-arrow:hover:not(:disabled),
.tce-arrow:focus-visible {
	border-color: var(--tce-accent);
	color: var(--tce-accent);
}

.tce-arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.tce-empty,
.tce-note {
	font-size: 16px;
	line-height: 1.65;
	color: var(--tce-slate);
}

.tce-note {
	margin-top: 24px;
}

/* ---------- Grid and carousel (display="grid" / display="carousel") ---------- */

.tce-grid {
	display: grid;
	grid-template-columns: repeat(var(--tce-cols, 3), minmax(0, 1fr));
	gap: var(--tce-gap, 20px);
}

.tce-track {
	--tce-per: var(--tce-cols, 3);
	display: flex;
	gap: var(--tce-gap, 20px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	outline: none;
}

.tce-track::-webkit-scrollbar {
	display: none;
}

.tce-track:focus-visible {
	outline: 2px solid var(--tce-accent);
	outline-offset: 4px;
}

.tce-track__item {
	flex: 0 0 calc((100% - (var(--tce-per) - 1) * var(--tce-gap, 20px)) / var(--tce-per));
	min-width: 0;
	display: flex;
	scroll-snap-align: start;
}

.tce-track__item > * {
	flex: 1;
	min-width: 0;
}

.tce-track-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
}

.tce-track-nav[hidden] {
	display: none;
}

.tce-dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.tce-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--tce-line);
	cursor: pointer;
	transition: width 0.25s ease, background 0.25s ease;
}

.tce-dot.is-active {
	width: 24px;
	background: var(--tce-accent);
}

@media (max-width: 1024px) {
	.tce-grid {
		grid-template-columns: repeat(var(--tce-cols-md, 2), minmax(0, 1fr));
	}

	.tce-track {
		--tce-per: var(--tce-cols-md, 2);
	}
}

@media (max-width: 767px) {
	.tce-grid {
		grid-template-columns: repeat(var(--tce-cols-sm, 1), minmax(0, 1fr));
	}

	.tce-track {
		--tce-per: var(--tce-cols-sm, 1);
	}

	.tce-track__item {
		flex-basis: calc((100% - (var(--tce-per) - 1) * var(--tce-gap, 20px)) / var(--tce-per) - 12%);
	}
}

/* Stacked sections keep the design's spacing. */
.tce-testimonials + .tce-videos-wrap {
	margin-top: 20px;
}

.tce-videos-wrap + .tce-logos-wrap,
.tce-testimonials + .tce-logos-wrap {
	margin-top: 48px;
}

@media (max-width: 1024px) {
	.tce-head__title {
		font-size: 34px;
	}
}

@media (max-width: 767px) {
	.tce-head {
		margin-bottom: 24px;
	}

	.tce-head__title {
		font-size: 30px;
		letter-spacing: -0.9px;
	}

	.tce-head__lead {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tce *,
	.tce *::before,
	.tce *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}