/* Popup layout: minimal reset */
.okazu-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 12px }
.okazu-left { min-width: 0 }
.okazu-right { min-width: 0 }

/* ThickBox sizing: responsive, centered, no fixed dimensions */
#TB_window {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  right: auto !important;
  bottom: auto !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  width: auto !important;
  max-width: 95vw;
  max-height: 90vh;
}
#TB_ajaxContent {
  width: 100% !important;
  max-height: 85vh;
  overflow: auto;
  box-sizing: border-box;
}

/* Search */
.okazu-search { margin-bottom: 10px }
.okazu-search-input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px }

/* Video list: responsive columns */
.okazu-grid { display: grid; grid-template-columns: 1fr; gap: 10px }
.okazu-item { display: flex; flex-direction: column; align-items: stretch; gap: 8px; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; padding: 8px; cursor: pointer; margin-bottom: 0 }
.okazu-thumb { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 6px; display: block }
.okazu-title { margin: 0; font-size: 14px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.okazu-modal-controls { margin-top: 12px }

@media (max-width: 768px) {
  .okazu-layout { grid-template-columns: 1fr }
}

@media (min-width: 768px) {
  .okazu-grid { grid-template-columns: 1fr 1fr }
}

/* Frontend: make embedded video fit post width by default */
.okazu-video-iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block }
.okazu-video-locked .okazu-thumb { width: 100%; height: auto; object-fit: cover }
.okazu-locked-banner { margin-top: 8px; font-size: 14px; background: #111827; color: #fff; padding: 6px 8px; border-radius: 4px; display: inline-block }