/**
 * ICpEP-Qatar News & Events hub — visual design for the Elementor
 * Container/widget content built by
 * wp-content/migrations/build-events-page.php, plus the
 * [icpep_events_hub] shortcode markup it embeds (rendered in
 * inc/dynamic-feeds.php — that's where `.icpep-events-hub` and its
 * children come from, not the migration script). The hub unifies
 * icpep_event posts and `post` (chapter news) entries into one card
 * grid + FullCalendar view — see icpep_events_hub_items() in
 * inc/dynamic-feeds.php for how the two post types get normalized.
 *
 * Same approach as the other build-*-page.php companions: minimal
 * per-element settings in the migration, all visual design here
 * targeting each element's deterministic `.elementor-element-{id}`
 * class, layout on `> .e-con-inner` (see css/home.css's header comment).
 * The homepage's teaser feed still uses the older, simpler
 * .icpep-events-feed__grid / .icpep-event-card from css/components.css
 * — the hub grid below is a separate, richer card built specifically
 * for this page (category badge, venue, CPD pill, excerpt).
 *
 * The Chapter Activity Timeline that used to follow the hub as a
 * second section has moved to css/about.css — this page is now
 * exclusively the hero, pill filters, and card grid.
 *
 * Enqueued only on the Events page (see inc/scripts.php). Every
 * selector is prefixed `#content` as load-order insurance against
 * Elementor's own generated CSS — see css/home.css's header comment.
 */

#content .elementor-element-evt-s1 {
	/* Less top padding than usual — the page's own hero band
	   (template-parts/page-header.php, via page.php) already supplies
	   the white/mist dot-grid banner treatment above this; the pill
	   filters should read as a continuation of it, not a second
	   section with its own big gap. */
	padding-block: clamp( 24px, 4vw, 40px ) clamp( 60px, 8vw, 100px );
}

#content .elementor-element-evt-s1-in {
	max-width: var( --icpep-section-max-width, 1280px );
	margin-inline: auto;
	padding-inline: clamp( 1.25rem, 4vw, 3rem );
}

#content .icpep-page-elementor-content .elementor-widget {
	margin-block-end: 0;
}

/* Subtitle intro line (evt-s1's text-editor widget, ahead of the hub
   shortcode) — plain, unstyled prose otherwise since this page never
   loads css/page.css's full prose rules for a non-.entry-content body. */
#content .elementor-element-evt001 p {
	max-width: 640px;
	margin: 0 0 clamp( 1.5rem, 3vw, 2rem );
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-base );
	line-height: 1.6;
	color: #64748b;
}

/* ==========================================================
   Events hub — category pills + card grid
   ([icpep_events_hub] shortcode markup, inc/dynamic-feeds.php)
   ========================================================== */

#content .icpep-events-hub {
	display: flex;
	flex-direction: column;
	gap: clamp( 1.75rem, 4vw, 2.5rem );
}

#content .icpep-events-hub__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

#content .icpep-events-hub__pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.55em 1.35em;
	border-radius: 999px;
	border: 1px solid var( --icpep-card-border );
	background-color: #ffffff;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-sm );
	color: var( --e-global-color-primary, #0b132b );
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#content .icpep-events-hub__pill:hover {
	border-color: rgba( 0, 163, 224, 0.4 );
	transform: translateY( -1px );
}

#content .icpep-events-hub__pill:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 2px;
}

#content .icpep-events-hub__pill.is-active {
	background-color: var( --e-global-color-primary, #0b132b );
	border-color: var( --e-global-color-primary, #0b132b );
	color: #ffffff;
}

@media ( prefers-reduced-motion: reduce ) {
	#content .icpep-events-hub__pill {
		transition: none;
	}

	#content .icpep-events-hub__pill:hover {
		transform: none;
	}
}

#content .icpep-events-hub__empty {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-base );
	color: var( --e-global-color-text, #1f2937 );
	text-align: center;
	padding: 3rem 1rem;
	margin: 0;
	background-color: var( --icpep-mist );
	border-radius: 16px;
}

#content .icpep-events-hub__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 1.25rem, 3vw, 1.75rem );
}

@media ( max-width: 1024px ) {
	#content .icpep-events-hub__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 640px ) {
	#content .icpep-events-hub__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Card ---------- */

/* [hidden] must win over the plain rule below despite matching
   specificity + later source order — otherwise `display: flex` on
   every card (needed for its own layout) permanently defeats the
   `hidden` attribute the filter script toggles, and JS filtering
   silently does nothing. */
#content .icpep-event-hub-card[hidden] {
	display: none;
}

