/* p-feature — 代表メッセージ + 写真ブロック群（Figma 3191:32738 実測値） */

.p-feature {
  background: var(--color-white);
  color: var(--color-text);
  padding-top: var(--space-120);
  padding-bottom: var(--space-160);
}

.p-feature__inner {
  display: flex;
  gap: var(--space-120);
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-40);
  border-radius: var(--radius-xl); /* Figma inner radius 24px */
}

/* 縦回転「Message」レールは共通の .c-rail（base.css）。gapのみFigma実測に合わせる */
.p-feature .c-rail {
  gap: var(--space-40);
}

/* --- 本体 --- */
.p-feature__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

/* GENKIロゴ（640x280 + 下40px） */
.p-feature__logo {
  width: 40rem; /* 640px（Figma 3191:32745 のフレーム実寸） */
  max-width: 100%;
  padding-bottom: var(--space-40);
}

.p-feature__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 見出し・本文・署名 --- */
.p-feature__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.p-feature__heading-label {
  margin: 0;
  font-size: var(--font-size-h2-lead); /* 25.6px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.p-feature__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.p-feature__title {
  margin: 0;
  font-size: var(--font-size-h2); /* 32px */
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
}

.p-feature__text {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose); /* 28.8px = 1.8 */
}

.p-feature__signature {
  margin: 0;
  text-align: right;
  font-size: var(--font-size-h3); /* 18.29px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.p-feature__signature-company {
  display: block;
}

.p-feature__signature-name {
  font-size: var(--font-size-h2-lead); /* 25.6px */
  padding-left: var(--space-8); /* inferred: Figmaは全角スペース相当の間隔 */
}

.p-feature__button {
  display: flex;
  justify-content: flex-end;
}

/* --- 写真ブロック --- */
.p-feature__img {
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius-lg); /* 16px */
  overflow: clip;
}

.p-feature__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-feature__img--wide {
  aspect-ratio: 925 / 280; /* Figma実測 */
}

.p-feature__img--tall {
  aspect-ratio: 936 / 388; /* Figma実測 */
}

/* 下層ページの単独写真（Figma 事業紹介 3191:24151 / 3191:24154） */
.p-feature__img--bordered {
  aspect-ratio: 936 / 388; /* Figma実測 */
}

/* ベージュ背景版（Figma 事業紹介 3191:24151 / 3191:24154） */
.p-feature--beige {
  background: var(--color-bg-beige); /* #FFF + #A89990 10%（Figma変数） */
}

/* ダーク背景版（Figma カフェ 3191:24178 / 3191:24179） */
.p-feature--dark {
  background: var(--color-primary);
  color: var(--color-white);
}

.p-feature--dark .p-feature__img {
  border-color: var(--color-white);
}

.p-feature--dark .p-feature__grid {
  background: var(--color-white);
  border-color: var(--color-white);
}

/* 上下パディングのバリアント（Figma実測。既定は pt120 / pb160） */
.p-feature--pt80 { padding-top: var(--space-80); }
.p-feature--pb80 { padding-bottom: var(--space-80); }
.p-feature--pb104 { padding-bottom: var(--space-104); }
.p-feature--pb120 { padding-bottom: var(--space-120); }

/* 旧 spacing='even' 相当（pt120/pb120）。pb120 修飾子で表現する */
.p-feature--even {
  padding-bottom: var(--space-120);
}

/* 小見出しなし＋ボタンありのとき、Figma はボタンを本文の外に出して gap 40px にする
   （3191:24352 / 3191:24353 / 3191:24362 / 3191:24363） */
.p-feature__heading--split {
  gap: var(--space-40);
}

/* 大サイズ見出し（Figma カフェ 3191:24178「g and BAGEL FACTORY」） */
.p-feature__title--xl {
  font-size: var(--font-size-h1); /* 42.667px */
}

/* 見出しの上に置く画像（Figma 3191:24153。下に40pxの余白） */
.p-feature__image-top {
  padding-bottom: var(--space-40);
}

.p-feature__image-top img {
  display: block;
  width: 40rem;  /* 640px（Figma実測） */
  max-width: 100%;
  height: auto;
}

/* 見出し小サイズ（Figma 3191:24154「高橋 理子」） */
.p-feature__title--md {
  font-size: var(--font-size-h2-lead); /* 25.6px */
}

.p-feature__title-note {
  font-size: var(--font-size-body); /* 16px */
  font-weight: var(--font-weight-bold);
}

/* グリッド（上段1枚 + 下段3枚）
   外周の線と角丸はグリッド自身の border で描く（角丸部分にも線が乗る）。
   内側の区切り線は各写真の border ではなく、gap を線幅ぶん空けて
   グリッドの背景色を透かすことで表現する（線が2重にならない）。 */
