/* Lunaria Hero — layout + slide-only flex
 * フロント/エディタ共通
 * HASH: hero-css-slide-scope-20250815
 */

.lunaria-hero { position: relative; }
.lunaria-hero .lunaria-hero-media,
.lunaria-hero .lunaria-hero-image { position: relative; }

/* Alignments */
.lunaria-hero:not(.alignwide):not(.alignfull) {
  max-width: 900px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.lunaria-hero.alignwide {
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.lunaria-hero.alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ===== slide のときだけ横並びにする ===== */
.lunaria-hero .lunaria-hero-media[data-effect="slide"] .lunaria-slide-track {
  display: flex;
  will-change: transform;
}
.lunaria-hero .lunaria-hero-media[data-effect="slide"] .lunaria-slide-item {
  flex: 0 0 100%;
  position: relative; /* キャプション用の基準 */
}

/* Media fit */
.lunaria-media { width: 100%; height: 100%; object-fit: cover; display:block; }

/* Caption: free positioning by CSS variables（共通） */
.lunaria-caption {
  position: absolute;
  top: var(--cap-top, auto);
  right: var(--cap-right, auto);
  bottom: var(--cap-bottom, 0);
  left: var(--cap-left, 0);
  transform: translate(var(--cap-tx, 0), var(--cap-ty, 0));

  text-align: var(--cap-align, left);
  max-width: min(100%, var(--cap-maxw, 100%));

  padding: 16px 18px;
  color: #fff;

}
.lunaria-caption-title { font-weight:700; margin:0 0 6px; line-height:1.25; font-size:clamp(18px,2.2vw,28px); }
.lunaria-caption-subtitle { margin:0; line-height:1.6; font-size:clamp(13px,1.6vw,16px); }

/* Editor helpers */
.lunaria-hero .lunaria-hero-media.is-editor,
.lunaria-hero .lunaria-hero-image.is-editor {
  background: transparent;
  border: 0;
  padding: 0;
  overflow: hidden; /* はみ出しは隠すだけ維持 */
}
.lunaria-media-placeholder { text-align:center; color:#646970; padding:24px; font-size:13px; }

/* ヒーロー内：ボタンの間隔と上マージン（最小限の局所調整） */
.lunaria-caption .lunaria-btn { margin-top: 12px; }
.lunaria-caption .lunaria-btn + .lunaria-btn { margin-left: 8px; }

/* そのヒーローブロックに追加CSSクラス hero-btn--pill を付与して… */
.hero-btn--pill .lunaria-caption{
  --btn-bg: #0061ff;
  --btn-fg: #fff;
  --btn-radius: 9999px;
}
.block-editor-block-list__block { overflow: hidden; }
/*.lunaria-slide-track { overflow: hidden; }*/