/* ==========================================================================
 * CMS 実データ用の追加スタイル
 *
 * モック（cb-wp-prototype/aoistage/css/stage.css）は実画像・実データが未受領の段階で
 * 作られており、ポスター / 人物写真 / グッズ / カルーセルは **色のプレースホルダー**
 * （中央に小さくロゴを置くだけ）として組まれている。CMS では実画像が入るので、
 * その枠を実画像で埋めるための差分だけをここに置く。
 *
 * ここに置くもの:
 *   1. `--image` 修飾クラスが付いた枠の中の <img>（枠いっぱいに敷く）
 *   2. oEmbed（予告動画）の iframe
 *   3. 一覧のページ送り・絞り込みで隠す行（[hidden] を display 指定より強くする）
 *   4. モックに無い要素（スキップリンク / トップの h1 ラッパー / 注釈 / 該当なし表示）
 *
 * ここに **デザインの変更** は書かないこと。モック側（aoistage.css）が正なので、
 * 見た目を変える修正は cb-wp-prototype で行い、bin/sync-assets.sh で持ってくる。
 * 色・余白・書体は aoistage.css が :root に定義しているトークンを経由する。
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. プレースホルダー枠に実画像が入ったとき
 *    （c-stage-poster / c-stage-person__photo は grid + place-items:center の箱）
 * -------------------------------------------------------------------------- */
.c-stage-poster--image {
  background: none;
}

.c-stage-poster--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.c-stage-person__photo--image {
  background: none;
}

.c-stage-person__photo--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* WORK 詳細 KV のぼかし背景。モックの仮画像（ロゴ）をキービジュアルに差し替える。
   ぼかし・暗さ・cover はモックの ::before のまま（--kv-bg は single-work.php）。 */
.p-stage-work__kv--image::before {
  background-image: var(--kv-bg);
}

/* NEWS 詳細は「画像｜本文」の2カラム。画像が無い投稿は本文を1カラムで流す。 */
.p-stage-news-detail__content--no-image {
  grid-template-columns: 1fr;
}

/* COMMENT のテキスト。wpautop の <p> の間隔だけ整える
   （画像を入れた COMMENT はライトボックス表示なので、ここには入らない）。 */
.c-stage-person__comment-text > * + * {
  margin-top: var(--spacing-sm);
}

/* 自由記述セクション / カルーセル下フリーエリア（ACF WYSIWYG）の中身。
   段落間の余白と、挿入した画像の幅（CMS入力項目整理 2026-09-03：コンテンツ幅100%）。
   モックはこの2か所にプレーンテキストしか置いていないため、テーマ側で足す。 */
.p-stage-work__free-text > * + * {
  margin-top: var(--spacing-md);
}

.p-stage-work__free-text img {
  width: 100%;
  height: auto;
}

/* WYSIWYG が付ける寄せクラスは幅100%より優先する（中央・左右寄せの小さい画像）。 */
.p-stage-work__free-text img.alignleft,
.p-stage-work__free-text img.alignright,
.p-stage-work__free-text img.aligncenter {
  width: auto;
  max-width: 100%;
}

.p-stage-work__free-text img.aligncenter {
  margin-inline: auto;
}

/* GOODS バナー・カルーセルのスライドに実画像が入ったとき。
   グッズ告知は文字が入った横長バナーなので、切らずに全体を見せる（contain）。 */
.p-stage-work__goods-banner--image {
  background: none;
  padding: 0;
}

.p-stage-work__goods-banner--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-stage-work__carousel-slide--image {
  background: none;
}

.p-stage-work__carousel-slide--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* グッズ画像下の注釈（7/28 追加項目）。モックには無い要素。 */
.p-stage-work__goods-note {
  margin-top: var(--spacing-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

/* SCHEDULE を「自由記述」で入れた場合の本文（表の代わり）。 */
.p-stage-work__schedule-free {
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-relaxed);
}

/* --------------------------------------------------------------------------
 * 2. 予告動画（YouTube oEmbed）
 *    モックの .p-stage-work__video は 16:9 のダミー枠（黒地に文字）。
 *    埋め込みが入るときは枠を埋め、黒地は見えないようにする。
 * -------------------------------------------------------------------------- */
.p-stage-work__video--embed {
  background: var(--color-ink);
}

.p-stage-work__video--embed iframe,
.p-stage-work__video--embed .wp-block-embed,
.p-stage-work__video--embed .wp-block-embed__wrapper {
  width: 100%;
  height: 100%;
  border: 0;
}

.p-stage-work__video--embed > * {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
 * 3. 一覧のページ送り・絞り込みで隠す行
 *    行・カードは display: grid / flex を持つため、[hidden] の display:none が
 *    詳細度で負ける。JS（assets/aoistage.js）が hidden を付け外しするので必ず勝たせる。
 * -------------------------------------------------------------------------- */
.c-stage-work-card[hidden],
.c-stage-news-row[hidden] {
  display: none !important;
}

/* 絞り込み結果が 0 件のとき（モックはダミーデータ固定のため持っていない表示）。 */
.p-stage-home__works-empty {
  padding: var(--spacing-2xl) var(--spacing-4xl);
  color: var(--color-text-secondary);
  text-align: center;
}

@media (width <= 768px) {
  .p-stage-home__works-empty {
    padding: var(--spacing-xl) var(--spacing-lg);
  }
}

/* --------------------------------------------------------------------------
 * 4. モックに無い要素
 * -------------------------------------------------------------------------- */

/* 本文へスキップ（WCAG 2.1 AA。モックには無いがサイト共通の方針として持つ）。
   フォーカスされるまで視覚的に隠す。 */
.u-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-stage);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transform: translateY(-200%);
}

.u-skip-link:focus {
  transform: translateY(0);
}

/* トップの MV。モックは <img> 直置きだが、1ページ = 1 h1 の方針に合わせて
   h1 でラップしている（見出しテキストは u-visually-hidden）。h1 の既定余白・
   行送りを消して、モックと同じ見た目にする。 */
.p-stage-home__hero-title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 0;
}