/* ============================================================
 * Talordata Blog — blog-detail.css
 * Replicates pages/blog/[save_name].vue layout & typography.
 * ============================================================ */

.blog-main p {
	margin: 0;
}

.blog-main { color: var(--td-color-text); }

.blog-main .bread-tag {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 1388px;
	height: 100%;
	margin: 0 auto;
	padding: 0 10px;
	transform: translateY(50px);
	z-index: 100;
	position: sticky;
}
.blog-main .bread-tag .bread-tag-item,
.blog-main .bread-tag .bread-tag-split {
	color: #59616d;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
}
.blog-main .bread-tag a.bread-tag-item:hover { text-decoration: underline; }

/* Decorative border wrapper */
.blog-main .line-content {
	border: 1px solid #e5e7ed;
	position: relative;
}
.blog-main .line-content .left-bg,
.blog-main .line-content .right-bg {
	width: 120px;
	height: calc(100% + 2px);
	position: absolute;
	top: -1px;
	border-top: 1px dashed #e5e7ed;
	border-bottom: 1px dashed #e5e7ed;
}
.blog-main .line-content .left-bg { left: -120px; }
.blog-main .line-content .right-bg { right: -120px; }
.blog-main .line-content::before {
	content: "";
	position: absolute;
	left: -1px; top: -20px;
	width: 100%; height: 20px;
	border-left: 1px solid #e5e7ed;
	border-right: 1px solid #e5e7ed;
}
.blog-main .line-content::after {
	content: "";
	position: absolute;
	left: -1px; bottom: -20px;
	width: 100%; height: 20px;
	border-left: 1px solid #e5e7ed;
	border-right: 1px solid #e5e7ed;
}

.blog-main .blog-content {
	position: relative;
	max-width: 1348px;
	margin: 120px auto 100px;
}
.blog-main .blog-content-main {
	padding: 40px 50px;
	display: flex;
	align-items: flex-start;
	gap: 100px;
}

