/*
 * 门票预售页专用样式（只作用于 ticket-presale.html）。
 *
 * 落在独立文件里是有意的：css/training-map.css 被 docs/current-release-evidence.json
 * 钉了源文件 SHA，改它会让已采证据判 GAP。这里只写新页面自己的版式，不覆盖既有类，
 * 颜色一律引用 :root 里的 --tm-* 变量。
 * 版式对照：猫眼电影「正在热映 / 即将上映」海报宫格 + 「影院列表」条目行。
 */

.tm-ticket-section { padding: 26px 0 0; }

/* 通用筛选条的标签位是 44px（按“地点：”这类 3 字标签定的），「行政区：」4 字会被折成两行。 */
#stadium-facets .tm-discovery-facet-label { flex: 0 0 62px; }
#stadium-facets { margin-bottom: 12px; }

/* 排序是按钮（可键盘操作、带 aria-pressed），复用筛选条的观感，去掉按钮默认底色边框。 */
.tm-discovery-reference-toolbar .tm-discovery-reference-sort {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
}

.tm-ticket-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.tm-ticket-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--tm-ink);
}

.tm-ticket-head .tm-ticket-count {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--tm-muted);
}

.tm-ticket-head a { font-size: 13px; color: var(--tm-navy); }
.tm-ticket-head a:hover { color: var(--tm-red); }

/* 海报宫格：猫眼在 1440 视口是 4 列，窄屏递减。 */
.tm-ticket-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.tm-ticket-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--tm-card);
  border: 1px solid var(--tm-line);
  border-radius: var(--tm-radius);
  overflow: hidden;
  padding-bottom: 12px;
  transition: box-shadow .18s ease, transform .18s ease;
}

.tm-ticket-card:hover { box-shadow: var(--tm-shadow); transform: translateY(-2px); }

.tm-ticket-poster {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #eef1f4;
  overflow: hidden;
}

.tm-ticket-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-ticket-poster .tm-discovery-media-ph { display: flex; height: 100%; align-items: center; justify-content: center; }

.tm-ticket-body { padding: 0 12px; display: flex; flex-direction: column; gap: 4px; }

.tm-ticket-body h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tm-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tm-ticket-body .tm-ticket-meta { font-size: 12px; color: var(--tm-muted); }
.tm-ticket-body .tm-ticket-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-ticket-body .tm-ticket-tags .tm-tag { font-size: 12px; }

.tm-ticket-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 12px 0; }

.tm-ticket-price { font-size: 15px; font-weight: 700; color: var(--tm-red); }
.tm-ticket-price small { font-size: 12px; font-weight: 400; color: var(--tm-muted); }

.tm-ticket-buy {
  border: 1px solid var(--tm-red);
  background: #fff;
  color: var(--tm-red);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 13px;
}

.tm-ticket-buy:hover { background: var(--tm-red); color: #fff; }
.tm-ticket-buy[disabled] { border-color: var(--tm-line); color: var(--tm-muted); cursor: not-allowed; background: #fff; }

.tm-ticket-note { padding: 0 12px; font-size: 12px; color: var(--tm-muted); }

/* 分类页皮肤把场馆行压成两列（thumb + info）。猫眼影院行是「信息 + 右侧购票按钮」三列，
   这里只对本页的行补回第三列，不动 training-map.css（它被发布证据钉了源文件 SHA）。 */
body.tm-discovery-category-page .tm-discovery-result.tm-ticket-stadium-row {
  grid-template-columns: 170px minmax(0, 1fr) auto;
}

/* 只改海报宫格的列数；**不要**在这里再动场馆行的列宽——
   房规自己在 ≤800 才把行收成两列并同步缩略图，中间这段硬压成 118px 列、
   图还是 170px，图会溢出列并压住馆名（2026-09-23 实测 1024 下馆名被截断）。 */
@media (max-width: 1160px) {
  .tm-ticket-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) { .tm-ticket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 760px) {
  /* 桌面端三列规则在本文件中加载更晚，必须在这里显式收回窄屏两列，
     否则右侧操作列会把场馆正文压到约 15px，造成文字逐字换行。 */
  body.tm-discovery-category-page .tm-discovery-result.tm-ticket-stadium-row {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
  }
  body.tm-discovery-category-page .tm-ticket-stadium-row .tm-discovery-result-thumb {
    width: 96px;
    height: 76px;
  }
  body.tm-discovery-category-page .tm-ticket-stadium-row .tm-discovery-result-right {
    grid-column: 2;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .tm-ticket-grid { grid-template-columns: 1fr; }
}