/** VenueWallCard：布局分区 + 三档字号（字阶），非三块布局语义 */

/**
 * 外层只做容器查询盒 + 边框裁剪；不要在同一节点写「依赖自身宽度」的 cqi/cqmin，
 * 否则字号无法随卡片尺寸变化。
 */
.pisell-resource-wall-card {
  position: relative;
  height: 100%;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  border-radius: clamp(8px, 2vw, 28px);
  border-width: 1px;
  border-style: solid;

  container-type: size;
  container-name: venue-wall-card;
}

/** 字号基准与子树：cqi/cqmin 相对外层卡片解析，故必须放在内层 */
.pisell-resource-wall-card__scale-root {
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  /**
   * cqmin = min(宽,高) 的 1%，换版式（如 1×2 → 2×3）时宽高都参与缩放。
   */
  font-size: clamp(0.625rem, 4cqmin + 0.33rem, 2rem);

  --rw-tier1: 2.55em;
  /* 二档：时段/联系人等；与一档保持级差 */
  --rw-tier2: 1.9em;
  --rw-tier3: 0.96em;
  --rw-status: 0.9em;
  --rw-next-solo: 1.68em;

  --rw-gap: clamp(6px, 1.2vw + 0.6vh, 14px);
  --rw-pad: clamp(8px, 1.8vw + 0.5vh, 16px);
  --rw-inner-pad: clamp(10px, 2vw + 0.6vh, 20px);
  --rw-block-radius: clamp(6px, 1.5vw, 22px);
}

.pisell-resource-wall-card__grid {
  flex: 1;
  display: grid;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  height: 100%;
  gap: var(--rw-gap);
  padding: var(--rw-pad);
}

/**
 * 头 12%；剩余 88% 给「当前 : 下一 = 11:5」（Next 占剩余 5/16）。
 * 行比例：192:968:440 = 12 : 88*11/16 : 88*5/16（同乘 16 去分母）。
 */
.pisell-resource-wall-card__grid--with-next {
  grid-template-rows: minmax(0, 192fr) minmax(0, 968fr) minmax(0, 440fr);
}

/** 无 Next：头 12%，其余给 Current 面板 */
.pisell-resource-wall-card__grid--no-next {
  grid-template-rows: minmax(0, 12fr) minmax(0, 88fr);
}

.pisell-resource-wall-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.pisell-resource-wall-card__header-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22em;
  justify-content: center;
}

.pisell-resource-wall-card__header-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.08;
  font-size: var(--rw-tier1);
}

/** 左上角资源类型：与面板内时段/联系人同级字阶（--rw-tier2） */
.pisell-resource-wall-card__header-type {
  flex-shrink: 0;
}

.pisell-resource-wall-card__header-status {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(52%, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.1;
  /** 与面板内时段/联系人同字阶（tier2） */
  font-size: var(--rw-tier2);
  padding: 0.2em 0.55em;
  border-radius: 999px;
}

.pisell-resource-wall-card__header-status--empty {
  border: 1px solid rgba(148, 163, 184, 0.42);
}

.pisell-resource-wall-card__header-status--reserved {
  border: 1px solid rgba(111, 74, 230, 0.35);
}

/** 迟到：accent 卡上红色描边 + 红字，与一档 late 强调色对齐 */
.pisell-resource-wall-card__header-status--late {
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.08);
}

.pisell-resource-wall-card__header-status--occupied {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
}

/** 超时：占用卡上红色实心胶囊（背景由内联 style 覆盖为 expiredTone.color） */
.pisell-resource-wall-card__header-status--expired {
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.pisell-resource-wall-card__panel {
  border-width: 1px;
  border-style: solid;
  border-radius: var(--rw-block-radius);
  padding: var(--rw-inner-pad);
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--rw-gap) * 0.65);
}

/** 占用卡「当前预约」二档：略加粗，无描边/阴影 */
.pisell-resource-wall-card__panel--occupied-current .pisell-resource-wall-card__tier2 {
  font-weight: 700;
}

/** 预约中（浅紫底）：Current / 时段 / 联系人用深色主字色，与时钟区标题同级对比度 */
.pisell-resource-wall-card__panel--reserved-current .pisell-resource-wall-card__tier2 {
  font-weight: 700;
}

.pisell-resource-wall-card__section-title--reserved-current {
  opacity: 1;
  font-weight: 700;
}

/** 预约中：Next 小标题与联系人/时段 — 不降透明度、字重与当前区对齐 */
.pisell-resource-wall-card__section-title--reserved-next {
  opacity: 1;
  font-weight: 700;
}

.pisell-resource-wall-card__panel--reserved-next .pisell-resource-wall-card__tier2,
.pisell-resource-wall-card__panel--reserved-next .pisell-resource-wall-card__next-time-solo {
  font-weight: 700;
}

.pisell-resource-wall-card__section-title {
  flex-shrink: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: var(--rw-tier3);
  line-height: 1.25;
  letter-spacing: 0.03em;
  opacity: 0.92;
}

/** 占用卡「当前预约」小标题：不叠 section-title 默认透明度 */
.pisell-resource-wall-card__section-title--occupied-current {
  opacity: 1;
  font-weight: 700;
}

.pisell-resource-wall-card__current-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rw-gap);
}

/** 主文案占满上方；进度条与跑马灯放在 current-footer */
.pisell-resource-wall-card__current-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rw-gap);
  justify-content: flex-start;
}

.pisell-resource-wall-card__current-footer {
  flex-shrink: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--rw-gap) * 0.75);
  margin-top: auto;
}

/** 状态/倒计时等与进度条同一贴底带，叠在进度条正上方 */
.pisell-resource-wall-card__current-footer-emphasis {
  min-width: 0;
  width: 100%;
}

.pisell-resource-wall-card__tier1 {
  min-width: 0;
  max-width: 100%;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: var(--rw-tier1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pisell-resource-wall-card__tier2 {
  min-width: 0;
  max-width: 100%;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: var(--rw-tier2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pisell-resource-wall-card__tier3 {
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.25;
  font-size: var(--rw-tier3);
  min-height: 0;
}

/** 快结束跑马灯：底色与同一列 countdown 强调色同色相（primaryEmphasisColor）；字色白 */
.pisell-resource-wall-card__marquee-shell {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 9999px;
  padding: 0.42em 0.95em;
}

.pisell-resource-wall-card__marquee-shell > .pisell-resource-wall-card__tier3 {
  min-width: 0;
  width: 100%;
}

.pisell-resource-wall-card__progress-wrap {
  flex-shrink: 0;
  border-radius: 9999px;
  overflow: hidden;
  height: clamp(4px, 0.42em, 12px);
}

.pisell-resource-wall-card__progress-fill {
  height: 100%;
  border-radius: 9999px;
}

.pisell-resource-wall-card__next-stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--rw-gap) * 0.75);
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

/** 联系人 + 时段两行并存：略缩字级与间距，减轻省略与裁切 */
.pisell-resource-wall-card__next-stack--both-lines {
  gap: calc(var(--rw-gap) * 0.55);
}

.pisell-resource-wall-card__next-stack--both-lines .pisell-resource-wall-card__tier2 {
  font-size: calc(var(--rw-tier2) * 0.82);
  line-height: 1.12;
}

/** 下一预约仅有时间、无联系人时：相对卡片基准介于二档与一档之间 */
.pisell-resource-wall-card__next-time-solo {
  min-width: 0;
  max-width: 100%;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: var(--rw-next-solo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}