/* pages/ai-search-dock.css
   AI Search Dock（ai-search-dock.html）だけの見た目（p-dock-）
   ・共通部品（c-）の中身は上書きしない。足りない見た目は、共通部品のクラスと並べて付ける p-dock- のクラスに書く
   ・色・書体は base.css のトークンだけ（新しい色は足さない）。メディアクエリは従来の書き方だけ
     （範囲構文・has セレクタ・コンテナクエリは使わない。幅の切り替えは flex-wrap・auto-fit・clamp() で自動に行う）
   ・実画面は、枠（c-screen）の中に、画像が届くまで格子柄のタイル（c-tile）を置く（HTML 側に <!-- 差し替え待ち --> を付けてある）。10字を超える題名は c-tile__title--long
   ・インライン style で渡す変数は、c-card-grid の変数だけ（.htmlvalidate.json の許可リスト）
   計測対象のチップ（c-chips--grid・c-chips--lg）と下の注記（c-section-note）、4ステップの番号（c-feature-card__num）、
   サービスとの関係の3枚の写真（c-feature-card__media。タブレットで3枚目を横並びにする c-feature-card--row-tab と c-card-grid__item--full-tab）と
   カードの下のリンク（c-feature-card__more）、公式LPへのリンク（c-text-link）は、すべて共通部品。HTML 側でクラスを付けるだけで、このファイルには書かない。
   計測対象の写真（共通部品の c-photo-frame）とチップ・注記の並べ方（p-dock-surfaces）だけ、このファイルに書く */


/* 見出しは、SP でも「AIの「6つの面」を、」の1行が折れない大きさまで縮める（11字ぶんが画面幅 - 左右の余白 40px に収まる大きさ）。
   タブレット・PC では、この式の値が --fs-h1 より大きいので、既定の大きさ（--fs-h1）のまま */
.p-dock-hero__title {
  font-size: min(var(--fs-h1), calc((100vw - 40px) / 11));
}

/* 主ボタン「無料AI検索診断でスコアを見る」は、文字の幅が 219px（左右の余白と枠を足して 277px）。320px の端末は
   画面幅 - 左右の余白 40px = 280px で、3px しか余らない。書体がわずかに広い端末や、320px より狭い端末では1行に収まらず、
   ボタンが画面の右へはみ出して縁が切れる。ボタン（c-button）は white-space: nowrap なので、文字を包む span だけ折り返しを許し、
   はみ出す端末だけ「診断で」のあとの <wbr> で2行にする（語のまとまりは各 u-nowrap が守る）。360px 以上は余裕があるので、折り返しを許さない */
@media (max-width: 359.98px) {
  .p-dock-hero__cta-label {
    white-space: normal;
  }
}

/* 見える指標の並び。タブレット・SP は、実画面 → カードの順に縦に並べる（カードはタブレットで2列、SPで1列）。
   実画面の枠は共通部品の c-screen（HTML 側で c-screen--side を付ける。タブレットだけ 2:1、SP と PC は 16:10）。
   PC（1100px 以上）は、左に実画面、右に説明カード5枚（行を等分して高さをそろえる）。実画面は 16:10 のまま、右のカードの上端にそろえる。
   右のカードの文を縦の中央にそろえるのは、共通部品の c-feature-card--middle（HTML 側で付ける） */
.p-dock-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

@media (min-width: 1100px) {
  .p-dock-metrics {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 32px;
  }

  .p-dock-metrics__screen {
    align-self: start;
  }

  .p-dock-metrics__cards {
    grid-auto-rows: 1fr;
  }

  /* 右のカードは、縦に5枚並ぶので余白を詰める */
  .p-dock-metric {
    padding: 20px 28px 22px;
  }
}

/* よくある質問：LPの回答の下に付いている「出典」の行（外部リンクにはせず、文字だけ） */
.p-dock-source {
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink-3);
}

/* 計測対象：1100px 以上は、左に写真（共通部品の c-photo-frame、16:9。右の文字が高いときは、その高さまで縦に伸びて切り抜く）、右に6面のチップ（2列×3行）と注記。
   1099px 以下は、幅 640px までの1列で、写真 → チップ（3列×2行。共通部品の c-chips--grid）→ 注記の順に、中央に積む */
.p-dock-surfaces {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  max-width: 640px;
  margin-right: auto;
  margin-left: auto;
}

.p-dock-surfaces__photo {
  width: 100%;
}

@media (min-width: 1100px) {
  .p-dock-surfaces {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 56px;
    align-items: center;
    max-width: none;
  }

  .p-dock-surfaces__photo {
    align-self: stretch;
  }

  .p-dock-surfaces__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: center;
  }

  .p-dock-surfaces__note {
    margin-top: 28px;
    text-align: left;
  }
}