/* ==========================================================================
   Webinar Page Styles
   ========================================================================== */

.hero-section--webinar {
	padding: var(--spacing-16) 0;
	background-image: linear-gradient(rgba(0, 49, 67, 0.8), rgba(0, 49, 67, 0.9)), url('../../images/webinar-bg.jpg');
	background-size: cover;
	background-position: center;
}

.webinar-stats {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: var(--spacing-8);
}

.webinar-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.webinar-card__image {
	position: relative;
	overflow: hidden;
}

.webinar-card__image img {
	transition: transform var(--transition-normal);
}

.webinar-card:hover .webinar-card__image img {
	transform: scale(1.05);
}

.webinar-card__body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.past-webinar-item {
	transition: all var(--transition-fast);
	border: 1px solid transparent;
}

.past-webinar-item:hover {
	border-color: var(--color-accent);
	background-color: var(--color-surface-medium-1);
}

/* --outline variant now handled globally in components.css */

/* Subscribe CTA styles moved to components.css (shared with Knowledge Bank) */

/* Responsive adjustments */
@media (max-width: 1023px) {
	.hero-section--webinar {
		padding: var(--spacing-12) 0;
	}
}

@media (max-width: 767px) {
	.hero-section--webinar {
		padding: var(--spacing-10) 0;
	}

	.webinar-stats {
		flex-direction: column;
		gap: var(--spacing-6);
		text-align: center;
		align-items: center;
	}

	.past-webinar-item {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-4);
	}

	.past-webinar-item .cypro-btn {
		width: 100%;
		justify-content: center;
	}

	/* Subscribe CTA responsive styles moved to components.css */

	/* Webinar cards grid */
	.webinar-card {
		border-radius: 16px;
	}
}