/* ===========================================================
   pages/service.css — サービス一覧 / 各サービス詳細
   =========================================================== */

/* --- サービス一覧 ------------------------------------------ */

.p-service-list {
  display: flex;
  flex-direction: column;
}

.p-service-item {
  display: grid;
  gap: var(--sp-md);
  padding-block: var(--sp-2xl);
  border-bottom: 1px solid var(--c-line);
}

.p-service-item:first-child {
  border-top: 1px solid var(--c-line);
}

@media (min-width: 768px) {
  .p-service-item {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--sp-2xl);
    /* 番号（英字フォント）と見出し（日本語フォント）は文字の上下の占め方が
       違うので、行の高さを揃えるだけでは高さが合わない。
       ベースライン（文字が乗る線）同士を揃えると、フォントに関係なく合う。
       本文側は縦積みの flex なので、その先頭＝見出しのベースラインが使われる。 */
    align-items: baseline;
    padding-block: var(--sp-3xl);
  }
}

.p-service-item__num {
  font-family: var(--ff-en);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  /* 見出しとの高さ合わせは .p-service-item 側の align-items: baseline が担うので、
     ここは行の高さを増やさない（増やすと行の上に余分な余白が生まれる）。 */
  line-height: 1;
  color: var(--c-ink-faint);
}

.p-service-item__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-md);
  max-width: var(--w-prose);
}

.p-service-item__body p:not(.t-lead) {
  color: var(--c-ink-mute);
}

.p-service-item__body .c-btn {
  margin-top: var(--sp-sm);
}

/* --- 一覧の各行に敷くサービスの絵柄 --------------------------
   考え方はページヘッダー（components.css の .c-pagehead[data-pagehead]）
   と同じ。行の右端に正方形で置き、左へ向かって透明に溶かす。
   どの絵柄を出すかは、マークアップ側の data-service 属性で決まる。
   種類を増やすときは、下と同じ形のブロックを1つ足すだけでよい。 */

/* 絵柄を出すのは 1024px 以上だけ。それ未満では本文が幅いっぱいに
   折り返すので、絵柄をどこに置いても文字の背景に入ってしまう。
   本文色は白地でも 4.5:1 ぎりぎり（約4.9:1）しか余裕がなく、
   薄く敷いただけで WCAG AA を割るため、割り切って出さない。 */
@media (min-width: 1024px) {
  .p-service-item[data-service] {
    /* 絵柄のぶんの列をグリッドに確保して、本文と重ならないようにする。
       列幅と絵柄の幅は同じ変数を共有させている。 */
    --deco-w: clamp(12rem, 24vw, 26rem);
    position: relative;
    overflow: hidden;
    grid-template-columns: 8rem minmax(0, 1fr) var(--deco-w);
  }

  .p-service-item[data-service]::after {
    content: "";
    position: absolute;
    /* 行の上下いっぱい＝区切り線に接する高さにする。
       幅は行の高さからではなく上の変数で決め、横方向を切り取って使う。 */
    inset-block: 0;
    right: 0;
    width: var(--deco-w);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.26;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 70%);
    mask-image: linear-gradient(to right, transparent 0%, #000 70%);
    pointer-events: none;
  }

  /* GraphDB × AI解析: デジタル空間（ノードと繋がり） */
  .p-service-item[data-service="graphdb"]::after {
    background-image: url("../../img/pagehead-bg.jpg");
  }

  /* marumado: 縦長の枠を埋めるため contain ではなく cover で切り取る。
     淡いパステルなので、他より濃度を上げないと形が読めない。 */
  .p-service-item[data-service="marumado"]::after {
    background-image: url("../../img/marumado.png");
    opacity: 0.42;
  }
}

/* --- 詳細ページの本文ブロック ------------------------------ */

.p-prose-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  color: var(--c-ink-mute);
  max-width: var(--w-prose);
}

.p-prose-block .t-lead {
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}

/* --- marumado の導入イメージ（スマホ画面のモック） ------------
   狭い画面では「文章 → 画像」の縦積み。
   1024px以上では左に文章・右に画像。縦長の画像を横に置くと、
   広い画面で余りがちな右側をちょうど埋められる。 */

.p-marumado-intro {
  display: grid;
  gap: var(--sp-2xl);
}

.p-marumado-intro__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

@media (min-width: 1024px) {
  .p-marumado-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: clamp(var(--sp-2xl), 6vw, 5rem);
    align-items: center;
  }
}

.p-marumado-shot {
  display: flex;
  justify-content: center;
}

/* 縦長なので、幅ではなく高さで上限を決める
   （幅に合わせると画面の縦を使い切ってしまう） */
.p-marumado-shot img {
  width: auto;
  max-width: 100%;
  max-height: min(70vh, 560px);
  height: auto;
}