/*
 * 管理人の見どころ：画像ありパターン（Claude確定デザイン）
 *
 * Issue #87 phase 3 (synopsis-image staging QA fix): あらすじ画像
 * (.synopsis-img-wrap/.synopsis-img, template-parts/work/content-standard.php)
 * shares this exact ruleset via the added selectors below instead of
 * duplicating the size/placement values, so the two never drift apart.
 * The .midokoro-* selectors and their values are unchanged -- adding a
 * selector to an existing rule does not alter how the existing
 * .midokoro-img-wrap/.midokoro-img markup renders.
 */
.midokoro-img-wrap,
.synopsis-img-wrap {
  display:flex;
  justify-content:center;
  padding:30px 20px 0;
}

.midokoro-img,
.synopsis-img {
  display:block;
  flex:none;
  width:auto;
  height:auto;
  aspect-ratio:auto;
  max-width:560px;
  max-height:520px;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 2px 10px rgba(35,42,40,.12);
}

.midokoro-img-wrap + .midokoro-content,
.synopsis-img-wrap + .body-text {
  padding-top:18px;
}

/* タブレット：SP系の縦積みを維持しつつ、画像だけ中間サイズに調整。 */
@media (max-width:900px) {
  .midokoro-img-wrap,
  .synopsis-img-wrap {
    padding:28px 18px 0;
  }

  .midokoro-img,
  .synopsis-img {
    max-width:min(100%,520px);
    max-height:460px;
  }

  .midokoro-img-wrap + .midokoro-content,
  .synopsis-img-wrap + .body-text {
    padding-top:17px;
  }
}

/* スマートフォン：画面内に収まりやすい上限へ縮小。 */
@media (max-width:599px) {
  .midokoro-img-wrap,
  .synopsis-img-wrap {
    padding:26px 16px 0;
  }

  .midokoro-img,
  .synopsis-img {
    max-width:100%;
    max-height:360px;
  }

  .midokoro-img-wrap + .midokoro-content,
  .synopsis-img-wrap + .body-text {
    padding-top:16px;
  }
}