/* ==========================================================================
   Docpage — pola untuk HALAMAN (bukan blog) yang wording-nya di-hardcode
   dari editor (mis. page-liveaboard.php, page-destinations.php), bukan
   the_content(). Dibangun sebagai rangkaian <section> full-width, masing-
   masing dengan container sendiri -- persis pola front-page.php. Sejumlah
   section di sini reuse LANGSUNG class dari sections.css (.experience/
   .xpanel, .journey, .why, .faq, .cta); file ini hanya berisi bagian yang
   belum ada padanannya.
   ========================================================================== */

/* ==========================================================================
   Highlight cards -- pengganti .experience/.xpanel (grid foto full-bleed +
   scrim) untuk section "pengalaman inti" pada halaman detail destinasi
   tunggal, mis. Kelor Island. Tetap pakai foto asli (bukan ikon), tapi
   sebagai thumbnail kecil rounded-rect di atas kartu -- bukan foto
   full-bleed dgn teks overlay seperti .xpanel -- supaya tetap beda dari
   homepage & section lain. Warna tetap brand (ink + gold).
   ========================================================================== */

.highlights {
  background: #ffffff;
  padding: 96px 0;
}

.highlights__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.highlights__head {
  max-width: 640px;
  margin-bottom: 48px;
}

.highlights__eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.highlights__title {
  margin: 0 0 14px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  color: var(--ink);
}

.highlights__intro {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-muted);
}

.highlights__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.highlightcard {
  background: var(--ink-tint);
  box-sizing: border-box;
  border: 1px solid transparent;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.highlightcard:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 30px rgba(13, 59, 69, 0.08);
}

.highlightcard__media {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.highlightcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.highlightcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.6);
}

.highlightcard__body {
  padding: 28px 28px 32px;
}

.highlightcard h3 {
  margin: 0 0 12px;
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}

.highlightcard p {
  margin: 0 0 16px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-muted);
}

.highlightcard a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-text);
  transition: color 0.3s ease;
}

.highlightcard a:hover {
  color: var(--ink);
}

@media (max-width: 900px) {
  .highlights__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .highlights {
    padding: 56px 0;
  }

  .highlightcard__body {
    padding: 24px 22px 28px;
  }
}

/* ==========================================================================
   Testimonials -- kartu kutipan tamu asli (quote + nama + peran), latar
   gelap penuh (mengikuti ritme .why/.experience), dipakai di /reviews/.
   ========================================================================== */

.testimonials {
  background: var(--ink);
  padding: 96px 0;
}

.testimonials__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.testimonials__head {
  max-width: 640px;
  margin-bottom: 48px;
}

.testimonials__eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.testimonials__title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  color: #ffffff;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonialcard {
  padding: 32px 28px;
  background: rgb(255 255 255 / 0.05);
  border-left: 3px solid var(--gold);
  box-sizing: border-box;
}

.testimonialcard__quote {
  margin: 0 0 20px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.75;
  color: var(--on-dark);
}

.testimonialcard__author {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
}

.testimonialcard__role {
  display: block;
  margin-top: 2px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--on-dark-faint);
}

@media (max-width: 900px) {
  .testimonials__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .testimonials {
    padding: 56px 0;
  }
}

/* ==========================================================================
   Destination directory -- daftar lengkap destinasi dikelompokkan per
   kategori asli, kartu berbingkai tan (visual DNA sama dgn .tripcard/
   .doccard), dipakai di /destinations/.
   ========================================================================== */

.destgrid {
  background: #ffffff;
  padding: 96px 0;
}

.destgrid__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.destgrid__group {
  margin-bottom: 56px;
}

.destgrid__group:last-child {
  margin-bottom: 0;
}

.destgrid__group h2 {
  margin: 0 0 24px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  font-weight: 600;
  color: var(--ink);
}

.destgrid__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.destgrid__row--2 {
  grid-template-columns: repeat(2, 1fr);
}

.destcard {
  padding: 26px 24px;
  background: #ffffff;
  border: 1px solid var(--ink-line);
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.destcard:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 30px rgba(13, 59, 69, 0.08);
}

.destcard h3 {
  margin: 0 0 10px;
  font-family: "Playfair Display", serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

.destcard p {
  margin: 0 0 16px;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-muted);
}

.destcard__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.destcard__links a {
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-text);
  transition: color 0.3s ease;
}

.destcard__links a:hover {
  color: var(--ink);
}

@media (max-width: 900px) {
  .destgrid__row,
  .destgrid__row--2 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Hero foto -- pembuka halaman. page-liveaboard.php men-set
   $GLOBALS['jhg_page_has_hero'] supaya header ikut transparan di atasnya,
   meniru pola .hero pada front-page.php.
   ========================================================================== */

.docpage__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 52vh;
  overflow: hidden;
}

.docpage__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.docpage__hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(var(--ink-rgb) / 0.55) 0%,
    rgb(var(--ink-rgb) / 0.12) 38%,
    rgb(var(--ink-rgb) / 0.8) 100%
  );
}

.docpage__hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 48px;
  box-sizing: border-box;
}

