/**
 * PAGE: THE JOURNEY — CSS riêng (Pricing / Inclusions & Exclusions / Departures & Schedule).
 * Nguồn: docs/design-previews/the-journey.html + preview.css. Enqueue khi template-the-journey.php.
 * Hero + Signature Routes + [tour_slider] + Testimonials dùng component chung (sjourney.css).
 */

/* Đường kẻ ngăn cách các khối + trong panel/lịch. */
.sj-page--the-journey .sj-hr { border: 0; height: 1px; background: var(--sj-n4-nw); margin: 0; }

/* ---------- Khối tiêu đề chung (head 2 phần) ---------- */
.sj-block__head { display: flex; flex-direction: column; gap: var(--sp-24); }
.sj-block__title { font-size: var(--fs-72); font-weight: 500; text-transform: uppercase; line-height: 1.1; color: var(--sj-dark); margin: var(--sp-8) 0 0; max-width: 1518px; }
.sj-block__title .accent { color: var(--sj-red); }
.sj-block__intro { font-size: var(--fs-24); font-weight: 300; line-height: 1.25; color: var(--sj-gray); max-width: 1063px; margin: 0; }

/* Nút tròn điều hướng (đổi năm) */
.sj-circle-nav { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; border: 0; background: #fff; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--sj-red); box-shadow: 0 4px 16px rgba(67,12,14,.10); }
.sj-circle-nav svg { width: 25px; height: 24px; display: block; }
.sj-circle-nav:disabled { opacity: .35; cursor: default; box-shadow: none; } /* nút năm trước khi đang ở năm hiện tại */
.sj-heritage--lg svg { height: clamp(24px, 1.875vw, 36px); }

/* ======================= PRICING ======================= */
.sj-pricing { background: var(--sj-cream); padding: var(--sp-160) 0 var(--sp-48); }
.sj-pricing__years { display: flex; align-items: center; gap: var(--sp-48); margin-top: var(--sp-48); min-height: 64px; }
.sj-pricing__years .sj-heritage { flex: 1 1 auto; }
.sj-yearnav__year, .sj-pricing__year { font-size: var(--fs-48); font-weight: 500; text-transform: uppercase; color: var(--sj-dark); min-width: 3.2em; text-align: center; line-height: 1; }
.sj-pricing__tables { margin-top: var(--sp-48); }
.sj-pricing__table[hidden] { display: none; }
.sj-pricing .im-rate col.c-name { width: 27.41%; }
.sj-pricing .im-rate col.c-occ  { width: 12.28%; }
.sj-pricing .im-rate col.c-val  { width: 20.10%; }

/* Bảng giá im-rate (dùng chung với popup Departures & Prices) */
.im-rate { width: 100%; border-collapse: collapse; table-layout: fixed; }
.im-rate col.c-name { width: 29.48%; }
.im-rate col.c-occ  { width: 13.21%; }
.im-rate col.c-val  { width: 19.10%; }
.im-rate th, .im-rate td { border: 1px solid var(--sj-n4-nw); padding: var(--sp-16) clamp(12px, 2.5vw, 48px); text-align: center; vertical-align: middle; }
.im-rate thead th { background: var(--sj-gray); color: var(--sj-cream); font-weight: 400; font-size: var(--fs-24); line-height: 1.2; border-color: rgba(254,242,242,.35); }
.im-rate thead th.im-rate__year { text-align: left; font-weight: 500; font-size: var(--fs-32); text-transform: uppercase; padding-left: var(--sp-24); padding-right: var(--sp-24); }
.im-rate__route { font-weight: 500; font-size: var(--fs-32); line-height: 40px; color: var(--sj-dark); }
.im-rate__route span { display: block; margin-top: 8px; font-weight: 300; font-size: var(--fs-20); line-height: 24px; color: var(--sj-gray); }
.im-rate__occ { font-weight: 500; font-size: var(--fs-24); line-height: 1.2; text-transform: uppercase; color: var(--sj-dark); }
.im-rate tbody td { font-weight: 500; font-size: var(--fs-24); line-height: 1.2; color: var(--sj-red); }
.im-rate tr.is-single > :not(.im-rate__route) { background: var(--sj-table-nw); }
.im-rate__per { display: block; margin-top: 8px; font-weight: 300; font-size: var(--fs-16); line-height: 1.2; color: var(--sj-gray); }

/* ======================= INCLUSIONS & EXCLUSIONS ======================= */
.sj-inclusions { background: var(--sj-cream); padding: var(--sp-80) 0 var(--sp-48); }
.sj-inclusions__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-48); margin-top: var(--sp-48); align-items: stretch; }
.sj-inclusions__aside { display: flex; flex-direction: column; }
.sj-incl-panel { background: #fff; padding: var(--sp-48); display: flex; flex-direction: column; gap: var(--sp-24); }
.sj-incl-panel__head { display: flex; flex-direction: column; gap: var(--sp-16); }
.sj-incl-panel__ico { display: block; width: 48px; height: 48px; }
.sj-incl-panel__label { font-size: var(--fs-32); font-weight: 500; text-transform: uppercase; line-height: 24px; }
.sj-incl-panel--in .sj-incl-panel__label { color: var(--sj-green-nw); }
.sj-incl-panel--ex .sj-incl-panel__label { color: var(--sj-red); }
.sj-incl-item { display: flex; flex-direction: column; gap: 8px; }
.sj-incl-item__title { font-size: var(--fs-24); font-weight: 500; color: var(--sj-dark); text-align: justify; }
.sj-incl-item__text { font-size: var(--fs-20); font-weight: 300; line-height: 24px; color: var(--sj-gray); margin: 0; }
.sj-inclusions__mark { margin-top: auto; padding-top: var(--sp-48); display: flex; justify-content: flex-end; }
.sj-incl-panel .sj-hr { border: 0; height: 1px; background: var(--sj-n4-nw); margin: 0; }

/* ======================= DEPARTURES & SCHEDULE ======================= */
.sj-departures { position: relative; background: var(--sj-cream); padding: var(--sp-80) 0 var(--sp-48); }
.sj-departures__bar { display: flex; align-items: flex-end; gap: var(--sp-48); margin-top: var(--sp-48); }
.sj-departures .sj-heritage { margin-top: var(--sp-48); }
.sj-departures__filters { display: flex; gap: 4px; align-items: stretch; flex: 1 1 auto; flex-wrap: wrap; }
.sj-dep-chip { height: 64px; padding: 0 32px; border: 0; cursor: pointer; font-family: inherit; background: #fff; color: var(--sj-muted-nw); font-size: 18px; font-weight: 500; line-height: 24px; text-transform: uppercase; text-align: center; display: inline-flex; align-items: center; justify-content: center; max-width: 274px; }
.sj-dep-chip--all { padding-inline: var(--sp-48); font-size: var(--fs-24); max-width: none; }
.sj-dep-chip.is-active { background: var(--sj-yellow); color: #fff; }
.sj-dep-select { display: none; width: 100%; height: 64px; padding: 0 var(--sp-24); border: 0; cursor: pointer; font-family: inherit; font-size: var(--fs-24); font-weight: 500; text-transform: uppercase; background: var(--sj-yellow); color: #fff; appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
	background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.sj-dep-select option { color: var(--sj-dark); background: #fff; }
.sj-yearnav { display: flex; align-items: center; gap: var(--sp-48); flex: 0 0 auto; }

/* Lưới lịch (JS sinh) */
.sj-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: var(--sp-48); align-items: stretch; }
.sj-cal__month { background: #fff; border-radius: 12px; padding: var(--sp-24); display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.sj-cal__name { font-size: var(--fs-32); font-weight: 500; text-transform: uppercase; color: var(--sj-dark); line-height: 1.2; }
.sj-cal .sj-hr { border: 0; height: 1px; background: var(--sj-n4-nw); margin: 0; }
.sj-cal__row { display: flex; justify-content: space-between; }
/* Ô ngày tối đa 48×48 (Figma @1920), co lại theo bề ngang thẻ tháng — trước đây cố định 48px
   nên ở màn ~1280–1600 (4 tháng / hàng) cột SAT bị cắt mất (sửa 14/10/2026). */
.sj-cal__cell { flex: 1 1 0; min-width: 0; max-width: 48px; aspect-ratio: 1; height: auto; display: flex; align-items: center; justify-content: center; font-size: var(--fs-20); font-weight: 300; line-height: 24px; letter-spacing: -.1px; color: var(--sj-gray); border: 0; background: none; padding: 0; font-family: inherit; }
.sj-cal__row--head .sj-cal__cell { font-weight: 400; color: var(--sj-dark); }
.sj-cal__cell.is-dep { font-weight: 400; cursor: pointer; }
/* Ngày khởi hành đã qua: ô ghi, không con trỏ/không tương tác. */
.sj-cal__cell.is-past { background: var(--sj-n4-nw); color: var(--sj-muted-nw); cursor: default; }
.sj-cal__cell.is-daypast { color: var(--sj-muted-nw); }
.sj-cal__cell.is-open { background: var(--sj-yellow); }
/* Tháng đã qua hoàn toàn → cả thẻ tô ghi, chữ nhạt. */
.sj-cal__month--past { background: var(--sj-n4-nw); }
.sj-cal__month--past .sj-cal__name,
.sj-cal__month--past .sj-cal__cell { color: var(--sj-muted-nw); }
.sj-cal__month--past .sj-cal__cell.is-past { background: rgba(124,124,124,.28); }
.sj-cal__cell.is-today { box-shadow: inset 0 0 0 1px var(--sj-red); }
.sj-cal__cell.is-dep:hover, .sj-cal__cell.is-dep:focus-visible { outline: 2px solid var(--sj-red); outline-offset: -2px; }

/* Tooltip tuyến */
.sj-cal__tip { position: absolute; z-index: 5; display: flex; align-items: stretch; width: 554px; max-width: calc(100vw - 2 * var(--sp-48)); background: #fff; filter: drop-shadow(8px 8px 24px rgba(0,0,0,.08)); pointer-events: none; }
.sj-cal__tip[hidden] { display: none; }
.sj-cal__tip__img { flex: 0 0 128px; align-self: stretch; background-size: cover; background-position: center; background-color: rgba(67,12,14,.08); }
.sj-cal__tip__body { display: flex; flex-direction: column; gap: 8px; padding: var(--sp-24); min-width: 0; }
.sj-cal__tip__name { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-24); font-weight: 500; line-height: 24px; letter-spacing: -1px; text-transform: uppercase; color: var(--sj-dark); }
.sj-cal__tip__name svg { width: 24px; height: 24px; color: var(--sj-dark); flex: 0 0 auto; }
.sj-cal__tip__route { font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: -.16px; text-transform: uppercase; color: var(--sj-muted-nw); margin: 0; }
.sj-cal__tip::after { content: ''; position: absolute; top: 100%; left: var(--tip-arrow, 61px); width: 28px; height: 11px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 1279.98px) {
	.sj-cal { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
	.sj-block__intro, .sj-incl-item__text { text-align: justify; }
	.sj-heritage { align-self: center; justify-content: center; width: 100%; }
	.sj-inclusions__mark { justify-content: center; }
	.sj-inclusions__cols { grid-template-columns: 1fr; }
	.sj-pricing__years { flex-wrap: wrap; gap: var(--sp-24); }
	.sj-pricing__years .sj-heritage { flex: 1 0 100%; }
	.sj-pricing__tables { overflow-x: auto; }
	.sj-pricing .im-rate { min-width: 760px; }
	.sj-departures__bar { flex-direction: column; align-items: stretch; gap: var(--sp-24); }
	.sj-yearnav { justify-content: center; }
	.sj-cal__row { gap: 2px; }
	.sj-departures__filters { display: none; }
	.sj-dep-select { display: block; }
	.sj-cal { display: flex; grid-template-columns: none; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
	.sj-cal::-webkit-scrollbar { display: none; }
	.sj-cal__month { flex: 0 0 calc(100% - 40px); scroll-snap-align: start; }
	.sj-cal__tip { width: calc(100vw - 2 * var(--sp-48)); }
	.sj-cal__tip__img { flex: 0 0 96px; }
}

/* Hero intro dạng nhiều đoạn (field wp_editor `journey_hero_intro` → <div> chứa các <p>).
   Div đã mang cỡ chữ/màu/căn giữa (.sj-page-hero__intro trong sjourney.css); chỉ cần chuẩn hoá
   khoảng cách giữa các đoạn con để khớp Figma (2 đoạn cách đều, đoạn cuối không dư margin). */
.sj-page--the-journey .sj-page-hero__intro > p { margin: 0 0 var(--sp-16); }
.sj-page--the-journey .sj-page-hero__intro > p:last-child { margin-bottom: 0; }

/* Repeater Inclusions/Exclusions: container chỉ để gom mục cho Live Edit — display:contents
   để các mục + đường kẻ vẫn nằm trong flex của .sj-incl-panel như cũ (không đổi layout public). */
.sj-incl-items { display: contents; }
/* Mục không có tiêu đề: ẩn ô tiêu đề rỗng ở bản public (Live Edit sẽ hiện lại để nhập). */
.sj-incl-item__title:empty { display: none; }