/* v0.7 S5: free-rhythm — 毎日じゃなくていい。 */
/* A-1案（PC）: コピー左・写真右・7点水平 / A-SP1案（SP）: コピー上・写真下・7点水平 */

/* ────────────────────────────────────────────
   セクション基盤
   review6.css の .cinematic-scene を継承するが
   フルブリード背景写真構成を完全に上書きする
──────────────────────────────────────────── */
.s5-cinematic {
  /* cinematic-scene が持つ position:relative / overflow:hidden / background:#111 を継承 */
  min-height: unset;
  padding: clamp(6rem, 8vw, 8rem) 0;
}

/* 旧案の絶対配置メディアを非表示（src/dist に旧概念画像が残ってもHTML側で差し替え済み） */
.s5-cinematic .cinematic-scene__media {
  display: none;
}

/* 旧案オーバーレイも非表示 */
.s5-cinematic__overlay {
  display: none;
}

/* ────────────────────────────────────────────
   PC レイアウト（A-1案）
   左: コピーブロック / 右: 縦2:3写真
──────────────────────────────────────────── */
.s5-cinematic__content {
  /* review6.css で space-between が指定されているのを上書き */
  display: grid;
  grid-template-columns: 1fr minmax(0, 420px);
  gap: clamp(3rem, 5vw, 5rem);
  align-items: center;
  padding-block: 0;
  min-height: unset;
}

/* コピーブロック（左カラム） */
.s5-cinematic__copy {
  max-width: unset;
  display: grid;
  gap: 1.5rem;
}

/* 7点表現: review6.css の縦配置を水平配置に上書き */
.s5-cinematic__copy .week-pulse {
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
  padding: 0;
  margin-top: .2rem;
}

/* 水平配置時のドットサイズ調整 */
.s5-cinematic__copy .week-pulse span {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.s5-cinematic__copy .week-pulse .week-pulse__selected {
  width: 24px;
  height: 24px;
}

/* 右カラム: 写真コンテナ */
.s5-photo {
  position: relative;
  width: 100%;
  /* 縦2:3比率を維持 */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 2px;
}

.s5-photo img {
  display: block;
  width: 100%;
  height: 100%;
  /* 人物・バッグ・光が損なわれないよう center top で頭部を優先 */
  object-fit: cover;
  object-position: center top;
}

/* 写真と背景の接続: 左端のみ薄くフェード */
.s5-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(17, 17, 17, 0.45) 0%,
    transparent 30%
  );
  pointer-events: none;
}

/* ────────────────────────────────────────────
   SP レイアウト（A-SP1案）
   見出し・本文 → 写真 → 7点（水平）の縦積み
──────────────────────────────────────────── */
@media (max-width: 900px) {
  .s5-cinematic {
    padding: 4.5rem 0 max(8.5rem, calc(7.5rem + env(safe-area-inset-bottom)));
  }

  .s5-cinematic__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-inline: 1.375rem;
  }

  /* コピーを上部に */
  .s5-cinematic__copy {
    order: 1;
    gap: 1.1rem;
    width: 100%;
  }

  /* 写真を中間に */
  .s5-photo {
    order: 2;
    /* SP 正方形比率 */
    aspect-ratio: 1 / 1;
    /* 390px時 346px、375px時 331px 相当（左右余白 1.375rem×2 = 44px） */
    width: 100%;
    max-width: 100%;
    border-radius: 2px;
  }

  /* 7点表現を写真下部に（コピーブロック内から外に出す） */
  .s5-cinematic__copy .week-pulse {
    order: 3;
    flex-direction: row;
    gap: .9rem;
    margin-top: .4rem;
  }

  .s5-cinematic__copy .week-pulse span {
    width: 8px;
    height: 8px;
  }

  .s5-cinematic__copy .week-pulse .week-pulse__selected {
    width: 20px;
    height: 20px;
  }

  /* SP 写真の左フェードは不要 */
  .s5-photo::after {
    display: none;
  }
}

@media (max-width: 380px) {
  .s5-cinematic {
    padding-bottom: max(8rem, calc(7rem + env(safe-area-inset-bottom)));
  }
}

/* ────────────────────────────────────────────
   reduced motion: アニメーションなし完成状態
   （review6.css の @prefers-reduced-motion で
     .week-pulse span は既に opacity:1 / transform:none
     animation:none が適用されているため追加不要）
──────────────────────────────────────────── */