.docpage__eyebrow {
  display: block;
  margin-bottom: 16px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.docpage__hero-title {
  margin: 0;
  max-width: 720px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.9rem, 3.8vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 2px 20px rgb(var(--ink-rgb) / 0.4);
}

@media (max-width: 640px) {
  .docpage__hero {
    min-height: 44vh;
  }
}

/* ==========================================================================
   Overview -- Quick Answer + Fleet Overview. Section-nya reuse .intro
   langsung (teks kiri + kolase foto kanan) supaya tidak ada ruang kosong
   di sisi kanan seperti versi teks-saja sebelumnya. Yang tersisa di sini
   hanya kotak "Quick Answer", karena .intro tidak punya padanan untuk itu.
   ========================================================================== */

.lo-overview__quick {
  border-left: 4px solid var(--gold);
  background: var(--ink-tint);
  padding: 22px 26px;
  margin: 0 0 30px;
}

.lo-overview__quick p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.8;
}

/* Base layer tema lama memaksa <strong> jadi putih (peninggalan latar
   hitam serba gelap) -- di atas kotak ink-tint yang terang ini jadi tak
   kelihatan, jadi dikembalikan ke warna ink. */
.lo-overview__quick strong {
  color: var(--ink);
}

/* Varian .intro dengan SATU foto saja (bukan kolase 2 foto bertumpuk) --
   dipakai saat konten cuma punya satu foto yang relevan, mis. di
   /destinations/kelor-island/. Meniadakan padding-bottom & positioning
   absolut yang di sections.css dirancang khusus utk menampung foto inset. */
.intro__media--single {
  padding-bottom: 0;
}

.intro__media--single .intro__photo {
  width: 100%;
  margin-left: 0;
  aspect-ratio: 4 / 5;
}

/* ==========================================================================
   Fleet Categories reuse .experience/.xpanel apa adanya (lihat sections.css)
   -- tambahan di sini hanya paragraf deskripsi penuh di dalam panel, karena
   .xpanel__text bawaan didesain untuk satu kalimat pendek, sedangkan wording
   /liveaboard/ per kategori jauh lebih panjang.
   ========================================================================== */

.xpanel__desc {
  margin: 0 0 26px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.8;
  color: rgb(255 255 255 / 0.82);
  text-shadow: 0 1px 10px rgb(var(--ink-rgb) / 0.3);
}

/* ==========================================================================
   Fleet Standards -- Amenities + Safety, dua kolom. Reuse .docpanel/.doclist
   (panel ink-tint + daftar berpanah, visual DNA sama dgn .sailcard__list).
   ========================================================================== */

.standards {
  background: #ffffff;
  padding: 96px 0;
}

.standards__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.standards h2 {
  margin: 0 0 20px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: var(--ink);
}

.docpanel {
  background: var(--ink-tint);
  padding: 30px 32px;
  box-sizing: border-box;
}

.doclist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doclist--single {
  grid-template-columns: 1fr;
}

.doclist li {
  position: relative;
  padding-left: 20px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.doclist li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold-text);
  font-weight: 700;
}

.doclist li strong {
  color: var(--ink);
}

/* ==========================================================================
   Cabin Categories + Dining -- kartu berbingkai, identik DNA dgn .tripcard
   ========================================================================== */

.cabins {
  background: #ffffff;
  padding: 96px 0;
}

.cabins__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.cabins__title {
  margin: 0 0 28px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: var(--ink);
}

/* 3 kartu tier kabin reuse .sail__grid/.sailcard langsung dari sections.css
   (panel solid gradasi ink) -- tidak butuh CSS baru di sini. */

.cabins__dining {
  max-width: 720px;
  margin-top: 56px;
}

.cabins__dining p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-muted);
}

/* ==========================================================================
   Fleet Comparison Table
   ========================================================================== */

.comparison {
  background: #ffffff;
  padding: 96px 0;
}

.comparison__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.comparison__title {
  margin: 0 0 28px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: var(--ink);
}

/* Mengisi penuh .comparison__inner (1280px), bukan dibatasi sempit --
   supaya konsisten dengan section lain (Standards/Cabins) yang juga penuh. */
.docpage__table-wrap {
  margin: 0 0 12px;
  overflow-x: auto;
  border: 1px solid var(--ink-line);
}

table.docpage__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: "Inter", sans-serif;
  font-size: 13px;
}

table.docpage__table th {
  padding: 16px 20px;
  background: var(--ink);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
}

table.docpage__table td {
  padding: 16px 20px;
  border-top: 1px solid var(--ink-line);
  color: var(--ink-muted);
}

table.docpage__table tbody tr:nth-child(even) td {
  background: var(--ink-tint);
}

.docpage__table-note {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ==========================================================================
   FAQ -- reuse .faq/.faq__inner/.faq__title/.faq__body apa adanya. Satu-
   satunya tambahan: varian tanpa kolom kategori (halaman ini tidak perlu
   tab), jadi grid 30/70 bawaan dimatikan.
   ========================================================================== */

.faq__body--single {
  display: block;
}

.faq__body--single .faq__panels {
  display: block;
}

/* ==========================================================================
   Fleet Maintenance & Crew -- reuse .why apa adanya. Tambahan: item di sini
   berisi lebih dari satu paragraf (bawaan .why hanya menaruh satu <p>),
   jadi perlu jarak antar paragraf yang menyusul.
   ========================================================================== */

.why__item-text + .why__item-text {
  margin-top: 14px;
}

@media (max-width: 900px) {
  .standards__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .doclist {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .lo-overview,
  .standards,
  .cabins,
  .comparison {
    padding: 56px 0;
  }

  .docpanel {
    padding: 24px 22px;
  }
}