/* ============================================================
   /free-tools/ の可視パンくず
   ------------------------------------------------------------
   公開ツールは検索から直接1本目に着地する導線なので、
   「他にもツールがある」ことがその場で見えないと一覧へ戻れない。
   JSON-LD の BreadcrumbList は各ページに入っていたが、
   これは検索結果の表示用で、人が押せる導線にはならない。
   （2026-08-21・軸3の回遊対策）

   記事側の .breadcrumb-nav（articles/css/local.css）と同じ役割だが、
   あちらは中央寄せ・Font Awesome の山括弧を使う古い実装で、
   ds トークンで組んだ /free-tools/ の見出しと左端が揃わない。
   ここでは ds-container のコンテンツ列に載せて左端を揃える。

   置き場所はヒーローの「上」。記事はヒーロー画像の下に敷いているが、
   ツールのヒーローは見出しと本体が続けて読まれる並びなので、
   その間に挟むと本文が切れて見える。
   ============================================================ */

.ft-crumbs {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--line);
}

.ft-crumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  /* ol の既定の padding-inline-start（40px）を消す。
     残すと ds-container のコンテンツ列より右に寄って、見出しと左端が揃わない。 */
  padding-inline: 0;
  padding-block: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.ft-crumbs__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-muted);
}

/* 区切りは擬似要素で置く。文字として書くと読み上げが「大なり」を拾う。 */
.ft-crumbs__list li:not(:last-child)::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid var(--line-strong);
  border-bottom: 1.5px solid var(--line-strong);
  transform: rotate(-45deg);
  margin-inline-start: var(--space-1);
}

.ft-crumbs__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-strong);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ft-crumbs__list a:hover,
.ft-crumbs__list a:focus-visible {
  color: var(--sky-600);
  text-decoration: underline;
}

.ft-crumbs__list .is-current {
  color: var(--ink-muted);
  font-weight: 500;
}

/* 現在地は長くなりがち。狭い画面では1行に収めて省略する
   （折り返すとパンくずだけで2行を占める）。 */
@media (max-width: 30rem) {
  .ft-crumbs__list {
    flex-wrap: nowrap;
  }
  .ft-crumbs__list .is-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}