/* ai.css — AIおたすけ隊ページ固有コンポーネント（Figma: AIおたすけ隊 2247:65715）
   .ai-intro  イントロ「AI」ビジュアル + ベン図 + 青カード（MV_0006 2247:65735）
   ※ .wall（課題の壁）は components/wall.css に共有化（人材研修ページと共用）
   .project--ai  FEATUREセクションのAIおたすけ隊向け調整 */

/* （セクションの密着は base.css で全ページ共通化済み。ここでの打ち消しは不要） */

/* セクション間の個別ギャップ（Figma実値） */
.page-template-page-ai .wall {
  margin-bottom: var(--space-40);
}

.page-template-page-ai .project--ai {
  margin-top: var(--space-40);
}

.page-template-page-ai .steps--band {
  margin-top: var(--space-40);
}

/* STEPカードはFigma固定高 360px */
.page-template-page-ai .step-card--simple {
  min-height: 22.5rem;
}

/* --- AIおたすけ隊イントロ ------------------------------------------------ */
/* 見出し＋写真コラージュ部（.catch--ai）は共通化して components/catch.css へ移設。
   ここはセクション外枠と、ベン図・青カード（.ai-diagram / .ai-rows）のみ担当。 */

.ai-intro {
  position: relative;
  padding: var(--space-80) 0;
  overflow: hidden;
}

.ai-intro__container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  max-width: 77.5rem;
  margin: var(--space-208) auto 0;
}

/* --- ベン図（Figma: Figure 2247:65755 530x337）--------------------------- */
.ai-diagram {
  position: relative;
  width: 33.125rem;
  height: 21.0625rem;
  flex-shrink: 0;
  align-self: center;
}

/* 円・弧・矢印はSVG1枚（書き出しキャンバスは 532x352 / 図原点から x-1, y-7） */
.ai-diagram__figure {
  position: absolute;
  top: -.4375rem;
  left: -1px;
  width: 33.25rem;
  height: 22rem;
}

.ai-diagram__label {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 10rem;
  color: var(--color-primary);
}

.ai-diagram__label--left {
  top: 7.25rem;
  left: 3.125rem;
}

.ai-diagram__label--right {
  top: 7.335625rem; /* ⚠ Figma実値 */
  left: 21.4375rem;
  /* Figma: items-center だが子要素が幅160px(w-full)のため実質左揃い */
}

.ai-diagram__label-title {
  margin: 0;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-widest);
}

.ai-diagram__label-text {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

/* 中央の縦書き風テキスト（Figma: 幅15pxで1文字ずつ折り返し lh28px） */
.ai-diagram__center {
  position: absolute;
  top: 4.023125rem; /* ⚠ Figma実値 */
  left: 16.0625rem;
  width: .9375rem; /* ⚠ Figma実値: 1文字/行に折り返すための幅 */
  margin: 0;
  color: var(--color-primary);
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-black);
  line-height: 1.75rem; /* ⚠ Figma実値 28px */
  letter-spacing: 0;
  text-align: center;
  word-break: break-all;
}

/* --- 番号付き青カード（Figma: Frame 1678-1681 660x224）------------------- */
.ai-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 41.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* カード背面のソフトシャドウ（Figma: Rectangle 202 #E2E2E2 blur50 op.5） */
.ai-rows::before {
  content: "";
  position: absolute;
  top: 5.875rem;
  left: 2.375rem;
  width: 34.8125rem;
  height: 33rem;
  background: var(--color-shadow-soft-2);
  filter: blur(50px);
  opacity: 0.5;
}

.ai-row {
  position: relative;
  display: flex;
  align-items: flex-start; /* Figma: items-start（テキストは上揃え、イラストは160pxで内容域を満たす） */
  justify-content: space-between;
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  box-shadow: var(--shadow-drop);
}

.ai-row__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-16);
  justify-content: center;
  color: var(--color-white);
}

.ai-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  white-space: nowrap;
}

.ai-row__number {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: 1.7146875rem; /* ⚠ Figma実値 */
  letter-spacing: var(--letter-spacing-num-lg);
}

