/* TTC DX TYPE-B / info.css */

.info-body{
  background:var(--c-blue-soft);
  padding-top: 80px;
}

.info__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-bottom:44px;
  padding-bottom:24px;
  border-bottom:1px solid var(--c-line);
}

.info__tab{
  font-family:inherit;
  cursor:pointer;
  border:1.5px solid var(--c-line);
  background:var(--c-white);
  color:var(--c-ink-sub);
  padding:10px 24px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  transition:all .2s ease;
}

.info__tab:hover{
  border-color:var(--c-primary-2);
  color:var(--c-primary-2);
}

.info__tab.is-active{
  background:var(--c-primary);
  color:var(--c-white);
  border-color:var(--c-primary);
}

.info__list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.info__card{
  display:grid;
  grid-template-columns:130px 100px 1fr 40px;
  gap:28px;
  align-items:center;
  background:var(--c-white);
  border-radius:var(--radius-md);
  padding:22px 28px;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
  box-shadow:var(--shadow-sm);
}

.info__card:hover{
  transform:translateX(4px);
  box-shadow:var(--shadow-md);
  background:var(--c-blue-tint);
}

.info__date{
  font-family:'Outfit',sans-serif;
  font-weight:800;
  color:var(--c-primary);
  letter-spacing:-.01em;
  line-height:1;
}

.info__cat{
  display:inline-block;
  text-align:center;
  font-family:'Outfit',sans-serif;
  font-weight:700;
  letter-spacing:.08em;
  padding:6px 0;
  border-radius:4px;
  font-size:11px;
}

.info__cat--news{
  background:var(--c-primary);
  color:var(--c-white);
}

.info__cat--topic{
  background:var(--c-blue-tint);
  color:var(--c-primary-2);
  border:1px solid var(--c-primary-3);
}

.info__cat--event{
  background:#FFE792;
  color:#87651A;
}

.info__title{
  font-size:15px;
  color:var(--c-ink);
  font-weight:700;
  line-height:1.6;
}

.info__arrow{
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--c-blue-tint);
  color:var(--c-primary-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  transition:all .2s ease;
}

/* v4: ボタン色ではなく装飾色に */
.info__card:hover .info__arrow{
  background:var(--c-icon);
  color:var(--c-white);
}

@media(max-width:820px){
  /* スマホ版 info__tabs：サイズ縮小＋横スクロールでカテゴリ数が増えても1行維持。
     横方向にあふれた場合はスワイプで閲覧可能。 */
  .info__tabs{
    flex-wrap:nowrap;             /* 折り返さない */
    justify-content:flex-start;   /* 左寄せに変更（中央寄せだと先頭が見切れる場合がある） */
    gap:8px;
    margin-bottom:32px;
    padding-bottom:18px;
    /* container側のpaddingを越えて横スクロールさせるためのトリック */
    margin-left:calc(var(--gutter) * -1);
    margin-right:calc(var(--gutter) * -1);
    padding-left:var(--gutter);
    padding-right:var(--gutter);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;        /* iOS慣性スクロール */
    scroll-snap-type:x proximity;            /* タブ単位の柔らかいスナップ */
    scrollbar-width:none;                    /* Firefox：スクロールバー非表示 */
  }
  .info__tabs::-webkit-scrollbar{display:none;} /* WebKit系：スクロールバー非表示 */

  .info__tab{
    /* タブを少し縮めて1行に収まりやすくする */
    flex:0 0 auto;          /* 内容幅で固定（縮まない・伸びない） */
    padding:8px 18px;
    font-size:12px;
    scroll-snap-align:start;
  }
  /* アクティブタブが画面外にある場合、左端からの余白を確保した位置にスクロール */
  .info__tab.is-active{scroll-margin-left:var(--gutter);}

  /* スマホ版：日付・カテゴリを横並び、タイトルは下段全幅。
     カテゴリの幅は内容に合わせて広がらないようautoに固定。 */
  .info__card{
    grid-template-columns:auto auto 1fr;
    grid-template-areas:
      "date cat space"
      "title title title";
    gap:6px 12px;
    padding:18px 22px;
    padding-right:50px; /* 右上の矢印分のスペース確保 */
    align-items:center;
    position:relative;
  }
  .info__card .info__date{
    grid-area:date;
    font-size:18px;
  }
  .info__card .info__cat{
    grid-area:cat;
    /* 内容に合わせた最小幅にし、横に広がらないようjustify-self:start */
    justify-self:start;
    min-width:0;
    padding:4px 10px;
  }
  .info__card .info__title{
    grid-area:title;
    margin:0;
  }
  .info__arrow{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
  }
  /* ホバー時に矢印が中央位置を維持できるよう、transformを明示 */
  .info__card:hover{
    transform:translateX(2px); /* PC版より控えめに */
  }
}

.info__pager{
  margin-top:44px;
  display:flex;
  justify-content:center;
  gap:6px;
}

.info__pager a,
.info__pager span{
  width:40px;
  height:40px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:14px;
  background:var(--c-white);
  color:var(--c-ink);
  text-decoration:none;
  border:1px solid var(--c-line);
  transition:all .2s ease;
}

.info__pager a:hover{
  background:var(--c-blue-tint);
  color:var(--c-primary-2);
  border-color:var(--c-primary-2);
}

