/* assets/css/components/breadcrumbs.css
   Visual breadcrumbs above article title
   Layer: comp
======================================== */

@layer comp {

  /* ラッパ：読み幅に揃えてセンター寄せ */
  .cd-breadcrumbs{
    max-width: var(--cd-read-width, 760px);
    margin: 12px auto 6px;  /* 10px 4px → すこしだけ余裕 */
    padding-inline: 0;
    font-size: 0.8rem;
    color: var(--cd-muted);
  }

  .cd-breadcrumbs__list{
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cd-breadcrumbs__item{
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .cd-breadcrumbs a{
    color: var(--cd-muted);
    text-decoration: none;
  }

  .cd-breadcrumbs a:hover{
    color: var(--cd-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .cd-breadcrumbs__item--sep{
    opacity: 0.5;
  }

  .cd-breadcrumbs__item--current span{
    color: var(--cd-fg);
    font-weight: 500;
    max-width: 18em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* スマホ：1行にまとめて末尾を…でカット */
  @media (max-width: 767px){

    .cd-breadcrumbs{
      font-size: 0.75rem;
      padding-inline: 10px;
      overflow: hidden;          /* 横スクロール防止（保険） */
    }

    /* flexやめて1本の行にする */
    .cd-breadcrumbs__list{
      display: block;            /* flex → 通常ブロック */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;   /* 行末を…でカット */
    }

    /* liをインライン化して / 区切りでつなぐ */
    .cd-breadcrumbs__item{
      display: inline;
    }

    .cd-breadcrumbs__item--sep{
      margin-inline: .25em;
    }
  }

}