/* ================= Tour detail hero ================= */
.td-hero{
    position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;
    overflow:hidden;height:440px;color:#fff;
}
.td-hero-bg{
    position:absolute;inset:-4%;background-size:cover;background-position:center;
    animation:td-kenburns 22s ease-in-out infinite alternate;
}
@keyframes td-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.td-hero-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(4,12,26,.35) 0%, rgba(4,12,26,.58) 58%, rgba(4,12,26,.92) 100%);
}
.td-hero-inner{
    position:relative;z-index:1;height:100%;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-bottom:56px;
}
.td-hero-line{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-gold-bright);margin-bottom:10px}
.td-hero-title{font-family:var(--pt-font-display);font-weight:600;font-size:42px;line-height:1.15;margin-bottom:10px;text-shadow:0 4px 24px rgba(0,0,0,.35)}
.td-hero-tagline{font-size:16px;color:rgba(255,255,255,.86);margin-bottom:18px;max-width:640px}
.td-hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:14px;color:rgba(255,255,255,.9)}
.td-hero-dot{opacity:.6}
.td-hero-rating{display:inline-flex;align-items:center;gap:6px}
.td-hero-rating .icon{width:16px;height:16px;color:var(--brand-gold-bright)}
.td-hero-rating span{color:rgba(255,255,255,.7);font-size:13px}

/* ================= Page backdrop ================= */
.td-page-bg{
    position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;
    background:#f6f8fb;
}

/* ================= Sub nav ================= */
.td-subnav{
    position:sticky;top:12px;z-index:20;background:#fff;
    display:flex;gap:1.75rem;
    border:1px solid #eef1f6;border-radius:1rem;box-shadow:0 8px 20px rgba(11,31,58,.07);
    padding:0 1.5rem;margin-top:1.5rem;margin-bottom:2.5rem;
    overflow-x:auto;
    /* Both axes declared: overflow-x alone computes overflow-y to auto too, and
       the active link's bottom border was enough to draw a stray vertical
       scrollbar in this sticky bar. */
    overflow-y:hidden;
}
.td-subnav a{
    padding:1rem 0;font-weight:700;font-size:.87rem;color:#6b7789;white-space:nowrap;
    border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease;
}
.td-subnav a:hover{color:var(--brand-navy)}
.td-subnav a.active{color:var(--brand-navy);border-bottom-color:var(--brand-gold)}

/* ================= Two-column layout ================= */
.td-layout{display:grid;grid-template-columns:1fr 340px;gap:2.5rem;align-items:start}
.td-main{min-width:0}

