/* Final polish layer: keep reference style, improve readability and stability. */

:root {
  --post-card-radius: 14px;
  --post-card-border: rgba(120, 139, 160, 0.22);
  --post-card-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  --brand-accent: #0f766e;
  --brand-accent-soft: rgba(15, 118, 110, 0.12);
  --brand-highlight: #f59e0b;
}

.layout {
  max-width: 1220px;
}

/* Slightly differentiate from the reference style with a custom visual accent. */
#site-title {
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(15, 118, 110, 0.25);
}

#site-subtitle {
  color: #e6f6f4;
}

#site_social_icons .social-icon i {
  transition: transform 0.2s ease, filter 0.2s ease;
}

#site_social_icons .social-icon:hover i {
  transform: translateY(-2px) scale(1.05);
  filter: drop-shadow(0 6px 10px rgba(15, 118, 110, 0.3));
}

#aside-content .card-widget.card-info {
  border: 1px solid var(--post-card-border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(242, 252, 251, 0.94));
}

#aside-content .card-widget.card-info .author-info-name::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin: 8px auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-highlight));
}

#recent-posts .recent-post-item {
  margin-bottom: 16px;
  border-radius: var(--post-card-radius);
  border: 1px solid var(--post-card-border);
  box-shadow: var(--post-card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#recent-posts .recent-post-item .recent-post-info {
  padding: 18px 20px;
}

#recent-posts .recent-post-item:hover {
  transform: translateY(-3px);
  border-color: rgba(15, 118, 110, 0.35);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

#recent-posts .recent-post-item .article-title {
  color: #1f2f46;
}

#recent-posts .recent-post-item .article-title:hover {
  color: var(--brand-accent);
}

#recent-posts .recent-post-item .recent-post-info .content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
  color: #3b4b5f;
}

#page-header.nav-fixed #nav {
  backdrop-filter: blur(10px);
}

/* Keep prev/next navigation compact and readable. */
.post #pagination.pagination-post {
  margin-top: 30px;
  border: none;
  background: transparent;
  box-shadow: none;
  gap: 12px;
}

.post #pagination.pagination-post .pagination-related {
  height: auto !important;
  min-height: 0 !important;
  border-radius: 12px;
  border: 1px solid var(--post-card-border);
  box-shadow: var(--post-card-shadow);
  overflow: hidden;
}

.post #pagination.pagination-post .pagination-related .info,
.post #pagination.pagination-post .pagination-related .info .info-1 {
  position: static !important;
  transform: none !important;
}

.post #pagination.pagination-post .pagination-related .info .info-1,
.post #pagination.pagination-post .pagination-related .info .info-2 {
  padding: 14px 18px !important;
}

/* Avoid exposing long excerpt snippets in related cards and prev/next cards. */
.relatedPosts .pagination-related .info .info-2,
#pagination.pagination-post .pagination-related .info .info-2 {
  display: none !important;
}

.relatedPosts .pagination-related:hover .info .info-1,
#pagination.pagination-post .pagination-related:hover .info .info-1 {
  opacity: 1 !important;
  transform: none !important;
}

.relatedPosts > .relatedPosts-list > a {
  border-radius: var(--post-card-radius);
  border: 1px solid var(--post-card-border);
  box-shadow: var(--post-card-shadow);
  background-image: radial-gradient(circle at 12% 14%, var(--brand-accent-soft) 0, transparent 55%);
}

.relatedPosts > .relatedPosts-list .info .info-1,
.relatedPosts > .relatedPosts-list .info .info-2 {
  position: static !important;
  transform: none !important;
  padding: 14px 16px !important;
}

.relatedPosts > .relatedPosts-list .info .info-1 .info-item-2 {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  #recent-posts .recent-post-item {
    margin-bottom: 12px;
  }

  #recent-posts .recent-post-item .recent-post-info {
    padding: 14px 14px;
  }

  #recent-posts .recent-post-item .recent-post-info .content {
    -webkit-line-clamp: 2;
  }

  .post #pagination.pagination-post .pagination-related .info .info-1,
  .post #pagination.pagination-post .pagination-related .info .info-2 {
    padding: 12px 14px !important;
  }
}