/* ============================================================
 * ADL Photo Slider - Frontend styles v4
 * 構造: .adl-photo-slider > .__frame > (.__swiper + .__pagination)
 *   pagination は frame 内・swiper の下(枠内・写真下)
 * ============================================================ */

.adl-photo-slider {
  margin: 24px 0;
  position: relative;
  --adl-slider-bg: #ffffff;
  --adl-slider-border: transparent;
  --adl-slider-pad: 0px;
  --adl-slider-aspect-pct: 56.25%; /* 16:9 */
  --adl-slider-caption-bg: #ffffff;
  --adl-slider-caption-fg: #1a1a1a;
}
.adl-photo-slider.aspect-4-3 { --adl-slider-aspect-pct: 75%; }
.adl-photo-slider.aspect-1-1 { --adl-slider-aspect-pct: 100%; }
.adl-photo-slider.aspect-3-2 { --adl-slider-aspect-pct: 66.6667%; }


/* 枠 */
.adl-photo-slider .adl-photo-slider__frame {
  background: var(--adl-slider-bg) !important;
  border: none !important;
  padding: var(--adl-slider-pad) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Swiper: padding-top hack で 16:9 固定 */
.adl-photo-slider .adl-photo-slider__swiper {
  overflow: hidden !important;
  position: relative !important;
  height: 0 !important;
  padding-bottom: var(--adl-slider-aspect-pct) !important;
}
.adl-photo-slider.aspect-auto .adl-photo-slider__swiper {
  height: auto !important;
  padding-bottom: 0 !important;
}

.adl-photo-slider .adl-photo-slider__swiper .swiper-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
}
.adl-photo-slider .swiper-slide {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.adl-photo-slider__figure {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--adl-slider-bg);
}

.adl-photo-slider__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

/* キャプション: 白背景 + 濃い文字 (画像下部に半透明白オーバーレイ) */
.adl-photo-slider__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--adl-slider-caption-fg);
  background: rgba(255, 255, 255, .92);
  text-align: center;
  z-index: 2;
}
@media (max-width: 768px) {
  .adl-photo-slider__caption { padding: 8px 12px; font-size: 12px; }
}

/* 左右矢印: 写真の下・ドット行の左右に配置 */
.adl-photo-slider .swiper-button-prev,
.adl-photo-slider .swiper-button-next {
  color: #fff !important;
  background: rgba(0, 0, 0, .38);
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: background .2s;
  position: absolute !important;
  top: auto !important;
  bottom: -6px !important;
  margin-top: 0 !important;
  z-index: 5;
}
.adl-photo-slider .swiper-button-prev { left: 0 !important; }
.adl-photo-slider .swiper-button-next { right: 0 !important; }
.adl-photo-slider .swiper-button-prev:hover,
.adl-photo-slider .swiper-button-next:hover { background: rgba(0, 0, 0, .58); }
.adl-photo-slider .swiper-button-prev:after,
.adl-photo-slider .swiper-button-next:after {
  font-size: 13px !important;
  font-weight: 900;
}
@media (max-width: 600px) {
  .adl-photo-slider .swiper-button-prev,
  .adl-photo-slider .swiper-button-next { width: 28px !important; height: 28px !important; }
  .adl-photo-slider .swiper-button-prev:after,
  .adl-photo-slider .swiper-button-next:after { font-size: 11px !important; }
}

/* ドット: 枠内・写真下 (frame の padding-bottom 領域上部に配置) */
.adl-photo-slider .adl-photo-slider__pagination,
.adl-photo-slider .adl-photo-slider__pagination.swiper-pagination-horizontal,
.adl-photo-slider .adl-photo-slider__pagination.swiper-pagination-bullets {
  position: static !important;
  margin-top: 12px;
  padding: 6px 0;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  text-align: center;
  width: 100% !important;
}
.adl-photo-slider .swiper-pagination-bullet {
  background: #b0b0b0 !important;
  opacity: .55 !important;
  width: 8px !important;
  height: 8px !important;
  transition: opacity .2s, transform .2s, background-color .2s;
  margin: 0 4px !important;
}
.adl-photo-slider .swiper-pagination-bullet-active {
  background: #1a3a52 !important;
  opacity: 1 !important;
  transform: scale(1.15);
}
@media (max-width: 600px) {
  .adl-photo-slider .swiper-pagination-bullet { width: 7px !important; height: 7px !important; margin: 0 3px !important; }
}

