/* cross-promo.css — クロスプロモのバナー枠と一覧の見た目。
 *
 * 色・角丸・字はすべて --cp-* 変数で受け取る。既定値はどのアプリでも
 * 極端に浮かない中間色にしてあり、アプリ側は :root か枠の親で
 *
 *   .cp-root { --cp-surface: var(--color-paper-2); --cp-accent: var(--color-accent); }
 *
 * のように自分のトークンを流し込むだけで馴染む。
 * ここに生の色を足さないこと(アプリごとに色が食い違う原因になる)。
 *
 * (!) 既定値は **:root** に置く。`.cp-root` に置くと、アプリ側の
 *     `.cp-root { --cp-accent: … }` と詳細度が並び、読み込み順で
 *     後に来た方(たいていこの共通CSS)が勝ってしまう
 *     ——「アプリの色を入れたのに既定色のまま」という取りこぼしが実際に出た。
 *     :root に置けば、枠そのものに付く .cp-root の指定が
 *     継承の近さで必ず勝つので、読み込み順に依存しなくなる。 */
:root {
  --cp-surface:  var(--color-paper-2, #f1ece1);
  --cp-ink:      var(--color-ink, #232a33);
  --cp-ink-sub:  var(--color-ink-muted, #6b727c);
  --cp-accent:   var(--color-accent, #1d6f97);
  --cp-on-accent: var(--color-paper, #fbf8f1);
  --cp-radius:   var(--radius-card, 12px);
  --cp-pill:     var(--radius-pill, 999px);
  --cp-gap:      var(--space-sm, 8px);
  --cp-pad:      var(--space-md, 16px);
}

.cp-title {
  margin: 0 0 var(--cp-gap);
  font-weight: 700;
  color: var(--cp-ink);
}

.cp-list {
  display: flex;
  flex-direction: column;
  gap: var(--cp-gap);
}

/* カードは button 要素。行全体が押せることが指で分かるよう、
   ボタンらしい面と押し込みを持たせる(中に入れ子のボタンは作らない —
   タップ領域が二重になると「どこを押せばいいか」が分からなくなる)。 */
.cp-card {
  display: flex;
  /* (!) box-sizing は必須。width:100% + padding + border の素の box-sizing では
     カードが親より広くなり、「ストアで見る」が枠の外へはみ出す。
     モダンな reset を持つアプリでは表面化しないが、Onsen UI のような
     border-box を敷いていないアプリ(juggler / super-suropachi)で実際に出た。 */
  box-sizing: border-box;
  align-items: center;
  gap: var(--cp-gap);
  width: 100%;
  margin: 0;
  padding: var(--cp-gap) var(--cp-gap);
  border: 0;
  border-radius: var(--cp-radius);
  background: var(--cp-surface);
  color: var(--cp-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(.16, 1, .3, 1);
}
.cp-card:active { transform: translateY(1px) scale(.995); }
.cp-card:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; }

.cp-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  background: color-mix(in srgb, var(--cp-ink) 8%, transparent);
}

.cp-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* min-width:0 が無いと、長い紹介文が flex 行を押し広げて
     「ストアで見る」が枠の外へ出る */
  min-width: 0;
  flex: 1;
}
.cp-lead {
  font-size: .6875rem;
  color: var(--cp-accent);
  font-weight: 700;
}
.cp-name {
  font-weight: 700;
  /* アプリ名は途中で切らずに折り返す(切ると別のアプリと見分けが付かない) */
  overflow-wrap: anywhere;
}
.cp-desc {
  font-size: .8125rem;
  color: var(--cp-ink-sub);
  /* 紹介文は2行まで。3行以上あると一覧が縦に伸びて他の設定項目が押し出される */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.cp-cta {
  flex-shrink: 0;
  align-self: center;
  padding: 6px 12px;
  border-radius: var(--cp-pill);
  background: var(--cp-accent);
  color: var(--cp-on-accent);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* バナーは1枠だけの見せ物なので、一覧のカードより少しだけ主張させる */
.cp-card--banner {
  padding: var(--cp-pad) var(--cp-gap);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--cp-ink) 12%, transparent);
}
.cp-card--banner .cp-desc { -webkit-line-clamp: 1; line-clamp: 1; }

/* 幅の狭い端末では「ストアで見る」が名前を潰すので、行を畳んで下に回す */
@media (max-width: 359px) {
  .cp-card { flex-wrap: wrap; }
  .cp-cta { margin-left: calc(48px + var(--cp-gap)); }
}

@media (prefers-reduced-motion: reduce) {
  .cp-card { transition: none; }
  .cp-card:active { transform: none; }
}