/**
 * Hero Full-Width Layout
 * 
 * 全ページ共通：ヒーローセクション（.swx-hero）を画面幅いっぱい（full-bleed）に表示
 * - 背景画像（.hero-bg / .hero-bg img）が画面端まで広がる
 * - テキスト部分（.container / .hero-inner）はコンテンツ幅に収まる
 * 
 * 適用対象：
 * - リッチヒーロー（.swx-hero）
 * - シンプルヒーロー（.swx-hero.-access, .swx-hero.-guidelines, .swx-hero.-flow, .swx-hero.-faq など）
 * - その他すべての .swx-hero バリアント
 */

/* ===== Full-Bleed Layout ===== */
/* wp-block-post-content 内に出力されるヒーローを画面幅いっぱいに */
/* 親要素（中央寄せされている可能性あり）の制限を外して、ビューポート全体に広げる */
.wp-block-post-content > .swx-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* wp-block-group 内に出力される場合の対応 */
.wp-block-group > .wp-block-post-content > .swx-hero,
.wp-block-group .wp-block-post-content > .swx-hero,
main .wp-block-post-content > .swx-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ヒーローコンテナを全幅に */
.swx-hero {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* 背景レイヤーを画面幅いっぱいに */
.swx-hero .hero-bg {
  width: 100%;
  max-width: 100vw;
}

.swx-hero .hero-bg img {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  object-fit: cover;
}

/* テキストコンテナはコンテンツ幅に収める */
.swx-hero .container,
.swx-hero .hero-inner {
  max-width: min(1100px, 100% - 2rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(14px, 3vw, 24px);
  padding-right: clamp(14px, 3vw, 24px);
  position: relative;
  z-index: 2;
}

/* 既存の .container スタイルと競合しないように調整 */
.swx-hero .container {
  width: 100%;
}

/* レスポンシブ調整：小さい画面でも自然に見えるように */
@media (max-width: 767px) {
  .wp-block-post-content > .swx-hero,
  .wp-block-group > .wp-block-post-content > .swx-hero,
  .wp-block-group .wp-block-post-content > .swx-hero,
  main .wp-block-post-content > .swx-hero {
    /* モバイルでも transform を使用（一貫性のため） */
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .swx-hero .container,
  .swx-hero .hero-inner {
    padding-left: clamp(14px, 3vw, 20px);
    padding-right: clamp(14px, 3vw, 20px);
  }
}

@media (max-width: 480px) {
  .swx-hero .container,
  .swx-hero .hero-inner {
    padding-left: clamp(14px, 3vw, 18px);
    padding-right: clamp(14px, 3vw, 18px);
  }
}