/**
 * Hero Section Block - Frontend Styles
 *
 * Replicates the webinars-header component styling
 *
 * @package Webinars
 */

/* Header Section */
.webinars-header {
	text-align: center;
	padding: var(--space-2xl) 0;
	margin-top: var(--space-2xl);
}

.webinars-header .webinars-wrap {
	max-width: var(--page-max-width);
	margin: 0 auto;
	padding: var(--page-gutter-y) var(--page-gutter-x);
}

.webinars-header h1 {
	font-size: clamp(2.25rem, 6vw, 4.75rem);
	line-height: var(--line-height-tight);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-lg) 0;
	background-image: linear-gradient(
		90deg,
		var(--color-data-navy) 0%,
		var(--color-data-blue) 55%,
		var(--color-data-blue) 100%
	);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.webinars-header .lead {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-normal);
	color: var(--color-text-subtle);
	max-width: 700px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.webinars-header h1 {
		font-size: var(--font-size-2xl);
	}

	.webinars-header .lead {
		font-size: var(--font-size-sm) !important;
	}
}

@media (max-width: 480px) {
	.webinars-header .webinars-wrap {
		padding: var(--space-md);
	}
}