/* --- Super Module: Popular Posts Ranking Styles --- */
.hd-popular-posts-page {
  display: block;
}

.hd-popular-posts-page__items--list {
  display: grid;
  gap: 18px;
}

.hd-popular-posts-page__items--list .hd-popular-posts-list__item {
  margin: 0;
}

.hd-popular-posts-page__items--card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.hd-popular-posts-card {
  height: 100%;
}

.hd-popular-posts-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  color: inherit;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.hd-popular-posts-card__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 52px rgba(15, 23, 42, 0.12);
  border-color: rgba(37, 99, 235, 0.18);
}

.popular-content-section.popular-content-section--disable-hover-underline a,
.popular-content-section.popular-content-section--disable-hover-underline a:hover,
.popular-content-section.popular-content-section--disable-hover-underline a:focus,
.popular-content-section.popular-content-section--disable-hover-underline a:focus-visible,
.popular-content-section[data-popular-disable-hover-underline="1"] a,
.popular-content-section[data-popular-disable-hover-underline="1"] a:hover,
.popular-content-section[data-popular-disable-hover-underline="1"] a:focus,
.popular-content-section[data-popular-disable-hover-underline="1"] a:focus-visible {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.popular-content-section.popular-content-section--disable-hover-underline a:hover *,
.popular-content-section.popular-content-section--disable-hover-underline a:focus *,
.popular-content-section.popular-content-section--disable-hover-underline .ranking-link:hover .ranking-post-title,
.popular-content-section.popular-content-section--disable-hover-underline .list-item-link:hover .list-item-text,
.popular-content-section.popular-content-section--disable-hover-underline .design-image-featured a:hover .featured-title-on-image,
.popular-content-section.popular-content-section--disable-hover-underline .hd-popular-posts-card__link:hover .hd-popular-posts-card__title,
.popular-content-section[data-popular-disable-hover-underline="1"] a:hover *,
.popular-content-section[data-popular-disable-hover-underline="1"] a:focus *,
.popular-content-section[data-popular-disable-hover-underline="1"] .ranking-link:hover .ranking-post-title,
.popular-content-section[data-popular-disable-hover-underline="1"] .list-item-link:hover .list-item-text,
.popular-content-section[data-popular-disable-hover-underline="1"] .design-image-featured a:hover .featured-title-on-image,
.popular-content-section[data-popular-disable-hover-underline="1"] .hd-popular-posts-card__link:hover .hd-popular-posts-card__title {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.hd-popular-posts-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.hd-popular-posts-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hd-popular-posts-card__image--placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.18)),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.45) 0 12px, rgba(255, 255, 255, 0.2) 12px 24px);
}

.hd-popular-posts-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 20px;
}

.hd-popular-posts-card__title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.55;
  color: #111827;
}

.hd-popular-posts-card__meta {
  margin-top: auto;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #64748b;
}

body.fc-dark-mode .hd-popular-posts-card__link,
body.hd-dark-mode .hd-popular-posts-card__link,
body.dark-mode .hd-popular-posts-card__link {
  background: #20242a;
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

body.fc-dark-mode .hd-popular-posts-card__title,
body.hd-dark-mode .hd-popular-posts-card__title,
body.dark-mode .hd-popular-posts-card__title {
  color: #f8fafc;
}

body.fc-dark-mode .hd-popular-posts-card__meta,
body.hd-dark-mode .hd-popular-posts-card__meta,
body.dark-mode .hd-popular-posts-card__meta {
  color: #cbd5e1;
}

.custom-popular-posts-widget .custom-tab-panel {
  display: none;
}

.custom-popular-posts-widget .custom-tab-panel.is-active {
  display: block;
}

.comprehensive-article-widget--disable-hover-underline a:hover,
.comprehensive-article-widget--disable-hover-underline a:focus,
.comprehensive-article-widget--disable-hover-underline a:hover *,
.comprehensive-article-widget--disable-hover-underline a:focus *,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] a:hover,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] a:focus,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] a:hover *,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] a:focus * {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.comprehensive-article-widget--disable-hover-underline .my-pp li a:hover .text,
.comprehensive-article-widget--disable-hover-underline .my-pp li a:focus .text,
.comprehensive-article-widget--disable-hover-underline .my-ppop li a:hover .text,
.comprehensive-article-widget--disable-hover-underline .my-ppop li a:focus .text,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] .my-pp li a:hover .text,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] .my-pp li a:focus .text,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] .my-ppop li a:hover .text,
.widget_comprehensive_article_widget[data-comprehensive-disable-hover-underline="1"] .my-ppop li a:focus .text {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.postcard_thumbnail ,
.my-pp .thumb {
  position: relative;
  overflow: hidden;
}

.popular-rank {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  z-index: 10;
  border-bottom-right-radius: 10px; /* 右下角圓角 */
}

/* 第一名顏色 */
.popular-rank.rank-1 {
  background-color: #ffd700; /* 金色 */
}

/* 第二名顏色 */
.popular-rank.rank-2 {
  background-color: #c0c0c0; /* 銀色 */
}

/* 第三名顏色 */
.popular-rank.rank-3 {
  background-color: #cd7f32; /* 銅色 */
}

/* 4-10 名顏色 */
.popular-rank.rank-default {
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色 */
}

/* =============================================================================
   Popular Ranking Item Layouts
   ============================================================================= */

/* Layout: Top Image (上圖下文) */
.ranking-list.layout-top-image .ranking-item {
  position: relative;
  display: flex !important;
  flex-direction: column;
}

.ranking-list.layout-top-image .ranking-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  width: 100%;
}

.ranking-list.layout-top-image .ranking-thumbnail {
  order: -1;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 15px;
  height: 180px; /* Fixed height for consistency */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #f5f5f5;
  border-radius: 4px;
}

.ranking-list.layout-top-image .ranking-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px; /* Ensure image curvature matches container */
}

.ranking-list.layout-top-image .ranking-content {
  width: 100%;
  padding: 0 5px; /* Slight padding alignment */
}

/* Adjust Ranking Number Position for Top Image Layout */
.ranking-list.layout-top-image .ranking-number {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  border-radius: 4px 0 4px 0; /* Adjust radius */
  /* Ensure it sits on top of the image */
}

/* Mobile Adjustments for Top Image */
@media (max-width: 767px) {
  .hd-popular-posts-page__items--card {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hd-popular-posts-card__body {
    padding: 16px;
  }

  .ranking-list.layout-top-image .ranking-thumbnail {
    height: 160px;
  }
}