/**
 * SQX Events Planner — fluid, container-aware frontend styles.
 * Scale: adjust --sqx-ep-* on .sqx-events-planner. Grid responds to component width, not viewport.
 */

.sqx-events-planner {
	--sqx-ep-bg: #ffffff;
	--sqx-ep-surface: #ffffff;
	--sqx-ep-border: rgba(0, 0, 0, 0.12);
	--sqx-ep-text: #111827;
	--sqx-ep-muted: #6b7280;
	--sqx-ep-accent: #005696;
	--sqx-ep-accent-weak: rgba(0, 86, 150, 0.12);
	--sqx-ep-radius: clamp(0.625rem, 0.5rem + 0.35vw, 0.875rem);
	--sqx-ep-gap: clamp(0.625rem, 0.5rem + 0.4vw, 0.875rem);
	--sqx-ep-pad-block: clamp(1rem, 0.75rem + 1vw, 1.375rem);
	--sqx-ep-pad-inline: clamp(0.75rem, 0.5rem + 0.75vw, 0.875rem);
	--sqx-ep-filter-pad-y: clamp(0.5rem, 0.42rem + 0.25vw, 0.625rem);
	--sqx-ep-filter-pad-x: clamp(0.875rem, 0.7rem + 0.6vw, 1.125rem);
	--sqx-ep-text-filter: clamp(0.9375rem, 0.88rem + 0.35vw, 1.125rem);
	--sqx-ep-text-base: clamp(0.9375rem, 0.88rem + 0.35vw, 1.125rem);
	--sqx-ep-text-title: clamp(1rem, 0.92rem + 0.45vw, 1.125rem);
	--sqx-ep-text-meta: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
	--sqx-ep-text-pill: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
	--sqx-ep-space-lg: clamp(1rem, 0.82rem + 0.75vw, 1.375rem);
	--sqx-ep-space-xs: clamp(0.375rem, 0.3rem + 0.25vw, 0.5rem);
	--sqx-ep-space-2xs: clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);
	--sqx-ep-space-sm: clamp(0.5rem, 0.42rem + 0.35vw, 0.75rem);
	--sqx-ep-grid-card-min: clamp(16rem, 42cqi, 20rem);
	--sqx-ep-card-pad: clamp(0.875rem, 0.7rem + 0.6vw, 1.125rem);
	--sqx-ep-card-min-h: clamp(6.5rem, 5rem + 8cqi, 7.5rem);
	/* Category badge colors (shared by cards + filter buttons) */
	--sqx-ep-cat-webinars-bg: #f7d6d9;
	--sqx-ep-cat-webinars-border: rgba(239, 68, 68, 0.25);
	--sqx-ep-cat-webinars-solid: #ef4444;
	--sqx-ep-cat-industry-events-bg: #d8e9ff;
	--sqx-ep-cat-industry-events-border: rgba(59, 130, 246, 0.25);
	--sqx-ep-cat-industry-events-solid: #3b82f6;
	--sqx-ep-cat-conference-bg: #dff3e3;
	--sqx-ep-cat-conference-border: rgba(34, 197, 94, 0.25);
	--sqx-ep-cat-conference-solid: #22c55e;
	--sqx-ep-cat-due-diligence-site-visit-bg: #ffe7cf;
	--sqx-ep-cat-due-diligence-site-visit-border: rgba(249, 115, 22, 0.25);
	--sqx-ep-cat-due-diligence-site-visit-solid: #f97316;

	container-type: inline-size;
	container-name: sqx-events;

	max-width: var(--sqx-measure-wide, 70rem);
	margin: 0 auto;
	padding: var(--sqx-ep-pad-block) var(--sqx-ep-pad-inline);
	color: var(--sqx-ep-text);
}

.sqx-events-planner * {
	box-sizing: border-box;
}

.sqx-events-planner__filters {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--sqx-ep-gap);
	width: 100%;
	margin: 0 0 var(--sqx-ep-space-lg) 0;
}

.sqx-events-planner__filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	appearance: none;
	border: 1px solid var(--sqx-ep-accent);
	background: #ffffff;
	color: var(--sqx-ep-accent);
	border-radius: 999px;
	padding: var(--sqx-ep-filter-pad-y) var(--sqx-ep-filter-pad-x);
	font-weight: 700;
	font-size: var(--sqx-ep-text-filter);
	line-height: 1.2;
	cursor: pointer;
	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.15s ease;
}

.sqx-events-planner__filter:hover {
	color: #ffffff;
	background-color: var(--sqx-ep-accent);
	border-color: var(--sqx-ep-accent);
	transform: translateY(-1px);
}

.sqx-events-planner__filter:focus-visible {
	outline: 2px solid var(--sqx-ep-accent);
	outline-offset: 2px;
}

.sqx-events-planner__filter.is-active {
	color: #ffffff;
	background-color: var(--sqx-ep-accent);
	border-color: var(--sqx-ep-accent);
}

