/* ==================================================================
   移行した日記記事（pictbland / Tumblr）の画像とライトボックス

   inc/diary.php が、移行分の記事を単体表示しているときだけ読み込む。
   元からあったブログ記事には適用されない。
================================================================== */

/* ------------------------------------------------------------------
   本文の画像はすべてサムネイルで出し、クリックで原寸を開く

   pictbland は本文末尾にまとめて並び（.pb-diary-images）、
   Tumblr は本文の流れの中に入る（.pb-inline-image）。
   大きさは両方そろえる。変えたいときは --pb-thumb-h の1か所だけ直せばよい。
------------------------------------------------------------------ */
.post-content {
  --pb-thumb-h: 120px;
}

.pb-diary-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
}

.pb-diary-images figure {
  margin: 0;
}

/* Tumblr は本文の段落の間に入るので、前後に余白を取って左寄せで置く */
.pb-inline-image {
  margin: 20px 0;
}

.pb-zoom {
  display: inline-block;
  position: relative;
  line-height: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #f2f2f2;
  cursor: zoom-in;
  vertical-align: top;
}

/* 高さをそろえる。幅は auto なので縦横比は崩れず、切り抜きも起きない */
.pb-diary-images .pb-zoom img,
.pb-inline-image .pb-zoom img {
  display: block;
  height: var(--pb-thumb-h);
  width: auto;
  max-width: 100%;
  transition: opacity .15s ease;
}

.pb-zoom:hover img,
.pb-zoom:focus-visible img {
  opacity: .82;
}

/* クリックで拡大できることが分かるように、右下に小さな目印を出す */
.pb-zoom::after {
  content: '⤢';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 768px) {
  .post-content {
    --pb-thumb-h: 100px;
  }
}