/* ====== Photocon style.css 最終版（重なり/黒ベタ解消） ====== */

/* カード土台 */
.card-thumb {
  position: relative;
  overflow: hidden;
  border-radius: .75rem;
  background: transparent !important;
}
.card-thumb::before,
.ratio::before {
  background: transparent !important;   /* Bootstrap ratio の背景無効 */
}

/* 画像 */
.thumb-img {
  position: absolute;
  inset: 0;                 /* 上下左右 0 で全面フィット */
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.card-thumb:hover .thumb-img { transform: scale(1.05); }

/* 右上 ♥ バッジ（Bootstrapの text-bg-* は使わない） */
.like-badge {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 3;
  padding: .25rem .5rem;
  border-radius: .5rem;
  background: rgba(0,0,0,.6) !important;
  color: #fff !important;
  font-size: .75rem;
  font-weight: 600;
}

/* 下側オーバーレイ（タイトル/投稿者） */
.thumb-overlay {
  position: absolute !important;
  inset: auto 0 0 0 !important;    /* = top:auto; left:0; right:0; bottom:0; を強制 */
  height: auto !important;
  max-height: 45% !important;      /* 全面に広がらないよう上限 */
  padding: .55rem .65rem;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 70%) !important;
  color: #fff !important;
  z-index: 2 !important;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.thumb-title  { font-size: .88rem; font-weight: 700; line-height: 1.2; }
.thumb-author { font-size: .75rem; opacity: .9; }

/* 予防：カード内の不要な背景色/オーバーレイをすべて打ち消し */
.card-thumb,
.card-thumb *, 
.ratio {
  background: transparent !important;
  background-color: transparent !important;
}

/* ===== Lightbox: 原盤比率を厳守して表示（トリミング無し） ===== */
.lb-canvas{
  background:#000;
  height:70vh;              /* 画面の7割の高さに収める */
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:.5rem;
}
@media (max-width: 992px){
  .lb-canvas{ height:60vh; }
}
#lightboxImage{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;       /* ← 縦横どちらも比率維持、トリミング無し */
  display:block;
}
/* Lightbox コメント部 */
#lbAuthorComment, #lbAiComment {
  line-height: 1.4;
}
#lbAuthorCommentText, #lbAiCommentText {
  display: inline-block;
  margin-left: .25rem;
}