/**
 * Section: 担当固定制の説明（メニュー文脈での差別化訴求）
 * Page:    Menu (order: 2)
 * Prefix:  men-s02
 */

/* ============================================================
  :root — Section-specific design tokens (men-s02)
  ============================================================ */
:root {
  /* --- Colors --- */
  --men-s02-color-bg:               #FDF2F8;
  --men-s02-color-text-primary:     #831843;
  --men-s02-color-text-secondary:   #64748B;
  --men-s02-color-accent-line:      #EC4899;

  --men-s02-color-quote-deco:       #F9A8D4;
  --men-s02-color-quote-deco-opacity: 0.6;
  --men-s02-color-quote-bg:         #FFFFFF;
  --men-s02-color-quote-shadow:     rgba(131, 24, 67, 0.07);

  --men-s02-color-portrait-fade:    #FDF2F8;
  --men-s02-color-focus:            #8B5CF6;

  /* --- Typography: heading --- */
  --men-s02-font-family-display:    'Playfair Display', Georgia, serif;
  --men-s02-font-family-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --men-s02-font-size-heading:      clamp(1.5rem, 3vw, 2.25rem);
  --men-s02-font-weight-heading:    500;
  --men-s02-line-height-heading:    1.3;

  /* --- Typography: subheadline & body copy --- */
  --men-s02-font-size-body:         1rem;
  --men-s02-font-weight-body:       300;
  --men-s02-line-height-body:       1.75;

  /* --- Typography: quote card --- */
  --men-s02-font-size-quote:        0.9rem;
  --men-s02-font-weight-quote:      400;
  --men-s02-line-height-quote:      1.6;

  /* --- Typography: owner credit --- */
  --men-s02-font-size-credit:       0.75rem;
  --men-s02-font-weight-credit:     300;
  --men-s02-line-height-credit:     1.5;

  /* --- Typography: decorative quotation mark --- */
  --men-s02-font-size-quote-deco:   2rem;

  /* --- Spacing --- */
  --men-s02-padding-top-mobile:     64px;
  --men-s02-padding-top-desktop:    96px;
  --men-s02-padding-bottom-mobile:  48px;
  --men-s02-padding-bottom-desktop: 64px;
  --men-s02-gap-line-to-heading:    16px;
  --men-s02-gap-heading-to-body:    32px;
  --men-s02-margin-inline-mobile:   24px;
  --men-s02-margin-inline-desktop:  64px;

  /* --- Accent line --- */
  --men-s02-accent-line-height:     1px;
  --men-s02-accent-line-width-final: 32px;

  /* --- Quote card --- */
  --men-s02-quote-padding-v:        24px;
  --men-s02-quote-padding-h:        32px;
  --men-s02-quote-border-width:     3px;
  --men-s02-quote-radius:           8px;
  --men-s02-quote-shadow:           0 2px 16px var(--men-s02-color-quote-shadow);

  /* --- Portrait --- */
  --men-s02-portrait-bleed-top:     8px;
  --men-s02-portrait-gradient-h:    80px;

  /* --- Grid --- */
  --men-s02-max-width:              1200px;

  /* --- Animation: MI-1 (heading + accent line) --- */
  --men-s02-animate-duration-mi1:   700ms;
  --men-s02-animate-easing-mi1:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --men-s02-animate-translate-y-mi1: 16px;

  /* --- Animation: MI-2 (portrait) --- */
  --men-s02-animate-duration-mi2:   1000ms;
  --men-s02-animate-easing-mi2:     ease-in-out;
  --men-s02-animate-delay-mi2:      150ms;

  /* --- Animation: MI-3 (quote card) --- */
  --men-s02-animate-duration-mi3:   600ms;
  --men-s02-animate-easing-mi3:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --men-s02-animate-translate-y-mi3: 8px;
  --men-s02-animate-delay-mi3:      200ms;
}

/* ============================================================
  Section root — モバイルベース
  ============================================================ */
.men-s02 {
  background-color: var(--men-s02-color-bg);
  padding-top:      var(--men-s02-padding-top-mobile);
  padding-bottom:   var(--men-s02-padding-bottom-mobile);
  /* quote card の絶対配置基準 */
  position:         relative;
  /* portrait top bleed のためoverflow: visible */
  overflow:         visible;
}

/* ============================================================
  Inner wrapper — モバイル: 1カラム積み上げ
  ============================================================ */
.men-s02__inner {
  max-width:      var(--men-s02-max-width);
  margin-inline:  auto;
  padding-inline: var(--men-s02-margin-inline-mobile);
  display:        grid;
  grid-template-columns: 1fr;
  row-gap:        0;
}

/* ============================================================
  LEFT ZONE: テキストゾーン
  ============================================================ */
