/* hexo-tag-ogp-link-preview 三行布局样式 */

/* 主容器 */
.link-preview {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  border: 1px solid #e1e8ed !important;
  border-radius: 12px !important;
  padding: 8px !important;
  margin: 16px 0 !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.link-preview:hover {
  background: #f6f6f6 !important;
  border-color: #1da1f2 !important;
}

/* 隐藏图片（专注于三行文本布局） */
.og-image {
  display: none !important;
}

/* 隐藏带 classSuffix 的图片元素 */
[class*="og-image-"] {
  display: none !important;
}

/* 第一行：标题 */
.og-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #14171a !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: break-word !important;
}

/* 第二行：描述 */
.og-description {
  font-size: 14px !important;
  color: #536471 !important;
  margin-bottom: 1px !important;
  line-height: 1.4 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  word-break: break-word !important;
  flex-grow: 1 !important;
}

/* 第三行：favicon + URL */
.og-favicon {
  display: none !important; /* 隐藏原始favicon容器 */
}

.og-url {
  display: none !important; /* 隐藏原始URL容器 */
}

/* JavaScript创建的第三行容器 */
.ogp-third-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid #f0f3f4 !important;
  min-height: 14px !important;
}

/* favicon容器 */
.ogp-third-row .favicon-wrapper {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
}

/* favicon图片 */
.ogp-third-row .favicon-icon {
  width: 16px !important;
  height: 16px !important;
  border-radius: 3px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 默认favicon图标（当没有图片时） */
.ogp-third-row .favicon-icon:not([src]) {
  background: #ccc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  color: #666 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* URL文本 */
.ogp-third-row .ogp-url-text {
  flex: 1 !important;
  font-size: 13px !important;
  color: #1da1f2 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 16px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  display: block !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .link-preview {
    padding: 6px !important;
    margin: 12px 0 !important;
  }

  .og-title {
    font-size: 15px !important;
    margin-bottom: 1px !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .og-description {
    font-size: 13px !important;
    margin-bottom: 1px !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
  }

  .ogp-third-row {
    gap: 4px !important;
    margin-top: 1px !important;
    padding-top: 1px !important;
    min-height: 12px !important;
  }

  .ogp-third-row .favicon-wrapper {
    width: 14px !important;
    height: 14px !important;
  }

  .ogp-third-row .favicon-icon {
    width: 14px !important;
    height: 14px !important;
  }

  .ogp-third-row .ogp-url-text {
    font-size: 12px !important;
    line-height: 14px !important;
  }
}

/* 支持classSuffix的样式 */
[class*="og-title-"] {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #14171a !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: break-word !important;
}

[class*="og-description-"] {
  font-size: 14px !important;
  color: #536471 !important;
  margin-bottom: 1px !important;
  line-height: 1.4 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  word-break: break-word !important;
  flex-grow: 1 !important;
}

[class*="og-favicon-"] {
  display: none !important;
}

[class*="og-url-"] {
  display: none !important;
}