/*!
 * toppage-f-categories.css - 「カテゴリーから探す」のカテゴリーカード（④の範囲）
 *
 * 担当ジョブ: ④カテゴリーから探すカルーセル実装
 * 配置先:     cocoon-child-master/assets/css/toppage-f-categories.css
 * 値の出典:   toppage-f-prototype/static/assets/css/toppage-f.css のカテゴリーカード部分。
 *             原本 reference/DirectionF.dc.html の寸法をそのまま踏襲しており、
 *             色・サイズは1つも変えていない。
 *
 * カルーセルの枠・矢印・ドットは toppage-f-carousel.css（③が用意、③④で共用）にある。
 * このファイルでは作り直さない。
 * カード幅とgapの変数は①の toppage-f-base.css。ここでは変数を参照するだけで、
 * ブレークポイントごとの px を書かない（PC6枚／タブレット4枚／スマホ2枚は①が決める）。
 */

/* ------------------------------------------------------------------ *
 * カテゴリーカード
 * ------------------------------------------------------------------ */
.f-category-card {
  width: var(--f-category-card-w);
  flex-shrink: 0;
  padding: 14px 10px;
}
.f-category-card__tape { width: 38px; top: -10px; }

/* 色チップ。装飾なので PHP 側で aria-hidden を付けている。
   色は f-tape-* のトークンをインラインで指定する（カードごとに変わるため）。 */
.f-category-card__chip { width: 26px; height: 26px; border-radius: 6px; }
/* テープを貼った札だけ、テープと重ならないよう少し下げる。 */
.f-category-card__chip--offset { margin-top: 4px; }

.f-category-card__name { font-size: 12px; font-weight: 700; margin-top: 10px; line-height: 1.4; }
.f-category-card__more { font-size: 10.5px; color: var(--f-ink-muted); margin-top: 6px; }

/* テープの左右位置。カテゴリーカードは記事カードより幅が狭いため、
   ①の共通指定（left/right 12px・中央 -28px）より内側へ寄せる。
   テープの幅が 38px なので、中央合わせは -19px。 */
.f-category-card .f-tape--pos-left   { left: 8px; }
.f-category-card .f-tape--pos-right  { right: 8px; }
.f-category-card .f-tape--pos-center { left: 50%; margin-left: -19px; }

/* ------------------------------------------------------------------ *
 * 1件も出せないとき
 *
 * 空の枠を残さない（②-b の「準備中」カード・③の空表示と同じ扱い）。
 * カルーセルにしないので、幅はメインカラムいっぱいにする。
 * ------------------------------------------------------------------ */
.f-categories__empty {
  padding: 18px 16px;
  width: 100%;
}
.f-categories__empty p {
  font-size: 13px;
  color: var(--f-ink-sub);
  line-height: 1.7;
}