/* ================================================
   pages/blog.css — 部落格列表頁所有樣式
   Source: frontend-polish.css (BLOG section lines 937-1056
           + shared pagination + responsive rules)
   ================================================ */

/* BLOG */
.frontend-blog {
  background: #f3f4f6;
  padding-top: 28px;
  padding-bottom: 40px;
}

/* Override Blocksy main.min.css: [data-reveal][data-reveal*=no]{opacity:0}
   Blog entry cards use data-reveal="bottom:no" and must always be visible. */
.frontend-blog .entry-card[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

/* 3-column grid matching reference screenshot */
.frontend-blog .frontend-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.frontend-blog .entry-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e3e6eb;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(15,23,42,0.07);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Hard cap for blog hover lift: keep identical visual amplitude to shop cards */
.frontend-blog .entries > .entry-card:hover,
.frontend-blog .entries > .entry-card:focus-within {
  transform: translate3d(0, -2px, 0) !important;
}

.frontend-blog .entry-card .ct-image-container {
  display: block;
}

.frontend-blog .entry-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.frontend-blog .entry-card .entry-title,
.frontend-blog .entry-card .entry-excerpt {
  margin-inline: 16px;
}

.frontend-blog .entry-card .entry-title {
  flex: 1;
  margin-top: 14px;
  margin-bottom: 10px;
  font-size: 19px;
  line-height: 1.5;
  min-height: 58px;
}

.frontend-blog .entry-card .entry-title a {
  color: #1f2e44;
  text-decoration: none;
}

.frontend-blog .entry-card .entry-title a:hover {
  color: #3f63bf;
}

.frontend-blog .entry-card .entry-excerpt {
  color: #4f6073;
  font-size: 14px;
  line-height: 1.6;
  min-height: 88px;
}

.frontend-blog .entry-card .ct-read-more {
  margin: auto 16px 16px;
  align-self: flex-start;
  border: 1px solid #4569c6;
  border-radius: 4px;
  padding: 7px 18px;
  color: #4569c6;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.frontend-blog .entry-card .ct-read-more:hover {
  background: #4569c6;
  color: #fff;
}

.frontend-pagination {
  margin-top: 34px;
}

.frontend-blog .pagination,
.frontend-shop .pagination {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.frontend-blog .pagination .page-link,
.frontend-shop .pagination .page-link {
  border: 1px solid #d5dce7;
  color: #2e425d;
}

.frontend-empty-state {
  border: 1px dashed #d5dce4;
  padding: 24px;
  text-align: center;
}


/* ── Responsive: BLOG breakpoints (from frontend-polish.css) ── */

@media (max-width: 1200px) {
  /* blog stays 3 cols down to 992px */
  .frontend-blog .frontend-post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .frontend-blog .frontend-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .frontend-blog .frontend-post-grid {
    grid-template-columns: 1fr;
  }

  .frontend-blog .entry-card .entry-title,
  .frontend-blog .entry-card .entry-excerpt {
    min-height: 0;
  }
}