#content .icpep-event-hub-card {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border: 1px solid var( --icpep-card-border );
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var( --icpep-shadow-sm );
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

#content .icpep-event-hub-card:hover {
	transform: translateY( -4px );
	border-color: rgba( 0, 163, 224, 0.35 );
	box-shadow: var( --icpep-shadow-lg );
}

@media ( prefers-reduced-motion: reduce ) {
	#content .icpep-event-hub-card {
		transition: none;
	}

	#content .icpep-event-hub-card:hover {
		transform: none;
	}
}

#content .icpep-event-hub-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var( --icpep-mist );
}

#content .icpep-event-hub-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

#content .icpep-event-hub-card:hover .icpep-event-hub-card__thumb img {
	transform: scale( 1.04 );
}

@media ( prefers-reduced-motion: reduce ) {
	#content .icpep-event-hub-card__thumb img {
		transition: none;
	}

	#content .icpep-event-hub-card:hover .icpep-event-hub-card__thumb img {
		transform: none;
	}
}

#content .icpep-event-hub-card__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient( 155deg, var( --e-global-color-primary, #0b132b ) 0%, #1c2b4a 100% );
}

#content .icpep-event-hub-card__badge {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-xs );
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	background-color: rgba( 11, 19, 43, 0.72 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	padding: 0.35em 0.85em;
	border-radius: 999px;
}

#content .icpep-event-hub-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem;
	gap: 0.6rem;
}

#content .icpep-event-hub-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

#content .icpep-event-hub-card__date {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-xs );
	letter-spacing: 0.02em;
	color: var( --icpep-cyan-deep );
}

#content .icpep-event-hub-card__venue {
	position: relative;
	padding-left: 1rem;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-xs );
	color: #64748b;
}

/* Small dot separator instead of a pin icon glyph — no icon font
   dependency, reads clean at 12-13px. */
#content .icpep-event-hub-card__venue::before {
	content: '';
	position: absolute;
	left: 0.15rem;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #94a3b8;
	transform: translateY( -50% );
}

#content .icpep-event-hub-card__cpd {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-xs );
	color: var( --icpep-cyan-deep );
	background-color: var( --icpep-mist );
	padding: 0.2em 0.65em;
	border-radius: 999px;
}

#content .icpep-event-hub-card__title {
	margin: 0;
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.3;
}

#content .icpep-event-hub-card__title a {
	color: var( --e-global-color-primary, #0b132b );
	text-decoration: none;
}

#content .icpep-event-hub-card__title a:hover,
#content .icpep-event-hub-card__title a:focus-visible {
	color: var( --icpep-cyan-deep );
}

#content .icpep-event-hub-card__excerpt {
	margin: 0;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-sm );
	line-height: 1.55;
	color: #64748b;
	flex: 1;
}

#content .icpep-event-hub-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.25rem;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-sm );
	color: var( --icpep-cyan-deep );
	text-decoration: none;
	transition: gap 0.15s ease, color 0.15s ease;
}

#content .icpep-event-hub-card__cta:hover,
#content .icpep-event-hub-card__cta:focus-visible {
	gap: 0.55rem;
	color: var( --icpep-cyan-deeper );
}

@media ( prefers-reduced-motion: reduce ) {
	#content .icpep-event-hub-card__cta {
		transition: none;
	}
}

/* Per-category badge colors — grid cards. Base badge box/blur/type comes
   from .icpep-event-hub-card__badge above; these only override the tint. */
#content .icpep-event-hub-card__badge--events-calendar {
	background-color: rgba( 138, 21, 56, 0.82 );
}

#content .icpep-event-hub-card__badge--webinar {
	background-color: rgba( 11, 19, 43, 0.78 );
}

#content .icpep-event-hub-card__badge--techtalks {
	background-color: rgba( 0, 163, 224, 0.85 );
}

#content .icpep-event-hub-card__badge--news {
	background-color: rgba( 71, 85, 105, 0.82 );
}

/* ==========================================================
   Controls bar — category pills (left) + Grid/Calendar view
   switcher (right)
   ========================================================== */

#content .icpep-events-hub__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

#content .icpep-events-hub__view-switch {
	display: inline-flex;
	flex-shrink: 0;
	gap: 0.3rem;
	padding: 0.3rem;
	background-color: var( --icpep-mist );
	border-radius: 999px;
}

