/* stack-table.css - 堆叠表格 */




/* 移动端堆叠样式 */
@media screen and (max-width: 768px) {
  .wp-block-table table.stack-on-mobile,
  .stack-on-mobile {
    display: block;
    border: none;
    background: transparent;
  }
  
  .wp-block-table table.stack-on-mobile thead,
  .stack-on-mobile thead {
    display: none;
  }
  
  .wp-block-table table.stack-on-mobile tbody,
  .stack-on-mobile tbody {
    display: block;
  }
  
  .wp-block-table table.stack-on-mobile tr,
  .stack-on-mobile tr{
    display: block;
    padding: 0.5rem;
    border-radius: 0.2rem;
  }
  
  .wp-block-table table.stack-on-mobile td,
  .stack-on-mobile td {
    display: flex;
    padding: 0.2rem 0.5rem;
    text-align: left;
  }
  

  /* 关键修复：使用 ::before 伪元素显示标签 */
  .wp-block-table table.stack-on-mobile td::before,
  .stack-on-mobile td::before {
    content: attr(data-label);
    color: inherit;
    margin-right: 0.5rem;
    min-width: 30%;
  }
  
  .stack-on-mobile table > tbody > tr > td:first-child{
      width:auto!important;
  }
  
  .wp-block-table table.stack-on-mobile.w20 td::before,
  .stack-on-mobile.w20 td::before {
    min-width: 20%;
  }
  
  .wp-block-table table.stack-on-mobile.w10 td::before,
  .stack-on-mobile.w10 td::before {
    min-width: 10%;
  }
  
  
  /* 备用方案：如果没有 data-label，使用 CSS 计数器 */
  .stack-on-mobile[data-use-counter="true"] td::before {
    content: "项目 " counter(table-cell);
    counter-increment: table-cell;
  }
  
  .stack-on-mobile[data-use-counter="true"] {
    counter-reset: table-cell;
  }
}