/* wall.css — 課題の壁（PROBLEM 青パネル）共有コンポーネント
   （Figma: AIおたすけ隊 Value 2247:65717 / 人材研修 Value 2247:67254）
   実値: #0078CF radius40 p120 / タイトル 32px Black 白 ls 0.1em lh1.6
         リード 18.29px Medium 白 / カード 白 p24 gap16 radius16 影 --shadow-card
         透かし 200px 白グラデ opacity .14 / 下ノッチ 103x43 */

.wall {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-40);
}

/* サービスTOPでは、上のTRANSFORMATION青帯とパネルの間に80pxの余白が入る
   （Figma 2652:8087: フレーム上端から80px下がった位置にパネルが始まる）。
   AI・人材研修のPROBLEMはFigma未確認のため、ページ限定で当てる。 */
@media (min-width: 768px) {
  .page-template-page-service .wall {
    padding-top: var(--space-80);
  }
}

.wall__panel {
  position: relative;
  width: 100%;
  padding: var(--space-120);
  border-radius: var(--radius-xl);
  background: var(--color-primary);
  overflow: hidden;
}

.wall__watermark {
  position: absolute;
  top: .57875rem; /* ⚠ Figma実値 9.26px */
  left: calc(50% - 33.6875rem); /* Figma実値: 1440px中 x181 */
  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-white-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.14; /* ⚠ Figma実値 14% */
  text-shadow: var(--shadow-watermark);
  pointer-events: none;
}

.wall__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  align-items: center;
  max-width: var(--layout-max);
  margin: 0 auto;
}

.wall__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: center;
  width: 100%;
}

.wall__title {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

.wall__bar {
  display: block;
  width: 3.75rem;
  height: .375rem;
  background: var(--color-white);
}

.wall__lead {
  margin: 0;
  color: var(--color-white);
  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: center;
}

/* 行（__cards）のラッパ。PCでは行間を持つだけの縦積みだが、SPでここが
   2カラムグリッド本体になり、__cards は display:contents で畳まれる。 */
.wall__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  width: 100%;
}

.wall__cards {
  display: flex;
  gap: var(--space-24);
  width: 100%;
}

.wall-card {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

/* リード文は PHP 側で 行(__line) > 文節(__clause) の入れ子に分解される。
   PCは __line が block ＝ Figma通りの行組み。SPでは __clause を inline-block にし、
   行に収まらない文節だけが次行へ送られる（語の途中では割れない）。 */
.wall__line {
  display: block;
}

.wall-card__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-card);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

