/* ============================================================
 *  PICKUP 特集バナー（.pickup / .pickup-*）
 *
 *  使う場所（見た目は共通。中身の出し方は inc/pickup.php を参照）:
 *    - カテゴリーページ … 記事一覧の下・紹介文ブロックの上。クイック編集で選んだ最大3件
 *    - TOP             … 新着記事の下。TOP設定ページ（top-settings）の ACF で選んだ1件
 *
 *  色は --cat-current（カテゴリー色）。
 *    カテゴリーページは main[data-cat] 経由（category.css）、
 *    TOP は inc/pickup.php が記事のカテゴリーから banner に直接指定する。
 *  読み込みは functions.php（カテゴリーページ / TOP）。
 * ============================================================ */

/* ── PICKUP 特集バナー（記事一覧の下・紹介文ブロックの上） ─────────────
   記事は投稿一覧のクイック編集で選ぶ（functions.php の「PICKUP 特集」）。
   そのカテゴリ＋子カテゴリで最大3件を縦に並べる。

   デザインの「特集バナー」（devlop_category/yomifami_*_category.html の .feature-banner）に準拠：
     左に画像 220px ＋ 右にカテゴリー色のグラデーション面。
     面の上に「PICKUP 特集」のピル → タイトル → 説明文 → 「特集を読む」ボタン。
   色はデザインの --cat-dark / --cat-accent に相当する --hero-bg / --cat-current を使う。 */
.pickup { margin: 60px 0 0; }

.pickup-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 440px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cat-current);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.pickup-banner:last-child { margin-bottom: 0; }


/* 画像は枠にぴったり合わせる。
   16:9 で高さを決めると本文側（padding 26px + ピル/タイトル/説明3行/ボタン）より低くなり、
   上下にグラデーションの帯が残るため、行の高さいっぱいに伸ばして object-fit で切り抜く。
   （align-self を指定しない＝grid 既定の stretch。本文側の padding はそのまま） */
.pickup-img {
  position: relative;
  background: rgba(0, 0, 0, .16);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pickup-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pickup-img-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .85);
}

.pickup-body {
  position: relative;
  z-index: 1;
  padding: 20px 30px;
}

.pickup-tag {
  display: inline-block;
  margin-bottom: 13px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}

/* タイトルと説明文は合わせて4行に収める（タイトル1行なら説明3行／タイトル4行なら説明なし）。
   行数は CSS では数えられないので、振り分けは common/js/pickup.js が
   -webkit-line-clamp を書き換えて行う。ここの値は **JS が動かなかったとき**の保険で、
   タイトル2行＋説明2行＝4行になるようにしてある。 */
.pickup-title {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .02em;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.pickup-desc {
  margin: 0 0 10px;
  max-width: 540px;
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255, 255, 255, .88);
  /* 行数は JS が決める（タイトルと合わせて4行）。ここの2行は JS が動かなかったとき用 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.pickup-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--cat-current);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: gap .2s, transform .2s;
}
.pickup-cta::after { content: '→'; }
.pickup-banner:hover .pickup-cta { gap: 12px; transform: translateY(-1px); }

@media (max-width: 768px) {
  /* SP は縦に積まず、1枚ずつのスライダーにする（common/js/pickup.js が slick で初期化）。
     バナーは画面幅いっぱいの1枚だけを見せる（次のバナーは覗かせない）。
     JS が動かなかった場合は、ただの縦積みとして成立する */
  .pickup-banner {
    grid-template-columns: 1fr;   /* バナー自体は縦積み（画像の上・テキスト下） */
    margin-bottom: 16px;
  }
  .pickup.slick-initialized .pickup-banner {
    margin-bottom: 0;
    /* slick はスライドに display:inline-block をインラインで付けるので戻す */
    display: grid !important;
  }

  /* スライド同士の隙間。スライドに左右 6px の余白を持たせ、その分だけ list を外に広げる。
     止まっているときはバナーが画面幅いっぱい（余白は表示枠の外に出る）で、
     送っている間だけ 12px の隙間ができる＝バナーがつながって見えない */
  .pickup.slick-initialized .slick-list  { margin: 0 -6px; }
  .pickup.slick-initialized .slick-slide { padding: 0 6px; }

  /* ドット */
  .pickup .slick-dots { position: static; margin-top: 12px; line-height: 0; }
  .pickup .slick-dots li,
  .pickup .slick-dots li button { width: 8px; height: 8px; padding: 0; }
  .pickup .slick-dots li { margin: 0 5px; }
  .pickup .slick-dots li button::before { display: none; }
  .pickup .slick-dots li button { border-radius: 50%; background: var(--line); }
  .pickup .slick-dots li.slick-active button { background: var(--cat-current, var(--brand-pink)); }
  /* 横並びのときは伸ばす相手がいないので、画像の高さは 16:9 で決める */
  .pickup-img { width: 100%; aspect-ratio: 16 / 9; }
  .pickup-body { padding: 18px 18px 20px; }
  .pickup-tag { font-size: 9.5px; margin-bottom: 11px; padding: 6px 12px;}
  .pickup-title { font-size: 17px; margin-bottom: 8px; }
  .pickup-desc { font-size: 12.5px; line-height: 1.8; margin-bottom: 14px; -webkit-line-clamp: 2; line-clamp: 2; }
  .pickup-cta { font-size: 11.5px; padding: 9px 18px; }
}