/* ==========================================
 1. コンテナの設定（親要素を監視対象に）
 ========================================== */
.wrap-container {
  container-type: inline-size;
  container-name: performer-area;
  width: 100%;
}

/* ==========================================
 2. ベース設定（デフォルト：SP向けの縦並び）
 ========================================== */
.performer-container {
  display: flex;
  flex-direction: column; /* スマホ（狭い画面）では縦一列 */
  gap: 1rem;
}

.performer-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  background-color: var(--rgba-white);
  border-radius: 6px;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  width: 100%;
}

.face-photo {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #fff;
  margin: 0 auto 16px auto;
}

.info {
  max-width: 400px;
  margin-inline: auto;
  /* padding: 16px; */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.info p {
  margin: 0 0 10px 0;
  font-size: var(--font-size-sm);
  text-align: center;
}

.info p span {
  display: block;
}

.role {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 400;
}

.bio {
  font-size: var(--font-size-xs) !important;
  line-height: 1.5;
  max-inline-size: max-content;
  margin-inline: auto;
  flex-grow: 1;
}

.qr-box {
  text-align: center;
  margin-top: auto;
}

/* ==========================================
 3. コンテナクエリ（枚数に応じて「列数」を完全固定）
 ========================================== */

/* タブレット・PCサイズ（コンテナ幅 636px 以上）になったら適用 */

@container performer-area (min-width: 636px) {
  .performer-container {
    display: grid;
    gap: 1rem;
    justify-content: center; /* 全体を中央寄せ */
    align-items: stretch; /* 高さを自動で揃える */
  }
  /* 【基本設定】カードが「3枚」の時：絶対に横3列に固定（1frは均等幅の意味） */
  .performer-container {
    grid-template-columns: repeat(3, minmax(0, 300px));
  }
  /* カードが「ちょうど2枚」の時だけ：横2列に固定 */

  .performer-container:has(.performer-card:first-child:nth-last-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 300px));
  }

  /* カードが「ちょうど4枚」の時だけ：横2列のまま、4枚なので自動的に2行になる */

  .performer-container:has(.performer-card:first-child:nth-last-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 300px));
  }
  .info {
    width: 100%;
  }
}

/* ★動画カード用の微調整 */
.video-wrapper {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.event-video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 動画全体が収まるように */
  aspect-ratio: 16 / 9; /* 動画を16:9に固定 */
}

/* カード内の余白などの調整（出演者の丸写真用だったプロパティを上書き） */
.video-card {
  padding: 1rem; /* 動画が見やすくなるよう少しタイトに */
}