/* Updates page styles */

.updates-hero {
	background: linear-gradient(135deg, #1e0d2f, #4c1998);
	color: #fff;
	padding: 60px 0 50px;
}

.updates-hero h1 {
	font-size: 2.4rem;
	font-weight: 700;
	margin-bottom: 10px;
}

.updates-hero p {
	font-size: 1.1rem;
	opacity: .85;
	margin-bottom: 0;
}

/* Tab bar (reuses .update-tab / .update-tabs from custom.css) */
.updates-page-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 30px 0 20px;
}

/* Cards list */
.updates-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Single card */
.update-card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid rgba(0,0,0,.07);
	animation: updateFadeIn .3s ease both;
}

.update-card:last-child {
	border-bottom: none;
}

@keyframes updateFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Date badge */
.update-card-date {
	flex-shrink: 0;
	width: 70px;
	text-align: center;
}

.update-card-month {
	display: block;
	padding: 4px 6px;
	background: var(--mainColor);
	color: var(--whiteColor);
	font-size: 13px;
	font-weight: 600;
	border-radius: 4px 4px 0 0;
	line-height: 1.3;
}

.update-card-time {
	display: block;
	padding: 4px 6px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	box-shadow: inset 0 0 6px rgba(0,0,0,.12);
	border-radius: 0 0 4px 4px;
}

/* Body */
.update-card-body {
	flex: 1;
	min-width: 0;
}

.update-card-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 6px;
	font-family: 'Lexend', sans-serif;
}

.update-card-summary {
	color: var(--paragraphColor);
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 0;
}

/* Tab pane */
.updates-tab-pane {
	display: none;
}

.updates-tab-pane.is-active {
	display: block;
}

/* Load more */
.updates-load-more {
	text-align: center;
	padding: 30px 0;
}

.updates-load-more button {
	background: var(--secounderyColor);
	color: var(--mainColor);
	border: none;
	padding: 10px 32px;
	font-weight: 600;
	border-radius: 25px;
	font-size: 15px;
	cursor: pointer;
	transition: background-color .2s ease, transform .1s ease;
}

.updates-load-more button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

.updates-load-more button:disabled {
	opacity: .5;
	cursor: default;
	transform: none;
}

/* Skeleton loader */
.updates-skeleton {
	padding: 20px 0;
}

.updates-skeleton .skeleton-row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(0,0,0,.05);
}

.updates-skeleton .sk-date {
	width: 70px;
	height: 50px;
	border-radius: 4px;
	flex-shrink: 0;
}

.updates-skeleton .sk-body {
	flex: 1;
}

.updates-skeleton .sk-title {
	width: 40%;
	height: 18px;
	margin-bottom: 10px;
	border-radius: 6px;
}

.updates-skeleton .sk-text {
	width: 85%;
	height: 14px;
	border-radius: 6px;
}

.updates-skeleton .sk-date,
.updates-skeleton .sk-title,
.updates-skeleton .sk-text {
	background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06));
	background-size: 200% 100%;
	animation: update-skeleton-shimmer 1.2s infinite linear;
}

/* Empty state */
.updates-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--paragraphColor);
	font-size: 16px;
}

/* Count badge next to tab */
.updates-count {
	font-size: 12px;
	opacity: .7;
	margin-left: 4px;
}

/* Responsive */
@media (max-width: 576px) {
	.update-card {
		flex-direction: column;
		gap: 10px;
	}
	.update-card-date {
		width: auto;
		display: flex;
		gap: 0;
	}
	.update-card-month {
		border-radius: 4px 0 0 4px;
	}
	.update-card-time {
		border-radius: 0 4px 4px 0;
	}
	.updates-hero h1 {
		font-size: 1.8rem;
	}
}