/* Article Gallery Styles */
.article-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 40px rgba(0,0,0,0.3);
	border-color: rgba(24, 191, 239, 0.3);
}

.article-card:hover .article-image img {
	transform: scale(1.05);
}

.article-card:hover .read-more-btn span {
	transform: translateX(5px);
}

.article-card:hover .read-more-btn {
	color: #ffffff;
}

/* Modal Styles - Fixed and Enhanced */
#articleModal {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(0,0,0,0.9) !important;
	z-index: 99999 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: all 0.4s ease !important;
	backdrop-filter: blur(10px) !important;
}

#articleModal.show {
	opacity: 1 !important;
	visibility: visible !important;
}

.modal-content {
	position: absolute !important;
	bottom: -100% !important;
	left: 0 !important;
	right: 0 !important;
	height: 90vh !important;
	background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%) !important;
	border-radius: 20px 20px 0 0 !important;
	transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
	overflow-y: auto !important;
	box-shadow: 0 -10px 50px rgba(0,0,0,0.5) !important;
}

#articleModal.show .modal-content {
	bottom: 0 !important;
}

.modal-header {
	position: sticky !important;
	top: 0 !important;
	background: rgba(30, 30, 46, 0.95) !important;
	padding: 1.5em 2em !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	border-bottom: 1px solid rgba(255,255,255,0.1) !important;
	backdrop-filter: blur(10px) !important;
}

#closeModal {
	background: none !important;
	border: none !important;
	color: #ffffff !important;
	font-size: 2em !important;
	cursor: pointer !important;
	padding: 0 !important;
	width: 40px !important;
	height: 40px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	transition: all 0.3s ease !important;
}

#closeModal:hover {
	background: rgba(255,255,255,0.1) !important;
	transform: rotate(90deg) !important;
}

.modal-body {
	padding: 2em !important;
}

#modalImage {
	width: 100% !important;
	height: 300px !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	margin-bottom: 2em !important;
}

#modalImg {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

#modalTitle {
	margin: 0 !important;
	color: #ffffff !important;
	font-size: 1.5em !important;
}

#modalDate {
	background: rgba(24, 191, 239, 0.2) !important;
	color: #18bfef !important;
	padding: 0.5em 1em !important;
	border-radius: 20px !important;
	font-size: 0.9em !important;
	font-weight: 600 !important;
}

#modalContent {
	color: #ffffff !important;
	line-height: 1.8 !important;
	font-size: 1.05em !important;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
	.articles-gallery {
		grid-template-columns: 1fr !important;
		gap: 1.5em !important;
		padding: 0 1em;
	}
	
	.modal-content {
		height: 95vh !important;
	}
	
	.modal-body {
		padding: 1.5em !important;
	}
	
	#modalImage {
		height: 250px !important;
	}
}

@media screen and (max-width: 480px) {
	.article-content {
		padding: 1.25em !important;
	}
	
	.modal-header {
		padding: 1em 1.5em !important;
	}
	
	.modal-header h2 {
		font-size: 1.25em !important;
	}
}