/* message.css — 代表メッセージ
   Figma: 2005:55717。テキスト＋写真の段組み、プロフィールパネル、SNSカードはこのページ固有 */

/* 導入（見出し＋本文 800px）Figma: 2005:55726 */
.message-intro {
  padding-bottom: var(--space-40);
}

.message-intro .content-section__body {
  --message-intro-body-width: 50rem; /* 800px */

  width: min(var(--message-intro-body-width), 100%);
}

/* テキスト＋写真の段組み Figma: 2091:61028 ---------------------------------- */
/* SP だけの改行位置 */
.message-row__br-sp {
  display: none;
}

.message-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-80);
  padding-bottom: var(--space-40);
}

.message-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-40);
  color: var(--color-black);
}

.message-row__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  min-width: 0;
}

/* 見出し（帯 6px は幅に含まれる。media-card と同じ）*/
.message-row__title {
  margin: 0;
  padding-left: var(--space-24);
  border-left: var(--border-width-6) solid var(--color-genki-port-a89990);
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-3);
  white-space: nowrap;
}

.message-row__text .content-section__body {
  --message-row-body-width: 30rem; /* 480px */

  width: min(var(--message-row-body-width), 100%);
}

.message-row__image {
  flex: 1 0 0;
  align-self: stretch;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

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

/* プロフィールパネル Figma: 2005:55769 --------------------------------------- */
.profile-panel {
  padding: var(--space-40) var(--space-56);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  background-image: linear-gradient(90deg, var(--color-genki-port-a89990-20), var(--color-genki-port-a89990-20));
  color: var(--color-black);
}

.profile-panel__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.profile-panel__deco {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(460 / 16 * 1rem);
  height: calc(303.594 / 16 * 1rem);
  pointer-events: none;
}

.profile-panel__text {
  --profile-panel-text-width: 30rem; /* 480px */

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  width: min(var(--profile-panel-text-width), 100%);
}

.profile-panel__text .heading {
  width: 100%;
}

.profile-panel__person {
  --profile-panel-photo: 20rem; /* 320px */

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.profile-panel__photo {
  width: min(var(--profile-panel-photo), 100%);
  aspect-ratio: var(--ratio-square);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

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

.profile-panel__name {
  display: flex;
  align-items: flex-end;
  gap: var(--space-16);
  margin: 0;
  white-space: nowrap;
}

.profile-panel__name-ja {
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.profile-panel__name-en {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
}

/* SNS・Blog Figma: 2005:56202 ---------------------------------------------- */
.sns-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  padding-top: var(--space-40);
  color: var(--color-black);
}

.sns-section .heading {
  width: 100%;
}

.sns-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  width: 100%;
}

.sns-grid__row {
  display: flex;
  justify-content: center;
  gap: var(--space-40);
  width: 100%;
}

.sns-card {
  --sns-card-text-height: 4.5rem; /* 72px */

  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  min-width: 0;
  padding: calc(var(--space-24) - var(--border-width)) calc(var(--space-40) - var(--border-width)) calc(var(--space-32) - var(--border-width));
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.sns-card__title {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-compact);
  white-space: nowrap;
}

.sns-card__text {
  width: 100%;
  min-height: var(--sns-card-text-height);
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
}

/* 1200px 以下：Figma で1行固定（nowrap）の見出しも、幅が足りなければ折り返す */
@media (max-width: 1200px) {
  .message-row__title,
  .sns-card__title {
    white-space: normal;
  }
}

/* 767px 以下（SP）：横並びを縦1列に。⚠ SPデザイン未確定のため仮レイアウト */
@media (max-width: 767px) {
  .message-intro {
    padding-bottom: 0;
  }

  .message-rows {
    gap: var(--space-40);
  }

  .message-row__br-sp {
    display: inline;
  }

  .message-row__title {
    padding-left: var(--space-16);
  }

  .message-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* 写真が左の段（HTML で写真が先）も、SP では文章 → 写真の順にそろえる */
  .message-row__image {
    flex: none;
    order: 1;
    aspect-ratio: var(--ratio-4-3);
  }

  .profile-panel {
    padding: var(--space-40) var(--space-24);
  }

  .profile-panel__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-40);
  }

  .profile-panel__person {
    width: 100%;
  }

  .sns-grid__row {
    flex-direction: column;
  }

  .sns-card {
    flex: none;
    gap: var(--space-16);
    padding-inline: calc(var(--space-24) - var(--border-width));
  }
}