/* ============================================================
   css/home_pickup.css — トップページ おすすめ記事帯（管理者選定）
     ・admin_kanri_settings/home_pickup.php で登録した記事の
       16:9 サムネイルを横並びで表示（リンクは各記事ページ）
     ・表示が溢れたときだけ左右ボタンでスライド（JSが判定）。
       モバイルは矢印なしのスワイプ操作
     ・デザイン規約: 角丸0・影なし（CLAUDE.md）
   ============================================================ */

.hm-pickup { margin: 0 0 16px; }

/* 見出し（クエスト帯の .v5-quest-lead と同形の帯・高さ38px。
   色はこちらが青系（2026-09-06）、クエスト帯は赤（--accent）で区別する */
.hm-pk-lead {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--text, #1a1c24);   /* 全辺1.5px（下線も自前で持つ。タイル上枠に頼ると画像間の隙間で線が途切れる） */
  background: #2563eb;   /* 青系（サイト共通の青 #2563eb） */
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
}

.hm-pk-wrap { position: relative; }

/* サムネイルの軌道（横スクロール・スクロールバー非表示） */
.hm-pk-track {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hm-pk-track::-webkit-scrollbar { display: none; }

/* 1タイル＝16:9 固定。
   PC はコンテナ幅から間隔（4px×4）を引いた1/5幅＝常にピッタリ5枚並ぶ。
   枠線は規約どおり黒系1.5px・box-sizing で枠込みの幅にする */
.hm-pk-item {
  flex: 0 0 calc((100% - 16px) / 5);
  aspect-ratio: 16 / 9;
  scroll-snap-align: start;
  display: block;
  overflow: hidden;
  background: #eceef2;   /* 読み込み中・NO IMAGE の下地（背景色の差は規約上OK） */
  min-width: 0;
  border: 1.5px solid var(--text, #1a1c24);
  border-top: none;   /* 上の線はヘッダーの下枠が担う（密着時に1.5px×2＝3px線になるのを防止） */
  box-sizing: border-box;
}
.hm-pk-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* サムネイルが無い記事：プレースホルダ背景＋記事タイトル文字 */
.hm-pk-noimg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  text-align: center;
}
.hm-pk-noimg b {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #8a90a0;
}
.hm-pk-noimg i {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text, #1a1c24);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 左右ボタン（溢れているときだけ JS が表示する）── */
.hm-pk-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}
.hm-pk-arrow:hover { background: rgba(0, 0, 0, .75); }
.hm-pk-arrow[hidden] { display: none; }
.hm-pk-arrow:disabled { opacity: .25; cursor: default; }
.hm-pk-prev { left: 0; }
.hm-pk-next { right: 0; }

/* モバイル：矢印は出さずスワイプ操作。タイルは少し小さく */
@media (max-width: 640px) {
  .hm-pk-arrow { display: none !important; }
  .hm-pk-item { flex-basis: 168px; }
}

/* ── PC：サイドバー移設モード（config HOME_PICKUP_SIDEBAR_PC=true → main.hm--pk-side）──
   901px以上では全幅帯（.hm-pickup--top）と「カテゴリで絞り込み」（.hm-mod-cats）を隠し、
   左サイドバー内のサイドバー版（.hm-pickup--side・縦積み）を代わりに出す。
   900px以下（モバイル）はこの設定に関係なく従来どおり（全幅帯＋カテゴリ絞り込み）。
   config を false に戻すと main に hm--pk-side が付かず、サイドバー版も出力されない＝完全に元どおり */
.hm-pickup--side { display: none; }
@media (min-width: 901px) {
  .hm--pk-side .hm-pickup--top { display: none; }
  .hm--pk-side .hm-mod-cats { display: none; }
  .hm--pk-side .hm-pickup--side { display: block; margin: 0 0 10px; }   /* 下マージンは他のサイドモジュール（.hm-mod）と同じ10px */
}
/* サイドバー版：見出しは他のサイドモジュール（.hm-mod-h）と同じ黒。
   見出しの下の要素全体（.hm-pk-list）を黒枠で囲い、その内側に余白を取って
   サムネイルを一回り小さく縦に積む。各タイルは全辺 1.5px の枠を自前で持つ。
   枠の上辺は見出しの下枠と重なるため省略（1.5px×2 の二重線を防ぐ） */
.hm-pickup--side .hm-pk-lead { background: var(--text, #1a1c24); }
.hm-pickup--side .hm-pk-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px;   /* 左右は上下より広め（画像まわりの余白を大きく） */
  border: 1.5px solid var(--text, #1a1c24);
  border-top: none;
  background: var(--bg2, #fff);
}
.hm-pickup--side .hm-pk-item { flex: 0 0 auto; width: 100%; border-top: 1.5px solid var(--text, #1a1c24); }