#content .icpep-events-hub__view-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0.5em 1.1em;
	border: none;
	border-radius: 999px;
	background-color: transparent;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-sm );
	color: #475569;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

#content .icpep-events-hub__view-pill:hover {
	color: var( --e-global-color-primary, #0b132b );
}

#content .icpep-events-hub__view-pill:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 2px;
}

#content .icpep-events-hub__view-pill.is-active {
	background-color: #ffffff;
	color: var( --e-global-color-primary, #0b132b );
	box-shadow: var( --icpep-shadow-sm );
}

@media ( prefers-reduced-motion: reduce ) {
	#content .icpep-events-hub__view-pill {
		transition: none;
	}
}

@media ( max-width: 640px ) {
	#content .icpep-events-hub__controls {
		flex-direction: column;
		align-items: stretch;
	}

	#content .icpep-events-hub__view-switch {
		align-self: flex-start;
	}
}

/* ==========================================================
   Calendar View — FullCalendar 6.x mount + theme overrides
   ========================================================== */

#content .icpep-events-hub__calendar-wrap {
	background-color: #ffffff;
	border: 1px solid var( --icpep-card-border );
	border-radius: 16px;
	padding: clamp( 1rem, 3vw, 1.75rem );
	box-shadow: var( --icpep-shadow-sm );
}

#content .icpep-events-hub__calendar-wrap .fc {
	--fc-border-color: #e2e8f0;
	--fc-page-bg-color: transparent;
	--fc-neutral-bg-color: var( --icpep-mist );
	--fc-today-bg-color: rgba( 0, 163, 224, 0.08 );
	--fc-button-bg-color: #0b132b;
	--fc-button-border-color: #0b132b;
	--fc-button-hover-bg-color: #1c2b4a;
	--fc-button-hover-border-color: #1c2b4a;
	--fc-button-active-bg-color: #00a3e0;
	--fc-button-active-border-color: #00a3e0;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	color: #0b132b;
}

#content .icpep-events-hub__calendar-wrap .fc-toolbar-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: clamp( 1.1rem, 1rem + 0.6vw, 1.4rem );
	color: #0b132b;
}

#content .icpep-events-hub__calendar-wrap .fc-button {
	text-transform: capitalize;
	font-weight: 600;
	box-shadow: none;
}

#content .icpep-events-hub__calendar-wrap .fc-col-header-cell-cushion {
	padding-block: 0.6rem;
	font-weight: 700;
	color: #0b132b;
	text-decoration: none;
}

#content .icpep-events-hub__calendar-wrap .fc-daygrid-day-number {
	padding: 0.35rem;
	font-weight: 600;
	color: #0b132b;
	text-decoration: none;
}

/* Cyan highlighted "today" badge — a filled circle around the date
   number rather than just the cell tint (--fc-today-bg-color above
   already handles the cell tint). */
#content .icpep-events-hub__calendar-wrap .fc-day-today .fc-daygrid-day-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	min-height: 1.75rem;
	margin: 0.15rem;
	border-radius: 50%;
	background-color: #00a3e0;
	color: #ffffff;
	font-weight: 700;
}

#content .icpep-events-hub__calendar-wrap .fc-event {
	border: none;
	border-radius: 6px;
	padding: 0.15rem 0.45rem;
	font-size: var( --icpep-fs-xs );
	font-weight: 600;
	cursor: pointer;
}

/* Color-coded event chips by category — matches the grid badge tints. */
#content .icpep-fc-event--techtalks {
	background: rgba( 0, 163, 224, 0.12 ) !important;
	color: #0077aa !important;
	border-left: 3px solid #00a3e0 !important;
}

#content .icpep-fc-event--webinar {
	background: rgba( 11, 19, 43, 0.08 ) !important;
	color: #0b132b !important;
	border-left: 3px solid #0b132b !important;
}

#content .icpep-fc-event--events-calendar {
	background: rgba( 138, 21, 56, 0.1 ) !important;
	color: #8a1538 !important;
	border-left: 3px solid #8a1538 !important;
}

#content .icpep-fc-event--news {
	background: rgba( 71, 85, 105, 0.1 ) !important;
	color: #334155 !important;
	border-left: 3px solid #64748b !important;
}

@media ( max-width: 640px ) {
	#content .icpep-events-hub__calendar-wrap .fc-toolbar {
		flex-direction: column;
		gap: 0.75rem;
		align-items: flex-start;
	}
}