/* assets/css/components/rail.css
   Horizontal rail blocks（横スクロールのカード列）
   依存: card.css（.c-card） / base.css のトークン
===================================================== */

@layer comp {

  .block-rail{
    margin: 28px 0 24px;
  }

  .rail__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
  }

  .rail__title{
    margin: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 700;
  }

  .rail__more{
    font-size: .95rem;
    color: var(--cd-accent);
    text-decoration: none;
  }

  .rail__more:hover{
    text-decoration: underline;
  }

  /* トラック本体：横スクロール＋scroll-snap */
  .rail__track{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 6px;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-y;
  }

  .rail__track > .c-card{
    width: auto;
    scroll-snap-align: start;
  }

  /* 画面幅に応じてカード幅を広げる */
  @media (min-width: 834px){
    .rail__track{
      grid-auto-columns: minmax(280px, 1fr);
    }
  }

  @media (min-width: 1080px){
    .rail__track{
      grid-auto-columns: minmax(300px, 1fr);
    }
  }

  @media (min-width: 1440px){
    .rail__track{
      grid-auto-columns: minmax(320px, 1fr);
    }
  }

  /* is-opt*