.page-title{
	color: var(--primary-color);
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    margin: 80px 0;
}

.news-cover{max-width:450px;margin:0 auto}
.news-cover img{display:block;width:100%}

.share-btns{margin:60px 0 10px}
.share-btns a{display:inline-block;margin-right:5px}
.share-btns a img{width:100px}

.news-date{display:block;font-size:var(--font-big);color:var(--secondary-color);font-weight:500;margin-bottom:10px}
.news-catg{}
.news-catg a{text-decoration:none;color:var(--primary-color);font-weight:600;border-radius:22px;border:1px solid var(--primary-color);padding:5px 12px;display:inline-block;}
.news-catg:hover{}
.news-catg a:hover{color:white;background-color:var(--primary-color)}

h3.news-title{
	font-size:35px;
	color:var(--secondary-color);
	margin:10px 0 0;
	letter-spacing:1.2px;
}

.editor-content{margin-top:30px}
.editor-content img{max-width:100%;height:auto}

.bottom-btns{margin-top:120px;margin-bottom:120px}
.bottom-btns .goto-links{display:flex;flex-wrap:wrap;justify-content:space-between;}
.bottom-btns .goto-links a{text-decoration:none}
.bottom-btns .goto-links a img{max-width:180px}
.bottom-btns .back-list-link{text-align:center;margin-top:40px}
.bottom-btns .back-list-link a{text-decoration:none;color:var(--primary-color);font-weight:600;border-radius:22px;border:1px solid var(--primary-color);padding:5px 12px;display:inline-block;font-size:var(--font-big)}
.bottom-btns .back-list-link a:hover{color:white;background-color:var(--primary-color)}

.editor-content {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	line-height: 1.4;
}

/* Allow the editor's inline styles (like <b>, <i>, etc.) to still work properly */
.editor-content p,
.editor-content b,
.editor-content i,
.editor-content strong,
.editor-content em,
.editor-content span {
	all: unset;
	display: revert;
}

.editor-content p{margin:1em 0}


.news-tags{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;align-items:center;margin-bottom:30px}
.news-tags .news-tag{border-radius:15px;padding:5px 10px;text-align:center;font-size:var(--font-base);border:1px solid var(--primary-color);color:var(--primary-color)}
.news-tags .news-tag.active{background-color:var(--primary-color);color:white}
.news-tags .news-tag:hover{background-color:#9079C4;color:white;box-shadow:0 6px 6px #C9C9C9}

.news-cards{display:flex;flex-wrap:wrap;gap:50px}
.news-cards-pagination{margin-bottom:200px}

.news-card:hover{box-shadow:0 10px 10px #CECECE}
.news-card {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--secondary-color);
	flex: 1 1 calc(33.3% - 50px);
	max-width: calc(33.3% - 50px);
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.news-card .news-cover {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1; /* modern browsers */
	overflow: hidden;
	border-bottom: 1px solid #ddd;
	max-width: initial;
}
.news-card .news-cover img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-content {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 15px;
}
.news-card .news-content{background-color:var(--primary-color);color:white}
.news-card:hover .news-content{background-color:#fff;color:black}
.news-card:hover .news-content .news-date,
.news-card:hover .news-content .news-title,
.news-card:hover .news-content .news-card-brief{color:black}
.news-card .news-date{font-size:1rem;color:white;margin-bottom:4px}

.news-card .news-title {
	font-size: 1.5rem;
	margin: 0 0 5px;
	line-height: 1.3;
	font-weight: bold;
	color: white;
}

.news-card-brief {
	margin: 0 0 5px;
	font-size: 1.15rem;
	color: #fff;
	line-height: 1.5;
	overflow: hidden;
	position: relative;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
}
.news-card h3.news-title{margin-top:3px}

.news-cards-pagination {
    display: flex;
    gap: 8px;
    margin-top: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.pagination-link {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #98abc9;
    color: #98abc9;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.pagination-link:hover {
    background-color: #e0e7f0; /* hover 淺色 */
    color: #49576d;
}

.pagination-link.active {
    background-color: #98abc9;
    color: #fff;
    cursor: default;
    pointer-events: none;
}

@media screen and (max-width: 991px) {
	.news-card {flex:1 1 calc(50% - 50px);max-width:calc(50% - 25px)}
}

@media screen and (max-width:600px) {
	.page-title{margin-top:30px}
	.news-card {flex:1 1 100%;max-width:100%}
	.bottom-btns .goto-links a img{max-width:140px}
}

@media screen and (max-width:500px) {
	.bottom-btns .goto-links a img{max-width:120px}
	.news-tags{gap:10px}
	.news-tags .news-tag{width:100%}
}