.blog-main .blog-left {
	max-width: 820px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.blog-main .blog-left-header {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.blog-main .blog-left-title {
	color: #1c1d1f;
	font-size: 40px;
	font-weight: 700;
	line-height: 130%;
	margin: 0;
	word-break: break-word;
}
.blog-main .blog-left-desc {
	color: #1c1d1f;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
	margin: 0;
}

.blog-main .blog-img {
	width: 100%;
	height: 410px;
	object-fit: cover;
	border-radius: 8px;
	margin: 10px 0;
}

/* Author + share */
.blog-main .author-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.blog-main .author-info-left {
	display: flex;
	align-items: center;
	gap: 12px;
}
.blog-main .author-logo {
	width: 48px; height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}
.blog-main .author-intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.blog-main .author-name {
	color: #1c1d1f;
	font-size: 18px;
	font-weight: 500;
	line-height: 100%;
}
.blog-main .author-intro-box {
	display: flex;
	align-items: center;
	gap: 15px;
	color: #6f7988;
	font-size: 14px;
	font-weight: 400;
	line-height: 130%;
}
.blog-main .box-left { display: flex; align-items: center; gap: 15px; }

.blog-main .share-btn {
	width: 40px; height: 40px;
	flex-shrink: 0;
	padding: 5px 6px 5px 4px;
	position: relative;
	cursor: pointer;
}
.blog-main .share-btn:hover,
.blog-main .share-btn:focus-within {
	border-radius: 50%;
	background: #f6f6f6;
}
.blog-main .share-btn:hover .share-box,
.blog-main .share-btn:focus-within .share-box {
	display: block;
	position: absolute;
	top: 50px;
	left: -10px;
}
.blog-main .share-box {
	display: none;
	width: 220px;
	padding: 10px 0;
	background: #fff;
	border: 1px solid #dfdfdf;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,.10));
	border-radius: 10px;
	z-index: 99;
}
.blog-main .share-box::after {
	content: "";
	display: block;
	width: 100%; height: 30px;
	position: absolute;
	left: 0; top: -30px;
}
.blog-main .share-box-list {
	display: flex;
	flex-direction: column;
}
.blog-main .share-box-list .split-line {
	height: 1px;
	margin: 6px 14px;
	background: #e5e7ed;
}
.blog-main .share-box-list-li {
	width: 100%;
	padding: 7px 15px;
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 0;
	text-align: left;
}
.blog-main .share-box-list-li .share-img { width: 30px; height: 30px; flex-shrink: 0; }
.blog-main .share-box-list-li .share-title {
	color: #6f7988;
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
}
.blog-main .share-box-list-li:hover { background: #f6f6f6; }
.blog-main .share-box-list-li:hover .share-title { color: #1c1d1f; }

.blog-main .blog-left-split {
	width: 100%; height: 1px;
	background: #e5e7ed;
	margin-bottom: 10px;
}

/* Article body (the_content output) */
.blog-main .blog-content-contanier {
	display: flex;
	flex-direction: column;
	color: #1c1d1f;
	font-size: 16px;
	font-weight: 400;
	line-height: 160%;
}
.blog-main .blog-content-contanier *:first-of-type { margin-top: 0; }
.blog-main .blog-content-contanier h2 {
	color: #1c1d1f !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 150%;
	margin: 40px 0 15px;
}
.blog-main .blog-content-contanier h3 {
	color: #1c1d1f !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 150%;
	margin-bottom: 15px;
}
.blog-main .blog-content-contanier p {
	color: #1c1d1f !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 160%;
	margin: 0 0 15px;
}
.blog-main .blog-content-contanier p + h2 { margin-top: 25px !important; }
.blog-main .blog-content-contanier a {
	color: #266fef !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 160%;
	text-decoration-line: underline;
}
.blog-main .blog-content-contanier img {
	display: block;
	margin: 10px 0 !important;
	max-width: 100%;
	height: auto;
}
.blog-main .blog-content-contanier table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	overflow-x: auto;
	display: block;
}
.blog-main .blog-content-contanier th,
.blog-main .blog-content-contanier td {
	border: 1px solid #e5e7ed;
	padding: 4px 6px;
	text-align: left;
	min-width: 120px;
}
.blog-main .blog-content-contanier th {
	background-color: #f8f9fb;
	font-weight: 600;
	color: #1c1d1f;
}
.blog-main .blog-content-contanier tr:hover { background-color: #f5f7fa; }
.blog-main .blog-content-contanier pre {
	width: 100%;
	margin: 20px 0;
	padding: 20px 24px;
	overflow-x: auto;
	border: 1px solid #d8dde8;
	border-radius: 8px;
	background: #f7f9fc;
	color: #172033;
	font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 14px;
	line-height: 1.7;
	white-space: pre;
}
.blog-main .blog-content-contanier pre code {
	display: block;
	padding: 0; border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
}

/* TOC sidebar */
.blog-main .blog-intro {
	width: 328px;
	align-self: stretch;
}

.blog-main .blog-intro-container {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 328px;
}
.blog-main .blog-intro-container.is-sticky {
	position: sticky;
	top: 95px;
}
.blog-main .directory-title {
	color: #1c1d1f;
	font-size: 16px;
	font-weight: 700;
	line-height: 100%;
}
.blog-main .articles-list-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 0 30px 18px;
}
.blog-main .anchor_item_group {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.blog-main .anchor_link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #59616d;
	position: relative;
}
.blog-main .anchor_link.active { color: #1c1d1f; font-size: 16px; font-weight: 500; line-height: 150%; }
.blog-main .anchor_link.active .anchor_line { display: inline-block; }
.blog-main .anchor_line {
	width: 2px;
	height: calc(100% - 8px);
	background: #1c1d1f;
	border-radius: 2px;
	position: absolute;
	left: -18px;
	top: 50%;
	transform: translateY(-50%);
	display: none;
}
.blog-main .anchor_title {
	color: #6f7988;
	font-size: 16px;
	font-weight: 500;
	line-height: 150%;
}
.blog-main .anchor_title:hover { color: #1c1d1f; }
.blog-main .anchor_item_group.active > .anchor_link .anchor_title { color: #1c1d1f; font-weight: 500; }
.blog-main .anchor_item_group.active > .anchor_sub_list { display: flex; }
.blog-main .anchor_sub_list {
	display: none;
	flex-direction: column;
	gap: 12px;
	padding-left: 25px;
	border-left: 1px solid #c1c1c1;
}
.blog-main .anchor_sub_link .anchor_title { font-size: 14px; font-weight: 400; }
.blog-main .anchor_sub_link.active .anchor_title { color: #1c1d1f; }

/* Related articles grid */
.related-articles { padding: 0 0 120px; }
.related-articles-title {
	color: #1c1d1f;
	text-align: center;
	font-size: 44px;
	font-weight: 700;
	line-height: 56px;
	max-width: 860px;
	margin: 0 auto;
}
.related-articles-list {
	max-width: 1150px;
	margin: 80px auto 0;
	border-top: 1px solid #e5e7ed;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	min-height: 200px;
}
.related-articles-list .blog-li {
	display: flex;
	padding: 30px;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	flex-shrink: 0;
	width: calc(100% / 3);
	border-right: 1px solid #e5e7ed;
	transition: background .15s, box-shadow .15s;
}
.related-articles-list .blog-li:nth-child(3n) { border-right: none; }
.related-articles-list .blog-li:hover {
	background: #fafafa;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.related-articles-list .blog-li-img {
	width: 100%;
	height: 162px;
	border-radius: 8px;
	object-fit: cover;
}
.related-articles-list .blog-bottom {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-self: stretch;
}
.related-articles-list .blog-bottom-tag { display: flex; align-items: center; gap: 10px; }
.related-articles-list .blog-bottom-tag-item {
	display: inline-flex;
	padding: 3px 8px;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	border: 1px solid #dfdfdf;
	background: #fff;
	color: #1c1d1f;
	font-size: 12px;
	font-weight: 400;
	line-height: 130%;
	height: 24px;
}
.related-articles-list .blog-bottom-title {
	color: #1c1d1f;
	font-size: 20px;
	font-weight: 600;
	line-height: 150%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height: 62px;
	word-break: break-word;
}
.related-articles-list .blog-bottom-author {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin-top: 30px;
}
.related-articles-list .author-img {
	width: 35px; height: 35px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.related-articles-list .author-right {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}
.related-articles-list .author-flex {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.related-articles-list .author-flex .author-name {
	color: #1c1d1f;
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
}
.related-articles-list .author-flex-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	color: #6f7988;
	font-size: 12px;
	font-weight: 400;
	line-height: 130%;
}

/* Responsive */
@media screen and (max-width: 1380px) {
	.blog-main .line-content .left-bg,
	.blog-main .line-content .right-bg {
		width: 25px;
		background-size: cover;
	}
	.blog-main .line-content .left-bg { left: -25px; }
	.blog-main .line-content .right-bg { right: -25px; }
}
@media screen and (max-width: 1200px) {
	.blog-main .bread-tag { padding: 0 25px; }
	.blog-main .blog-content {
		width: calc(100% - 50px);
		margin: 100px auto 100px;
	}
	.blog-main .blog-content-main { gap: 50px; }
	.blog-main .blog-img { height: auto; }
	.related-articles-list { width: calc(100% - 50px); margin-left: auto; margin-right: auto; }
}
@media screen and (max-width: 960px) {
	.blog-main .line-content::before,
	.blog-main .line-content::after,
	.blog-main .line-content .left-bg,
	.blog-main .line-content .right-bg { display: none; }
	.blog-main .blog-content { width: calc(100% - 60px); }
	.blog-main .blog-content-main { padding: 30px; }
	.related-articles-list .blog-li {
		width: 50%;
		border-bottom: 1px solid #e5e7ed !important;
		border-right: 1px solid #e5e7ed !important;
	}
	.related-articles-list .blog-li:nth-child(2n) { border-right: none !important; }
	.related-articles-list .blog-li-img { height: 195px; }
}
@media screen and (max-width: 768px) {
	.blog-main .blog-content-main { padding: 30px; flex-direction: column; }
	.blog-main .blog-left { width: 100%; max-width: 100%; }
	.blog-main .blog-intro { display: none; }
	.related-articles-list .blog-li-img { height: 147px; }
}
@media screen and (max-width: 500px) {
	.blog-main .bread-tag { transform: translateY(40px); padding: 0 20px; }
	.blog-main .blog-content { margin: 80px auto 100px; width: calc(100% - 40px); }
	.blog-main .blog-content-main { padding: 20px; }
	.blog-main .blog-left-title { font-size: 30px; }
	.blog-main .author-intro-box { flex-direction: column; align-items: flex-start; gap: 4px; }
	.blog-main .box-left { flex-direction: column; align-items: flex-start; gap: 4px; }
	.related-articles-list { width: calc(100% - 40px); }
	.related-articles-list .blog-li {
		padding: 20px;
		width: 100%;
		border-bottom: 1px solid #e5e7ed !important;
		border-right: none !important;
	}
}

/* ----- Toast (Copy link feedback — mirrors ElMessage plain success/error) ----- */
.td-message-container {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}
.td-message {
	min-width: 200px;
	max-width: 80vw;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	background: #fff;
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity .2s ease, transform .2s ease;
	text-align: center;
}
.td-message.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.td-message--success {
	color: #67c23a;
	border: 1px solid #c2e7b0;
	background: #f0f9eb;
}
.td-message--error {
	color: #f56c6c;
	border: 1px solid #fab6b6;
	background: #fef0f0;
}