/* 施設のトップとコースの画面の配置（仕様書 第 4 章・F2-1・F2-6）。色・文字の見た目は T-139〜T-142 が足す。 */

/* 見出しの上の「音声ガイド」は控えめな文字の色で、主色を使わない（F11-6 (3)、案J） */
.facility-guide-label {
  color: var(--color-text-muted);
}

/* コースのカード（F2-6）。横に並べ、指で送ると 1 枚ずつ止まる。カードの幅は 300 px と列の幅から 40 px を引いた幅の小さいほうで、
   幅 320 px の画面でも次のカードの端が見える */
.course-cards-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.course-cards-head h2 {
  flex: 1;
}

.course-cards-prev,
.course-cards-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: none;
  color: inherit;
}

/* カードが全部列に収まり送れないときは出さない（hidden。押せるものの大きさの display より強くする） */
.course-cards-head [hidden] {
  display: none;
}

/* 端のカードでは薄くして押せない（押しても動かない。src/js/course-cards.js） */
.course-cards-prev[aria-disabled="true"],
.course-cards-next[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

.course-cards-list {
  position: relative;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.course-cards-list::-webkit-scrollbar {
  display: none;
}

/* 動きを減らす設定では送りに動きを付けない（第 6 章「アクセシビリティ」） */
@media (prefers-reduced-motion: no-preference) {
  .course-cards-list {
    scroll-behavior: smooth;
  }
}

.course-cards-list > li {
  flex: 0 0 min(300px, calc(100% - 40px));
  scroll-snap-align: start;
}

.course-card {
  display: flex;
  flex-direction: column;
}

.course-card-name {
  font-weight: 700;
}

/* ストップ一覧の写真（F2-1）。出す 1 枚目を 4:3 の枠に中央を切り抜いて小さく出す */
.stop-list-photo {
  width: 80px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  vertical-align: middle;
}

/* 施設とコースの画像（F2-4）。施設のトップの施設の画像とコースの画面のコースの画像は列の幅の 4:3、
   コースのカードの画像はカードの幅の 3:2 の枠に出し、比の違う画像は中央を切り抜いて枠を埋める */
.facility-image,
.course-image,
.course-card-image {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.facility-image,
.course-image {
  aspect-ratio: 4 / 3;
}

.course-card-image {
  aspect-ratio: 3 / 2;
}