/* =========================================================
   blog-archive.css (final, fixed)
   依存：theme-frames.css（デザイントークン）, base.css（tcard骨格）
   目的：ブログ一覧（背景／タブ／グリッド／“ブログ柄”tcard）
========================================================= */

/* ===== 0) ページ背景（data-page判定＆固定/非固定は変数に委譲） ===== */
body[data-page="blog"]{
  background: var(--bg-blog) center top / cover repeat;
  background-attachment: var(--bg-attach);
}

/* ===== 1) ヘッダ（タイトル＋リード） ===== */
.blog-archive .ba-hero.wrapper{
  margin: clamp(22px,3.2vw,34px) auto clamp(14px,2.4vw,20px);
  text-align: center;
}
.blog-archive .ba-title{
  margin: 0 0 6px;
  font-size: clamp(28px, 4.4vw, 46px);
}
.blog-archive .ba-lead{
  margin: 0;
  opacity: .9;
}

/* ===== 2) カテゴリタブ ===== */
.blog-archive .ba-tabs.wrapper{
  margin: clamp(12px,2.6vw,20px) auto 0;
}
.blog-archive .ba-tablist{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 0;
  list-style: none;
  justify-content: center;
}
.blog-archive .ba-tab{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .5em .9em;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.06);
  color: #333;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.blog-archive .ba-tab.is-active{
  background: #432445;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.blog-archive .ba-count{ opacity:.8; font-size:.85em; }

/* ===== 3) グリッド（3→2→1 列） ===== */
.blog-archive .ba-grid.wrapper{
  margin: clamp(22px,3.2vw,34px) auto 0;
}
.blog-archive .ba-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 34px);
  justify-items: center;
  padding-bottom: 5rem;
}
@media (max-width: 960px){
  .blog-archive .ba-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .blog-archive .ba-cards{ grid-template-columns: 1fr; }
}

/* =========================================================
   4) tcard（“ブログ柄”チューニング）
   ※ 骨格は base.css。ここでは背景柄・窓/本文の位置・色味を調整
========================================================= */

.blog-archive .ba-cards .tcard {
  width: clamp(280px, 30vw, 360px);
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);

  /* ブログ柄トークン（theme-frames.css） */
  background: var(--tcard-blog-bg) center / contain no-repeat;

  /* 窓/本文の位置・サイズ（ブログ柄に最適化） */
  --t-thumb-top: 13%;
  --t-thumb-left: 6%;
  --t-thumb-w: 88%;
  --t-thumb-h: 37%;

  /* 本文パネルを少し内側に寄せる（黄色線の内側） */
  --t-body-l: 10%;       /* 左余白 */
  --t-body-r: 10%;       /* 右余白 */
  --t-body-b: 14%;       /* 下余白 */

  /* ✅ 被り解消：サムネ下端に追随（将来変更にも強い） */
  --t-body-top: calc(var(--t-thumb-top) + var(--t-thumb-h) + 4%);
}

/* クリック範囲はカード全面（本文に干渉させない） */
.blog-archive .ba-cards .tcard__link{
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}

/* 上部日付は未使用（meta側に集約） */
.blog-archive .ba-cards .tcard__date{ display: none; }

/* サムネイル（背景の窓にフィット） */
.blog-archive .ba-cards .tcard__thumb{
  position: absolute;
  top: var(--t-thumb-top);
  left: var(--t-thumb-left);
  width: var(--t-thumb-w);
  height: var(--t-thumb-h);
  overflow: hidden;
  border-radius: 8px;
}
.blog-archive .ba-cards .tcard__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.98) contrast(1.05);
  transition: transform .35s ease, filter .35s ease;
}
@media (hover: hover){
  .blog-archive .ba-cards .tcard:hover .tcard__img{
    transform: scale(1.03);
    filter: brightness(1.05) contrast(1.12);
  }
}

/* 本文（重ならない絶対配置。上下左右を変数で制御） */
.blog-archive .ba-cards .tcard__body{
  position: absolute;
  top: var(--t-body-top);     /* ← サムネと重ならない */
  left: var(--t-body-l);
  right: var(--t-body-r);
  bottom: var(--t-body-b);

  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;

  background: transparent;
  border: none;
  box-shadow: none;
  isolation: isolate;
}

/* タイトル／本文 */
.blog-archive .ba-cards .tcard__title{
  margin: 0;
  font-family: "Yusei Magic", sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  color: #0ff;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-archive .ba-cards .tcard__desc{
  margin: 0;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.65;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* メタ（本文下） */
.blog-archive .ba-cards .tcard__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 2px 0 0;
}
.blog-archive .ba-cards .t-badge{
  display: inline-block;
  padding: .25em .6em;
  border-radius: 999px;
  background: #efe7f0;
  color: #fff;
  font-size: .8rem;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.06);
}

