/* CT-BY module card visuals (v3, Phase 1).
   1. Card image fill background (JS injects URL into .cjsm-fill-applied)
   2. Selected card state when user clicks
   3. Hide legacy AI drawer artifacts that the old Smart Match panel relied on
   4. Stable 4-card homepage layout (no carousel rotation)
*/

/* Homepage flat 4-card layout: kill Splide track/transform, force flex row of 4 */
.splide.cj-flat .splide__track { overflow: visible !important; height: auto !important; }
.splide.cj-flat .splide__list {
  display: flex !important;
  transform: none !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  flex-wrap: nowrap !important;
}
.splide.cj-flat .splide__slide.cj-flat-visible {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  transform: none !important;
  position: static !important;
  width: auto !important;
  margin: 0 !important;
}
.splide.cj-flat .splide__slide.cj-flat-hidden { display: none !important; }
.splide.cj-flat .splide__slide--clone { display: none !important; }
.splide.cj-flat .splide__arrows { display: none !important; }
.splide.cj-flat .splide__pagination { display: none !important; }
.splide.cj-flat .splide__slide { cursor: pointer; }
/* Mobile: stable horizontal scroll (user swipes manually, NO autoplay) */
@media (max-width: 980px) {
  .splide.cj-flat .splide__track { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .splide.cj-flat .splide__track::-webkit-scrollbar { display: none; }
  .splide.cj-flat .splide__list {
    flex-wrap: nowrap !important;
    gap: 14px !important;
    padding: 0 20px 4px !important;
    scroll-snap-type: x mandatory;
  }
  .splide.cj-flat .splide__slide.cj-flat-visible {
    flex: 0 0 78% !important;
    max-width: 320px !important;
    scroll-snap-align: start;
  }
}

/* "See all <axis>" link under each flattened section */
.cj-see-all-wrap { text-align: right; padding: 14px 32px 32px; max-width: 1420px; margin: 0 auto; }
.cj-see-all {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3F5F55;
  text-decoration: none;
  border-bottom: 1px solid #3F5F55;
  padding-bottom: 2px;
  transition: opacity .2s;
}
.cj-see-all:hover { opacity: 0.7; }


/* Hide the old AI drawer + launcher + planner preview (spec v2.2: no drawer, no popup) */
.cj-list-trigger, .cj-planner-preview, .cj-journey-list, .cj-list-drawer, .cj-list-backdrop, .cj-ai-search { display:none !important; }

/* Module-card image fill (injected by JS to bypass empty Shopline templates) */
.sgc-image-with-text-carousel__image.cjsm-fill-applied{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}
.sgc-image-with-text-carousel__image.cjsm-fill-applied::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(170deg, rgba(63,95,85,.05) 0%, rgba(63,95,85,.22) 100%);
  pointer-events:none;
  mix-blend-mode:multiply;
}
.sgc-image-with-text-carousel__card{transition:transform .25s ease, box-shadow .25s ease}
.sgc-image-with-text-carousel__card:hover{transform:translateY(-2px);box-shadow:0 14px 26px -18px rgba(28,38,33,.25)}

/* Selected card state — appears after user clicks a module card */
.cjsm-card-selected{
  outline:2px solid #3F5F55;
  outline-offset:-2px;
  box-shadow:0 6px 18px -10px rgba(63,95,85,.45);
  position:relative;
}
.cjsm-card-selected::after{
  content:'✓';
  position:absolute; top:8px; right:10px;
  width:22px; height:22px; line-height:22px; text-align:center;
  background:#3F5F55; color:#fff; font-size:12px;
  border-radius:50%;
  font-family:-apple-system,sans-serif;
  z-index:2;
}

