/* FILE: assets/css/page-about.css */
/* 会社概要ページ（/about/index.html）固有のスタイル
   ※ もとはHTMLのインラインstyleで書かれていたものを、
      4ブレークポイント対応のうえここへ移した（HANDOVER_v3.md §6-1・§6-3） */

/* =========================================================
   CORPORATE PROFILE：左＝定義リスト／右＝写真グリッド
   ========================================================= */
.about-profile {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.about-profile__list {
  font-size: var(--fs-base);
  line-height: 2;
  min-width: 0;
}

.about-profile__list dt {
  font-weight: var(--fw-bold);
}

.about-profile__list dt + dd {
  margin-bottom: var(--space-sm);
  overflow-wrap: break-word;
}

.about-profile__list dd:last-child {
  margin-bottom: 0;
}

/* CORPORATE PROFILE は第11弾で画像なしに変更。
   画像が無いので1カラムにする。 */
.about-profile--no-image {
  grid-template-columns: 1fr;
}

/* =========================================================
   FOUNDERS：左＝本文／右＝顔写真
   ========================================================= */
.about-founders {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-lg);
  align-items: start;
}

.about-founders__body {
  min-width: 0;
}

.about-founders__name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}

/* 顔写真は縦位置。人物が切れないよう上寄せでトリミングする */
.about-founders__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-sm);
  min-width: 0;
}

/* メディア掲載＆登壇実績 */
.about-media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

/* クライアントロゴ帯
   支給画像は横長のロゴ一覧1枚もので、他と並べて高さを揃える対象ではない。
   比率を固定すると左右に大きな白い余白が出るため、画像本来の比率で表示する。
   地色と細い囲み線は base.css の共通ルールが当たる。 */
.about-clients__media {
  margin-top: var(--space-sm);
}

/* =========================================================
   ブレークポイント
   ========================================================= */

/* タブレット（〜1023px）：2カラムを解除して縦積みにする */
@media (max-width: 1023px) {
  .about-profile,
  .about-founders {
    grid-template-columns: 1fr;
  }

  /* 顔写真が縦積み時に巨大化しないように上限を設ける */
  .about-founders__photo {
    max-width: 280px;
  }

}

/* スマートフォン（〜767px） */
@media (max-width: 767px) {
  .about-media-grid {
    grid-template-columns: 1fr 1fr;
  }

  .about-profile__list {
    line-height: 1.9;
  }
}