/* catch.css — 「見出し＋写真コラージュ」共通ブロック
   ai-intro / ld（人材研修L&D）/ service-intro の共通スキャフォールドを集約。
   骨組み（見出し・切り抜き写真フレーム・二重透かし英字）を共通化し、
   装飾（A+I文字 / L&D文字 / 青矩形）だけ variant 固有で差し込む。
   ※ 写真は各画像を「フレーム書き出し」済みのため、単純にフレームを塗りつぶす。 */

/* === 共通スキャフォールド ================================================= */
.catch {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-40);
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
}

.catch__body {
  display: flex;
  flex: 1;
  min-width: 0;
  max-width: 33.75rem;
  flex-direction: column;
  gap: var(--space-24);
}

.catch__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.catch__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.catch__subtitle {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
}

/* タイトル・サブタイトルは PHP 側で 行(__line) > 文節(__clause) の入れ子に分解される。
   PCは __line が block ＝ Figma通りの行組み。文節はそのまま流し込む。
   SPでは __clause を inline-block にし、行に収まらない文節だけが次行へ送られる
   ＝改行は文節の境目でのみ起き、語の途中では割れない。 */
.catch__line {
  display: block;
}

.catch__text {
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
  text-align: justify;
}

/* 右側ビジュアル：装飾（文字・矩形）はここへ。枠外へはみ出す装飾があるので overflow は切らない */
.catch__visual {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 27.25rem;
}

/* 角丸フレーム：写真と枠内白透かしをクリップ（装飾より前面） */
.catch__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  z-index: 1;
}

/* 透かし英字：外側＝薄い青グラデ、フレーム内＝白（どちらも op.1・2行ずらし配置） */
.catch__wm {
  position: absolute;
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  background: var(--gradient-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.1;
  pointer-events: none;
}

.catch__wm--white {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--color-white);
}

/* === variant: ld（人材研修 L&D）========================================== */
/* 透かし 150px・L&D文字SVG・サブタイトルは SemiBold */
.catch--ld .catch__subtitle {
  font-weight: var(--font-weight-semibold);
}

.catch--ld .catch__wm {
  font-size: var(--font-size-watermark-sm);
}

.catch--ld .catch__wm--1 {
  top: 10.51625rem; /* ⚠ Figma実値 */
  left: 3.4375rem;
}

.catch--ld .catch__wm--2 {
  top: 20.82875rem; /* ⚠ Figma実値 */
  left: 6.4375rem;
}

.catch--ld .catch__wm--w1 {
  top: 10.51625rem;
  left: -32.5rem; /* ⚠ Figma実値（フレーム基準） */
}

.catch--ld .catch__wm--w2 {
  top: 20.82875rem;
  left: -29.5rem; /* ⚠ Figma実値 */
}

/* L&D文字（Figma実値: 25.49, 20.76 / 589.06 x 415.04） */
.catch--ld .catch__letters {
  position: absolute;
  top: 1.2975rem;
  left: 1.593125rem;
  width: 36.81625rem;
  height: 25.94rem;
}

/* === variant: ai（AIおたすけ隊）========================================== */
/* 見出し540＋ビジュアル700を両端寄せ（max-width 1240）。透かし 200px・装飾 A＋I */

.catch--ai .catch__body {
  flex: 0 0 33.75rem;
  max-width: 33.75rem;
}

.catch--ai .catch__visual {
  flex: 0 0 43.75rem;
  width: 43.75rem;
}

.catch--ai .catch__wm--1 {
  top: 7.491875rem; /* ⚠ Figma実値 */
  left: 8.75rem;
}

.catch--ai .catch__wm--2 {
  top: 19.399375rem; /* ⚠ Figma実値 */
  left: 18.25rem;
}

/* 白透かしは外側の青透かし（wm--1/2）と同一座標に重ね、写真の上で連続文字に見せる。
   frame は body(33.75rem)＋gap(2.5rem)＝36.25rem 右にあるので、青の座標から 36.25rem 引く。 */
.catch--ai .catch__wm--w1 {
  top: 7.491875rem; /* = wm--1 top */
  left: -27.5rem; /* = 8.75rem(wm--1 left) − 36.25rem(frame offset) */
}

.catch--ai .catch__wm--w2 {
  top: 19.399375rem; /* = wm--2 top */
  left: -18rem; /* = 18.25rem(wm--2 left) − 36.25rem(frame offset) */
}

/* 「A」（Figma: 27, 74.26 306x362） */
.catch--ai .catch__letter-a {
  position: absolute;
  top: 4.64125rem; /* ⚠ Figma実値 */
  left: 1.6875rem;
  width: 19.125rem;
  height: 22.625rem;
  object-fit: contain;
}