.sqx-events-planner__filter.is-active:hover {
	color: #ffffff;
	background-color: var(--sqx-ep-accent-active, #004578);
	border-color: var(--sqx-ep-accent-active, #004578);
}

/* Filter buttons: default state matches card category badge; hover uses solid accent */
.sqx-events-planner__filter[data-sqx-filter="all"] {
	--sqx-ep-accent: #005696;
	--sqx-ep-accent-active: #004578;
	--sqx-ep-filter-bg: #ffffff;
	--sqx-ep-filter-border: #005696;
	--sqx-ep-filter-fg: #005696;
}

.sqx-events-planner__filter[data-sqx-filter="webinars"] {
	--sqx-ep-accent: var(--sqx-ep-cat-webinars-solid);
	--sqx-ep-accent-active: #dc2626;
	--sqx-ep-filter-bg: var(--sqx-ep-cat-webinars-bg);
	--sqx-ep-filter-border: var(--sqx-ep-cat-webinars-border);
	--sqx-ep-filter-fg: var(--sqx-ep-text);
}

.sqx-events-planner__filter[data-sqx-filter="industry-events"] {
	--sqx-ep-accent: var(--sqx-ep-cat-industry-events-solid);
	--sqx-ep-accent-active: #2563eb;
	--sqx-ep-filter-bg: var(--sqx-ep-cat-industry-events-bg);
	--sqx-ep-filter-border: var(--sqx-ep-cat-industry-events-border);
	--sqx-ep-filter-fg: var(--sqx-ep-text);
}

.sqx-events-planner__filter[data-sqx-filter="conference"] {
	--sqx-ep-accent: var(--sqx-ep-cat-conference-solid);
	--sqx-ep-accent-active: #16a34a;
	--sqx-ep-filter-bg: var(--sqx-ep-cat-conference-bg);
	--sqx-ep-filter-border: var(--sqx-ep-cat-conference-border);
	--sqx-ep-filter-fg: var(--sqx-ep-text);
}

.sqx-events-planner__filter[data-sqx-filter="due-diligence-site-visit"] {
	--sqx-ep-accent: var(--sqx-ep-cat-due-diligence-site-visit-solid);
	--sqx-ep-accent-active: #ea580c;
	--sqx-ep-filter-bg: var(--sqx-ep-cat-due-diligence-site-visit-bg);
	--sqx-ep-filter-border: var(--sqx-ep-cat-due-diligence-site-visit-border);
	--sqx-ep-filter-fg: var(--sqx-ep-text);
}

.sqx-events-planner__filter[data-sqx-filter] {
	background: var(--sqx-ep-filter-bg, #ffffff);
	border-color: var(--sqx-ep-filter-border, var(--sqx-ep-accent));
	color: var(--sqx-ep-filter-fg, var(--sqx-ep-accent));
}

/* Intrinsically responsive card grid (component width, not viewport) */
.sqx-events-planner__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sqx-ep-grid-card-min)), 1fr));
	gap: var(--sqx-ep-gap);
	margin-top: var(--sqx-ep-space-lg);
}

@container sqx-events (max-width: 22rem) {
	.sqx-events-planner__filters {
		flex-direction: column;
		align-items: stretch;
	}

	.sqx-events-planner__filter {
		width: 100%;
	}
}

.sqx-events-planner__card {
	display: block;
	text-decoration: none;
	background: var(--sqx-ep-surface);
	border: 1px solid var(--sqx-ep-border);
	border-radius: var(--sqx-ep-radius);
	padding: var(--sqx-ep-card-pad);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.12s ease, border-color 0.2s ease;
}

.sqx-events-planner__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
	border-color: rgba(0, 0, 0, 0.2);
}

.sqx-events-planner__cardInner {
	display: flex;
	flex-direction: column;
	gap: var(--sqx-ep-gap);
	min-height: var(--sqx-ep-card-min-h);
}

.sqx-events-planner__category {
	display: inline-flex;
	align-self: flex-start;
	gap: var(--sqx-ep-space-xs);
	align-items: center;
	padding: var(--sqx-ep-space-2xs) var(--sqx-ep-space-sm);
	border-radius: 999px;
	background: rgba(17, 24, 39, 0.04);
	border: 1px solid rgba(17, 24, 39, 0.08);
	color: var(--sqx-ep-text);
	font-weight: 800;
	font-size: var(--sqx-ep-text-pill);
	letter-spacing: 0.02em;
}

.sqx-events-planner__title {
	font-weight: 900;
	font-size: var(--sqx-ep-text-title);
	line-height: 1.25;
	color: var(--sqx-ep-text);
}

.sqx-events-planner__date,
.sqx-events-planner__place {
	color: var(--sqx-ep-muted);
	font-size: var(--sqx-ep-text-meta);
	line-height: 1.4;
}

.sqx-events-planner__empty {
	border: 1px dashed var(--sqx-ep-border);
	border-radius: var(--sqx-ep-radius);
	padding: var(--sqx-ep-card-pad);
	color: var(--sqx-ep-muted);
	text-align: center;
	font-size: var(--sqx-ep-text-base);
}

.sqx-events-planner__card.is-hidden {
	display: none;
}

.sqx-events-planner__card[data-sqx-category="conference"] .sqx-events-planner__category {
	background: var(--sqx-ep-cat-conference-bg);
	border-color: var(--sqx-ep-cat-conference-border);
}

.sqx-events-planner__card[data-sqx-category="webinars"] .sqx-events-planner__category {
	background: var(--sqx-ep-cat-webinars-bg);
	border-color: var(--sqx-ep-cat-webinars-border);
}

.sqx-events-planner__card[data-sqx-category="industry-events"] .sqx-events-planner__category {
	background: var(--sqx-ep-cat-industry-events-bg);
	border-color: var(--sqx-ep-cat-industry-events-border);
}

.sqx-events-planner__card[data-sqx-category="due-diligence-site-visit"] .sqx-events-planner__category {
	background: var(--sqx-ep-cat-due-diligence-site-visit-bg);
	border-color: var(--sqx-ep-cat-due-diligence-site-visit-border);
}