/* ============================================================
 * ライトボックス (全画面拡大 + 左右矢印 + キャプション + カウンタ)
 * ============================================================ */
.adl-photo-slider__lightbox {
  position: fixed; inset: 0;
  background: rgba(255, 255, 255, .96) !important;
  z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  overflow: hidden;
  animation: adlPsFade .18s ease-out;
}
@keyframes adlPsFade { from { opacity: 0; } to { opacity: 1; } }

.adl-photo-slider__lightbox-inner {
  max-width: 100%;
  max-height: 100%;
  text-align: center;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.adl-photo-slider__lightbox-inner img {
  max-width: 100%;
  max-height: 82vh;
  height: auto;
  display: block;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 2px 24px rgba(0, 0, 0, .18);
}
.adl-photo-slider__lightbox-caption {
  font-size: 13px;
  line-height: 1.5;
  color: #444;
  max-width: 80vw;
}
.adl-photo-slider__lightbox-counter {
  font-size: 12px;
  color: #888;
  letter-spacing: .05em;
}

.adl-photo-slider__lightbox-close,
.adl-photo-slider__lightbox-prev,
.adl-photo-slider__lightbox-next {
  position: absolute;
  z-index: 10;
  background: rgba(0, 0, 0, .06);
  color: #333;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.adl-photo-slider__lightbox-close {
  top: 16px; right: 20px;
  width: 40px; height: 40px;
  font-size: 24px; line-height: 1;
}
.adl-photo-slider__lightbox-prev,
.adl-photo-slider__lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  font-size: 28px; font-weight: 900; line-height: 1;
}
.adl-photo-slider__lightbox-prev { left: 20px; }
.adl-photo-slider__lightbox-next { right: 20px; }
.adl-photo-slider__lightbox-close:hover,
.adl-photo-slider__lightbox-prev:hover,
.adl-photo-slider__lightbox-next:hover { background: rgba(0, 0, 0, .15); }

@media (max-width: 600px) {
  .adl-photo-slider__lightbox { padding: 12px; }
  .adl-photo-slider__lightbox-prev,
  .adl-photo-slider__lightbox-next { width: 40px; height: 40px; font-size: 22px; }
  .adl-photo-slider__lightbox-prev { left: 8px; }
  .adl-photo-slider__lightbox-next { right: 8px; }
  .adl-photo-slider__lightbox-close { top: 8px; right: 10px; width: 36px; height: 36px; font-size: 22px; }
}

/* ============================================================
 * SP版オーバーライド: 写真エリアを正方形固定 + 中央配置
 *   写真の比率に関わらずコントロール位置が動かないようにする
 * ============================================================ */
@media (max-width: 600px) {
  /* 写真エリア: 正方形固定 (padding-bottom hack) */
  .adl-photo-slider .adl-photo-slider__swiper {
    height: 0 !important;
    padding-bottom: 100% !important;
  }
  /* 画像: 切り抜かず全体表示・縦横中央 (背景は白) */
  .adl-photo-slider .adl-photo-slider__img,
  .adl-report-content .adl-photo-slider__img,
  .adl-report-content figure.adl-photo-slider__figure img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    background: #fff;
  }
  .adl-photo-slider .adl-photo-slider__frame {
    padding: 0 !important;
  }
  .adl-photo-slider .adl-photo-slider__pagination,
  .adl-photo-slider .adl-photo-slider__pagination.swiper-pagination-horizontal,
  .adl-photo-slider .adl-photo-slider__pagination.swiper-pagination-bullets {
    margin-top: 4px !important;
    padding-bottom: 6px !important;
  }
}

/* ============================================================
 * テーマの .adl-report-content figure/img 汎用ルール上書き
 *   v2-overrides.css の margin:1.6em auto / width:100% / height:auto が
 *   ブロック内の figure/img を潰していたのを無効化
 * ============================================================ */
.adl-report-content .adl-photo-slider__figure,
.adl-report-content figure.adl-photo-slider__figure {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}
.adl-report-content .adl-photo-slider__img,
.adl-report-content figure.adl-photo-slider__figure img {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}





/* ============================================================
 * サムネイル一覧 (矢印/ドット行の下・正方形・横8点で折返し)
 * ============================================================ */
