/* haru 部落格專用樣式（只在 post 頁載入；不動共用 main.css）
   色票與字級全部取自 main.css：主色 #a5918e、主色深 #815f5b、文字 #5e5d5d、次要 #a7a5a5、側欄 #eae6e4。 */
.haru-blog{letter-spacing:.4px}
.haru-blog a{color:#a5918e}
.haru-blog a:hover{color:#815f5b;text-decoration:none}

/* 麵包屑：小字、灰、用 › 分隔（widget/breadcrumb/blog.php 輸出在 .haru-blog 容器之外，選擇器不掛父層） */
.haru-blog-breadcrumb{font-size:12px;letter-spacing:.4px;color:#a7a5a5;padding-top:24px}
.haru-blog-breadcrumb a{color:#a7a5a5}
.haru-blog-breadcrumb a:hover{color:#815f5b;text-decoration:none}
.haru-blog-breadcrumb span{margin:0 6px}
.haru-blog-breadcrumb b{color:#a5918e;font-weight:500}

/* 分類選單：膠囊，樣式沿用分頁按鈕的框線色與主色實心 */
.haru-blog .haru-blog-menu{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0;margin:18px 0 6px}
.haru-blog .haru-blog-menu a{display:inline-block;border:1px solid #a7a5a5;border-radius:20px;padding:6px 14px;font-size:12px;color:#a5918e;white-space:nowrap}
.haru-blog .haru-blog-menu a.active{background:#a5918e;border-color:#a5918e;color:#fff}
@media (max-width:991.98px){.haru-blog .haru-blog-menu{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}}

/* 卡片：≥992 三欄（col-lg-4）、<992 行動縮圖卡；斷點與 main.css 全站唯一的 992 對齊，不另設 768 */
.haru-blog .haru-blog-grid{margin-top:34px}
.haru-blog .haru-blog-card{display:block;margin-bottom:40px}
.haru-blog .haru-blog-card .card-cover{display:block;position:relative;overflow:hidden;background:#eae6e4;padding-top:75%}
.haru-blog .haru-blog-card .card-cover img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
/* 沒有封面：同比例淡底卡，只放分類名（標題已在下方，不重複）；三欄節奏不斷 */
.haru-blog .haru-blog-card .card-cover.is-text{display:block;padding:0 0 75%;background:#eae6e4}
.haru-blog .haru-blog-card .card-cover.is-text span{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px;text-align:center;font-family:"Optima",serif;font-size:14px;letter-spacing:3px;color:#a5918e}
.haru-blog .haru-blog-card .card-cover.is-text span:before{content:"";display:block;width:26px;height:1px;background:#a5918e;opacity:.7}
.haru-blog .haru-blog-card .card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:12px;font-size:11px;letter-spacing:.6px;color:#a7a5a5}
.haru-blog .haru-blog-card .card-meta a{color:#a5918e}
.haru-blog .haru-blog-card .card-title{margin:8px 0 6px;font-size:16px;font-weight:500;line-height:1.5;letter-spacing:.5px}
.haru-blog .haru-blog-card .card-title a{color:#a5918e}
.haru-blog .haru-blog-card .card-content{font-size:13px;line-height:1.75;color:#5e5d5d;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
@media (max-width:991.98px){
  .haru-blog .haru-blog-grid{margin-top:22px}
  .haru-blog .haru-blog-card{display:grid;grid-template-columns:112px 1fr;grid-column-gap:14px;margin-bottom:26px}
  .haru-blog .haru-blog-card .card-cover{grid-row:1/4;padding-top:100%}
  .haru-blog .haru-blog-card .card-cover.is-text{padding:0 0 100%}
  .haru-blog .haru-blog-card .card-cover.is-text span{font-size:11px;letter-spacing:2px;padding:8px;gap:8px}
  .haru-blog .haru-blog-card .card-cover.is-text span:before{width:18px}
  .haru-blog .haru-blog-card .card-meta{margin-top:0}
  .haru-blog .haru-blog-card .card-title{font-size:15px;margin:4px 0}
  .haru-blog .haru-blog-card .card-content{font-size:12.5px}
  /* 第一篇放大：整寬封面 */
  .haru-blog .haru-blog-grid > div:first-child .haru-blog-card{display:block}
  .haru-blog .haru-blog-grid > div:first-child .card-cover{padding-top:66%}
  .haru-blog .haru-blog-grid > div:first-child .card-cover.is-text{padding:0 0 66%}
  .haru-blog .haru-blog-grid > div:first-child .card-meta{margin-top:12px}
}

/* 空狀態 */
.haru-blog .haru-blog-empty{max-width:420px;margin:50px auto 0;padding:44px 24px;text-align:center;border:1px dashed #a7a5a5}
.haru-blog .haru-blog-empty .empty-title{font-family:"Optima",serif;font-size:18px;color:#a5918e;margin:0 0 8px}
.haru-blog .haru-blog-empty p{font-size:12.5px;color:#a7a5a5;margin:0 0 22px}

/* 文章頁 */
.haru-blog .haru-blog-article{max-width:780px;margin:0 auto}
.haru-blog .haru-blog-hero{position:relative;overflow:hidden;background:#eae6e4;padding-top:56.25%;margin-top:26px}
.haru-blog .haru-blog-hero img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.haru-blog .haru-blog-article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:26px 0 12px;font-size:12px;color:#a7a5a5}
.haru-blog .haru-blog-article-meta .cat{border:1px solid #a7a5a5;border-radius:20px;padding:3px 10px;font-size:11px;color:#a5918e}
.haru-blog .haru-blog-article .blog-title{margin-bottom:26px}
/* 內文：15px、行高 1.95，每行約 32 字；商品頁的 12px 對長文太密 */
.haru-blog .haru-blog-content{max-width:680px;margin:0 auto;font-size:15px;line-height:1.95;color:#5e5d5d}
.haru-blog .haru-blog-content p{margin:0 0 1.35em}
.haru-blog .haru-blog-content h2{font-family:"Optima",serif;font-weight:500;font-size:20px;line-height:1.4;color:#a5918e;margin:2.2em 0 .8em;padding-left:14px;border-left:2px solid #a5918e}
.haru-blog .haru-blog-content h3{font-size:15.5px;font-weight:500;color:#815f5b;margin:1.8em 0 .6em}
.haru-blog .haru-blog-content ul,.haru-blog .haru-blog-content ol{padding-left:1.2em;margin:0 0 1.35em}
.haru-blog .haru-blog-content li{margin:.3em 0}
.haru-blog .haru-blog-content blockquote{margin:1.6em 0;padding:4px 0 4px 18px;border-left:2px solid #a5918e;color:#815f5b;font-family:"Optima",serif;font-size:16.5px;line-height:1.8}
.haru-blog .haru-blog-content blockquote p{margin:0}
.haru-blog .haru-blog-content img{display:block;max-width:100%;height:auto;margin:1.8em auto .6em}
/* 後台嵌入的 iframe（YouTube 固定 width=560）、video、table 一律不得撐破 375px 版面 */
.haru-blog .haru-blog-content iframe,.haru-blog .haru-blog-content video{max-width:100%}
.haru-blog .haru-blog-content table{display:block;max-width:100%;overflow-x:auto}
.haru-blog .haru-blog-content img + p em,.haru-blog .haru-blog-content figcaption{display:block;text-align:center;font-style:normal;font-size:12px;color:#a7a5a5;margin-top:-.2em}
.haru-blog .haru-blog-content a{border-bottom:1px solid #eae6e4}
.haru-blog .haru-blog-tags{max-width:680px;margin:36px auto 0;padding-top:20px;border-top:1px solid #eae6e4;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:#a7a5a5}
.haru-blog .haru-blog-tags a{border:1px solid #a7a5a5;border-radius:20px;padding:3px 10px;font-size:11px}
.haru-blog .haru-blog-prevnext{max-width:680px;margin:30px auto 0;display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;font-size:12px}
.haru-blog .haru-blog-prevnext a{display:block;padding:14px 0;border-top:1px solid #eae6e4;color:#5e5d5d}
.haru-blog .haru-blog-prevnext a small{display:block;color:#a7a5a5;margin-bottom:4px;font-size:11px;letter-spacing:1px}
.haru-blog .haru-blog-prevnext a.next{text-align:right}
@media (max-width:991.98px){
  .haru-blog .haru-blog-hero{margin:14px -15px 0;padding-top:75%}
  .haru-blog .haru-blog-article .blog-title{font-size:22px;margin-bottom:20px}
}