/* BLOG (ystp) - keep consistent with existing palette/typography */
.blog-banner.detail-banner {
    height: 55vh;
    min-height: 320px;
    overflow: hidden; /* ← 關鍵：不是只鎖 X，而是全部鎖 */
}
 
.blog-banner .banner-image{
  /* 若沒有 bg-blog.jpg，會自動 fallback 用 bg-about.jpg */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%),
    url('../img/草本學堂1.jpg'),
    url('../img/bg-about.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.blog-banner .inner-box {
    top: 26%;
}
.blog-banner .inner-box h1{
  color: #FFF;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.blog-banner .inner-box .en{
  opacity: .92;
}

.blog-wrap{
  background: #F6F4E7; /* 與站內米白系一致 */
  padding: 3rem 0 4rem 0;
}

/* list controls */
.blog-toolbar{
  display:flex;
  gap: .75rem;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.blog-search{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex: 1 1 520px;
}
.blog-search .form-control{
  max-width: 520px;
}
.blog-tags{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
}
.blog-tags a.tag{
  background:#fff;
  border:1px solid #e8e0cf;
}
.blog-tags a.tag.active{
  background:#E3EBC3;
  border-color:#dfe7b8;
}

/* list cards */
.blog-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
.blog-card{
  background:#fff;
  border-radius: .7rem;
  overflow:hidden;
  box-shadow: 0 .35rem 1.2rem rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 .6rem 1.6rem rgba(0,0,0,.10);
}
.blog-card-inner{
  display:flex;
  gap: 1rem;
}
.blog-thumb{
  flex: 0 0 32%;
  min-height: 190px;
  background:#f2ecde;
  position:relative;
}
.blog-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
}
.blog-body{
  flex: 1 1 auto;
  padding: 1.25rem 1.35rem 1.25rem .2rem;
}
.blog-meta{
  display:flex;
  gap: .6rem;
  flex-wrap:wrap;
  align-items:center;
  font-size: var(--size_14);
  color: #476565;
  margin-bottom: .55rem;
}
.blog-meta .dot{
  width:.28rem;height:.28rem;border-radius:50%;
  background:#9bb2b0; display:inline-block;
  margin: 0 .2rem;
}
.blog-title{
  font-size: var(--size_26);
  font-weight: 900;
  color:#084150;
  line-height: 1.35;
  margin-bottom: .55rem;
}
.blog-excerpt{
  font-size: var(--size_16);
  color:#2F607B;
  line-height: 1.8;
  margin-bottom: .9rem;
}
.blog-more{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.blog-more .btn{
  font-size: var(--size_16);
  padding:.55rem .9rem;
}
.blog-more .more-line{
  background: var(--color_yellow);
  height: 3px;
  display: block;
  width: 100%;
  opacity: .75;
}

/* pagination */
.blog-pager{
  display:flex;
  justify-content:center;
  gap:.4rem;
  margin-top: 1.6rem;
  flex-wrap:wrap;
}
.blog-pager a, .blog-pager span{
  min-width: 2.4rem;
  text-align:center;
  padding:.5rem .65rem;
  border-radius:.4rem;
  border:1px solid #e8e0cf;
  background:#fff;
  font-size: var(--size_15);
}
.blog-pager a:hover{ background:#f7f7f7; }
.blog-pager .active{ background: var(--color_blue); color:#fff; border-color: var(--color_blue); }
.blog-pager .disabled{ opacity:.5; pointer-events:none; }

/* detail */
.blog-detail{
  background:#F6F4E7;
  padding: 3rem 0 4rem 0;
}
.blog-crumbs{
  font-size: var(--size_14);
  color:#476565;
  margin-bottom: .9rem;
}
.blog-crumbs a{ color:#476565; }
.blog-crumbs a:hover{ color: var(--color_blue); }

.blog-article{
  background:#fff;
  border-radius: .9rem;
  box-shadow: 0 .35rem 1.2rem rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.04);
  overflow:hidden;
}
.blog-article-head{
  padding: 2rem 2.2rem 1.2rem 2.2rem;
}
.blog-article-head h1{
  font-size: 2.2rem;
  font-weight: 900;
  color:#084150;
  letter-spacing: .04rem;
  line-height: 1.25;
  margin-bottom: .75rem;
}
.blog-cover{
  width:100%;
  height: 380px;
  background:#f2ecde;
  position:relative;
}
.blog-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.blog-article-body{
  padding: 1.6rem 2.2rem 2.4rem 2.2rem;
  color: var(--text_black);
  line-height: 1.95;
  font-size: var(--size_17);
}
.blog-article-body h2{
  font-size: var(--size_26);
  font-weight: 900;
  color:#1C76A5;
  margin: 2rem 0 .8rem 0;
}
.blog-article-body h3{
  font-size: var(--size_22);
  font-weight: 800;
  color:#996B25;
  margin: 1.4rem 0 .6rem 0;
}
.blog-article-body blockquote{
  margin: 1.2rem 0;
  padding: 1.1rem 1.2rem;
  border-left: 6px solid #EFD567;
  background: #FBFCEF;
  color:#3A2C13;
}
.blog-article-body img{
  max-width:100%;
  height:auto;
  border-radius:.6rem;
}
.blog-share {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    align-items: center;
    padding: 1.1rem 2.2rem 2rem 2.2rem;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.blog-share .icons{
  display:flex;
  gap:.55rem;
  align-items:center;
}
.blog-share .icons a img{
  width: 2.1rem;
  height:auto;
  opacity:.9;
}
.blog-share .icons a:hover img{ opacity:.75; }

@media (max-width: 991px){
  .blog-card-inner{ flex-direction: column; }
  .blog-thumb{ flex-basis: auto; width:100%; min-height: 220px; }
  .blog-body{ padding: 1rem 1.2rem 1.2rem 1.2rem; }
  .blog-cover{ height: 260px; }
  .blog-article-head, .blog-article-body, .blog-share{ padding-left: 1.2rem; padding-right: 1.2rem; }
}
/* Blog 頁面與 header 保留安全距 */
.blog-page {
    margin-top: var(--header-height, 72px);
}

@media (max-width: 768px) {
    .blog-page {
        padding-top: 88px; /* 手機 header 通常更高 */
    }
}
.blog-page,
.blog-wrap,
.blog-detail {
    overflow-x: hidden;
}
.blog-readmore,
.blog-card .read-more,
a.read-more {
    white-space: nowrap;
}
blog-more a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}