/* ==========================================================================
   GOSHEN v3 — Tour detail
   ========================================================================== */

/* ---------- Opener: title holds, photos drift around it ---------- */
.t-hero { position: relative; min-height: max(92svh, 700px); display: grid; place-items: center; overflow: hidden; padding: 140px var(--gutter) 90px; }
.t-hero__title { position: relative; z-index: 3; text-align: center; display: grid; justify-items: center; gap: 26px; max-width: 1100px; }
.t-hero__title h1 { font-size: clamp(3.2rem, 8.2vw, 8.8rem); line-height: .9; letter-spacing: -.03em; }
.t-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.t-hero__meta .tag { background: var(--paper); box-shadow: 0 0 0 1px var(--line); font-size: .92rem; padding: .6em 1.05em; }
.t-hero__meta .tag--saffron { background: var(--saffron); box-shadow: none; }
.t-ph { position: absolute; z-index: 1; border-radius: 18px; overflow: hidden; background: var(--sand); box-shadow: 0 30px 60px -34px rgba(1, 27, 71, .55); }
.t-ph img { width: 100%; height: 100%; object-fit: cover; }
.t-ph--a { width: clamp(140px, 15vw, 240px); aspect-ratio: 3 / 4; left: 4%; top: 14%; transform: rotate(-4deg); }
.t-ph--b { width: clamp(170px, 20vw, 320px); aspect-ratio: 4 / 3; right: 6%; top: 14%; transform: rotate(3deg); }
.t-ph--c { width: clamp(160px, 19vw, 300px); aspect-ratio: 4 / 3; left: 10%; bottom: 8%; transform: rotate(2.5deg); }
.t-ph--d { width: clamp(140px, 15vw, 240px); aspect-ratio: 3 / 4; right: 11%; bottom: 7%; transform: rotate(-3deg); }
.t-hero__scroll { position: absolute; z-index: 3; bottom: 28px; left: 50%; transform: translateX(-50%); font: 500 var(--t-label)/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--navy-soft); display: grid; justify-items: center; gap: 10px; }
.t-hero__scroll i { width: 1px; height: 38px; background: linear-gradient(var(--navy), transparent); animation: drip 2.2s var(--ease-io) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 760px) {
  .t-hero { min-height: 0; padding: 130px var(--gutter) 60px; display: block; }
  .t-ph { position: relative; display: inline-block; left: auto; right: auto; top: auto; bottom: auto; width: 46%; margin-top: 20px; }
  .t-ph--a { margin-right: 4%; } .t-ph--c, .t-ph--d { display: none; }
  .t-hero__scroll { display: none; }
}

/* ---------- Overview ---------- */
.t-over { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.t-over__lead { font: 300 clamp(1.7rem, 2.6vw, 2.5rem)/1.22 var(--f-display); letter-spacing: -.01em; max-width: 30ch; text-wrap: pretty; }
.t-facts { display: grid; border-top: 1px solid var(--line); }
.t-facts div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.t-facts dt { font: 500 var(--t-label)/1.4 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--navy-soft); }
.t-facts dd { margin: 0; font-size: 1.1rem; }
.t-facts dd b { font: 400 1.9rem/1 var(--f-display); }
.t-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.t-route i { width: 18px; height: 1px; background: var(--saffron); display: inline-block; }
.t-hl { margin-top: clamp(28px, 3.5vw, 44px); display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) { .t-over { grid-template-columns: 1fr; } }

/* ---------- Itinerary: chapters ---------- */
.t-days-sec { overflow: hidden; }
.t-days-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 4vw, 56px); }
.t-days-head h2 { margin-top: 20px; }
.t-counter { font: 300 clamp(2.4rem, 4vw, 3.8rem)/1 var(--f-display); display: flex; align-items: baseline; gap: 8px; }
.t-counter small { font: 500 var(--t-label)/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--navy-soft); }
.t-progress { height: 2px; background: var(--line); margin-bottom: clamp(32px, 4vw, 48px); position: relative; overflow: hidden; border-radius: 2px; }
.t-progress i { position: absolute; inset: 0; background: var(--navy); transform-origin: 0 50%; transform: scaleX(0); }
.t-track { display: flex; gap: clamp(20px, 3vw, 40px); will-change: transform; }
.t-day { flex: 0 0 min(84vw, 1040px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 3.4vw, 52px); align-items: center; }
.t-day__img { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--sand-deep); }
.t-day__img img { width: 100%; height: 100%; object-fit: cover; }
.t-day__txt { display: grid; gap: 18px; align-content: center; }
.t-day__n { font: 300 clamp(5rem, 11vw, 10rem)/.8 var(--f-display); color: var(--saffron-deep); letter-spacing: -.04em; }
.t-day__n small { font: 500 var(--t-label)/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--navy-soft); display: block; margin-bottom: 14px; }
.t-day h3 { font-size: clamp(1.9rem, 2.8vw, 2.8rem); font-weight: 300; }
.t-day p { color: var(--navy-soft); font-size: 1.1rem; }
.t-note { display: inline-flex; align-items: flex-start; gap: 10px; color: var(--saffron-deep); font-family: var(--f-hand); font-weight: 500; font-size: 1.7rem; line-height: 1.05; transform: rotate(-2deg); max-width: 26ch; }
.t-note svg { flex: none; width: 34px; height: 30px; margin-top: 4px; }
.t-days-hint { margin-top: 28px; font-size: .92rem; color: var(--navy-soft); }
/* without pinning (phones, reduced motion): vertical chapters */
.t-days-sec.is-static .t-track { flex-direction: column; gap: 64px; }
.t-days-sec.is-static .t-day { flex-basis: auto; }
.t-days-sec.is-static .t-progress, .t-days-sec.is-static .t-counter, .t-days-sec.is-static .t-days-hint { display: none; }
@media (max-width: 760px) { .t-day { grid-template-columns: 1fr; } .t-day__img { aspect-ratio: 16 / 11; } }