/* === Three Ways panel — global styles (also covers JS-injected sections) === */
.cj3w { padding: 80px 0; background: linear-gradient(180deg, rgba(63,95,85,0.045) 0%, rgba(232,227,216,0.22) 100%); border-top: 1px solid #E8E3D8; border-bottom: 1px solid #E8E3D8; position: relative; scroll-margin-top: 80px; animation: cj3w-rise 0.36s ease-out both; }
.cj3w.cj3w--hidden { display: none !important; }
@keyframes cj3w-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cj3w-wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.cj3w-head { text-align: center; margin-bottom: 40px; }
.cj3w-eyebrow { display: inline-block; font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: #3F5F55; font-weight: 600; margin-bottom: 10px; font-family: 'Montserrat', -apple-system, sans-serif; }
.cj3w-title { font-family: Georgia, serif; font-size: clamp(26px, 3.4vw, 34px); font-weight: 500; margin: 0; color: #1F1F1D; line-height: 1.18; letter-spacing: -0.005em; display: inline-block; position: relative; }
.cj3w-title::after { content: ''; display: block; width: 36px; height: 2px; background: #3F5F55; margin: 14px auto 0; }
.cj3w-sub { font-size: clamp(13px, 1.3vw, 15px); color: #6F6F68; margin: 6px auto 0; font-family: 'Montserrat', sans-serif; max-width: 580px; line-height: 1.55; }
.cj3w-list { display: flex; flex-direction: column; gap: 22px; }
.cj3w-way { display: grid; grid-template-columns: 240px 1fr; gap: 0; background: #fff; border: 1px solid #ECE6D9; border-radius: 16px; overflow: hidden; transition: transform 0.28s, box-shadow 0.28s, border-color 0.28s; }
.cj3w-way:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -22px rgba(28,38,33,0.28); border-color: #D4CEBE; }
.cj3w-img { aspect-ratio: 1/1; background: linear-gradient(135deg, #EDE5D6 0%, #DDD5C2 100%); overflow: hidden; position: relative; }
.cj3w-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
.cj3w-body { padding: 24px 28px 24px 26px; display: flex; flex-direction: column; gap: 10px; font-family: 'Montserrat', sans-serif; }
.cj3w-num { font-family: Georgia, serif; font-size: 26px; color: #3F5F55; font-weight: 500; line-height: 1; }
.cj3w-wtitle { font-family: Georgia, serif; font-size: 22px; font-weight: 500; margin: 2px 0 4px; color: #1F1F1D; line-height: 1.25; letter-spacing: -0.008em; }
.cj3w-fit { display: flex; align-items: baseline; gap: 10px; margin: 2px 0; }
.cj3w-flabel { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #3F5F55; font-weight: 600; white-space: nowrap; }
.cj3w-ftxt { font-size: 13.5px; color: #3a4942; line-height: 1.5; }
.cj3w-wsum { font-size: 14px; color: #3a4942; margin: 4px 0 0; line-height: 1.55; }
.cj3w-places { font-size: 12.5px; color: #6F6F68; margin: 2px 0 0; font-style: italic; }
.cj3w-case { margin-top: 6px; padding: 10px 12px; border-left: 3px solid #C29A3B; background: rgba(194, 154, 59, 0.06); border-radius: 0 6px 6px 0; }
.cj3w-clabel { display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #6e4f0f; font-weight: 600; margin-bottom: 3px; }
.cj3w-ctitle { display: block; font-size: 13.5px; color: #1F1F1D; margin-bottom: 4px; }
.cj3w-foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; margin-top: 10px; padding-top: 14px; border-top: 1px solid #F0EBDD; }
.cj3w-person { display: flex; align-items: center; gap: 10px; }
.cj3w-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #EDE5D6 0%, #DDD5C2 100%); flex-shrink: 0; }
.cj3w-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cj3w-pname { display: flex; flex-direction: column; font-size: 13px; }
.cj3w-pname small { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #6F6F68; margin-bottom: 1px; }
.cj3w-pname span { color: #1F1F1D; font-weight: 600; font-family: Georgia, serif; font-size: 15px; line-height: 1.2; }
.cj3w-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.cj3w-btn { display: inline-flex; align-items: center; gap: 6px; background: #3F5F55; color: #fff !important; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 28px; text-decoration: none; letter-spacing: 0.01em; white-space: nowrap; transition: background 0.2s, transform 0.18s; }
.cj3w-btn:hover { background: #335048; transform: translateY(-1px); }
.cj3w-btn--out { background: #fff; color: #3F5F55 !important; border: 1.5px solid #3F5F55; padding: 8.5px 16px; }
.cj3w-btn--out:hover { background: rgba(63,95,85,0.06); }
.cj3w-shortcut { text-align: center; margin-top: 32px; font-size: 13.5px; color: #6F6F68; font-family: 'Montserrat', sans-serif; }
.cj3w-shortcut a { color: #3F5F55; font-weight: 600; text-decoration: none; margin-left: 6px; border-bottom: 1px solid #3F5F55; padding-bottom: 1px; }
@media (max-width: 860px) {
  .cj3w { padding: 56px 0; }
  .cj3w-wrap { padding: 0 20px; }
  .cj3w-head { margin-bottom: 28px; }
  .cj3w-way { grid-template-columns: 1fr; }
  .cj3w-img { aspect-ratio: 16/10; }
  .cj3w-body { padding: 20px 20px 22px; }
  .cj3w-foot { grid-template-columns: 1fr; gap: 12px; }
  .cj3w-btns { justify-content: flex-start; }
  .cj3w-btn { flex: 1; justify-content: center; }
  .cj3w-wtitle { font-size: 19px; }
}

/* === Route page: "Recommended from" banner + "A good fit if..." === */
.cjr-fromban { background: rgba(63,95,85,.05); border-bottom: 1px solid #E8E3D8; padding: 14px 0; }
.cjr-fromban__wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: baseline; gap: 14px; font-family: 'Montserrat', sans-serif; }
.cjr-fromban__eyebrow { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #3F5F55; font-weight: 600; }
.cjr-fromban__text { font-family: Georgia, serif; font-size: 17px; color: #1F1F1D; font-weight: 500; }
.cjr-fit-good { max-width: 1200px; margin: 26px auto; padding: 18px 22px; background: #FBFAF5; border: 1px solid #E8E3D8; border-left: 4px solid #3F5F55; border-radius: 0 8px 8px 0; font-family: 'Montserrat', sans-serif; }
.cjr-fit-good h4 { font-family: Georgia, serif; font-size: 17px; font-weight: 500; margin: 0 0 8px; color: #3F5F55; }
.cjr-fit-good ul { margin: 0; padding-left: 18px; }
.cjr-fit-good li { font-size: 14px; line-height: 1.55; color: #3a4942; margin-bottom: 4px; }
@media (max-width: 720px) {
  .cjr-fromban__wrap { flex-direction: column; gap: 4px; padding: 0 18px; }
  .cjr-fromban__text { font-size: 15px; }
  .cjr-fit-good { margin: 18px 14px; padding: 14px 18px; }
}

/* === /pages/journeys top banner (You started with: ...) === */
.cj-jb-banner { background: #FBFAF5; border-bottom: 1px solid #E8E3D8; padding: 18px 0; }
.cj-jb-banner__wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: baseline; gap: 14px; font-family: 'Montserrat', sans-serif; }
.cj-jb-banner__eyebrow { font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: #3F5F55; font-weight: 600; }
.cj-jb-banner__text { font-family: Georgia, serif; font-size: 22px; color: #1F1F1D; font-weight: 500; letter-spacing: -0.005em; }
@media (max-width: 720px) {
  .cj-jb-banner__wrap { flex-direction: column; gap: 4px; padding: 0 20px; }
  .cj-jb-banner__text { font-size: 18px; }
}

/* === Three Ways: Foreign-visitor access warning === */
.cj3w-warn { background: rgba(220,90,60,0.08); border-left: 4px solid #C53D2A; padding: 14px 18px; margin: 0 0 28px; border-radius: 0 6px 6px 0; color: #4a1f15; font-size: 13.5px; line-height: 1.55; font-family: 'Montserrat', sans-serif; max-width: 1020px; margin-left: auto; margin-right: auto; }
.cj3w-warn b { color: #C53D2A; font-weight: 600; }

/* === Trust strip === */
.cjts { padding: 48px 0; background: rgba(63,95,85,0.045); border-top: 1px solid #E8E3D8; border-bottom: 1px solid #E8E3D8; position: relative; }
.cjts::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:60px; height:1px; background:#3F5F55; opacity:.5; }
.cjts-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.cjts-head { text-align: center; margin-bottom: 24px; }
.cjts-eyebrow { display:inline-block; font-size:10.5px; letter-spacing:0.28em; text-transform:uppercase; color:#3F5F55; font-weight:600; margin-bottom:6px; font-family:'Montserrat',sans-serif; }
.cjts-title { font-family: Georgia, serif; font-size: clamp(22px, 2.6vw, 28px); font-weight: 500; margin: 0; color: #1F1F1D; letter-spacing: -0.005em; }
.cjts-row { display:flex; flex-wrap:wrap; justify-content:center; gap:0; font-family:'Montserrat',sans-serif; }
.cjts-item { display:flex; flex-direction:column; text-align:center; min-width:160px; padding:0 28px; position:relative; }
.cjts-item:not(:last-child)::after { content:''; position:absolute; right:0; top:12%; width:1px; height:76%; background:rgba(63,95,85,0.18); }
.cjts-label { font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:#6F6F68; margin-bottom:6px; font-weight:500; }
.cjts-val { font-size:18px; font-weight:500; color:#3F5F55; font-family:Georgia,serif; letter-spacing:-0.01em; line-height:1.2; }
@media (max-width:860px) {
  .cjts { padding: 32px 0; }
  .cjts-row { gap: 8px; }
  .cjts-item { min-width: 140px; padding: 6px 16px; }
  .cjts-item:not(:last-child)::after { display: none; }
  .cjts-val { font-size: 16px; }
}

/* === Case grid === */
.cjcg { padding: 80px 0; background: #F5F1E6; position: relative; }
.cjcg-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.cjcg-eyebrow { display:inline-block; font-size:10.5px; letter-spacing:0.28em; text-transform:uppercase; color:#3F5F55; font-weight:600; margin-bottom:10px; font-family:'Montserrat',sans-serif; }
.cjcg-title { font-family:Georgia,serif; font-size:clamp(26px,3.5vw,36px); font-weight:500; margin:0; color:#1F1F1D; line-height:1.18; display:inline-block; position:relative; }
.cjcg-title::after { content:''; display:block; width:32px; height:2px; background:#3F5F55; margin-top:14px; border-radius:1px; }
.cjcg-sub { font-size:clamp(13px,1.3vw,15px); color:#6F6F68; margin:6px 0 44px; font-family:'Montserrat',sans-serif; max-width:640px; line-height:1.5; }
.cjcg-grid { display:grid; gap:28px; }
.cjcg-grid--3 { grid-template-columns:repeat(3,1fr); }
.cjcg-grid--4 { grid-template-columns:repeat(4,1fr); }
.cjcg-card { display:flex; flex-direction:column; background:#FBFAF5; border:1px solid #ECE6D9; border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .28s,box-shadow .28s,border-color .28s; }
.cjcg-card:hover { transform:translateY(-3px); box-shadow:0 18px 32px -22px rgba(28,38,33,0.28); border-color:#D4CEBE; }
.cjcg-img { aspect-ratio:4/3; background:linear-gradient(135deg,#EDE5D6 0%,#DDD5C2 100%); overflow:hidden; }
.cjcg-img img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92); }
.cjcg-body { padding:16px 18px 20px; flex:1; }
.cjcg-name { font-family:Georgia,serif; font-size:17px; font-weight:500; margin:0 0 8px; color:#1F1F1D; line-height:1.35; }
.cjcg-glance { font-size:12.5px; color:#6F6F68; margin:0 0 6px; font-family:'Montserrat',sans-serif; }
.cjcg-by { font-size:12.5px; color:#3F5F55; margin:0; font-style:italic; font-family:'Montserrat',sans-serif; }
.cjcg-more { text-align:center; margin-top:36px; }
.cjcg-more__link { color:#3F5F55; font-size:13.5px; font-weight:600; text-decoration:none; border:1.5px solid #3F5F55; padding:12px 28px; border-radius:28px; display:inline-block; font-family:'Montserrat',sans-serif; transition:background .2s,color .2s; }
.cjcg-more__link:hover { background:#3F5F55; color:#fff; }
@media (max-width:860px) {
  .cjcg { padding: 56px 0; }
  .cjcg-wrap { padding: 0 20px; }
  .cjcg-grid--3, .cjcg-grid--4 { grid-template-columns: 1fr; gap: 18px; }
  .cjcg-sub { margin-bottom: 32px; }
}

/* === Specialist grid === */
.cjsg { padding: 80px 0; background: #FBFAF5; position: relative; }
.cjsg-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.cjsg-eyebrow { display:inline-block; font-size:10.5px; letter-spacing:0.28em; text-transform:uppercase; color:#3F5F55; font-weight:600; margin-bottom:10px; font-family:'Montserrat',sans-serif; }
.cjsg-title { font-family:Georgia,serif; font-size:clamp(26px,3.5vw,36px); font-weight:500; margin:0; color:#1F1F1D; line-height:1.18; display:inline-block; position:relative; }
.cjsg-title::after { content:''; display:block; width:32px; height:2px; background:#3F5F55; margin-top:14px; border-radius:1px; }
.cjsg-sub { font-size:clamp(13px,1.3vw,15px); color:#6F6F68; margin:6px 0 44px; font-family:'Montserrat',sans-serif; max-width:640px; line-height:1.5; }
.cjsg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.cjsg-card { background:#fff; border:1px solid #ECE6D9; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .28s,box-shadow .28s; }
.cjsg-card:hover { transform:translateY(-3px); box-shadow:0 18px 32px -22px rgba(28,38,33,0.28); }
/* When the whole card is a link (a.cjsg-card--link), strip default anchor styling */
a.cjsg-card--link { text-decoration: none; color: inherit; cursor: pointer; }
a.cjsg-card--link:hover { text-decoration: none; }
.cjsg-photo { aspect-ratio:1/1; background:linear-gradient(135deg,#EDE5D6 0%,#DDD5C2 100%); overflow:hidden; }
.cjsg-photo img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92); }
.cjsg-body { padding:22px 24px 24px; flex:1; display:flex; flex-direction:column; gap:12px; font-family:'Montserrat',sans-serif; }
.cjsg-name { font-family:Georgia,serif; font-size:22px; font-weight:500; margin:0; color:#1F1F1D; line-height:1.2; }
.cjsg-row { font-size:13.5px; line-height:1.55; color:#3a4942; margin:0; }
.cjsg-row b { color:#3F5F55; font-weight:600; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; display:block; margin-bottom:2px; }
.cjsg-btn { display:inline-flex; align-items:center; justify-content:center; background:#3F5F55; color:#fff !important; font-size:13px; font-weight:600; padding:11px 20px; border-radius:28px; text-decoration:none; text-align:center; font-family:'Montserrat',sans-serif; margin-top:6px; transition:background .2s; }
.cjsg-btn:hover { background:#335048; }
@media (max-width:860px) {
  .cjsg { padding: 56px 0; }
  .cjsg-wrap { padding: 0 20px; }
  .cjsg-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* === Tickets soft entry === */
.cjtix { padding: 60px 0; background: linear-gradient(180deg, #FBFAF5, #F5F1E6); text-align: center; border-top: 1px solid #E8E3D8; }
.cjtix-wrap { max-width: 900px; margin: 0 auto; padding: 0 32px; }
.cjtix-eyebrow { font-size:10.5px; letter-spacing:0.28em; text-transform:uppercase; color:#3F5F55; font-weight:600; margin-bottom:10px; font-family:'Montserrat',sans-serif; display:inline-block; }
.cjtix h3 { font-family:Georgia,serif; font-size:24px; font-weight:500; margin:0 0 10px; color:#1F1F1D; }
.cjtix p { font-size:14.5px; color:#6F6F68; margin:0 0 20px; font-family:'Montserrat',sans-serif; }
.cjtix a.btn { display:inline-block; background:#3F5F55; color:#fff; padding:11px 24px; border-radius:28px; text-decoration:none; font-weight:600; font-size:13px; font-family:'Montserrat',sans-serif; }
.cjtix a.btn:hover { background:#335048; }
