/* Hallmark · component: halaman-trip-server · genre: playful · theme: Hum · design-system: design.md
 * pre-emit critique: P5 H5 E4 S5 R4 V4
 * states: daftar · kosong · detail (buka · tipis · penuh · tutup · lewat) · hover · focus
 * diperiksa: 320 · 375 · 414 · 768 · 1280 px — nol geser mendatar
 *
 * Dimuat SESUDAH tulisan.css, hanya di /trip dan /trip/:slug. Versi pertama
 * memakai daftar artikel bergaris dari tulisan.css dan terbaca seperti arsip;
 * trip dijual lewat fotonya, jadi di sini memakai kartu berfoto yang sama
 * dengan landing (.acara-l), pita pear di kepala, dan kartu pesan yang
 * menempel. Setiap warna menunjuk token di /tokens.css.
 */

/* -------------------------------------------------------------- bersama -- */
.tp__dalam,
.td__dalam {
  max-width: 72rem; margin-inline: auto;
  padding-inline: var(--page-gutter, 1.25rem);
}

.tp__subjudul {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-xl); line-height: 1.2;
}

.tp__grid {
  margin: var(--space-md) 0 0; padding: 0; list-style: none;
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.tp__grid > li { display: grid; min-width: 0; }

/* ----------------------------------------------------------- kartu trip -- */
.tk {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: clip;
  color: inherit; text-decoration: none;
  transition: box-shadow var(--dur-short) var(--ease-out);
}
.tk:hover { box-shadow: var(--shadow-card-hi); }
.tk:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.tk__sampul {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: clip;
  background: var(--color-paper-2);
}
.tk__sampul > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-long) var(--ease-out);
}
.tk:hover .tk__sampul > img { transform: scale(1.03); }
.tk__sampul--logo { display: grid; place-items: center; background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-rule); }
.tk__sampul--logo > img { position: static; width: min(45%, 8rem); height: auto; }
.tk:hover .tk__sampul--logo > img { transform: none; }

.tk__isi {
  flex: 1; display: grid; align-content: start; justify-items: start; gap: 2px;
  padding: var(--space-sm) var(--space-md) var(--space-md);
}
.tk__isi .lencana { margin-bottom: var(--space-2xs); }
.tk__nama {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-md); line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}
.tk__fakta { font-size: var(--text-sm); color: var(--color-ink-2); }
.tk__cuplik {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tk__kaki {
  align-self: end; justify-self: stretch;
  margin-top: var(--space-sm);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
}
.tk__kaki:empty { display: none; }
.tk__harga { font-weight: var(--weight-display); }
.tk__ajak {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--text-sm); font-weight: var(--weight-display);
  color: var(--color-cyan-deep); white-space: nowrap;
}
.tk:hover .tk__ajak { text-decoration: underline; text-underline-offset: 3px; }
.tk__ikut {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-size: var(--text-sm); font-weight: var(--weight-display);
}
.tk__ikut::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill);
  background: var(--color-mint);
}

/* ---------------------------------------------------------------- daftar -- */
.tp__kepala {
  background: var(--band-pear);
  padding-block: var(--space-2xl) var(--space-xl);
}
.tp__judul {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-3xl); line-height: 1.1;
  overflow-wrap: anywhere;
}
.tp__lede { margin: var(--space-sm) 0 0; max-width: 46ch; color: var(--color-ink-2); }

.tp__langkah {
  margin: var(--space-lg) 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
}
.tp__langkah li {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: 0.3rem 0.8rem 0.3rem 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.tp__langkah li span {
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: var(--radius-pill);
  background: var(--color-pear);
  font-size: var(--text-xs); font-weight: var(--weight-display);
}

.tp__seksi { margin-top: var(--space-2xl); }

.segera {
  margin-top: var(--space-md);
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.segera__ikon {
  flex: none; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill);
  background: var(--color-pear); color: var(--color-ink);
}
.segera__teks { display: grid; gap: 2px; min-width: 0; }
.segera__judul { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-md); }
.segera__isi { font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------------------------------------------------------------- detail -- */
.td { padding-top: var(--space-md); }
.td__remah { font-size: var(--text-sm); }
.td__remah a { color: var(--color-ink-2); text-decoration: none; }
.td__remah a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }

.td__sampul {
  position: relative; display: block;
  margin-top: var(--space-md);
  aspect-ratio: 4 / 3; overflow: clip;
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
}
.td__sampul > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.td__sampul--logo { aspect-ratio: 5 / 2; display: grid; place-items: center; background: var(--color-surface); box-shadow: var(--shadow-card); }
.td__sampul--logo > img { position: static; width: min(40%, 10rem); height: auto; }

.td__badan { margin-top: var(--space-lg); display: grid; gap: var(--space-xl); }
.td__utama { min-width: 0; }
.td__judul {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-3xl); line-height: 1.12;
  overflow-wrap: anywhere;
}