.adl-photo-slider .adl-photo-slider__thumbs {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: 22px;
}
.adl-photo-slider .adl-photo-slider__thumb {
  display: block;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid transparent;
  border-radius: 2px;
  background: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  opacity: .75;
  transition: opacity .2s, border-color .2s;
}
.adl-photo-slider .adl-photo-slider__thumb:hover { opacity: 1; }
.adl-photo-slider .adl-photo-slider__thumb.is-active {
  border-color: #1a3a52;
  opacity: 1;
}
.adl-photo-slider .adl-photo-slider__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  max-width: none !important;
}
@media (max-width: 600px) {
  .adl-photo-slider .adl-photo-slider__thumbs { gap: 4px; margin-top: 18px; }
}


/* ============================================================
 * 縦画像: 切り抜かず全体表示（左右は白余白）
 * ============================================================ */
.adl-photo-slider .adl-photo-slider__img.is-portrait,
.adl-report-content .adl-photo-slider__img.is-portrait,
.adl-report-content figure.adl-photo-slider__figure img.is-portrait {
  object-fit: contain !important;
}


/* ============================================================
 * キャプション: 写真に重ねず下に表示
 *   PC/SP 共通でキャプションバー(JS更新)。figcaption オーバーレイは不使用
 * ============================================================ */
.adl-photo-slider .adl-photo-slider__caption-bar {
  margin-top: 10px;
  min-height: 1.6em;
  font-size: 13px;
  line-height: 1.6 !important;
  color: #333;
  text-align: center;
}
.adl-photo-slider .adl-photo-slider__caption,
.adl-report-content figcaption.adl-photo-slider__caption {
  display: none !important;
}
@media (max-width: 600px) {
  .adl-photo-slider .adl-photo-slider__caption-bar {
    margin-top: 6px;
    font-size: 12px;
    padding: 0 4px;
    /* 2行分を常に確保して折返し時もコントロール位置を固定 */
    min-height: 3.2em;
  }
}

/* ============================================================
 * SP: 画像は正方形エリアに contain 中央配置
 *   (上の .adl-report-content の cover !important より後置して優先)
 * ============================================================ */
@media (max-width: 600px) {
  .adl-photo-slider .adl-photo-slider__img,
  .adl-report-content .adl-photo-slider__img,
  .adl-report-content figure.adl-photo-slider__figure img {
    object-fit: contain !important;
    background: #fff;
  }
}


/* ============================================================
 * グリッド式フォトアルバム [adl_photo_album]
 *   12カラムグリッド・7枚周期のモザイクパターン
 *   行の高さ(=1カラム幅の正方形ユニット)は JS が設定
 * ============================================================ */
.adl-photo-album {
  margin: 24px 0;
}
.adl-photo-album__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
}
.adl-photo-album__item,
.adl-report-content .adl-photo-album__item,
.adl-report-content figure.adl-photo-album__item {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  position: relative;
  overflow: hidden;
}
/* 7枚周期パターン: 大1 → 左大+右横長 → 小2 → 小+横長 */
.adl-photo-album__item:nth-child(7n + 1) { grid-column: span 12; grid-row: span 6; }
.adl-photo-album__item:nth-child(7n + 2) { grid-column: span 6;  grid-row: span 6; }
.adl-photo-album__item:nth-child(7n + 3) { grid-column: span 6;  grid-row: span 3; }
.adl-photo-album__item:nth-child(7n + 4) { grid-column: span 3;  grid-row: span 3; }
.adl-photo-album__item:nth-child(7n + 5) { grid-column: span 3;  grid-row: span 3; }
.adl-photo-album__item:nth-child(7n + 6) { grid-column: span 3;  grid-row: span 3; }
.adl-photo-album__item:nth-child(7n)     { grid-column: span 9;  grid-row: span 3; }
.adl-photo-album__img,
.adl-report-content .adl-photo-album__img,
.adl-report-content figure.adl-photo-album__item img {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  cursor: zoom-in;
}
@media (max-width: 600px) {
  .adl-photo-album__grid { gap: 5px; }
}

/* 本文内 wp:image のキャプション表示（テーマのリセットCSS対策・スライダーcaption-barと同トーン） */
.adl-report-content .wp-block-image figcaption,
.adl-report-content figure > figcaption.wp-element-caption {
  display: block !important;
  margin: 10px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #333 !important;
  text-align: center !important;
}
@media (max-width: 600px) {
  .adl-report-content .wp-block-image figcaption,
  .adl-report-content figure > figcaption.wp-element-caption {
    margin-top: 6px !important;
    font-size: 12px !important;
    padding: 0 4px;
  }
}