/* =============================================================
   UTP Alumni Events
   utp-alumni-events.css

   Status colors (upcoming/ongoing/past) and today's highlight are
   read from CSS custom properties set per-instance by the widget's
   Elementor "Status Colors" / "Calendar" controls (see the PHP file).
   The --uae-*-bg variables drive BOTH the status badge background
   AND the matching calendar-day indicator, so one control updates both.
   ============================================================= */

.uae {
	--uae-upcoming-color: #f4f4f4;
	--uae-upcoming-bg: #808080;
	--uae-ongoing-color: #f4f4f4;
	--uae-ongoing-bg: #808080;
	--uae-past-color: #f4f4f4;
	--uae-past-bg: #b7b7b7;
	--uae-today-bg: #dddde5;
	--uae-today-color: #171717;
	--uae-arrow-size: 18px;
	--uae-hover-duration: 0.25s;
}

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

/* ── Layout ───────────────────────────────────────────────── */

.uae__layout {
	display: grid;
	grid-template-columns: 550px 750px;
	gap: 20px;
	justify-content: center;
	align-items: start;
}

/* ── Calendar card ────────────────────────────────────────── */

.uae__calendar-card {
	width: 550px;
	height: 520px;
	padding: 50px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;

	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
}

.uae__calendar-header {
	width: 100%;
	height: 46px;

	display: flex;
	align-items: center;
	justify-content: space-between;
}

.uae__calendar-month {
	color: #000000;
	font-family: "Montserrat", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 100%;
	white-space: nowrap;
}

/* .uae ancestor prefix on interactive elements below bumps specificity
   past the site's global Elementor Kit button reset
   (".elementor-kit-N button, ..."), which otherwise wins over a bare
   single-class selector on native <button> elements. */

.uae .uae__calendar-arrow {
	width: 46px;
	height: 46px;
	padding: 16px;

	display: flex;
	align-items: center;
	justify-content: center;

	background: transparent;
	border: none;
	border-radius: 50%;

	cursor: pointer;
}

.uae .uae__calendar-arrow:hover {
	background: #f4f4f4;
}

.uae__calendar-arrow svg {
	width: 18px;
	height: 18px;

	fill: none;
	stroke: #000000;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.uae__calendar-weekdays {
	width: 100%;

	display: grid;
	grid-template-columns: repeat(7, 54px);
	justify-content: space-between;
}

.uae__calendar-weekdays span {
	width: 54px;
	height: 54px;

	display: flex;
	align-items: center;
	justify-content: center;

	color: #000000;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 100%;
	text-align: center;
}

.uae__calendar-days {
	width: 100%;

	display: grid;
	grid-template-columns: repeat(7, 54px);
	justify-content: space-between;
}

.uae .uae__calendar-day {
	width: 54px;
	height: 54px;
	padding: 15px;

	display: flex;
	align-items: center;
	justify-content: center;

	background: transparent;
	border: 1px solid transparent;
	border-radius: 100px;

	color: #171717;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.uae .uae__calendar-day:hover {
	background: #f7f7f7;
}

.uae .uae__calendar-day.other-month {
	color: #d1d1d1;
}

/* Color-coded to match whichever status (ongoing > upcoming > past, in that
   priority) is dominant among the day's events — see uae__calendar-day.status-*
   assignment in the JS. */
.uae .uae__calendar-day.has-event.status-upcoming {
	border-color: var(--uae-upcoming-bg);
}

.uae .uae__calendar-day.has-event.status-ongoing {
	border-color: var(--uae-ongoing-bg);
}

.uae .uae__calendar-day.has-event.status-past {
	border-color: var(--uae-past-bg);
}

.uae .uae__calendar-day.today {
	background: var(--uae-today-bg);
	border-color: var(--uae-today-bg);
	color: var(--uae-today-color);
}

.uae .uae__calendar-day.selected {
	background: #404040;
	border-color: #404040;
	color: #ffffff;
}

/* ── Right panel ──────────────────────────────────────────── */

.uae__events-panel {
	width: 750px;
	min-width: 0;
}

/* ── Search and filter bar ────────────────────────────────── */

.uae__tools {
	position: relative;

	width: 100%;
	height: 64px;

	display: grid;
	grid-template-columns: minmax(0, 666px) 64px;
	gap: 20px;

	margin-bottom: 20px;
}

.uae__search-box {
	position: relative;

	width: 100%;
	height: 64px;
	padding: 20px;

	display: flex;
	align-items: center;

	background: #ffffff;
	border-radius: 20px;
}

.uae__search-input {
	width: 100%;
	height: 100%;
	padding-right: 42px;

	background: transparent;
	border: none;
	outline: none;

	color: #404040;
	font-family: "Inter", sans-serif;
	font-size: 14px;
}