.td__fakta {
  margin: var(--space-md) 0 0; padding: 0; list-style: none;
  display: grid; gap: var(--space-xs);
}
.td__fakta li { display: flex; align-items: flex-start; gap: var(--space-xs); color: var(--color-ink-2); }
.td__fakta svg { flex: none; margin-top: 0.15rem; color: var(--color-ink); }
.td__fakta a { color: var(--color-cyan-deep); }

.td__deskripsi,
.td__cara {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}
.td__deskripsi h2,
.td__cara h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); }
.td__deskripsi p { margin: var(--space-sm) 0 0; line-height: 1.7; max-width: 62ch; }

.td__cara ol { margin: var(--space-md) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-sm); }
.td__cara li { display: flex; align-items: flex-start; gap: var(--space-sm); }
.td__cara li > span {
  flex: none; display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill);
  background: var(--color-pear);
  font-size: var(--text-sm); font-weight: var(--weight-display);
}
.td__cara p { margin: 0.15rem 0 0; color: var(--color-ink-2); }
.td__cara strong { color: var(--color-ink); font-weight: var(--weight-display); }

/* Kartu pesan */
.pesan {
  align-self: start;
  padding: var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card-hi);
  display: grid; gap: var(--space-2xs);
}
.pesan p { margin: 0; }
.pesan__label { font-size: var(--text-sm); color: var(--color-ink-2); }
.pesan__harga {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-2xl); line-height: 1.1;
}
.pesan__kursi { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.pesan__tombol {
  margin-top: var(--space-sm);
  display: flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.6rem 1.25rem;
  border-radius: var(--radius-btn);
  background: var(--color-pear); color: var(--color-ink);
  font-weight: var(--weight-display); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out);
}
.pesan__tombol:hover { background: color-mix(in oklch, var(--color-pear), var(--color-pear-deep) 45%); }
.pesan__tombol:active { background: var(--color-pear-deep); }
.pesan__tombol:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.pesan__tombol--kedua { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule-2); }
.pesan__tombol--kedua:hover { background: var(--color-paper-2); }
.pesan__catatan { font-size: var(--text-xs); color: var(--color-ink-2); }

.td__lain { margin-top: var(--space-2xl); }

/* Ponsel: kartu pesan jadi bilah bawah yang menempel selama trip masih bisa
   dipesan — harga dan tombol selalu dalam jangkauan jempol. */
@media (max-width: 59.99rem) {
  .td:has(.pesan:not(.pesan--tutup)) { padding-bottom: 5.5rem; }
  .pesan:not(.pesan--tutup) {
    position: fixed; inset: auto 0 0 0; z-index: 20;
    grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 0 var(--space-md);
    padding: var(--space-sm) var(--page-gutter, 1.25rem) calc(var(--space-sm) + env(safe-area-inset-bottom));
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  .pesan:not(.pesan--tutup) .pesan__label,
  .pesan:not(.pesan--tutup) .pesan__catatan { display: none; }
  .pesan:not(.pesan--tutup) .pesan__harga { grid-column: 1; font-size: var(--text-xl); }
  .pesan:not(.pesan--tutup) .pesan__kursi { grid-column: 1; grid-row: 2; font-size: var(--text-xs); color: var(--color-ink-2); }
  .pesan:not(.pesan--tutup) .pesan__tombol { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

@media (min-width: 48rem) {
  .td__sampul { aspect-ratio: 21 / 9; }
  .td__sampul--logo { aspect-ratio: 4 / 1; }
}

@media (min-width: 60rem) {
  .td__badan { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-2xl); }
  .pesan { position: sticky; top: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .tk__sampul > img { transition: none; }
  .tk:hover .tk__sampul > img { transform: none; }
}

/* ------------------------------------------- daftar jalur (/jalur) ----
   Kartu yang sama dengan trip. Jalur tanpa foto memakai siluet jalurnya di
   bidang cyan muda sebagai gambar. */
.tp__kepala--cyan { background: var(--band-cyan); }
.tk__sampul--jejak { display: grid; place-items: center; background: var(--band-cyan); }
.tk__sampul--jejak .jejak {
  /* Diukur dari TINGGI bidang: viewBox-nya persegi, bidangnya 16:10. */
  position: static; width: auto; height: 80%; max-width: 90%;
  padding: 0; background: none; box-shadow: none; border-radius: 0;
  color: var(--color-cyan-deep);
  transition: transform var(--dur-long) var(--ease-out);
}
.tk:hover .tk__sampul--jejak .jejak { transform: scale(1.04); }
.tk__isi .chip { margin-bottom: var(--space-2xs); }
.tk__angka { font-size: var(--text-sm); color: var(--color-ink-2); }