.ai-row__title {
  margin: 0;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.ai-row__text {
  margin: 0;
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
}

.ai-row__illust {
  width: 10rem;
  height: 10rem;
  flex-shrink: 0;
}

.ai-row__illust img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- FEATUREセクション（project流用）のAI向け調整 ------------------------ */
/* パネル上余白はFigma実値120px（Section 2247:65823） */
.project--ai .project__panel {
  padding-top: var(--space-120);
}

/* 見出し行のロボットイラスト（Figma: 157.7x192） */
.project--ai .project__head-visual img {
  width: 9.85625rem; /* ⚠ Figma実値 */
}

/* 見出し行とリストの間（Figma実値 80px。既定は40px） */
.project--ai .project__inner {
  gap: var(--space-80);
}

/* （交互レイアウトの inner の flex-shrink:0 は base .policy-item__inner に移動。
   全ページ共通で画像の40pxはみ出しを維持するため） */

/* 画像はデザイン通り実寸アスペクトで表示する（webp=Figmaフレーム実寸でアスペクト一致）。
   幅480pxに対し高さは自動。object-fit:coverでのクロップを避け、フレーム全体を表示。
   画像が本文より高い場合はカードが画像高さに追従（Figmaの本文末尾の空行＝下部余白に相当）。 */
.project--ai .policy-item__image--photo img {
  height: auto;
}

/* 本文はFigma実値 #1A1616（黒）。共有の --gray（#333）を上書き */
.project--ai .policy-item__text--gray {
  color: var(--color-black);
}

/* 「例えば…」見出し（Figma 2374:10947: Black / 21.33px / tracking 0.1em / px24インデント） */
.project--ai .policy-item__reco-title {
  padding: 0 var(--space-24);
}

/* 「例えば…」の箇条書き（Figma 2374:10948: px24インデント / 見出しとの間隔16px=gap8+pt8 / 文字色 #333 / tracking 0.1em） */
.project--ai .check-list--flush {
  padding: 0 var(--space-24);
  margin-top: calc(-1 * var(--space-8));
}

.project--ai .check-list li {
  color: var(--color-text-body);
  letter-spacing: var(--letter-spacing-widest);
}

/* ブレットの角丸はFigma実値2px（この極小サイズはトークン化しない） */
/* （チェックの角丸2pxは base .check-list li::before に統一済み） */

/* リンクカード（Figma: Container 2298:15888 白 px24 py8 radius8） */
.policy-item__link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
  margin-top: var(--space-16);
  padding: var(--space-8) var(--space-24);
  border-radius: var(--radius);
  background: var(--color-white);
  box-shadow: var(--shadow-card-sm);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* hover: わずかに浮かせて影を強める + ラベルをaccentに（他カードと同トーン）。
   Figmaにhover定義がないため、既存トークンの範囲で表現する。 */
@media (hover: hover) {
  .policy-item__link-card:hover {
    transform: translateY(calc(var(--space-4) * -1));
    box-shadow: var(--shadow-price);
  }

  .policy-item__link-card:hover .policy-item__link-card-label {
    color: var(--color-accent);
  }
}

.policy-item__link-card-label {
  transition: color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .policy-item__link-card,
  .policy-item__link-card-label {
    transition: none;
  }
  .policy-item__link-card:hover {
    transform: none;
  }
}

.policy-item__link-card-label {
  margin: 0;
  color: var(--color-text-gray);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.policy-item__link-card img {
  display: block;
  width: 10rem;
  height: 6.1875rem;
  flex-shrink: 0;
  object-fit: cover;
}

/* --- SP ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* PCのセクション間ギャップ（Figma実値）はSPでは詰める */
  .page-template-page-ai .wall {
    margin-bottom: 0;
  }
  .page-template-page-ai .step-card--simple {
    min-height: 0;
    gap: var(--space-24);
  }
  /* 基底 .steps--band の pb160（PCのFigma実値）はSPでは詰める */
  .page-template-page-ai .steps--band {
    padding-bottom: var(--space-40);
  }
  /* --ai のPC向け調整（Figma実値）はSPでは効かせず、shindanの .project と同じ扱いにする */
  .project--ai .project__panel {
    padding-top: var(--space-48);
  }
  .project--ai .project__inner {
    gap: var(--space-40); /* 基底 .project__inner と同値＝shindanと同じ */
  }
  .project--ai .project__head-visual img {
    width: 6rem;
  }
  /* 「例えば…」+チェックの24pxインデントはSPでは付けない（project.css のSPと同じ扱い）。
     上の --ai のPC指定と同じ詳細度なので、ここで打ち消す必要がある */
  .project--ai .policy-item__reco-title {
    padding: 0;
    font-size: var(--font-size-h3);
  }
  .project--ai .check-list--flush {
    padding: 0;
    margin-top: 0;
  }
  .ai-intro {
    padding: 0;
  }
  .ai-intro__container {
    flex-direction: column;
    align-items: center;
    gap: var(--space-40);
    margin-top: var(--space-24);
    padding: 0 var(--space-24);
  }
  /* ベン図：固定rem座標の集合体のため transform でまるごと縮小（要視覚確認） */
  .ai-diagram {
    transform: scale(0.7);
    transform-origin: top center;
    margin-bottom: -6rem; /* scale はレイアウト高さに影響しないため余白を詰める */
  }
  .ai-rows {
    width: 100%;
  }
  .ai-rows::before {
    top: 3rem;
    left: 5%;
    width: 90%;
    height: 90%;
  }
  /* サイズ感は kenshu.css の .ld-card（同じ青カード）と揃える */
  .ai-row {
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-32);
  }
  .ai-row__head {
    white-space: normal;
  }
  .ai-row__title {
    font-size: var(--font-size-card);
  }
  .ai-row__text {
    font-size: var(--font-size-h3);
  }
  .ai-row__illust {
    width: 7rem;
    height: 7rem;
    align-self: center;
  }
  /* SPでは縦積み（画像→ラベルの順で中央寄せ） */
  .policy-item__link-card {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    padding: var(--space-16) var(--space-24);
  }
  /* SPは画像をPC実値相当の160px幅まで拡大（SP基準12.8pxで12.5rem＝160px） */
  .policy-item__link-card img {
    width: 12.5rem;
    height: 7.734rem;
  }
  .policy-item__link-card-label {
    text-align: center;
  }
}