/*
Theme Name: Twenty Twenty-Three Snap LP
Template: twentytwentythree
Version: 0.9.0
*/

/* —— このテンプレート時だけ全体スクロール停止＆余白リセット —— */
html,
body.page-template-page-vertical-snap { height: 100%; } /* %高の基準を確保 [stage→device→screen→snap] */
body.page-template-page-vertical-snap { overflow: hidden; } /* 本体はスクロール禁止 */
.page-template-page-vertical-snap .wp-site-blocks { padding: 0 !important; } /* TT3既定余白を除去 */
.page-template-page-vertical-snap .is-layout-constrained { padding: 0 !important; } /* 左右制限解除 */
/* 先頭余白の徹底除去（白帯防止） */
.page-template-page-vertical-snap .wp-site-blocks > *:first-child { margin-block-start: 0 !important; }
.page-template-page-vertical-snap .wp-block-cover:first-child { margin-block-start: 0 !important; }
.page-template-page-vertical-snap main,
.page-template-page-vertical-snap .lp-stage,
.page-template-page-vertical-snap .lp-device,
.page-template-page-vertical-snap .lp-screen,
.page-template-page-vertical-snap .lp-snap { margin: 0 !important; padding: 0 !important; } /* 余白抑止 [2] */

/* —— 固定ヘッダー（透過・白文字・セーフエリア対応） —— */
.lp-fixed-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 3000;
  background: transparent !important;
  color: #fff;
  padding-top: max(env(safe-area-inset-top), 0px); /* ノッチ対応 */
  isolation: isolate;
  pointer-events: auto;
}
.lp-fixed-header a{ color:#fff; }

/* —— ハンバーガーは非表示 —— */
.wp-block-navigation__responsive-container-open{ display: none !important; }

/* —— スクロール用コンテナ（Shorts/TikTok土台） —— */
.page-template-page-vertical-snap .lp-snap{
  position: relative;
  z-index: 0;
  height: 100svh;                  /* SP：小ビューポートで安定 */
  overflow-y: auto;
  scroll-snap-type: y mandatory;   /* 必ず各スライドで停止 */
  overscroll-behavior: contain;    /* 連鎖/バウンス抑制 */
  -webkit-overflow-scrolling: touch;
}

/* —— スライド（SP既定：1画面＝1枚） —— */
.page-template-page-vertical-snap .lp-slide,
.page-template-page-vertical-snap .wp-block-cover{
  inline-size: 100vw;
  block-size: 100vh;               /* フォールバック */
  block-size: 100svh;              /* 実運用 */
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* カバー内の左右制限を完全解除（画面いっぱい） */
.page-template-page-vertical-snap .wp-block-cover__inner-container{
  max-width: none !important;
  padding: 0 !important;
}

/* カバー背景画像のフィット（img/span どちらでも） */
.page-template-page-vertical-snap .wp-block-cover__image-background,
.page-template-page-vertical-snap .wp-block-cover img.wp-block-cover__image-background{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* —— スワイプ促し：柔らかい矢印「⌄」＋軽いバウンス —— */
.lp-swipe-hint{
  position: fixed; inset: auto 0 0 0; height: 96px; z-index: 2500;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6);
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  pointer-events: none;
  font: 600 18px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
}
.lp-swipe-hint .icon{
  display: inline-block;
  font-size: 26px;
  opacity: .95;
  animation: swipe-bounce 1.2s ease-in-out infinite;
}
@keyframes swipe-bounce{
  0% { transform: translateY(0); }
  50%{ transform: translateY(6px); }
  100%{ transform: translateY(0); }
}

/* —— CTA（固定ページ側で「lp-cta」を付与するだけ） —— */
.page-template-page-vertical-snap .lp-cta{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2600;
  pointer-events: auto;
  opacity: 0.7; /* 70%不透明度 [4] */
}

/* —— PC：中央に“デバイス枠”を表示し、各スライド高＝100%を厳密化 —— */
@media (min-width: 1024px){
  .page-template-page-vertical-snap .lp-stage{
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #0f0f0f; /* 任意 */
  }
  .page-template-page-vertical-snap .lp-device{
    width: min(430px, 44vw);
    aspect-ratio: 390 / 844;       /* 縦長比率 */
    border-radius: 28px;
    box-shadow: 0 10px 40px rgba(0,0,0,.6);
    position: relative;
    background: #000;
    overflow: hidden;
  }
  .page-template-page-vertical-snap .lp-screen{ position: absolute; inset: 0; }
  .page-template-page-vertical-snap .lp-device .lp-snap{ height: 100%; } /* 枠内全高を明示 [2] */

  /* 直下の全子要素を“スライド”として高さ100%・スナップ対象に強制 */
  .page-template-page-vertical-snap .lp-device .lp-snap > *{
    inline-size: 100% !important;
    block-size: 100% !important;
    min-height: 100% !important;
    scroll-snap-align: start !important;
  }

  /* Coverのinline min-heightを属性セレクタで上書き（確実に無効化） */
  .page-template-page-vertical-snap .lp-device .wp-block-cover[style*="min-height"]{
    min-height: 100% !important; height: 100% !important; /* WPのinlineに勝つ [3] */
  }
}