.men-s02__text-zone {
  /* モバイル: フル幅 */
}

/* ============================================================
  見出しブロック（アクセントライン + h2 ラッパー）
  ============================================================ */
.men-s02__heading-block {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

/* ============================================================
  水平アクセントライン
  初期状態: width 0 → JS クラス付与で 32px に伸長
  ============================================================ */
.men-s02__accent-line {
  display:          block;
  height:           var(--men-s02-accent-line-height);
  width:            0;
  background-color: var(--men-s02-color-accent-line);
  margin-bottom:    var(--men-s02-gap-line-to-heading);
  /* transition は hidden クラス側に定義 */
}

/* ============================================================
  Heading (h2)
  ============================================================ */
.men-s02__heading {
  font-family:    var(--men-s02-font-family-display);
  font-weight:    var(--men-s02-font-weight-heading);
  font-size:      var(--men-s02-font-size-heading);
  line-height:    var(--men-s02-line-height-heading);
  letter-spacing: normal;
  color:          var(--men-s02-color-text-primary);
  text-align:     left;
}

/* ============================================================
  補足テキストブロック
  ============================================================ */
.men-s02__body-block {
  margin-top: var(--men-s02-gap-heading-to-body);
}

.men-s02__subheadline {
  font-family:    var(--men-s02-font-family-body);
  font-weight:    var(--men-s02-font-weight-body);
  font-size:      var(--men-s02-font-size-body);
  line-height:    var(--men-s02-line-height-body);
  letter-spacing: normal;
  color:          var(--men-s02-color-text-secondary);
  text-align:     left;
}

.men-s02__body-copy {
  font-family:    var(--men-s02-font-family-body);
  font-weight:    var(--men-s02-font-weight-body);
  font-size:      var(--men-s02-font-size-body);
  line-height:    var(--men-s02-line-height-body);
  letter-spacing: normal;
  color:          var(--men-s02-color-text-secondary);
  text-align:     left;
  margin-top:     1rem;
  margin-bottom:  1rem;

}

/* ============================================================
  RIGHT ZONE: ビジュアルゾーン
  モバイル: テキストゾーンの下に配置、右寄せ
  ============================================================ */
.men-s02__visual-zone {
  position:   relative;
  margin-top: 48px;
}

/* ============================================================
  ポートレートコンテナ
  モバイル: 右寄せ・aspect-ratio 4/5 で CLS 防止
  ============================================================ */
.men-s02__portrait-container {
  position:     relative;
  /* モバイル: 右寄せ・左に24pxのマージンで非対称配置 */
  width:        calc(100% - 24px);
  margin-left:  auto;
  aspect-ratio: 4 / 5;
  overflow:     visible;
  /* portrait top bleed: セクション上端より 8px 上へ */
  margin-top:   calc(-1 * var(--men-s02-portrait-bleed-top));
}

/* ============================================================
  <picture> 要素
  ============================================================ */
.men-s02__portrait-picture {
  display: block;
  width:   100%;
  height:  100%;
}

/* ============================================================
  ポートレート画像
  ============================================================ */
.men-s02__portrait-image {
  display:         block;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
}

/* ============================================================
  ポートレート下部グラデーションフェード
  疑似要素で #FDF2F8 へ 80px でフェード
  ============================================================ */
.men-s02__portrait-container::after {
  content:  '';
  position: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  height:   var(--men-s02-portrait-gradient-h);
  background: linear-gradient(
    to bottom,
    transparent,
    var(--men-s02-color-portrait-fade)
  );
  pointer-events: none;
}

/* ============================================================
  オーナー引用文カード（blockquote）
  モバイル: ポートレート下部に overlap して配置
  ============================================================ */
.men-s02__quote-card {
  position:       relative;
  width:          100%;
  margin-inline:  0;
  background-color: var(--men-s02-color-quote-bg);
  border-left:    var(--men-s02-quote-border-width) solid
                  var(--men-s02-color-accent-line);
  border-radius:  var(--men-s02-quote-radius);
  box-shadow:     var(--men-s02-quote-shadow);
  padding:        var(--men-s02-quote-padding-v)
                  var(--men-s02-quote-padding-h);
  /* blockquote のデフォルト margin をリセット（reset.css 未定義の場合のみ） */
  margin-left:    0;
  margin-right:   0;
  margin-bottom:  0;
}


/* ============================================================
  引用文テキスト
  ============================================================ */
.men-s02__quote-text {
  font-family:    var(--men-s02-font-family-display);
  font-weight:    var(--men-s02-font-weight-quote);
  font-size:      var(--men-s02-font-size-quote);
  line-height:    var(--men-s02-line-height-quote);
  letter-spacing: normal;
  color:          var(--men-s02-color-text-primary);
  font-style:     italic;
  text-align:     left;
}

/* ============================================================
  引用文フッター・クレジット
  ============================================================ */
.men-s02__quote-footer {
  margin-top: 12px;
}

.men-s02__quote-credit {
  font-family:    var(--men-s02-font-family-body);
  font-weight:    var(--men-s02-font-weight-credit);
  font-size:      var(--men-s02-font-size-credit);
  line-height:    var(--men-s02-line-height-credit);
  letter-spacing: normal;
  color:          var(--men-s02-color-text-secondary);
  font-style:     normal;
}

/* ============================================================
  Focus indicator
  ============================================================ */
.men-s02 a:focus-visible,
.men-s02 button:focus-visible {
  outline:        2px solid var(--men-s02-color-focus);
  outline-offset: 3px;
}

/* ============================================================
  ANIMATION — Initial states
  transition は hidden クラス側に定義する
  ============================================================ */

/**
 * MI-1: 見出しブロック（水平ライン + heading）
 * 初期状態: translateY(16px) + opacity 0
 * 表示状態: translateY(0)    + opacity 1
 * アクセントラインの width: 0 → 32px も同時に発火
 */
.men-s02-js-heading-hidden {
  opacity:   0;
  transform: translateY(var(--men-s02-animate-translate-y-mi1));
  transition:
    opacity
      var(--men-s02-animate-duration-mi1)
      var(--men-s02-animate-easing-mi1),
    transform
      var(--men-s02-animate-duration-mi1)
      var(--men-s02-animate-easing-mi1);
}

.men-s02-js-heading-visible {
  opacity:   1;
  transform: translateY(0);
}

/* heading visible 状態でアクセントラインを伸長 */
.men-s02-js-heading-visible .men-s02__accent-line {
  width: var(--men-s02-accent-line-width-final);
  transition:
    width
      var(--men-s02-animate-duration-mi1)
      var(--men-s02-animate-easing-mi1);
}

/**
 * MI-2: ポートレート画像
 * 初期状態: opacity 0（transform なし）
 * 表示状態: opacity 1
 */
.men-s02-js-portrait-hidden {
  opacity: 0;

}

.men-s02-js-portrait-visible {
  opacity: 1;
  transition:
    opacity
      var(--men-s02-animate-duration-mi2)
      var(--men-s02-animate-easing-mi2);
}

/**
 * MI-3: 引用文カード
 * 初期状態: opacity 0 + translateY(8px)
 * 表示状態: opacity 1 + translateY(0)
 */
.men-s02-js-quote-hidden {
  opacity:   0;
  transform: translateY(var(--men-s02-animate-translate-y-mi3));
}

.men-s02-js-quote-visible {
  opacity:   1;
  transform: translateY(0);
  transition:
    opacity
      var(--men-s02-animate-duration-mi3)
      var(--men-s02-animate-easing-mi3),
    transform
      var(--men-s02-animate-duration-mi3)
      var(--men-s02-animate-easing-mi3);
}

/* ============================================================
  Tablet (width >= 768px)
  ============================================================ */
@media (width >= 768px) {
  .men-s02__inner {
    /* タブレット以上: 2カラム非対称グリッド（6:6） */
    grid-template-columns: 1fr 1fr;
    column-gap:            48px;
    align-items:           start;
  }

  .men-s02__visual-zone {
    margin-top: 0;
  }

  .men-s02__portrait-container {
    width:       100%;
    margin-left: 0;
    /* portrait top bleed */
    margin-top:  calc(-1 * var(--men-s02-portrait-bleed-top));
  }

  /* quote card: 絶対配置でポートレート左下に重ねる */
  .men-s02__quote-card {
    position:    relative;
    width:       100%;
    margin-top:  0;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ============================================================
  Desktop (width >= 1024px)
  ============================================================ */
@media (width >= 1024px) {
  .men-s02 {
    padding-top:    var(--men-s02-padding-top-desktop);
    padding-bottom: var(--men-s02-padding-bottom-desktop);
  }

  .men-s02__inner {
    padding-inline: var(--men-s02-margin-inline-desktop);
    column-gap:     64px;
  }
}

/* ============================================================
  prefers-reduced-motion: reduce
  すべてのアニメーション要素を即時表示状態に
  ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .men-s02 *,
  .men-s02 *::before,
  .men-s02 *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
  }

  /* すべてのアニメーション要素を即時表示 */
  .men-s02-js-heading-hidden,
  .men-s02-js-portrait-hidden,
  .men-s02-js-quote-hidden {
    opacity:   1;
    transform: none;
  }

  /* アクセントラインを最終幅に */
  .men-s02-js-heading-hidden .men-s02__accent-line,
  .men-s02-js-heading-visible .men-s02__accent-line {
    width: var(--men-s02-accent-line-width-final);
  }
}