.td-sidebar{position:sticky;top:88px}
.td-sidebar-card{
    background:#fff;border:1px solid #eef1f6;border-radius:1.25rem;
    box-shadow:0 20px 44px rgba(11,31,58,.1);
    padding:1.5rem 1.5rem 1.65rem;
}
.td-sidebar-price-label{display:block;font-size:.78rem;color:#6b7385;text-transform:uppercase;letter-spacing:.02em}
.td-sidebar-price-value{display:block;font-size:1.9rem;font-weight:800;color:var(--brand-navy);margin-bottom:1.1rem}
.td-sidebar-price-value small{font-size:.8rem;font-weight:600;color:#8b95a5;margin-left:4px}
.td-sidebar-btn{
    display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
    background:var(--brand-navy);color:#fff;font-weight:700;font-size:.95rem;
    padding:.9rem 1.25rem;border-radius:.75rem;transition:transform .15s ease,background-color .15s ease;
    box-shadow:0 12px 24px rgba(11,31,58,.22);margin-bottom:1.25rem;
}
.td-sidebar-btn:hover{background:var(--brand-navy-dark);transform:translateY(-2px);color:#fff}
.td-sidebar-btn .icon{width:17px;height:17px}
.td-sidebar-btn-secondary{
    background:#fff;color:var(--brand-navy);border:1px solid #dde3ec;box-shadow:none;
}
.td-sidebar-btn-secondary:hover{background:var(--brand-navy-soft);color:var(--brand-navy)}
.td-sidebar-facts{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-direction:column;gap:.65rem}
.td-sidebar-facts li{display:flex;align-items:flex-start;gap:.6rem;font-size:.83rem;color:#4b5565;padding-top:.65rem;border-top:1px solid #eef1f6}
.td-sidebar-facts li:first-child{padding-top:0;border-top:none}
.td-sidebar-facts .icon{width:15px;height:15px;color:#9aa1b3;flex:none;margin-top:.1rem}
.td-sidebar-facts b{color:var(--brand-navy)}
.td-sidebar-note{font-size:.75rem;color:#9aa1b3;line-height:1.5;margin:0}

/* ================= Sections ================= */
.td-section{padding:1.5rem 0 3rem;scroll-margin-top:64px}
.td-section-title{font-family:var(--pt-font-display);font-size:1.6rem;color:var(--brand-navy);margin-bottom:.6rem}
.td-section-sub{color:#6b7385;font-size:.9rem;margin-bottom:1.5rem;max-width:720px}
/* Inclusion, Exclusion, BookingTerms and each itinerary day's Description are
   admin-authored HTML from the CMS, so they arrive as an unstyled mix of
   paragraphs, headings and lists. Scoped rules give that markup the page's
   typography without the editor needing to know anything about it. */
.td-overview-text{font-size:1rem;line-height:1.7;color:#4b5565;max-width:820px;margin-bottom:1.75rem}
.td-overview-text > *:first-child,.td-timeline-desc > *:first-child{margin-top:0}
.td-overview-text > *:last-child,.td-timeline-desc > *:last-child{margin-bottom:0}
.td-overview-text p,.td-timeline-desc p{margin:0 0 .9rem}
.td-overview-text h1,.td-overview-text h2,.td-overview-text h3,
.td-overview-text h4,.td-overview-text h5,.td-overview-text h6{
    font-family:var(--pt-font-display);color:var(--brand-navy);
    font-size:1.05rem;font-weight:600;line-height:1.35;margin:1.5rem 0 .6rem;
}
.td-overview-text ul,.td-overview-text ol,
.td-timeline-desc ul,.td-timeline-desc ol{margin:0 0 1rem;padding-left:1.25rem}
.td-overview-text li,.td-timeline-desc li{margin-bottom:.4rem}
.td-overview-text li::marker{color:var(--brand-gold,#c8a24a)}
.td-overview-text strong,.td-overview-text b,
.td-timeline-desc strong,.td-timeline-desc b{color:var(--brand-navy);font-weight:600}
.td-overview-text a,.td-timeline-desc a{color:var(--brand-navy);text-decoration:underline}
.td-overview-text hr{border:0;border-top:1px solid #eef1f6;margin:1.4rem 0}
.td-overview-text img,.td-timeline-desc img{max-width:100%;height:auto;border-radius:.6rem}
/* CMS tables carry no widths and would otherwise force the column wider than
   the layout on narrow screens. */
.td-overview-text table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.9rem}
.td-overview-text th,.td-overview-text td{border:1px solid #eef1f6;padding:.5rem .7rem;text-align:left}
.td-overview-text th{background:#f6f8fb;color:var(--brand-navy);font-weight:600}

/* ---------- Highlights ---------- */
.td-highlights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.td-highlight{
    display:flex;align-items:center;gap:.75rem;
    background:#fff;border:1px solid #eef1f6;border-radius:.9rem;padding:.9rem 1.1rem;
    font-size:.88rem;font-weight:600;color:var(--brand-navy);
    box-shadow:0 10px 22px rgba(11,31,58,.05);
    transition:transform .15s ease,box-shadow .15s ease;
}
.td-highlight:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(11,31,58,.1)}
.td-highlight-icon{
    width:34px;height:34px;flex:none;border-radius:50%;
    background:linear-gradient(155deg,var(--brand-navy) 0%,var(--brand-navy-light) 100%);
    color:var(--brand-gold-bright);display:flex;align-items:center;justify-content:center;
    box-shadow:inset 0 2px 4px rgba(255,255,255,.15),0 6px 14px rgba(11,31,58,.28);
}
.td-highlight-icon .icon{width:17px;height:17px}

/* ---------- Day-by-day itinerary timeline ---------- */
.td-timeline{position:relative;padding-left:52px}
.td-timeline::before{
    content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;
    background:linear-gradient(180deg,var(--brand-gold) 0%,var(--brand-navy-soft) 100%);
}
.td-timeline-item{position:relative;padding-bottom:2rem}
.td-timeline-item:last-child{padding-bottom:0}
.td-timeline-marker{
    position:absolute;left:-52px;top:0;width:48px;height:48px;border-radius:50%;
    background:linear-gradient(155deg,var(--brand-navy) 0%,var(--brand-navy-light) 100%);
    color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 22px rgba(11,31,58,.3),inset 0 2px 3px rgba(255,255,255,.2);
    border:3px solid #fff;font-weight:800;font-size:1.05rem;
}
.td-timeline-body{
    background:#fff;border:1px solid #eef1f6;border-radius:1rem;padding:1.1rem 1.35rem;
    box-shadow:0 8px 20px rgba(11,31,58,.05);
}
.td-timeline-day{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-gold)}
.td-timeline-title-text{font-family:var(--pt-font-display);font-size:1.1rem;color:var(--brand-navy);margin:.15rem 0 .3rem}
.td-timeline-desc{font-size:.88rem;color:#4b5565;margin:0;line-height:1.55}

/* ---------- Package cards ---------- */
.td-package-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;align-items:start}
.td-package-card{
    position:relative;background:#fff;border:1px solid #eef1f6;border-radius:1.15rem;
    padding:1.4rem 1.5rem 1.6rem;box-shadow:0 10px 24px rgba(11,31,58,.07);
    transition:transform .15s ease,box-shadow .15s ease;display:flex;flex-direction:column;
}
.td-package-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(11,31,58,.14)}
.td-package-badge{
    position:absolute;top:-.6rem;right:1.1rem;
    background:var(--brand-gold);color:#fff;font-size:.66rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.03em;padding:.3rem .65rem;border-radius:999px;box-shadow:0 6px 14px rgba(169,121,26,.4);
}
.td-package-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.4rem}
.td-package-name{font-family:var(--pt-font-display);font-size:1.15rem;color:var(--brand-navy);line-height:1.3}
.td-package-price{text-align:right;flex:none}
.td-package-price span{display:block;font-size:.66rem;color:#8b95a5;text-transform:uppercase}
.td-package-price b{font-size:1.05rem;color:var(--brand-navy)}
.td-package-desc{font-size:.85rem;color:#6b7789;line-height:1.5;margin-bottom:.9rem}
.td-package-facts{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:1.1rem}
.td-package-facts span{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;color:#4b5565}
.td-package-facts .icon{width:13px;height:13px;color:#9aa1b3}
.td-package-inclusions{padding-top:1rem;border-top:1px solid #eef1f6;margin-top:auto;margin-bottom:1.1rem}
.td-package-inclusions h4{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--brand-navy);margin-bottom:.55rem}
.td-package-inclusions ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.td-package-inclusions li{font-size:.8rem;color:#4b5565;padding-left:1.1rem;position:relative;line-height:1.4}
.td-package-inclusions li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--brand-gold)}
.td-package-cta{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
    background:var(--brand-navy);color:#fff;font-weight:700;font-size:.85rem;
    padding:.7rem 1rem;border-radius:.65rem;transition:background-color .15s ease;
}
.td-package-cta:hover{background:var(--brand-navy-dark);color:#fff}
.td-package-cta .icon{width:15px;height:15px}

/* ---------- Gallery ----------
   Spans both grid columns so it runs the full width of the page rather than
   sitting in the narrower content column next to the sidebar. */
.td-gallery-section{grid-column:1 / -1}

/* auto-fit + minmax divides the full width between the tiles instead of pinning
   each to 320px and scrolling the overflow, which left dead space on the right
   and hid the last image behind a scrollbar. min() guards the track floor so
   the grid cannot overflow its container on a very narrow viewport. */
.td-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
    gap:1rem;
}
.td-gallery-img{
    /* Ratio rather than a fixed height, so a tile that is now much wider does
       not stay letterboxed at 220px. */
    aspect-ratio:4/3;border-radius:1rem;background-size:cover;background-position:center;
    box-shadow:0 12px 26px rgba(11,31,58,.12);
    transition:transform .18s ease,box-shadow .18s ease;
}
.td-gallery-img:hover{transform:translateY(-3px);box-shadow:0 20px 38px rgba(11,31,58,.18)}

/* ---------- FAQs ---------- */
.td-faq-list{display:flex;flex-direction:column;gap:.75rem}
.td-faq-item{background:#fff;border:1px solid #eef1f6;border-radius:1rem;box-shadow:0 8px 20px rgba(11,31,58,.05);overflow:hidden}
.td-faq-q{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1.1rem 1.35rem;font-weight:700;font-size:.95rem;color:var(--brand-navy);text-align:left;background:none;
}
.td-faq-q .icon{width:16px;height:16px;flex:none;color:#9aa1b3;transition:transform .2s ease}
.td-faq-q.expanded .icon{transform:rotate(180deg)}
.td-faq-a{padding:0 1.35rem 1.1rem;font-size:.88rem;color:#4b5565;line-height:1.6}

/* ================= Responsive ================= */
@media (max-width:991.98px){
    .td-hero{height:420px}
    .td-hero-title{font-size:30px}
    .td-layout{grid-template-columns:1fr}
    .td-sidebar{position:static;order:-1}
    .td-sidebar-card{margin-bottom:2rem}
    .td-highlights-grid{grid-template-columns:repeat(2,1fr)}
    .td-package-grid{grid-template-columns:1fr}
}
@media (max-width:575.98px){
    .td-hero{height:400px}
    .td-highlights-grid{grid-template-columns:1fr}
    .td-timeline{padding-left:44px}
    .td-timeline-marker{left:-44px;width:40px;height:40px;font-size:.9rem}
}

/* Both .td-hero and .td-page-bg break out of .container with the 100vw trick, so
   their children need a wrapper to re-establish the reading column. */
.td-container{max-width:1240px;margin:0 auto;padding:0 20px}

/* Extra line under an itinerary day — transfer, hotels, sightseeing. */
.td-timeline-meta{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:#6b7789;margin-top:.35rem}
.td-timeline-meta .icon{width:14px;height:14px;flex:none;color:var(--brand-gold)}

/* Pricing windows table (TourPricing rows). */
.td-price-table{width:100%;border-collapse:collapse;font-size:.88rem;background:#fff;
    border:1px solid #eef1f6;border-radius:.9rem;overflow:hidden}
.td-price-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
    color:#8b95a5;background:#f7f9fc;padding:.7rem .9rem;border-bottom:1px solid #eef1f6}
.td-price-table td{padding:.75rem .9rem;border-bottom:1px solid #f2f5f9;color:#4b5565}
.td-price-table tr:last-child td{border-bottom:none}
.td-price-table s{color:#a7b0bd;margin-right:.3rem}
.td-price-table small{color:#8b95a5;font-weight:500}
.td-price-off{display:inline-block;background:#e8f6ee;color:#1c7a45;font-weight:700;
    font-size:.72rem;padding:.1rem .4rem;border-radius:.35rem}

/* ================= Itinerary accordion =================
   Replaces the flat timeline. A CMS day description often runs several
   paragraphs, so printing every day expanded buried the pricing and enquiry
   form under a wall of text. Collapsed, the whole trip scans in one screen. */
.td-section-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;
}
.td-section-head .td-section-title{margin-bottom:.25rem}
.td-section-head .td-section-sub{margin-bottom:0}

.td-itin-toggle-all{
    flex:none;display:inline-flex;align-items:center;gap:.4rem;
    background:#fff;border:1px solid #dfe5ee;border-radius:2rem;
    padding:.5rem 1rem;font-size:.82rem;font-weight:600;color:var(--brand-navy);
    cursor:pointer;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.td-itin-toggle-all:hover{background:#f6f8fb;border-color:#c9d3e2;box-shadow:0 6px 16px rgba(11,31,58,.09)}
.td-itin-toggle-all .icon{width:15px;height:15px;transition:transform .25s ease}
.td-itin-toggle-all[data-expanded="true"] .icon{transform:rotate(180deg)}

.td-itin{display:flex;flex-direction:column;gap:.75rem}

.td-itin-day{
    background:#fff;border:1px solid #eef1f6;border-radius:1.1rem;
    box-shadow:0 8px 20px rgba(11,31,58,.06);overflow:hidden;
    transition:box-shadow .18s ease,border-color .18s ease;
}
.td-itin-day:hover{border-color:#dfe7f2;box-shadow:0 14px 30px rgba(11,31,58,.1)}
.td-itin-day.is-open{border-color:#dfe7f2;box-shadow:0 14px 30px rgba(11,31,58,.1)}

.td-itin-head{
    display:flex;align-items:flex-start;gap:1rem;width:100%;
    background:none;border:0;text-align:left;cursor:pointer;
    padding:1.1rem 1.25rem;
}

/* The day number reads as a step marker, and turns solid once opened so the
   traveller can see where they are in a long itinerary at a glance. */
.td-itin-marker{
    flex:none;display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;
    background:var(--brand-navy-soft,#eef1f6);color:var(--brand-navy);
    font-weight:700;font-size:.9rem;
    transition:background .18s ease,color .18s ease;
}
.td-itin-day.is-open .td-itin-marker{background:var(--brand-navy);color:#fff}

.td-itin-headings{display:flex;flex-direction:column;gap:.25rem;min-width:0;flex:1}
.td-itin-eyebrow{
    font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--brand-gold,#c8a24a);
}
.td-itin-title{
    font-family:var(--pt-font-display);font-size:1.05rem;font-weight:600;
    color:var(--brand-navy);line-height:1.35;
}
.td-itin-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.15rem}
.td-itin-chip{
    display:inline-flex;align-items:center;gap:.3rem;
    background:#f6f8fb;border-radius:2rem;padding:.22rem .6rem;
    font-size:.72rem;color:#5b6478;
}
.td-itin-chip .icon{width:12px;height:12px;color:var(--brand-navy)}

.td-itin-chevron{
    flex:none;display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:28px;color:#8b95a7;margin-top:4px;
}
.td-itin-chevron .icon{width:17px;height:17px;transition:transform .25s ease}
.td-itin-day.is-open .td-itin-chevron .icon{transform:rotate(180deg)}

/* Height is animated from a measured px value set by the script; grid-rows would
   be cleaner but is not safe on the older WebKit this site still sees.
   The .is-open rule is the no-script fallback — without it a failed or blocked
   script leaves every panel pinned at height:0 and the itinerary looks empty.
   Once the script runs it sets an inline height, which wins over this. */
.td-itin-panel{height:0;overflow:hidden;transition:height .28s ease}
.td-itin-day.is-open .td-itin-panel{height:auto}
.td-itin-panel-inner{padding:0 1.25rem 1.25rem calc(1.25rem + 38px + 1rem)}

.td-itin-fact{
    display:flex;align-items:flex-start;gap:.6rem;
    font-size:.88rem;color:#4b5565;line-height:1.55;margin-top:.7rem;
}
.td-itin-fact b{color:var(--brand-navy);font-weight:600}
.td-itin-fact-icon{
    flex:none;display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:.5rem;
    background:var(--brand-navy-soft,#eef1f6);color:var(--brand-navy);
}
.td-itin-fact-icon .icon{width:14px;height:14px}

@media (max-width:575.98px){
    .td-itin-head{padding:.9rem 1rem;gap:.75rem}
    .td-itin-marker{width:32px;height:32px;font-size:.82rem}
    /* Full-width body on a phone — the marker indent wastes too much of it. */
    .td-itin-panel-inner{padding:0 1rem 1rem}
    .td-itin-toggle-all{width:100%;justify-content:center}
}

/* ================= CMS inline-style normalisation =================
   The admin editor pastes font-family, font-size and line-height straight onto
   elements as inline styles, so copy authored in Word or Google Docs arrived in
   Calibri/Arial at arbitrary sizes and broke the page's typography. Inline
   styles beat any normal rule, so these have to be !important.

   Scoped to [style] so only elements the editor actually touched are reset;
   everything else keeps the rules above. Headings are re-asserted because the
   [style] selector would otherwise outrank the heading rules. Colour, alignment
   and background are deliberately left alone — those are editorial choices. */
.td-overview-text [style],
.td-timeline-desc [style]{
    font-family:inherit !important;
    font-size:inherit !important;
    line-height:inherit !important;
}
.td-overview-text h1[style],.td-overview-text h2[style],.td-overview-text h3[style],
.td-overview-text h4[style],.td-overview-text h5[style],.td-overview-text h6[style],
.td-timeline-desc h1[style],.td-timeline-desc h2[style],.td-timeline-desc h3[style],
.td-timeline-desc h4[style],.td-timeline-desc h5[style],.td-timeline-desc h6[style]{
    font-family:var(--pt-font-display) !important;
    font-size:1.05rem !important;
}

/* ================= Overview fact row ================= */
.td-facts-row{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
    gap:.85rem;margin-bottom:1.5rem;
}
.td-fact{
    display:flex;align-items:center;gap:.7rem;
    background:#fff;border:1px solid #eef1f6;border-radius:.9rem;padding:.85rem 1rem;
    box-shadow:0 8px 18px rgba(11,31,58,.05);
}
.td-fact-icon{
    flex:none;display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:.65rem;
    background:var(--brand-navy-soft,#eef1f6);color:var(--brand-navy);
}
.td-fact-icon .icon{width:16px;height:16px}
.td-fact-text{display:flex;flex-direction:column;min-width:0}
.td-fact-text b{font-size:.92rem;color:var(--brand-navy);font-weight:700;line-height:1.3}
.td-fact-text span{font-size:.74rem;color:#8b95a7}

/* ================= Content panels ================= */
/* Inclusion / exclusion / policies each sit on their own card, with a colour
   spine so the two lists are distinguishable at a glance while scrolling. */
.td-panel{
    position:relative;background:#fff;border:1px solid #eef1f6;border-radius:1.1rem;
    padding:1.4rem 1.6rem;box-shadow:0 10px 24px rgba(11,31,58,.06);
}
.td-panel-included{border-left:3px solid #2e9e6b}
.td-panel-excluded{border-left:3px solid #d2645b}
.td-panel .td-overview-text{margin-bottom:0}

/* ================= Read more =================
   Generic: any .td-readmore block collapses to a readable height with a fade,
   and the script adds the toggle only when the copy actually overflows. */
.td-readmore{max-height:20rem;overflow:hidden;position:relative;transition:max-height .35s ease}
.td-readmore.is-open{max-height:none}
.td-readmore-fade{
    position:absolute;left:0;right:0;bottom:0;height:5rem;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.94) 65%,#fff 100%);
}
.td-readmore.is-open .td-readmore-fade{display:none}
.td-readmore-toggle{
    display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
    background:#fff;border:1px solid #dfe5ee;border-radius:2rem;
    padding:.55rem 1.15rem;font-size:.85rem;font-weight:600;color:var(--brand-navy);
    cursor:pointer;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.td-readmore-toggle:hover{background:#f6f8fb;border-color:#c9d3e2;box-shadow:0 6px 16px rgba(11,31,58,.09)}
.td-readmore-toggle .icon{width:16px;height:16px;transition:transform .25s ease}
.td-readmore-toggle[aria-expanded="true"] .icon{transform:rotate(180deg)}

/* ================= Related packages ================= */
.td-related-section{grid-column:1 / -1}
.td-related-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1.25rem;
}
.td-related-card{
    display:flex;flex-direction:column;overflow:hidden;
    background:#fff;border:1px solid #eef1f6;border-radius:1.1rem;
    box-shadow:0 10px 24px rgba(11,31,58,.06);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.td-related-card:hover{
    transform:translateY(-4px);border-color:#dfe7f2;
    box-shadow:0 22px 40px rgba(11,31,58,.14);
}
.td-related-image{
    position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;
}
.td-related-tag{
    position:absolute;top:.7rem;left:.7rem;
    background:rgba(4,12,26,.72);color:#fff;
    font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
    padding:.24rem .6rem;border-radius:2rem;backdrop-filter:blur(4px);
}
.td-related-body{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.1rem 1.15rem;flex:1}
.td-related-name{
    font-family:var(--pt-font-display);font-size:1.02rem;font-weight:600;
    color:var(--brand-navy);line-height:1.35;
}
.td-related-cities{
    font-size:.79rem;color:#6b7385;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.td-related-foot{
    display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem;
    margin-top:auto;padding-top:.7rem;border-top:1px solid #f1f4f9;
}
.td-related-days{font-size:.76rem;font-weight:600;color:#6b7385}
.td-related-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.td-related-price small{font-size:.68rem;color:#8b95a7}
.td-related-price b{font-size:1rem;color:var(--brand-navy);font-weight:800}

@media (max-width:575.98px){
    .td-panel{padding:1.15rem 1.1rem}
    .td-readmore{max-height:16rem}
    .td-readmore-toggle{width:100%;justify-content:center}
}

/* ================= Route map =================
   Leaflet over OpenStreetMap tiles. The shell gives the map the page's card
   treatment; Leaflet itself paints inside it. */
.td-map-section{grid-column:1 / -1}
.td-map-shell{
    border:1px solid #eef1f6;border-radius:1.1rem;overflow:hidden;
    box-shadow:0 10px 24px rgba(11,31,58,.06);background:#fff;
}
.td-map{height:420px;width:100%}

/* Leaflet paints its own controls and popups; these keep them on-brand. */
.td-map .leaflet-container{font:inherit}
.td-map .leaflet-popup-content-wrapper{border-radius:.7rem;box-shadow:0 12px 28px rgba(11,31,58,.18)}
.td-map .leaflet-popup-content{margin:.7rem .9rem;font-size:.85rem;line-height:1.45;color:#4b5565}
.td-map .leaflet-popup-content b{color:var(--brand-navy)}

/* Numbered day pin, in place of Leaflet's default image marker. A pin can carry
   a span ("3-4") when the itinerary stays two nights in one city, so it is a
   pill that widens rather than a fixed circle. */
.td-map-pin-wrap{background:none;border:0}
.td-map-pin{
    display:flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:999px;
    background:var(--brand-navy);color:#fff;
    font-size:.8rem;font-weight:700;line-height:1;
    border:2px solid #fff;box-shadow:0 4px 12px rgba(4,12,26,.4);
}
.td-map-pin.is-wide{width:46px;font-size:.72rem;letter-spacing:.01em}

/* The marker that walks the route during playback. */
.td-map-traveller-wrap{background:none;border:0}
.td-map-traveller{
    position:relative;  /* anchors the pulse halo below */
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;
    background:var(--brand-gold,#c8a24a);color:#fff;
    border:2px solid #fff;box-shadow:0 6px 18px rgba(4,12,26,.45);
}
.td-map-traveller svg{width:17px;height:17px}
/* Halo pulse so the moving marker reads as active without animating the marker
   itself, which Leaflet repositions every frame. */
.td-map-traveller::after{
    content:"";position:absolute;inset:-6px;border-radius:50%;
    border:2px solid var(--brand-gold,#c8a24a);opacity:.55;
    animation:td-map-pulse 1.8s ease-out infinite;
}
@keyframes td-map-pulse{
    0%{transform:scale(.75);opacity:.6}
    100%{transform:scale(1.35);opacity:0}
}

/* Playback control, rendered as a Leaflet control bottom-left. */
.td-map-play-wrap{margin:0 0 12px 12px}
.td-map-play{
    display:inline-flex;align-items:center;gap:.45rem;
    background:#fff;border:1px solid #dfe5ee;border-radius:2rem;
    padding:.5rem 1rem;font-size:.82rem;font-weight:600;color:var(--brand-navy);
    cursor:pointer;box-shadow:0 6px 18px rgba(11,31,58,.18);
    transition:background .15s ease,border-color .15s ease;
}
.td-map-play:hover{background:#f6f8fb;border-color:#c9d3e2}
.td-map-play svg{width:14px;height:14px}

/* Reduced-motion: keep the control usable but stop the ambient pulse. */
@media (prefers-reduced-motion:reduce){
    .td-map-traveller::after{animation:none;opacity:0}
}
.td-map-day{
    display:block;font-size:.68rem;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--brand-gold,#c8a24a);margin-bottom:.15rem;
}

@media (max-width:575.98px){
    .td-map{height:320px}
}