/* =============================================================================
   MISSIONMAN v5 — CTA ボタンの装飾（削り出し小物・グッズの切り抜きを添える）
   ---------------------------------------------------------------------------
   採用案「台座（chip）」。比較と不採用の理由は docs/design/cta-comparison.md。

   既存の CSS（aging.css / style.css / opening.css / cinema.css / patina.css）は
   1バイトも変えていない。この1枚だけを **いちばん後に**読む。
   index.html の <link> 1行を消せば、CTA は v5 の姿へ完全に戻る。

   守っていること:
     - 追加した DOM はゼロ。装飾は background-image だけで置いている
       ＝ pointer-events を持たず、読み上げにも一切現れない
       （aria-hidden を付ける対象すら存在しない）
     - ボタン全体がこれまでどおりクリックできる。当たり判定を狭めない
       （padding を **足している**ので、押せる面積はむしろ増える）
     - 文字と画像は重ならない。画像は増やした padding の中だけに置く
       ＝ 文字のコントラストは v5 のまま一切動かない
       （--mag+白 5.27:1 / --amber+暗文字 7.04:1 は据え置き）
     - 320px〜1440px で横はみ出しゼロ。背景画像はレイアウトに影響しない
     - 1ボタンに画像は1点だけ
     - アニメーションを足さない。prefers-reduced-motion で新たに動くものが無い
     - forced-colors / prefers-contrast / prefers-reduced-data / print では
       画像を落とし、増やした padding も元へ戻す（穴が空いて見えないように）

   なぜ ::before / ::after を使わないか:
     ::before は aging.css が面の材質に、::after は patina.css が刷りムラに
     使っている（どちらも「1要素に1つ」の取り決めがある）。
     どちらかを奪うと既存の質感が消えるため、要素自身の background-image
     （既存 CSS が誰も使っていない層）へ置いている。

   重ね順:
     background-color（--ag-cta-bg）
       → background-image = 小物の切り抜き（文字の来ない余白の中だけ）
       → ::before  材質テクスチャ（aging.css）
       → 文字
       → ::after   刷りムラ（patina.css）
   ============================================================================= */

/* --- 1ボタンぶんの割り当て -------------------------------------------------
   --cta-art        敷く画像
   --cta-art-w      そのために後ろへ足す余白。画像の実寸（高さ×縦横比）より広く取る
   --cta-art-h      画像の高さ。既定 1.55em（44px のボタンで約 25px）
   --cta-plate      素材の後ろへ敷く「台座」の影。既定は無し（none）
   --cta-plate-size 台座の大きさ。既定は 0（描かれない）
   新しい色・新しいサイズのトークンは作っていない。 */
.ag-cta[data-cta-art] {
  --cta-art-h: 1.55em;
  --cta-plate: none;
  --cta-plate-size: 0 0;
  padding-inline-end: calc(1.6em + var(--cta-art-w, 3.6em));
  background-image: var(--cta-art), var(--cta-plate);
  background-repeat: no-repeat;
  background-position: right 0.55em center, right 0 center;
  background-size: auto var(--cta-art-h), var(--cta-plate-size);
}

/* 映画『羅針』を見る — マッチ箱「LIVE IN THE MOMENT / One Shot」 */
.ag-cta[data-cta-art="film"] {
  --cta-art: url("../img/cta/cta-matchbox.png");
  --cta-art-w: 3.9em;
}
/* ミショメンTV を見る（ヒーローの ghost）— 翼のエンブレム（正面） */
.ag-cta[data-cta-art="tv"] {
  --cta-art: url("../img/cta/cta-wings.png");
  --cta-art-w: 3.6em;
}
/* ミショメンTV — チャンネルを見る — 翼のエンブレム（あおり）
   紙地（--ag-paper #E0DCD4）に真鍮を置くと明度が近く、素材が沈んで見えていた。
   素材の後ろへ**輪郭のぼけた影を1枚だけ**敷いて起こす（採用案「台座」そのもの）。
   四角い板ではなく楕円のぼかしにしているのは、紙地の質感（aging.css の材質と
   patina.css の刷りムラ）の上で、板の直線が唯一の人工物として浮くため。
   影は**文字の来ない余白の中だけ**に収まる大きさにしてあるので、
   文字のコントラスト（--ag-paper + 暗文字）は v5 のまま動かない。 */
.ag-cta[data-cta-art="channel"] {
  --cta-art: url("../img/cta/cta-wings-angle.png");
  --cta-art-w: 3.5em;
  --cta-plate: radial-gradient(closest-side ellipse at center,
                 rgba(20, 22, 26, .52), rgba(20, 22, 26, .30) 58%, rgba(20, 22, 26, 0) 100%);
  --cta-plate-size: 3.7em 2.4em;
}
/* ショップで見る — マネークリップ（MISSION MAN / DEP. 2019 の刻印）
   1.55em（約 25px）では刻印がつぶれ、マゼンタ地の上で「白い板」にしか見えなかった。
   素材そのものが横長で被写体が斜めに入っているぶん、他より実効の大きさが小さい。
   鈴と同じ扱いで少しだけ大きく置く（鈴は既に 1.95em）。 */
.ag-cta[data-cta-art="shop"] {
  --cta-art: url("../img/cta/cta-moneyclip.png");
  --cta-art-h: 1.95em;
  --cta-art-w: 4.7em;
}
/* 問い合わせフォーム — 真鍮の鈴。縦長なので少しだけ大きく置く */
.ag-cta[data-cta-art="contact"] {
  --cta-art: url("../img/cta/cta-bell.png");
  --cta-art-h: 1.95em;
  --cta-art-w: 1.2em;
}

/* --- 落とす条件 -----------------------------------------------------------
   装飾は「無くても情報が失われない」層なので、迷ったら落とす。
   画像を消すときは余白も戻す（右側だけ空いた不自然なボタンにしない）。 */

/* 「ミショメンTV — チャンネルを見る↗」だけは文言がとび抜けて長い。
   430px 未満では、装飾のために空けた余白のぶんだけ**行が1行増える**。
   実測（tools/qa_browser.py で幅ごとに行数を数えた）:

     幅      v5 のまま        装飾あり
     320px   66px / 3行       66px / 3行     変わらない（v5 の時点で3行）
     390px   46.8px / 2行     66px / 3行     **1行増える**
     430px   46.8px / 2行     46.8px / 2行   変わらない

   390px は最も台数の多い画面幅で、そこだけボタンが縦に伸びて釣り合いを崩す。
   装飾は「無くても情報が失われない」層なので、文字の組みを優先してこの1つだけ落とす。
   他の4つは同じ幅でも行数が変わらないため、そのまま残す。 */
@media (max-width: 429.98px) {
  .ag-cta[data-cta-art="channel"] {
    background-image: none;
    padding-inline-end: 1.6em;
  }
}

@media (prefers-contrast: more) {
  .ag-cta[data-cta-art] { background-image: none; padding-inline-end: 1.6em }
}
@media (prefers-reduced-data: reduce) {
  .ag-cta[data-cta-art] { background-image: none; padding-inline-end: 1.6em }
}
@media (forced-colors: active) {
  .ag-cta[data-cta-art] { background-image: none; padding-inline-end: 1.6em }
}
@media print {
  .ag-cta[data-cta-art] { background-image: none; padding-inline-end: 1.6em }
}