/* 「I」= 362x127 radius16 のグラデ矩形を90度回転（Figma: 469, 74.26 実寸127x362） */
.catch--ai .catch__letter-i {
  position: absolute;
  top: calc(4.64125rem + 7.34375rem); /* ⚠ 枠(127x362)中央に362x127を回転配置 */
  left: calc(29.3125rem - 7.34375rem);
  width: 22.625rem;
  height: 7.9375rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(-14.6deg, #005796 0%, #0078cf 100%); /* Figma実値 */
  transform: rotate(90deg);
}

/* === variant: service（業務改善診断イントロ）============================= */
/* 透かし OUR / SERVICE（200px）・装飾は青グラデ矩形3つ・サブタイトルは SemiBold */
.catch--service .catch__subtitle {
  font-weight: var(--font-weight-semibold);
}

.catch--service .catch__wm--1 {
  top: 7.5rem;
  left: 8.75rem;
}

.catch--service .catch__wm--2 {
  top: 19.375rem;
  left: 18.25rem;
}

.catch--service .catch__wm--w1 {
  top: 7.5rem;
  left: -24.375rem;
}

.catch--service .catch__wm--w2 {
  top: 19.5625rem;
  left: -15.5rem;
}

/* 帯状の青グラデ矩形（Figma: 2008:9075 548x304 radius 40） */
.catch--service .catch__rect {
  position: absolute;
  top: 8.25rem;
  left: 0;
  width: 34.25rem;
  height: 19rem;
  border-radius: var(--radius-xl);
  background: var(--gradient-blue-fill);
}

/* 右上の青グラデ矩形（Figma: 2008:9076 145x145 radius 32） */
.catch--service .catch__square--1 {
  position: absolute;
  top: 3.8125rem;
  left: 30rem; /* introバリアント実値 */
  width: 9.0625rem;
  height: 9.0625rem;
  border-radius: var(--radius-32);
  background: var(--gradient-blue-fill-diag);
}

/* 右上に浮く小矩形（Figma: 2060:10442 72x72 radius 24・写真より前面） */
.catch--service .catch__square--2 {
  position: absolute;
  top: -.5625rem;
  left: 23.4375rem;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-24);
  background: var(--gradient-blue-fill-diag);
  z-index: 2;
}

/* === SP: 縦積み（見出し→ビジュアル全幅）================================= */
@media (max-width: 767px) {
  .catch {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-32);
    padding-block: var(--space-48) var(--space-40);
    padding-inline: var(--space-24);
  }
  .catch__body,
  .catch--ai .catch__body {
    flex: none;
    max-width: 100%;
  }
  .catch__title {
    font-size: var(--font-size-h2);
  }
  .catch__subtitle {
    font-size: var(--font-size-h3-lg);
    line-height: var(--line-height-heading);
  }
  .catch__clause {
    display: inline-block;
  }
  /* SPのタイトルは行の固定改行を解き、文節（__clause）単位でだけ折り返す */
  .catch__title .catch__line {
    display: inline;
  }
  .catch__visual,
  .catch--ai .catch__visual {
    flex: none;
    width: 100%;
    height: 20rem;
  }

  /* 透かし英字：外側（青）はデスクトップ構図の座標が使えず本文と重なるため
     SPではフレーム内の白レイヤーのみ残す。白はフレーム基準で再配置 */
  .catch__wm--1,
  .catch__wm--2 {
    display: none;
  }
  .catch__wm--white,
  .catch--ld .catch__wm--white {
    font-size: var(--font-size-en-title);
  }
  .catch--ld .catch__wm--w1,
  .catch--ai .catch__wm--w1,
  .catch--service .catch__wm--w1 {
    top: 2rem;
    left: 1rem;
  }
  .catch--ld .catch__wm--w2,
  .catch--ai .catch__wm--w2,
  .catch--service .catch__wm--w2 {
    top: 8.5rem;
    left: 4rem;
  }

  /* variant装飾：ビジュアル(全幅×20rem)基準に縮小・再配置 */
  .catch--ld .catch__letters {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
  }
  .catch--ai .catch__letter-a {
    top: 1.5rem;
    left: 1rem;
    width: 12rem;
    height: 14.25rem;
  }
  .catch--ai .catch__letter-i {
    top: 8rem;
    left: auto;
    right: -2.875rem;
    width: 12rem;
    height: 4.25rem;
  }
  .catch--service .catch__rect {
    top: 5rem;
    width: 90%;
    height: 12rem;
  }
  .catch--service .catch__square--1 {
    top: 1.5rem;
    left: auto;
    right: 0;
    width: 6rem;
    height: 6rem;
  }
  .catch--service .catch__square--2 {
    left: auto;
    right: 4.5rem;
    width: 3.5rem;
    height: 3.5rem;
  }
}