.wall-card__text {
  width: 18.25rem; /* Figma実値 */
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

/* イラスト入りバリアント（Figma: 人材研修 2247:67262 / 画像182x120 + 見出しのみ）
   実値: gap24 / 見出し 24px Bold lh1.6 字間なし */
.wall-card--figure {
  gap: var(--space-24);
}

.wall-card--figure .wall-card__title {
  font-weight: var(--font-weight-bold);
  letter-spacing: normal;
}

.wall-card__figure {
  width: 11.375rem; /* Figma実値 */
  height: auto;
}

/* 3枚に満たない行は中央寄せ＋カード幅は Figma実値 384px 固定。
   3枚行の flex:1 も内側1200px幅で 384px になるため、行をまたいで幅が揃う。
   （Figma: サービスTOP 4083:8567 は w-384 の2枚を中央寄せ）*/
.wall__cards--center {
  justify-content: center;
}

.wall__cards--center .wall-card {
  flex: 0 0 24rem;
}

/* --- ライトバリアント（Figma: サービスTOP Value 4083:8550）-------------------
   グレーパネル・黒見出し・青バー。カードは青パネル版と同一仕様。
   ノッチはFigmaでは次フレーム（4083:8575 Polygon 1 / 103x43 / fill #F3F3F3）の
   先頭に置かれているが、見た目はこのパネルの吹き出しなのでここで描く。 */
.wall--light .wall__notch {
  border-top-color: var(--color-gray-light);
}

.wall--light .wall__panel {
  padding-bottom: var(--space-80); /* Figma実値: 上120 / 下80 */
  background: var(--color-gray-light);
}

/* 青パネル版は background-clip:text でグラデを文字に流し込むが、light版は単色。
   background: none は「ショートハンドなので background-clip も border-box に戻る」
   ことを利用して、base のグラデ＋クリップをまとめて打ち消している。
   （ここを background: <gradient> にすると clip が外れて塗りが矩形で出る）*/
.wall--light .wall__watermark {
  left: calc(50% - 33rem); /* Figma実値: 1440px中 x192 */
  background: none;
  color: var(--color-watermark-gray);
  opacity: 0.5; /* Figma実値 50% */
  text-shadow: none;
}

.wall--light .wall__title,
.wall--light .wall__lead {
  color: var(--color-black);
}

.wall--light .wall__bar {
  background: var(--color-primary);
}

/* パネル下の吹き出しノッチ。section.css の .section--arrow::after と同じ三角形
   （120x40）。⚠ 寸法を変えるときは両方揃えること */
.wall__notch {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 3.75rem solid transparent;
  border-right: 3.75rem solid transparent;
  border-top: 2.5rem solid var(--color-primary);
}

/* --- SP: カードは縦積み ---------------------------------------------------- */
@media (max-width: 767px) {
  /* PCの margin-bottom はノッチ（absolute・パネル外に40pxはみ出す）の場所取りだが、
     SPでは次セクションに食い込ませる想定なので余白は持たせない */
  .wall {
    margin-bottom: 0;
  }
  .wall__panel {
    padding: var(--space-48) var(--space-24);
    border-radius: 0;
  }
  /* 透かしの位置は section.css の .section__watermark（トップ）に合わせる */
  .wall__watermark {
    font-size: var(--font-size-en-title);
    top: var(--space-16);
    left: 50%;
    transform: translateX(-50%);
  }
  /* ノッチのSP縮小も .section--arrow::after と同値に揃える */
  .wall__notch {
    border-left-width: 2.5rem;
    border-right-width: 2.5rem;
    border-top-width: 1.75rem;
  }
  /* .wall-card は cards.css の .icon-card と同じ種類のカード（白地・角丸lg・影・
     イラスト＋見出しの中央揃え）。SPの組み方も icon-card（.cards-grid）に合わせ、
     2カラムのコンパクト版にする。 */
  /* PCの3枚区切り（__cards）はSPでは意味がないので display:contents で解体し、
     全カードを __rows 直下の1つのグリッドに流し込む＝行をまたいで2カラムに詰まる */
  .wall__rows {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
  }
  .wall__cards {
    display: contents;
  }
  .wall--light .wall__panel {
    padding-bottom: var(--space-64);
  }
  /* グリッドでは flex-basis が効かないうえ、PC用の384px固定は不要 */
  .wall__cards--center .wall-card {
    flex: 0 1 auto;
  }
  /* 総数が奇数のときの最後の1枚は、2列にまたがらせたうえで中央に置く。
     幅は他カード（1列ぶん）と同じに保つ＝ 50% − gapの半分。
     display:contents で :nth-child は行内番号のままなので、総数の偶奇は
     PHPが付ける --odd で判定する。 */
  .wall__rows--odd .wall__cards:last-child .wall-card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--space-8));
  }
  .wall-card,
  .wall-card--figure {
    gap: var(--space-8);
    padding: var(--space-16);
  }
  .wall-card__figure {
    width: 100%;
    max-height: 5rem; /* icon-card__icon のSP高さに合わせる */
    object-fit: contain;
  }
  /* 見出しは cards.css の .icon-card__text（SP）と同値にする。
     --figure バリアントが字間normalを当てているので、同じ詳細度で上書きする */
  .wall-card__title,
  .wall-card--figure .wall-card__title {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-widest);
  }
  .wall-card__text {
    width: 100%;
    font-size: var(--font-size-h5);
  }
  /* PC用の<br>を無効化し、SPは素の折返しに任せる */
  .wall__lead br,
  .wall-card__title br { display: none; }
  /* SPのリード文は行の固定改行を解き、文節（__clause）単位でだけ折り返す */
  .wall__clause {
    display: inline-block;
  }
  .wall__lead .wall__line {
    display: inline;
  }
  /* カード見出しは2カラムで幅が狭く、keep-all だと1文が収まらずはみ出すため
     素の折返しに任せる（balanceで行末の孤立文字だけ防ぐ） */
  .wall-card__title { text-wrap: balance; }
}