/* 「続きを読む」ボタン（中央寄せ） */
.blog-archive .ba-cards .tcard__btn{
  justify-self: center;
  margin-top: .6em;
  padding: 10px 20px;
  border-radius: 999px;
  background: #432445;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 6px 12px rgba(0,0,0,.18);
  transition: transform .18s ease, filter .18s ease;
}
@media (hover: hover){
  .blog-archive .ba-cards .tcard:hover .tcard__btn{
    transform: translateY(-1px);
    filter: brightness(1.06);
  }
}

/* ===== 5) ページャ＋さらに見る ===== */
.blog-archive .ba-pager{
  margin: clamp(18px,3vw,28px) 0 0;
  text-align: center;
}
.blog-archive .ba-loadmore{ margin-top: 10px; }
.blog-archive .btn-more{
  display: inline-block;
  padding: 10px 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.6);
  color: inherit;
  text-decoration: none;
  backdrop-filter: blur(3px);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
@media (hover: hover){
  .blog-archive .btn-more:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.65);
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
  }
}

/* ===== 6) モバイル最適化 ===== */
@media (max-width: 640px){
  /* サムネを少し背高に → 本文トップは自動で追随（calcで連動） */
  .blog-archive .ba-cards .tcard{
    --t-thumb-top: 12%;
    --t-thumb-h: 42%;
    --t-body-top: calc(var(--t-thumb-top) + var(--t-thumb-h) + 4%);
    --t-body-b: 10%;
  }
  .blog-archive .ba-cards .tcard__body{ gap: 6px; }
}

/* ===== 7) 表示方針の統一（上部日付は未使用） ===== */
.blog-archive .ba-cards .tcard__date{ display: none; }
/* ===========================
   微調整：文字サイズとボタン
   - 日付: 全体で少し小さく
   - モバイル: ボタン非表示＋タイトル/本文を小さめに
=========================== */

/* 日付（本文内メタ）のサイズをやや小さく */
.blog-archive .ba-cards .tcard__meta--date,
.blog-archive .ba-cards .tcard__meta--date time{
  font-size: 0.85rem;     /* 既定より小さめ */
  line-height: 1.4;
  opacity: .9;
}

/* モバイル（<=640px）での文字縮小＆ボタン非表示 */
@media (max-width: 640px){
  /* 「続きを読む」ボタンを消す */
  .blog-archive .ba-cards .tcard__btn{ display: none !important; }

  /* タイトルとキャプションをひとまわり縮小 */
  .blog-archive .ba-cards .tcard__title{
    font-size: clamp(15px, 4vw, 18px);
    line-height: 1.28;
  }
  .blog-archive .ba-cards .tcard__desc{
    font-size: clamp(12px, 3.5vw, 14px);
    line-height: 1.6;
    -webkit-line-clamp: 2;  /* 長文でもはみ出さない */
  }

  /* 日付はさらに小さく */
  .blog-archive .ba-cards .tcard__meta--date,
  .blog-archive .ba-cards .tcard__meta--date time{
    font-size: 12px;
    letter-spacing: .01em;
  }
}
/* ===== Blog: モバイルでカテゴリを横スクロールのチップ化 ===== */

/* ベース：並び＆見た目はそのまま */
.blog-archive .ba-tabs.wrapper{
  margin: clamp(10px,2.6vw,18px) auto 0;
}

/* PC/タブレットは従来通りの折返し */
.blog-archive .ba-tablist{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 0;
  list-style: none;
  justify-content: center;
}

/* スマホ（<= 720px）は横スクロール化 */
@media (max-width: 720px){
  .blog-archive .ba-tablist{
    flex-wrap: nowrap;               /* 折り返さない */
    justify-content: flex-start;     /* 左寄せ */
    gap: 10px;
    overflow-x: auto;                /* 横スクロール */
    overflow-y: hidden;
    white-space: nowrap;             /* チップを1行に */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;   /* ほどよいスナップ */
    padding: 6px 12px;               /* 画面端に余白 */
    margin-inline: -12px;            /* wrapperの内側に広げる */
    /* 両端にフェードのマスク（対応ブラウザで視覚ヒント） */
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }

  .blog-archive .ba-tablist > li{
    scroll-snap-align: start;        /* チップ単位で止まる */
    flex: 0 0 auto;                  /* 幅を内容に合わせる */
  }

  .blog-archive .ba-tab{
    font-size: 14px;                 /* 文字やや小さめ */
    padding: 8px 12px;               /* タップしやすさは維持 */
    border-radius: 999px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(0,0,0,.06);
    display: inline-flex;
    align-items: center;
    gap: .45em;
  }

  /* アクティブの視認性はそのまま強め */
  .blog-archive .ba-tab.is-active{
    background: #432445;
    color: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,.12);
  }

  /* 件数バッジを小粒にして詰める */
  .blog-archive .ba-count{
    font-size: .82em;
    opacity: .85;
  }
}

/* さらに狭い端末（<= 360px）はもう少し締める */
@media (max-width: 360px){
  .blog-archive .ba-tab{
    font-size: 13px;
    padding: 7px 10px;
  }
}