/* MV */
.mv--topix {
  background: url("https://medicine.cosmos-ok.com/wp-content/uploads/2025/09/mv_topix_sp.jpg")
              center center / cover no-repeat;
}
/* トピックスページ専用 MV（PC用画像） */
@media (min-width: 700px) {
  .mv--topix {
    background: url("https://medicine.cosmos-ok.com/wp-content/uploads/2025/09/mv_topix_pc.jpg")
                center center / cover no-repeat;
  }
}

/* ================================
   TOPIX 共通
================================ */

.archive-topix__title {
	text-align: center;
}

/* 本文先頭に余白 */
body.single-topix main > *:first-child,
body.single-topix main > .wp-block-post-title:first-child {
  margin-top: clamp(16px, 3vw, 24px);
}

/* アンカージャンプ対策 */
body.single-topix :where(h1,h2,h3,h4,h5,h6)[id] {
  scroll-margin-top: calc(var(--header-h-pc, 80px) + 12px);
}
@media (max-width: 767.98px) {
  body.single-topix :where(h1,h2,h3,h4,h5,h6)[id] {
    scroll-margin-top: calc(var(--header-h-sp, 60px) + 12px);
  }
}


/* ================================
   トピックス一覧（アーカイブ）
================================ */

/* 記事タイトル */
.archive-topix__ttl {
	font-family: var(--wp--preset--font-family--custom-p);
  font-size: 16px;   /* デフォはスマホ用 */
  line-height: 1.5;
  font-weight: 500;
}
@media (min-width: 768px) {
  .archive-topix__ttl {
    font-size: 18px; /* PC用 */
  }
}

/* 抜粋 */
.archive-topix__excerpt {
  font-size: 14px;   /* PC用 */
  line-height: 1.6;
	color: #666;   
}
@media (max-width: 767.98px) {
  .archive-topix__excerpt {
    display: none;   /* スマホでは非表示 */
  }
}

/* 日付のフォントサイズ */
.archive-topix__date {
  font-size: 12px;   /* デフォはスマホ用 */
  color: #666;       /* 読みやすいグレー推奨 */
}

@media (min-width: 768px) {
  .archive-topix__date {
    font-size: 14px; /* PC用 */
  }
}

/* 日付アイコン（時計） */
.archive-topix__date::before {
  font-family: 'icomoon';
  content: "\e900"; /* IcoMoonで時計に割り当てたコード */
  margin-right: 5px;
  font-size: 1em;
  display: inline-block;
}


/* ================================
   グリッド → flexレイアウトに変更
================================ */
.archive-topix__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: clamp(16px, 4vw, 24px) 5%;
  list-style: none;
  margin: 0;
}
.archive-topix__grid > li {
  margin: 0 !important;
  padding: 0;
  display: flex;
  align-items: stretch;
  width: calc(50% - 8px); /* SP：2列 */
}
/* ================================
   一覧レイアウト（flex）：SP=2列／PC=3列
   ・列間（横）は 16px 固定
   ・行間（縦）は SP:20px / PC:24px
================================ */
.archive-topix__grid{
  display: flex;
  flex-wrap: wrap;
  row-gap: 30px;             /* 行（縦）間隔：SP */
  padding: clamp(16px, 4vw, 24px) 5%;
  list-style: none;
  margin: 0;
}

/* 各カード（li）幅：SP は 2列（= 1行にギャップ1つ=16px） */
.archive-topix__grid > li{
  margin: 0 !important;
  padding: 0;
  display: flex;
  align-items: stretch;
  width: calc((100% - 16px) / 2);
}

@media (min-width: 1024px){
  .archive-topix__grid{
    row-gap: 50px;           /* 行（縦）間隔：PCで少し広め */
    padding-left: 10px;
    padding-right: 10px;
    max-width: 1350px;
    margin: 0 auto;
  }
  /* PCは3列（= 1行にギャップ2つ=32px） */
  .archive-topix__grid > li{
    width: calc((100% - 32px) / 3);
  }
}


/* カード */
.archive-topix__card {
  background: var(--wp--preset--color--custom-bg, #fff);
  border: 1px solid #e6ecf5;
  border-radius: 4px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  width: 100%;
  height: auto;
  text-align: left;

}
.archive-topix__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* サムネ（横長16:9）＋バッジ重ね用のラッパー */
.archive-topix__media { position: relative; }

.archive-topix__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
  margin: 0;
}
.archive-topix__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.archive-topix__card:hover .archive-topix__thumb img {
  transform: scale(1.05);
}

.archive-topix__body {
	margin: 0;
	padding: 10px;
}

/* タイトル・抜粋・日付を強制的に左寄せ */
.archive-topix__ttl,
.archive-topix__excerpt,
.archive-topix__date {
  text-align: left;
  margin-top: 6px;   /* 上余白を小さく */
  margin-bottom: 6px; /* 下余白を小さく */
}

/* 先頭のタイトルだけ少し余裕を持たせる */
.archive-topix__ttl {
  margin-top: 0;   /* 最初は0に */
}

/* カテゴリ：サムネ左上に重ねる */
/* カテゴリリスト（複数対応） */
.archive-topix__cat {
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 !important;
}

/* 各カテゴリ pill */
.archive-topix__cat a {
  display: inline-flex;       /* アイコン＋文字を横並び */
  align-items: center;        /* 縦中央揃え */
  background: var(--wp--preset--color--custom-h-3);
  color: #fff;
  padding: 5px 9px 5px 7px;   /* 左余白少し広め（アイコン用） */
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

/* 各リンク内のアイコン */
.archive-topix__cat a::before {
  font-family: 'icomoon';
  content: "\e935";   /* タグアイコン */
  font-size: 1em;
  margin-right: 4px;
}

/* ================================
   スマホ時（〜768px）：抜粋を非表示
================================ */
@media (max-width: 767.98px) {
  .archive-topix__excerpt {
    display: none; /* スマホでは抜粋を隠す */
  }
}

/* ================================
   トピックス一覧 ページネーション
================================ */
.archive-topix .wp-block-query-pagination{
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 20px;
}

.archive-topix .wp-block-query-pagination .page-numbers{
  display: inline-flex;
  min-width: 36px; height: 36px;
  align-items: center; justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 6px;
  text-decoration: none;
}

.archive-topix .wp-block-query-pagination .page-numbers.current{
  background: var(--wp--preset--gradient--blue-gradient, linear-gradient(135deg,#5bc0de 0%,#004aad 100%));
  color: #fff;
  border-color: transparent;
}

.archive-topix .wp-block-query-pagination .page-numbers:hover{
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.wp-container-core-query-pagination-is-layout-ecd33c62 {
  margin-bottom: 90px;	
}

/* ===== TOPIX：カテゴリー切替タブ（アーカイブ/カテゴリ共通で強制適用） ===== */
.post-type-archive-topix .topix-category-tabs,
.tax-topix_category .topix-category-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: clamp(12px, 2.5vw, 24px) auto;
  padding: 0 5%;
  max-width: 1100px;
}

.post-type-archive-topix .topix-category-tabs .tab,
.tax-topix_category .topix-category-tabs .tab {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 999px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.post-type-archive-topix .topix-category-tabs .tab:hover,
.tax-topix_category .topix-category-tabs .tab:hover {
  background: #f0f0f0;
}

.post-type-archive-topix .topix-category-tabs .tab.active,
.tax-topix_category .topix-category-tabs .tab.active {
  background: linear-gradient(135deg, #5bc0de 0%, #004aad 100%);
  color: #fff;
  border-color: #004aad;
}