.uae__search-icon {
	position: absolute;
	top: 50%;
	right: 20px;

	width: 24px;
	height: 24px;

	fill: none;
	stroke: #182033;
	stroke-width: 1.5;
	stroke-linecap: round;

	transform: translateY(-50%);
	pointer-events: none;
}

.uae .uae__filter-button {
	width: 64px;
	height: 64px;
	padding: 20px;

	display: flex;
	align-items: center;
	justify-content: center;

	background: #ffffff;
	border: none;
	border-radius: 20px;

	cursor: pointer;
}

.uae .uae__filter-button:hover {
	background: #eeeeee;
}

.uae__filter-button svg {
	width: 24px;
	height: 24px;

	fill: #ffffff;
	stroke: #182033;
	stroke-width: 1.5;
	stroke-linecap: round;
}

.uae__filter-menu {
	position: absolute;
	z-index: 50;
	top: 74px;
	right: 0;

	display: none;
	width: 180px;
	padding: 8px;

	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 10px 28px rgb(0 0 0 / 15%);
}

.uae__filter-menu.show {
	display: block;
}

.uae .uae__filter-option {
	width: 100%;
	padding: 11px 12px;

	background: transparent;
	border: none;
	border-radius: 8px;

	color: #404040;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	text-align: left;

	cursor: pointer;
}

.uae .uae__filter-option:hover,
.uae .uae__filter-option.active {
	background: #eeeeee;
}

/* ── Event list ───────────────────────────────────────────── */

.uae__event-list {
	width: 100%;
	max-height: 436px;
	padding-right: 10px;

	display: flex;
	flex-direction: column;
	gap: 10px;

	overflow-y: auto;
}

.uae__event-list::-webkit-scrollbar {
	width: 4px;
}

.uae__event-list::-webkit-scrollbar-track {
	background: #d9d9d9;
	border-radius: 100px;
}

.uae__event-list::-webkit-scrollbar-thumb {
	background: #505050;
	border-radius: 100px;
}

/* ── Event card ───────────────────────────────────────────── */

.uae__event-card {
	width: 100%;
	min-height: 100px;
	padding: 20px;
	flex-shrink: 0; /* the list scrolls its own overflow — cards must not be squeezed shorter than their content (default flex min-size becomes 0 inside a scroll container) */

	display: grid;
	grid-template-columns: 50px minmax(0, 1fr) 98px 24px;
	align-items: center;
	gap: 20px;

	background: #ffffff;
	border: 1px solid transparent;
	border-radius: 20px;

	transition-property: background-color, border-color;
}

/* Cards are <a> when they have a URL — undo theme link styling. */
.uae a.uae__event-card,
.uae a.uae__event-card:hover,
.uae a.uae__event-card:focus {
	color: inherit;
	text-decoration: none;
}

.uae a.uae__event-card:focus-visible {
	outline: 2px solid #c8832a;
	outline-offset: 2px;
}

/* Desktop-only hover: colours come from the widget's "Card Hover (Desktop)"
   controls, which target .uae--hoverable. The JS adds that class only for
   real pointer devices above 1024px, so a tap on touch screens doesn't leave
   a "stuck" hover state. */
.uae__event-card,
.uae__event-date-number,
.uae__event-date-month,
.uae__event-title,
.uae__event-time,
.uae__event-arrow,
.uae__event-arrow svg {
	transition-duration: var(--uae-hover-duration);
	transition-timing-function: ease;
}

.uae__event-date {
	width: 50px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	text-align: center;
}

.uae__event-date-number {
	width: 50px;
	min-height: 38px;

	display: flex;
	align-items: center;
	justify-content: center;

	color: #404040;
	font-family: "Montserrat", sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 120%;
}

.uae__event-date-month {
	width: 50px;
	min-height: 22px;

	display: flex;
	align-items: center;
	justify-content: center;

	color: #404040;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 120%;
}

.uae__event-main-information {
	min-width: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}

.uae__event-title {
	width: 100%;
	min-height: 22px;

	color: #404040;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 120%;
	white-space: normal;
}

.uae__event-time {
	min-height: 18px;

	color: #808080;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 150%;
}

.uae__status-tag {
	width: 98px;
	height: 28px;
	padding: 5px 20px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border-radius: 1000px;

	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 150%;
	white-space: nowrap;
}

.uae__status-tag.upcoming {
	background: var(--uae-upcoming-bg);
	color: var(--uae-upcoming-color);
}

.uae__status-tag.ongoing {
	background: var(--uae-ongoing-bg);
	color: var(--uae-ongoing-color);
}

