/* News CMS public behavior v0.7.2
 * 婚姻届LABO本体のCSSとは分離し、News詳細ページで最後に読み込みます。
 * 画像ブロックの縦横比、等倍中央配置、ライトボックス、PDFプレビューをここで保証します。
 */

/* ----- Image blocks ----- */
.ncm-image-block {
  min-width: 0;
  max-width: 100%;
}
.ncm-image-block .ncm-figure {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.ncm-image-block .ncm-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* 横並び／ライトボックスのサムネイルも、固定比率の箱へ切り抜かない。 */
.ncm-image-layout-horizontal,
.ncm-image-layout-lightbox {
  align-items: start;
}
.ncm-image-layout-horizontal .ncm-figure,
.ncm-image-layout-lightbox .ncm-figure {
  align-self: start;
}
.ncm-image-block.ncm-image-layout-horizontal .ncm-figure img,
.ncm-image-block.ncm-image-layout-lightbox .ncm-figure img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* 「画像を等倍で中央配置」：元画像より大きくしない。縦並びでも確実に中央へ。 */
.ncm-image-block.ncm-image-block--natural .ncm-figure {
  text-align: initial;
}
.ncm-image-block.ncm-image-block--natural .ncm-figure img,
.ncm-image-block.ncm-image-block--natural.ncm-image-layout-horizontal .ncm-figure img,
.ncm-image-block.ncm-image-block--natural.ncm-image-layout-lightbox .ncm-figure img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ncm-image-block--natural .ncm-lightbox-trigger {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ----- Slider ----- */
.ncm-image-layout-slider { overflow-anchor: none; }
.ncm-image-layout-slider .ncm-image-item { display: block; }
.ncm-image-layout-slider .ncm-image-slider-stage {
  position: relative;
  display: grid;
  gap: 18px;
  overflow-anchor: none;
}
.ncm-image-layout-slider .ncm-image-slider-controls { display: none; overflow-anchor: none; }
.ncm-image-layout-slider.ncm-image-block--slider-ready .ncm-image-slider-stage {
  display: flex;
  min-height: var(--ncm-slider-stable-height, auto);
  align-items: center;
  justify-content: center;
}
.ncm-image-layout-slider.ncm-image-block--slider-ready .ncm-image-item { display: none; }
.ncm-image-layout-slider.ncm-image-block--slider-ready .ncm-image-item.is-active { display: block; width: 100%; }
.ncm-image-layout-slider.ncm-image-block--slider-ready .ncm-image-slider-controls { display: flex; }
.ncm-slider-measure-clone { margin: 0 !important; }

/* ----- Lightbox ----- */
html.ncm-modal-open,
body.ncm-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.ncm-lightbox { z-index: 30000; }
.ncm-lightbox[aria-hidden="true"] { display: none !important; }
.ncm-lightbox.is-open { display: grid; }
.ncm-lightbox [hidden] { display: none !important; }
.ncm-lightbox-stage { width: 100%; min-width: 0; min-height: 0; }
.ncm-lightbox-viewer {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: min(78vh, calc(100vh - 150px));
  min-height: 0;
}
.ncm-lightbox-viewport {
  position: relative;
  display: flex;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: contain;
}
.ncm-lightbox .ncm-lightbox-viewport img {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  cursor: default;
}
.ncm-lightbox .ncm-lightbox-viewport img.ncm-lightbox-image--zoomable { cursor: zoom-in; }
.ncm-lightbox-viewport.is-zoomed {
  display: block;
  overflow: auto;
  background: rgba(0,0,0,.18);
}
.ncm-lightbox .ncm-lightbox-viewport.is-zoomed img {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  cursor: zoom-out;
}
.ncm-lightbox-zoom {
  position: absolute;
  z-index: 6;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  min-width: 72px;
  min-height: 34px;
  padding: 0 10px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  color: #222 !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.ncm-lightbox-zoom[hidden],
.ncm-lightbox-zoom[aria-hidden="true"] {
  display: none !important;
}
.ncm-lightbox-zoom-icon {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.ncm-lightbox-zoom-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

/* ----- PDF preview ----- */
.ncm-pdf-preview { margin: 0; }
.ncm-pdf-preview__link { display: block; width: fit-content; max-width: 100%; color: inherit; text-decoration: none; }
.ncm-pdf-preview__image { display: block; max-width: 100%; height: auto; background: #fff; box-shadow: 0 3px 14px rgba(0,0,0,.1); }
.ncm-pdf-preview--thumbnail { width: 200px; max-width: 100%; }
.ncm-pdf-preview--thumbnail .ncm-pdf-preview__image,
.ncm-pdf-preview--thumbnail .ncm-pdf-preview__link { width: 200px; max-width: 100%; }
.ncm-pdf-preview--full,
.ncm-pdf-preview--full .ncm-pdf-preview__link,
.ncm-pdf-preview--full .ncm-pdf-preview__image { width: 100%; }
.ncm-pdf-preview__caption { margin-top: 8px; color: #6e7781; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.ncm-pdf-preview__stage { position: relative; display: flex; width: 100%; max-width: 100%; align-items: center; justify-content: center; overflow: hidden; background: #f4f4f4; box-shadow: 0 3px 14px rgba(0,0,0,.1); }
.ncm-pdf-preview--thumbnail .ncm-pdf-preview__stage { width: 200px; min-height: 140px; }
.ncm-pdf-preview--full .ncm-pdf-preview__stage { min-height: 300px; }
.ncm-pdf-preview__canvas { display: none; max-width: 100%; height: auto; background: #fff; }
.ncm-pdf-preview--thumbnail .ncm-pdf-preview__canvas { width: 200px; max-width: 100%; }
.ncm-pdf-preview--full .ncm-pdf-preview__canvas { width: 100%; }
.ncm-pdf-preview__stage.is-ready { min-height: 0; background: #fff; }
.ncm-pdf-preview__stage.is-ready .ncm-pdf-preview__canvas { display: block; }
.ncm-pdf-preview__status { position: relative; z-index: 1; display: block; padding: 24px 18px; color: #6e7781; font-size: 13px; line-height: 1.7; text-align: center; }
.ncm-pdf-preview__stage.is-ready .ncm-pdf-preview__status { display: none; }
.ncm-pdf-preview__stage.is-error .ncm-pdf-preview__status { color: #444; }
.ncm-pdf-preview__overlay { position: absolute; inset: 0; z-index: 2; display: block; }

@media (max-width: 767px) {
  .ncm-lightbox-viewer { height: min(72vh, calc(100vh - 150px)); }
  .ncm-lightbox-zoom { right: 8px; bottom: 8px; }
  .ncm-pdf-preview--full .ncm-pdf-preview__stage { min-height: 220px; }
}

/* ----- Video block v0.7.4: display modes ----- */
.ncm-video-block {
  display: block;
  width: 100%;
  margin: 24px 0;
  text-align: center;
}
.ncm-video-block .ncm-video-player,
.labo-news-detail .ncm-video-block .ncm-video-player {
  display: block !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: #000;
}
/* 1) 全幅 */
.ncm-video-block--full .ncm-video-player,
.labo-news-detail .ncm-video-block--full .ncm-video-player {
  width: 100% !important;
  height: auto !important;
}
/* 2) 等倍中央配置：動画の自然サイズ以上へ拡大しない。
   HTML5 video の intrinsic size を使い、コンテナより大きい場合だけ max-width で縮小する。 */
.ncm-video-block--natural .ncm-video-player,
.labo-news-detail .ncm-video-block--natural .ncm-video-player {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
}
/* 3) 高さ600px・幅auto。横幅が収まらない狭い画面ではJS/CSSで比率を保ったまま縮小する。 */
.ncm-video-block--height600 .ncm-video-player,
.labo-news-detail .ncm-video-block--height600 .ncm-video-player {
  width: auto !important;
  height: 600px !important;
  max-width: 100% !important;
}
.ncm-video-block figcaption {
  margin-top: 8px;
  color: #6e7781;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
@media (max-width: 767px) {
  .ncm-video-block--height600 .ncm-video-player,
  .labo-news-detail .ncm-video-block--height600 .ncm-video-player {
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 600px !important;
  }
}