/* A real one- or two-picture preview, followed directly by the unlock content. */
.detail-media-empty { display:flex; align-items:center; justify-content:center; gap:8px; min-height:100px; color:var(--text-muted); background:var(--bg-secondary); font-size:13px; }
#view-post-detail .detail-header { flex-shrink:0; }
#view-post-detail .detail-scroll { min-height:0; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
#view-post-detail.is-locked .detail-media .post-img-grid { height:clamp(100px,22dvh,180px); }
#view-post-detail.is-locked .detail-media .post-img-cell { min-width:0; min-height:0; height:100%; max-height:none; aspect-ratio:auto; }
#view-post-detail.is-locked .detail-media-empty { min-height:clamp(80px,18dvh,150px); }
/* The unlock plan chooser must also remain reachable on a short landscape screen. */
#promoModal .promo-sheet { max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; }

@media (max-width:767px) {
  #view-post-detail.is-locked .detail-content { padding:8px 14px 0; }
  #view-post-detail.is-locked .detail-title { font-size:18px; line-height:1.4; }
  #view-post-detail.is-locked .detail-meta { margin-bottom:8px; }
  #view-post-detail.is-locked .detail-divider { margin-bottom:12px; }
  #view-post-detail.is-locked .detail-locked-card { margin:0 0 12px; padding:18px 16px; }
  #view-post-detail.is-locked .locked-icon { margin-bottom:8px; }
  #view-post-detail.is-locked .detail-locked-card p { margin-bottom:14px; }
}
@media (max-width:767px) and (max-height:640px) {
  #view-post-detail.is-locked .detail-media .post-img-grid { height:80px; }
  #view-post-detail.is-locked .detail-media-empty { min-height:80px; }
  #view-post-detail.is-locked .detail-locked-card { padding:12px; }
  #view-post-detail.is-locked .locked-icon { display:inline-flex; vertical-align:middle; margin:0 6px 4px 0; }
  #view-post-detail.is-locked .locked-icon svg { width:24px; height:24px; }
  #view-post-detail.is-locked .locked-icon .material-icons-round { font-size:24px; }
  #view-post-detail.is-locked .detail-locked-card h3 { display:inline; font-size:16px; }
  #view-post-detail.is-locked .detail-locked-card p { margin:6px 0 10px; font-size:13px; }
  #view-post-detail.is-locked .detail-unlock-benefits { margin-bottom:10px; }
  #view-post-detail.is-locked .detail-unlock-benefit { padding:6px 0; gap:8px; }
  #view-post-detail.is-locked .detail-benefit-icon { width:28px; height:28px; }
  #view-post-detail.is-locked .detail-benefit-icon img { width:22px; height:22px; }
  #view-post-detail.is-locked .detail-benefit-copy { gap:0; }
  #view-post-detail.is-locked .detail-benefit-name, #view-post-detail.is-locked .detail-benefit-description { font-size:12px; line-height:1.4; }
  #view-post-detail.is-locked .btn-unlock { height:44px; }
}