/*
 * Komponen khusus halaman Destinasi (/destinasi/ dan lima halaman anaknya).
 * Prefix kelas: ds-. Dipakai bersama kelas umum di ltm.css (lihat
 * prompts/_kontrak-desain.md untuk daftar lengkap kelas yang boleh dipakai).
 */

/* ============ MATRIX PAKET x DESTINASI (halaman index) ============ */
.ds-matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.ds-matrix{width:100%;border-collapse:collapse;min-width:640px}
.ds-matrix th,.ds-matrix td{padding:16px 18px;text-align:center;font-size:14.5px;border-bottom:1px solid var(--line)}
.ds-matrix thead th{background:var(--paper-2);font-family:var(--ff-head);font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.ds-matrix tbody th{text-align:left;font-weight:700;color:var(--ink);white-space:nowrap}
.ds-matrix tbody tr:last-child td,.ds-matrix tbody tr:last-child th{border-bottom:0}
.ds-check{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--brand-50);color:var(--brand-600);font-weight:800}
.ds-dash{color:var(--ink-3)}

/* ============ APA YANG MENARIK ============ */
.ds-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.ds-fact{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px}
.ds-fact span{display:block;font-family:var(--ff-head);font-weight:800;font-size:13px;color:var(--brand-600);margin-bottom:8px}
.ds-fact p{color:var(--ink-2);font-size:14.5px}

/* ============ PAKET YANG MELEWATI DESTINASI ============ */
.ds-route-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.ds-route{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px;transition:box-shadow .2s, transform .2s}
.ds-route:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.ds-route-name{font-family:var(--ff-head);font-weight:800;font-size:18px}
.ds-route-dur{font-size:13px;color:var(--ink-3);font-weight:600}
.ds-route-price{font-size:14px;color:var(--ink-2);font-weight:700}
.ds-route .link-arrow{margin-top:8px;font-size:13.5px}

/* ============ LOKASI ============ */
.ds-lokasi{max-width:680px}

@media (max-width:960px){
  .ds-facts{grid-template-columns:1fr 1fr}
  .ds-route-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .ds-facts{grid-template-columns:1fr}
  .ds-route-grid{grid-template-columns:1fr}
}