/*!
 * toppage-f-tools.css - べんりツールバナー（⑤-a の範囲）
 *
 * 担当ジョブ: ⑤-a べんりツールバナー実装（CLD-243 の前半）
 * 配置先:     cocoon-child-master/assets/css/toppage-f-tools.css
 * 値の出典:   toppage-f-prototype/static/assets/css/toppage-f.css の .f-tools*。
 *             原本 reference/DirectionF.dc.html の寸法をそのまま踏襲しており、
 *             色・サイズは1つも変えていない。
 *
 * カード・テープ・読み上げ専用テキストは①の toppage-f-base.css にある。
 * ここでは作り直さず、バナー固有の位置と寸法だけを書く。
 *
 * ⑤-aで先行試作から変えたところ（見た目は変わらない）
 *   1. .f-tools の margin-top: 18px を消した。
 *      セクション間の余白は①の「.f-main > .f-block + .f-block { margin-top: 26px }」が付ける。
 *      先行試作はセクションに分かれていなかったため自前で持っていた。
 *   2. 一覧を ul/li にしたぶん、.f-tools__item（li）と .f-tools__link（a）に分けた。
 *      flex の指定は先行試作の .f-tools__item と同じ値をそのまま .f-tools__link へ移してある。
 *   3. スマホ幅でリンクの高さを 44px 確保した（①がカルーセルの矢印で決めたタップ目標に合わせる）。
 */

/* ------------------------------------------------------------------ *
 * バナーのカード
 *
 * 「カテゴリーから探す」の一覧タイル（.f-category-card）とは別枠。
 * カルーセルにもグリッドにも入れない（CLD-236 の変更禁止事項）。
 * ------------------------------------------------------------------ */
.f-tools {
  padding: 16px 20px;
  transform: rotate(-0.4deg);
}

/* テープはカードの左上へ貼る。左右位置をここで決めるので、
   PHP 側では f-tape--pos-* を付けずに呼んでいる。 */
.f-tools__tape { width: 56px; left: 18px; top: -10px; }

/* ------------------------------------------------------------------ *
 * 見出しの行
 * ------------------------------------------------------------------ */
.f-tools__head { display: flex; align-items: center; justify-content: space-between; }
.f-tools__head-left { display: flex; align-items: center; gap: 14px; }

/* 黄色い四角の飾り。PHP 側で aria-hidden を付けている。 */
.f-tools__icon { width: 38px; height: 38px; border-radius: 8px; background: var(--f-tape-yellow); flex-shrink: 0; }

.f-tools__title { font-size: 16px; transform: rotate(-1deg); }
.f-tools__lead { font-size: 11.5px; color: var(--f-ink-sub); margin-top: 4px; line-height: 1.6; }
.f-tools__more { font-size: 13px; color: var(--f-red); white-space: nowrap; margin-left: 14px; }
.f-tools__more:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * ツールの一覧
 *
 * ul の余白と list-style は①の共通CSSが .f-root 配下でまとめて消しているため、
 * ここでは並べ方だけを書く。
 * ------------------------------------------------------------------ */
.f-tools__list {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--f-hairline);
}
.f-tools__link { display: flex; align-items: center; gap: 6px; }
.f-tools__num { font-size: 14px; color: var(--f-red); }
.f-tools__name { font-size: 11.5px; line-height: 1.5; }
/* ホバー時の下線は①の「.f-root a:hover .f-card-title」が付ける
   （ツール名に f-card-title を付けてある）。ここでは指定しない。 */

/* ------------------------------------------------------------------ *
 * 1本も出せないとき
 *
 * 空の一覧を残さない（②-b の「準備中」カード・③④の空表示と同じ扱い）。
 * ------------------------------------------------------------------ */
.f-tools__empty {
  font-size: 12px;
  color: var(--f-ink-sub);
  line-height: 1.7;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--f-hairline);
}

/* ================================================================== *
 * レスポンシブ（ブレークポイントは①が決めた 768 / 1024）
 * ================================================================== */

/* --- スマートフォン（〜768px） -------------------------------------
   横並びの見出しを縦積みにし、傾きを外す（先行試作と同じ）。
   リンクは指で押せる高さを確保する。 */
@media (max-width: 768px) {
  .f-tools { padding: 14px 16px; transform: none; }
  .f-tools__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .f-tools__more { margin-left: 0; }
  .f-tools__list { gap: 12px 16px; }
  /* タップ目標 44px。見た目の文字サイズは変えず、当たり判定だけ広げる。 */
  .f-tools__link { min-height: 44px; }
}