.info__pager .is-current span{
  background:var(--c-primary);
  color:var(--c-white);
  border-color:var(--c-primary);
}

/*------------------------------------
single（投稿ページ）専用スタイル
------------------------------------*/

/* single時のみ：背景色とコンテナ幅を上書き。
   - 背景：青系（var(--c-blue-soft)）→ 白に変更（カードを廃した分、シンプルに見せる）
   - コンテナ幅：本文の可読性を優先して 820px に絞る
   ※ .page-hero 側は common.css で全ページ共通の 820px 固定に統一済み。 */
.info-body:has(.info__single){
  background:var(--c-white);
}

.info-body:has(.info__single) > .container{
  max-width:820px;
}

/* 記事本文ラッパー：シンプル化（背景・角丸・shadow・padding を廃止）
   ※ 背景色は .info-body:has(.info__single) 側で白に切り替え済み。 */
.info__single{
  display:block;
}

/* 記事ヘッダー（日付・カテゴリラベル）
   info__single-body の直上に配置されるため、下部に余白とボーダーで本文と区切る。 */
.info__single-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 18px;
  padding-bottom:24px;
  margin-bottom:40px;
  border-bottom:1px solid var(--c-line);
}

.info__single-header .info__cat{
  min-width:72px;
  padding:6px 10px;
}

/* single専用：年と日を同サイズ・同太さ・同色に統一（archive側の強弱は維持） */
.info__single-header .info__date{
  margin-left:auto; /* カテゴリラベルとの間を伸ばして日付を右寄せ */
  font-weight:700;
  color:#9E9EA1;
}

.info__single-header .info__date small{
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
}

/* 記事タイトル（h1）：info__single-header 内、info__date の下に配置 */
.info__single-title{
  flex:1 1 100%;
  font-size:clamp(22px,3vw,32px);
  font-weight:800;
  line-height:1.5;
  color:var(--c-ink);
  margin:6px 0 0;
}

/* タグ一覧（WordPress標準タグ）：記事タイトルの下に配置 */
.info__single-tags{
  flex:1 1 100%;
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.info__single-tag a{
  display:inline-block;
  padding:4px 12px;
  background:var(--c-blue-tint);
  color:var(--c-primary-2);
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}

.info__single-tag a:hover{
  background:var(--c-primary-2);
  color:var(--c-white);
}

/* 本文ブロック（ACF 繰り返しフィールド article） */
.info__single-body{
  display:block;
}

.info__article-blocks{
  display:flex;
  flex-direction:column;
  gap:80px;
}

.info__article-block{
  display:block;
}

.info__article-title{
  font-size:clamp(18px,2.5vw,24px);
  font-weight:800;
  color:var(--c-ink);
  line-height:1.6;
  padding-left:14px;
  border-left:4px solid var(--c-primary);
  margin:0 0 36px;
}

.info__article-figure{
  margin:0 0 20px;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--c-blue-soft);
}

.info__article-img{
  width:100%;
  height:auto;
  display:block;
}

.info__article-text{
  font-size:15px;
  line-height:1.95;
  color:var(--c-ink);
}

.info__article-text > *:first-child{
  margin-top:0;
}

.info__article-text > *:last-child{
  margin-bottom:0;
}

.info__article-text p{
  margin:0 0 1.2em;
}

.info__article-text a{
  color:var(--c-primary-2);
  text-decoration:underline;
}

.info__article-text a:hover{
  color:var(--c-primary);
}

.info__article-text ul,
.info__article-text ol{
  margin:0 0 1.2em;
  padding-left:1.4em;
}

.info__article-text li{
  margin:.3em 0;
}

.info__article-text img{
  max-width:100%;
  height:auto;
  border-radius:var(--radius-sm);
}

.info__article-text h2,
.info__article-text h3,
.info__article-text h4{
  font-weight:800;
  color:var(--c-ink);
  line-height:1.5;
  margin:1.6em 0 .6em;
}

.info__article-text h2{
  font-size:18px;
}

.info__article-text h3{
  font-size:16px;
}

.info__article-text h4{
  font-size:15px;
}

/* 前後記事ナビゲーション（一覧ボタン入り） */
.info__pager--single{
  margin-top:48px;
}

.info__pager--single a:not([aria-label="前の記事"]):not([aria-label="次の記事"]){
  width:auto;
  padding:0 18px;
}

@media(max-width:820px){
  .info__article-text{
    font-size:14px;
    line-height:1.9;
  }
}

/*------------------------------------
page-hero 背景画像（お知らせ＝info系：一覧 archive.php／記事 single.php 共通）
- info.css は header.php の $ttc_is_info_context（info系カテゴリ・info系記事・タグ）で
  読み込まれるため、この上書きは archive.php と single.php の両方に同じ画像で適用される。
- ※CSSファイルでは PHP（get_template_directory_uri 等）は使えないため、
  画像URLは info.css の位置（/assets/css/）からの相対パスで指定する。
  /assets/images/info/hero.jpg → ../images/info/hero.jpg
- single.php は .page-hero--compact（高さ控えめ）だが ::before は共通で適用される。
- 白いかぶせ（.page-hero::after）と文字（.page-hero > .container）は common.css 側のまま有効。
------------------------------------*/
.page-hero::before{
  background-image:
    url("../images/info/hero.webp"),
    linear-gradient(135deg,var(--c-placeholder-1),var(--c-placeholder-2));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}