/* ---------- Included ---------- */
.t-inc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); }
.t-inc h3 { font-size: var(--t-3); font-weight: 300; margin-bottom: 26px; }
.t-inc ul { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.t-inc li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1.08rem; }
.t-inc li::before { content: ""; width: 18px; height: 18px; margin-top: .22em; border-radius: 50%; background: var(--saffron) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23012e72' stroke-width='1.8'%3E%3Cpath d='M5 9.4l2.6 2.4L13 6.4'/%3E%3C/svg%3E") center / 100% no-repeat; }
.t-inc .ex li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); background-image: linear-gradient(var(--navy-soft), var(--navy-soft)); background-size: 8px 1.5px; background-position: center; background-repeat: no-repeat; }
.t-inc .ex li { color: var(--navy-soft); }
@media (max-width: 760px) { .t-inc { grid-template-columns: 1fr; } }

/* ---------- Plan your visit ---------- */
.tips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tip { background: var(--paper); border-radius: var(--radius); padding: 28px 26px 30px; display: grid; gap: 12px; align-content: start; box-shadow: 0 0 0 1px var(--line); }
.tip svg { width: 36px; height: 36px; color: var(--saffron-deep); }
.tip h4 { font: 400 1.6rem/1.1 var(--f-display); }
.tip p { font-size: 1rem; color: var(--navy-soft); }
@media (max-width: 1060px) { .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tips { grid-template-columns: 1fr; } }

/* ---------- Talk to a designer ---------- */
.talk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border-radius: 28px; overflow: hidden; background: var(--sand); color: var(--navy); margin: 0 10px; }
.talk__img { min-height: 420px; position: relative; }
.talk__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.talk__body { padding: clamp(36px, 5.5vw, 88px); display: grid; gap: 26px; align-content: center; }
.talk__body h2 { font-size: clamp(2.3rem, 4vw, 4.2rem); }
.talk__body p { color: var(--navy-soft); font-size: var(--t-lead); }
.talk__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) { .talk { grid-template-columns: 1fr; } .talk__img { min-height: 280px; } }

/* ---------- Related ---------- */
.rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.rel a { text-decoration: none; display: grid; gap: 16px; }
.rel .frame { aspect-ratio: 4 / 3; }
.rel .frame img { transition: transform 1.2s var(--ease-out); }
.rel a:hover .frame img { transform: scale(1.05); }
.rel h3 { font-size: 1.9rem; font-weight: 300; }
.rel .meta { display: flex; gap: 8px; flex-wrap: wrap; }
.rel .rg { color: var(--navy-soft); font-size: 1rem; }
@media (max-width: 900px) { .rel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rel { grid-template-columns: 1fr; } }

/* ---------- Not found ---------- */
.t-missing { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 160px var(--gutter) 80px; }
.t-missing div { display: grid; gap: 22px; justify-items: center; }

/* pinned itinerary must fit one screen */
@media (min-width: 1024px) {
  .t-days-sec:not(.is-static) { padding-block: 116px 48px; min-height: 100vh; }
  .t-days-sec:not(.is-static) .t-days-head { margin-bottom: 22px; }
  .t-days-sec:not(.is-static) .t-days-head h2 { font-size: clamp(2rem, 3.3vw, 3.4rem); margin-top: 14px; }
  .t-days-sec:not(.is-static) .t-progress { margin-bottom: 30px; }
  .t-days-sec:not(.is-static) .t-day { flex-basis: min(80vw, 1000px); }
  .t-days-sec:not(.is-static) .t-day__img { aspect-ratio: auto; height: min(calc(100vh - 360px), 580px); min-height: 300px; }
  .t-days-sec:not(.is-static) .t-day__n { font-size: clamp(4.5rem, 8vw, 8rem); }
  .t-days-sec:not(.is-static) .t-days-hint { margin-top: 18px; }
}