/*
 * openhouse-card.css — 开放日卡片 + 内嵌视频 modal。
 *
 * 与 openhouse-card.js 一一对应，直接在 frontend/ 下维护（同 share-smb /
 * nav-smb / form-smb 的惯例，没有构建步骤）。
 *
 * 类名一律 ohc- 前缀：这块会被塞进 appweb 详情页这种巨型页面里，不带前缀的
 * .day / .time 之类必然撞上宿主既有样式。
 *
 * 尺寸/配色对齐 appweb 详情页原来的开放日卡片，换过去视觉上不应有跳变。
 */

.ohc-root {
  display: block;
}

.ohc-title {
  display: block;
  padding: 10px 10px 5px 10px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

/* 横向滚动：场次可能有好几条，窄屏放不下就滑动看。
   -webkit-overflow-scrolling 给 iOS WebView 惯性滚动。 */
.ohc-holder {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 10px 10px 10px;
}

.ohc-holder::-webkit-scrollbar {
  display: none;
}

.ohc-wrapper {
  display: flex;
  gap: 10px;
}

.ohc-day {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 240px;
  padding: 12px;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  background: #fff;
}

.ohc-date {
  flex: 0 0 auto;
  width: 54px;
  margin-right: 12px;
  border-radius: 4px;
  background: #f1f1f1;
  color: #222;
  font-size: 26px;
  font-weight: bold;
  line-height: 54px;
  text-align: center;
}

.ohc-info {
  flex: 1 1 auto;
  min-width: 0;
}

.ohc-line-date {
  font-size: 15px;
  font-weight: bold;
  color: #222;
}

.ohc-line-time {
  margin-top: 2px;
  font-size: 14px;
  color: #555;
}

.ohc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 6px;
}

.ohc-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #e8391d;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.ohc-act-txt {
  color: #555;
}

/* 播放三角用纯 CSS 画，不额外引一张雪碧图 —— 这个模块要能被任意 Go 页面
   单独引用，少一个资源依赖就少一个 404 的可能。 */
.ohc-icon-play {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #e8391d;
}

/* 日历图标同理：一个带上边框的方框 + 顶部两个"挂钩"。 */
.ohc-icon-cal {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 13px;
  margin-top: 2px;
  border: 1px solid #e8391d;
  border-radius: 2px;
  border-top-width: 4px;
}

.ohc-icon-cal::before,
.ohc-icon-cal::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 2px;
  height: 3px;
  background: #e8391d;
}

.ohc-icon-cal::before { left: 2px; }
.ohc-icon-cal::after { right: 2px; }

/* ------------------------------------------------------------ 视频 modal */

.ohc-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ohc-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
}

.ohc-modal-box {
  position: relative;
  width: 92%;
  max-width: 900px;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}

/* 16:9 —— 给 iframe 一个确定的高度，否则内嵌播放器在没有内容时高度为 0。 */
.ohc-modal-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* aspect-ratio 在老 WebView 上不支持，退回按视口高度给一个可用的高度。 */
@supports not (aspect-ratio: 16 / 9) {
  .ohc-modal-frame { height: 56vw; max-height: 70vh; }
}

/* 关闭按钮压在视频上（YouTube 自己的标题栏就在那一片），纯白的 × 在浅色画面上
   会看不见 —— 给一个半透明深色圆底保证任何画面下都可辨认。 */
.ohc-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 22px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
}

/* 未开始场次的时间条，压在播放器上方。与下方出口条同一套配色，
   让「播放器被上下两条信息夹着」看起来是一个整体。 */
.ohc-modal-when {
  padding: 8px 12px;
  background: #111;
  color: #ccc;
  font-size: 13px;
}

/* 播放器下方常驻的出口条：iframe 被对方站点拒绝内嵌是检测不出来的（浏览器照样
   触发 load），所以不做「检测到失败再显示」，直接常驻一条。 */
.ohc-modal-hatch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #111;
  color: #ccc;
}

.ohc-hatch-msg {
  font-size: 13px;
}

.ohc-hatch-copy {
  padding: 4px 12px;
  border: 1px solid #777;
  border-radius: 4px;
  background: none;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

/* 链接可能很长，必须能换行，否则会把 modal 撑破。整行独占，不跟按钮挤。 */
.ohc-hatch-url {
  flex: 1 0 100%;
  margin: 0;
  font-size: 12px;
  color: #888;
  word-break: break-all;
}

/* 复制兜底用的临时 textarea：必须在文档流里才能 select()，
   所以不能 display:none，只能挪出视口。 */
.ohc-copy-helper {
  position: fixed;
  left: -9999px;
  top: 0;
  opacity: 0;
}