.uae__status-tag.past {
	background: var(--uae-past-bg);
	color: var(--uae-past-color);
}

.uae__event-arrow {
	width: 24px;
	height: 24px;

	display: flex;
	align-items: center;
	justify-content: center;

	color: #4f4d82;
	font-size: var(--uae-arrow-size);
}

.uae__event-arrow svg {
	width: var(--uae-arrow-size);
	height: var(--uae-arrow-size);
}

.uae__event-arrow svg.uae__event-arrow-default {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── No results ───────────────────────────────────────────── */

.uae__no-events {
	display: none;
	padding: 35px;

	background: #ffffff;
	border-radius: 20px;

	color: #808080;
	text-align: center;
}

.uae__no-events.show {
	display: block;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 1440px) {
	.uae__layout {
		grid-template-columns: minmax(400px, 550px) minmax(0, 750px);
	}

	.uae__calendar-card,
	.uae__events-panel {
		width: 100%;
	}

	.uae__calendar-card {
		padding: 40px;
	}

	.uae__calendar-weekdays,
	.uae__calendar-days {
		grid-template-columns: repeat(7, minmax(40px, 54px));
	}

	.uae__calendar-weekdays span,
	.uae .uae__calendar-day {
		width: clamp(40px, 4vw, 54px);
		height: clamp(40px, 4vw, 54px);
	}

	.uae__tools {
		grid-template-columns: minmax(0, 1fr) 64px;
	}
}

@media (max-width: 1200px) {
	.uae__layout {
		grid-template-columns: 43% 57%;
		align-items: center;
	}

	.uae__calendar-card {
		height: auto;
		min-height: 520px;
		padding: 35px 20px;

		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.uae__calendar-month {
		font-size: 20px;
	}

	.uae__calendar-weekdays span {
		font-size: 12px;
	}

	.uae .uae__calendar-day {
		font-size: 13px;
	}

	.uae__event-card {
		grid-template-columns: 50px minmax(0, 1fr) 24px;
		grid-template-rows: auto auto;
		column-gap: 14px;
		row-gap: 6px;
		padding: 16px;
	}

	.uae__event-date {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.uae__event-main-information {
		grid-column: 2;
		grid-row: 1;
	}

	.uae__status-tag {
		grid-column: 2;
		grid-row: 2;

		display: inline-flex;
		justify-self: start;

		width: auto;
		min-width: 76px;
		height: 24px;
		padding: 3px 12px;
	}

	.uae__event-arrow {
		grid-column: 3;
		grid-row: 1 / 3;
		align-self: center;
	}

	.uae__event-title {
		font-size: 15px;
	}
}

@media (max-width: 1024px) {
	.uae__layout {
		display: block;
	}

	.uae__calendar-card {
		width: 100%;
		min-height: auto;
		padding: 28px 20px;
	}

	.uae__calendar-weekdays,
	.uae__calendar-days {
		grid-template-columns: repeat(7, 1fr);
		justify-items: center;
	}

	.uae__calendar-weekdays span,
	.uae .uae__calendar-day {
		width: 42px;
		height: 42px;
		padding: 10px;
	}

	.uae__events-panel {
		width: 100%;
		margin-top: 20px;
	}

	.uae__event-list {
		max-height: none;
		padding-right: 0;
		overflow: visible;
	}
}

@media (max-width: 460px) {
	.uae__calendar-card {
		padding-inline: 12px;
	}

	.uae__calendar-weekdays span,
	.uae .uae__calendar-day {
		width: 37px;
		height: 37px;
		padding: 7px;
		font-size: 11px;
	}

	.uae__calendar-month {
		font-size: 18px;
	}

	.uae__tools {
		grid-template-columns: minmax(0, 1fr) 55px;
		gap: 10px;
	}

	.uae__search-box,
	.uae .uae__filter-button {
		height: 55px;
	}

	.uae .uae__filter-button {
		width: 55px;
		padding: 16px;
	}

	.uae__event-card {
		min-height: 110px;
		grid-template-columns: 45px minmax(0, 1fr) 20px;
		grid-template-rows: auto auto;
		column-gap: 10px;
		row-gap: 5px;
		padding: 14px;
	}

	.uae__event-date,
	.uae__event-date-number,
	.uae__event-date-month {
		width: 45px;
	}

	.uae__event-date-number {
		min-height: auto;
		font-size: 25px;
	}

	.uae__event-date-month {
		min-height: auto;
		font-size: 14px;
	}

	.uae__event-title {
		font-size: 13px;
		line-height: 140%;
	}

	.uae__event-time {
		font-size: 10px;
	}
}