/* ======================================================================
   Seitaro Arai — Unified Stylesheet
   Path: /in/css/components.css
   Purpose: UI components (horizontal scroll helpers, chips, buttons, cards)
   Notes:
   - Breakpoints are consolidated at the bottom (no media queries in this file yet).
   - Color/outline tokens use --blue / --blue-2.
   ====================================================================== */


/* ======================================================================
   01) Horizontal Scroll Helpers
   - 横スクロールが必要な箇所の枠組み
   - OS/ブラウザ差による端の 1〜2px のはみ出しを clip で保険
   ====================================================================== */

/* 横方向にのみスクロールを許可（縦は隠す） */
.h-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

/* 子コンテンツ幅に合わせて横スクロールを発生させるためのラッパー */
.h-scroll-inner {
  min-width: auto;
}


/* ======================================================================
   02) Chips
   - タグ/フィルタ等の丸 pill UI
   - .chip.accent は強調版（主要アクションに使用）
   ====================================================================== */

.chips {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;

  /* 並びと折返し */
  column-gap: 16px;                   /* gap をロングハンド（列） */
  row-gap: 16px;                      /* gap をロングハンド（行） */
  flex-wrap: wrap;

  /* 余白（上だけ 2rem） */
  margin-top: 2rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* レイヤーと初期のアニメ基調 */
  position: relative;
  z-index: 10;
  opacity: 0;
  transform: translateY(12px);
}

.chip {
  display: inline-block;

  /* 書体 */
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;

  /* 色（通常時） */
  color: var(--blue);

  /* 背景 */
  background-color: rgba(255, 255, 255, 0.92);
  background-image: none;

  /* ガラス感 */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  /* 角丸（32px の pill） */
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  border-bottom-right-radius: 32px;
  border-bottom-left-radius: 32px;

  /* ボーダー（淡いグレー） */
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: rgba(0, 0, 0, 0.08);
  border-right-color: rgba(0, 0, 0, 0.08);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  border-left-color: rgba(0, 0, 0, 0.08);

  /* 余白（上下10px / 左右28px） */
  padding-top: 10px;
  padding-right: 28px;
  padding-bottom: 10px;
  padding-left: 28px;

  /* 影 */
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);

  /* 遷移（hover 時の色/影/位置） */
  transition-property: color, background-color, box-shadow, transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;

  /* 装飾 */
  text-decoration-line: none;
  text-decoration-thickness: auto;
  text-decoration-style: solid;
  text-underline-offset: auto;
}

.chip:hover {
  color: #ffffff;

  background-color: var(--blue);
  background-image: none;

  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
}

/* 強調版（アクティブ/プライマリアクション） */
.chip.accent {
  color: #ffffff;

  background-color: var(--blue);
  background-image: none;

  /* 枠色をアクセントの第2色に */
  border-top-color: var(--blue-2);
  border-right-color: var(--blue-2);
  border-bottom-color: var(--blue-2);
  border-left-color: var(--blue-2);

  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
}

.chip.accent:hover {
  background-color: var(--blue);
  background-image: none;
}


/* ======================================================================
   03) Buttons
   - .btn: 汎用プライマリボタン（inline-flex）
   - .btn-primary: 明示的なプライマリ（同義・将来拡張用）
   ====================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* アイコンと文言の間隔 */
  column-gap: 0.5rem;
  row-gap: 0; /* 明示 */

  /* 色/背景（トークン準拠） */
  color: #ffffff;
  background-color: var(--blue);
  background-image: none;

  /* ボーダー */
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: var(--blue);
  border-right-color: var(--blue);
  border-bottom-color: var(--blue);
  border-left-color: var(--blue);

  /* 角丸 */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;

  /* 余白 */
  padding-top: 0.625rem;
  padding-right: 1rem;
  padding-bottom: 0.625rem;
  padding-left: 1rem;

  /* 遷移 */
  transition-property: filter, background-color, border-color, color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-delay: 0s;

  /* 装飾 */
  text-decoration-line: none;
  text-decoration-thickness: auto;
  text-decoration-style: solid;
  text-underline-offset: auto;
}

.btn:hover {
  /* 既存仕様：わずかに暗くする */
  filter: brightness(0.95);
}

.btn:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--blue-2);
  outline-offset: 2px;
}

/* 明示的なプライマリ。現状は .btn と同等だが将来拡張のため定義 */
.btn-primary {
  color: #ffffff;
  background-color: var(--blue);
  background-image: none;

  border-top-color: var(--blue);
  border-right-color: var(--blue);
  border-bottom-color: var(--blue);
  border-left-color: var(--blue);
}


/* ======================================================================
   04) Cards
   - 画像/テキストを含むカード。hover で少し浮く
   ====================================================================== */

.card {
  display: block;

  color: inherit;
  background-color: #ffffff;
  background-image: none;

  /* 枠線 */
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #e2e8f0;
  border-right-color: #e2e8f0;
  border-bottom-color: #e2e8f0;
  border-left-color: #e2e8f0;

  /* 角丸は設計トークンに追従 */
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);

  /* 余白 */
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;

  /* 影と遷移 */
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
  transition-property: transform, box-shadow;
  transition-duration: 0.15s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
}

/* カード内の代表画像（角丸は 16px。外枠と見た目を合わせるなら --radius に揃える） */
.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;

  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 10px;
  margin-left: 0;
}

/* メタ情報（サブテキスト） */
.card .card-meta {
  color: #6b7a8a;
  font-size: 0.92rem;
  line-height: 1.6;

  margin-top: 0.25rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}


/* ======================================================================
   05) Media Queries (Consolidated at bottom)
   - 本ファイルでは現時点でレスポンシブ指定はありません。
   - 必要になったら、下記の枠内にのみ追加してください。
   - 統一ルール：
     @media (max-width: 860px)        → @media (max-width: 920px)
     @media (min-width: 921px)        → @media (min-width: 920px)
     @media (max|min-width: 1100px)   → @media (max-width: 1200px)
   ====================================================================== */

/* < 1200px */
@media (max-width: 1200px) {
  /* components レベルの 1200px 未満調整が必要であれば、ここに追記 */
}

/* < 920px */
@media (max-width: 920px) {
  /* components レベルの 920px 未満調整が必要であれば、ここに追記 */
}

/* < 768px */
@media (max-width: 768px) {
  /* components レベルの 768px 未満調整が必要であれば、ここに追記 */
}