/* ==========================================================================
   Responsive Table — 全站統一表格樣式 (v2)
   用法：在 <table> 加 class "responsive-table"；外層包裹容器加 "responsive-table-wrap"
   ========================================================================== */

/* ---------- 桌面版增強（全站統一 UX） ---------- */

/* 容器：圓角、細邊框、陰影；配合 sticky header */
.responsive-table-wrap{
  position: relative;
  max-height: min(75vh, 720px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* 數字價格欄：右對齊 + 等寬數字，方便掃讀對位 */
table.responsive-table td.price-range,
table.responsive-table th.price-range,
table.responsive-table td.text-right,
table.responsive-table th.text-right{
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 自動為「標題或內容中含有價格詞」的欄位套等寬數字（JS 偵測後加 .is-price） */
table.responsive-table td.is-price,
table.responsive-table th.is-price{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
}

/* 價格欄加強視覺層次：主要價格用主色 + 粗體 */
table.responsive-table td.is-price{
  color: var(--color-primary, #c0392b);
  font-weight: 600;
}

/* 斑馬紋（若頁面原本沒設定任何底色才生效；降低特異性避免衝撞既有 bg-* 類別） */
@media (min-width: 641px){
  table.responsive-table tbody tr:nth-child(even):not([class*="bg-"]) > td:not([class*="bg-"]){
    background-color: rgba(0,0,0,.025);
  }
  table.responsive-table tbody tr:hover > td{
    background-color: rgba(251, 191, 36, .08); /* 暖色 hover */
    transition: background-color .15s ease;
  }

  /* Sticky 表頭：長表格滾動時仍可見欄位 */
  table.responsive-table > thead{
    position: sticky;
    top: 0;
    z-index: 2;
  }
  table.responsive-table > thead > tr > th{
    /* 若 thead 本身沒 bg-*（較少見），補一層淺底避免透空 */
    background-clip: padding-box;
  }
  /* 若 thead 無任何 bg-* 類別，給一個預設底色做 fallback */
  table.responsive-table > thead:not([class*="bg-"]) > tr > th{
    background-color: #f8f9fa;
  }
}

/* ---------- 手機版（≤640px）：轉卡片式呈現 ---------- */

@media (max-width: 640px){
  .responsive-table-wrap{
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none;
  }

  table.responsive-table{
    width: 100%;
    /* 覆寫 Tailwind 的 min-w-max，避免手機卡片式版面被內容撐爆造成整頁橫向捲動 */
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
  }
  /* 卡片內每一格也鎖住最大寬度，保險起見不讓任何長字串撐破 viewport */
  table.responsive-table td{
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  table.responsive-table thead{ display: none !important; }

  table.responsive-table tbody,
  table.responsive-table tr,
  table.responsive-table td{
    display: block;
    width: 100%;
  }

  table.responsive-table tr{
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    margin: 0 0 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
  }

  table.responsive-table td{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    white-space: normal !important;
    text-align: left !important; /* 手機版一律靠左，避免價格單獨靠右破版 */
    word-break: break-word;
  }
  table.responsive-table td:last-child{ border-bottom: 0; }

  /* data-label（由 JS 自動注入）作為卡片左側小標題
     用 auto 寬度避免短標籤浪費空間、長標籤又能維持上限 */
  table.responsive-table td::before{
    content: attr(data-label);
    flex: 0 0 auto;
    min-width: 84px;
    max-width: 38%;
    font-weight: 700;
    text-align: left;
    opacity: .85;
    color: var(--color-secondary, #1f2937);
    word-break: break-word;
    line-height: 1.4;
  }

  /* 手機版價格欄：保留醒目樣式 */
  table.responsive-table td.is-price,
  table.responsive-table td.price-range,
  table.responsive-table td.text-right{
    color: var(--color-primary, #c0392b);
    font-weight: 600;
  }

  /* 若無 data-label（例如單欄或 JS 未載入），不擠壓版面 */
  table.responsive-table td:not([data-label])::before,
  table.responsive-table td[data-label=""]::before{
    display: none;
  }
}

/* ---------- wine-price-inquiry 搜尋 no-result 樣式 ---------- */
.price-search-empty{
  padding: 24px;
  text-align: center;
  color: #6b7280;
  font-size: .95rem;
}