.p-feature__grid {
  display: flex;
  flex-direction: column;
  gap: var(--border-width);
  background: var(--color-text);
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius-lg);
  overflow: clip;
}

.p-feature__grid .p-feature__img {
  border: 0;
  border-radius: 0;
}

.p-feature__grid-row {
  display: flex;
  gap: var(--border-width);
}

.p-feature__grid-row .p-feature__img {
  flex: 1;
}

.p-feature__grid-row--landscape .p-feature__img {
  aspect-ratio: 312 / 193; /* Figma実測 */
}

.p-feature__grid-row--square .p-feature__img {
  aspect-ratio: var(--ratio-square);
}

/* --- SP（767px以下・inferred: SPフレーム未提供のため暫定） --- */
@media (max-width: 767px) {
  .p-feature {
    /* 下は次の p-feature の上余白に任せる（連続する場合は地続きに見せる） */
    padding-block: var(--space-40) 0;
  }

  /* 連続の最後（次が p-feature ではない）だけ、別セクションとの間隔を確保する */
  .p-feature:not(:has(+ .p-feature)) {
    padding-bottom: var(--space-56);
  }

  .p-feature__inner {
    position: relative; /* レール（c-rail）の基準 */
    padding-inline: var(--space-48) var(--space-24);
  }

  .p-feature__body {
    gap: var(--space-40); /* p-content__body と同じ */
  }

  /* p-content__heading-name と同じ扱い（施設名・小見出しの見え方を揃える） */
  .p-feature__heading-label {
    font-size: var(--font-size-h3-lg); /* 21.33px */
  }

  /* SPは見出しをタイプスケール1段下げ（32px → 25.6px） */
  .p-feature__title {
    font-size: var(--font-size-h2-lead);
  }

  /* SPでは大・中サイズのバリアントも同じ 25.6px に揃える */
  .p-feature__title--xl,
  .p-feature__title--md {
    font-size: var(--font-size-h2-lead); /* 25.6px */
  }

  /* GENKIロゴを持つver（Figma 3191:24153「シンボルマークに込めた想い」）は
     ラベル・見出しとも長いため他verより小さくし、ロゴと合わせて中央に揃える */
  .p-feature__body:has(.p-feature__logo) .p-feature__logo {
    margin-inline: auto;
  }

  .p-feature__body:has(.p-feature__logo) .p-feature__heading-label,
  .p-feature__body:has(.p-feature__logo) .p-feature__title {
    text-align: center;
  }

  .p-feature__body:has(.p-feature__logo) .p-feature__heading-label {
    font-size: var(--font-size-h3); /* 18.286px */
  }

  .p-feature__body:has(.p-feature__logo) .p-feature__title {
    font-size: var(--font-size-h2-lead); /* 25.6px */
    /* 「」の前後に入る和文の固定アキを詰める（プロポーショナルメトリクス）。
       フォントが未対応なら無視されるだけで、レイアウトは壊れない。 */
    font-feature-settings: "palt";
  }

  /* 署名は本文より控えめに。会社名・肩書きを1段、氏名も1段小さく */
  .p-feature__signature-company,
  .p-feature__signature-person {
    font-size: var(--font-size-h5); /* 14.222px（PC 18.286px から） */
  }

  .p-feature__signature-name {
    font-size: var(--font-size-h3-lg); /* 21.33px（PC 25.6px から1段階） */
  }

  /* 肩書き（Figma 3191:24154「アーティスト/武蔵野美術大学教授」）は
     SPでは名前の右に置くと収まらないため、名前の下の行に落とす */
  .p-feature__title-note {
    display: block;
    font-size: var(--font-size-h5); /* 14.222px（PC 16px から1段階） */
  }

  /* p-content と同じ扱い: レールはフローから外し、縦罫線の中心を左から24に合わせる */
  .p-feature .c-rail {
    position: absolute;
    left: var(--space-24);
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    gap: var(--space-16);
  }

  .p-feature__logo {
    width: 70%;
    padding-bottom: 0; /* ブロック間隔は p-feature__body の gap に任せる */
  }

  /* 写真グリッド: PCは隙間なしの1枚絵だが、SPは3枚が細くなりすぎるため
     2カラム＋gapに組み替える（3枚目は横いっぱい）。
     行ラッパーは display:contents で透過させ、グリッド1つとして流し込む。 */
  .p-feature__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 区切り線は PC と同じく gap（線幅）+ 背景色で表現する */
  }

  .p-feature__grid-row {
    display: contents;
  }

  /* 主写真と3枚目（＝最後の1枚）は横いっぱい */
  .p-feature__grid > .p-feature__img,
  .p-feature__grid-row .p-feature__img:last-child {
    grid-column: 1 / -1;
  }
}