/* bsdhomes.id — komponen tabel artikel dan halaman (Fase 3, 2 Okt 2026)
   Desktop: tabel penuh tanpa geser, kolom pertama jadi "spine" pasir.
   HP (< 760px): setiap baris jadi kartu; label kolom diambil dari data-label.
   Token: ivory #F6F1E7, ink #1B1917, arang #2A2622, sand #E9DDC8, chip #EFE6D6,
   line #D5C7AF, tembaga #9A4A22. Tanpa hijau, tanpa teks abu-abu. */

.bsd-tabel {
  --t-ivory: #F6F1E7;
  --t-surface: #FFFCF7;
  --t-ink: #1B1917;
  --t-arang: #2A2622;
  --t-sand: #E9DDC8;
  --t-chip: #EFE6D6;
  --t-line: #D5C7AF;
  --t-tembaga: #9A4A22;
  /* Lebih lebar dari kolom teks di desktop, tidak pernah lebih lebar dari layar */
  width: min(100vw - 48px, 960px);
  margin: 28px 0 36px;
  margin-left: calc(50% - min(50vw - 24px, 480px));
  position: relative;
}

.bsd-tabel,
.bsd-tabel *,
.bsd-tabel *::before,
.bsd-tabel *::after { box-sizing: border-box; }

.bsd-tabel table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  min-width: 0;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: 16px;
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--t-ink);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 0 var(--t-line), 0 22px 44px -32px rgba(42, 38, 34, 0.45);
}

.bsd-tabel thead th {
  background: var(--t-arang);
  color: var(--t-ivory);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  text-align: left;
  padding: 14px 18px;
  vertical-align: bottom;
  position: relative;
}

/* Garis tembaga di bawah header; ikut animasi masuk */
.bsd-tabel thead th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--t-tembaga);
  transform-origin: left center;
}

.bsd-tabel tbody td {
  padding: 15px 18px;
  vertical-align: top;
  border-top: 1px solid var(--t-line);
  overflow-wrap: anywhere;
}

.bsd-tabel tbody tr:first-child td { border-top: 0; }

/* Kolom pertama = nama yang dibandingkan */
.bsd-tabel tbody td:first-child {
  background: var(--t-sand);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  width: 22%;
  min-width: 150px;
  border-top-color: rgba(154, 74, 34, 0.18);
}

.bsd-tabel tbody tr:nth-child(even) td:not(:first-child) { background: var(--t-ivory); }

.bsd-tabel tbody tr:hover td:not(:first-child) { background: var(--t-chip); }
.bsd-tabel tbody tr:hover td:first-child { box-shadow: inset 4px 0 0 var(--t-tembaga); }

.bsd-tabel a { color: var(--t-tembaga); text-underline-offset: 3px; }

/* ---------- HP dan tablet kecil: baris jadi kartu ---------- */
@media (max-width: 759px) {
  .bsd-tabel {
    width: auto;
    margin: 24px 0 32px;
  }
  .bsd-tabel table,
  .bsd-tabel tbody,
  .bsd-tabel tr,
  .bsd-tabel td {
    display: block;
    width: 100%;
  }
  .bsd-tabel table {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* Header tetap ada untuk pembaca layar, tapi tidak tampil */
  .bsd-tabel thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .bsd-tabel tbody tr {
    background: var(--t-surface);
    border: 1px solid var(--t-line);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 16px 30px -26px rgba(42, 38, 34, 0.5);
  }
  .bsd-tabel tbody tr:nth-child(even) td:not(:first-child),
  .bsd-tabel tbody tr:hover td:not(:first-child) { background: transparent; }
  .bsd-tabel tbody tr:hover td:first-child { box-shadow: inset 4px 0 0 var(--t-tembaga); }

  .bsd-tabel tbody td {
    display: grid;
    grid-template-columns: minmax(96px, 38%) 1fr;
    gap: 12px;
    padding: 10px 16px;
    font-size: 15px;
    border-top: 1px solid var(--t-line);
  }
  .bsd-tabel tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 13px;
    color: var(--t-arang);
    line-height: 1.45;
    padding-top: 1px;
  }
  .bsd-tabel tbody td:first-child {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 19px;
    padding: 14px 16px 13px 20px;
    border-top: 0;
    box-shadow: inset 4px 0 0 var(--t-tembaga);
  }
  .bsd-tabel tbody td:first-child::before { content: none; }
  .bsd-tabel tbody tr:first-child td:not(:first-child) { border-top: 1px solid var(--t-line); }
  /* Sel kosong tidak ditampilkan di kartu */
  .bsd-tabel tbody td:empty { display: none; }
}

/* ---------- Gerak: hanya aktif kalau JS menyalakan html.bsd-motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.bsd-motion .bsd-tabel:not(.is-in) thead th::after { transform: scaleX(0); }
  html.bsd-motion .bsd-tabel thead th::after {
    transition: transform 420ms cubic-bezier(.4, 0, .2, 1);
  }
  html.bsd-motion .bsd-tabel thead th:nth-child(2)::after { transition-delay: 140ms; }
  html.bsd-motion .bsd-tabel thead th:nth-child(3)::after { transition-delay: 280ms; }
  html.bsd-motion .bsd-tabel thead th:nth-child(4)::after { transition-delay: 420ms; }
  html.bsd-motion .bsd-tabel thead th:nth-child(5)::after { transition-delay: 560ms; }
  html.bsd-motion .bsd-tabel thead th:nth-child(n+6)::after { transition-delay: 700ms; }
  html.bsd-motion .bsd-tabel:not(.is-in) tbody tr { opacity: 0; transform: translateY(10px); }
  html.bsd-motion .bsd-tabel tbody tr {
    transition: opacity 520ms ease-out, transform 620ms cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 55ms + 160ms);
  }
}

/* ---------- Varian fakta: tabel 2 kolom label–nilai tanpa judul kolom ----------
   Dipakai untuk tabel "Fakta cepat" yang header-nya kosong. Di HP tetap 2 kolom. */
.bsd-tabel--fakta thead { display: none; }
.bsd-tabel--fakta tbody td:first-child { width: 34%; font-size: 15.5px; }
@media (max-width: 759px) {
  .bsd-tabel--fakta table { display: table; border: 1px solid var(--t-line); border-radius: 14px; background: var(--t-surface); }
  .bsd-tabel--fakta tbody { display: table-row-group; }
  .bsd-tabel--fakta tbody tr { display: table-row; border: 0; border-radius: 0; margin: 0; box-shadow: none; }
  .bsd-tabel--fakta tbody td,
  .bsd-tabel--fakta tbody td:first-child { display: table-cell; width: auto; font-size: 15px; padding: 11px 14px; box-shadow: none; border-top: 1px solid var(--t-line); }
  .bsd-tabel--fakta tbody tr:first-child td { border-top: 0; }
  .bsd-tabel--fakta tbody td::before { content: none; }
}