/* ================= Sightseeing detail hero ================= */
.sd-hero{
    position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;
    overflow:hidden;height:440px;color:#fff;
}
.sd-hero-bg{
    position:absolute;inset:-4%;background-size:cover;background-position:center;
    animation:sd-kenburns 22s ease-in-out infinite alternate;
}
@keyframes sd-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.sd-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%);
}
.sd-hero-inner{
    position:relative;z-index:1;height:100%;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-bottom:56px;
}
.sd-hero-line{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-gold-bright);margin-bottom:10px}
.sd-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)}
.sd-hero-tagline{font-size:16px;color:rgba(255,255,255,.86);margin-bottom:18px;max-width:640px}
.sd-hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:14px;color:rgba(255,255,255,.9)}
.sd-hero-dot{opacity:.6}
.sd-hero-rating{display:inline-flex;align-items:center;gap:6px}
.sd-hero-rating .icon{width:16px;height:16px;color:var(--brand-gold-bright)}
.sd-hero-rating span{color:rgba(255,255,255,.7);font-size:13px}

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

/* ================= Sub nav ================= */
.sd-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;
}
.sd-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;
}
.sd-subnav a:hover{color:var(--brand-navy)}
.sd-subnav a.active{color:var(--brand-navy);border-bottom-color:var(--brand-gold)}

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

.sd-sidebar{position:sticky;top:88px}
.sd-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;
}
.sd-sidebar-price-label{display:block;font-size:.78rem;color:#6b7385;text-transform:uppercase;letter-spacing:.02em}
.sd-sidebar-price-value{display:block;font-size:1.9rem;font-weight:800;color:var(--brand-navy);margin-bottom:1.1rem}
.sd-sidebar-price-value small{font-size:.8rem;font-weight:600;color:#8b95a5;margin-left:4px}
.sd-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;
}
.sd-sidebar-btn:hover{background:var(--brand-navy-dark);transform:translateY(-2px);color:#fff}
.sd-sidebar-btn .icon{width:17px;height:17px}
.sd-sidebar-btn-secondary{
    background:#fff;color:var(--brand-navy);border:1px solid #dde3ec;box-shadow:none;
}
.sd-sidebar-btn-secondary:hover{background:var(--brand-navy-soft);color:var(--brand-navy)}
.sd-sidebar-facts{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-direction:column;gap:.65rem}
.sd-sidebar-facts li{display:flex;align-items:flex-start;gap:.6rem;font-size:.83rem;color:#4b5565;padding-top:.65rem;border-top:1px solid #eef1f6}
.sd-sidebar-facts li:first-child{padding-top:0;border-top:none}
.sd-sidebar-facts .icon{width:15px;height:15px;color:#9aa1b3;flex:none;margin-top:.1rem}
.sd-sidebar-facts b{color:var(--brand-navy)}
.sd-sidebar-note{font-size:.75rem;color:#9aa1b3;line-height:1.5;margin:0}

/* ================= Sections ================= */
.sd-section{padding:1.5rem 0 3rem;scroll-margin-top:64px}
.sd-section-title{font-family:var(--pt-font-display);font-size:1.6rem;color:var(--brand-navy);margin-bottom:.6rem}
.sd-section-sub{color:#6b7385;font-size:.9rem;margin-bottom:1.5rem;max-width:720px}
/* Description, ActivityPolicies and TermsAndConditions 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. Shared with the destination detail page,
   which uses the same sd-* classes. */
.sd-overview-text{font-size:1rem;line-height:1.7;color:#4b5565;max-width:820px;margin-bottom:1.75rem}
.sd-overview-text > *:first-child{margin-top:0}
.sd-overview-text > *:last-child{margin-bottom:0}
.sd-overview-text p{margin:0 0 .9rem}
.sd-overview-text h1,.sd-overview-text h2,.sd-overview-text h3,
.sd-overview-text h4,.sd-overview-text h5,.sd-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;
}
.sd-overview-text ul,.sd-overview-text ol{margin:0 0 1rem;padding-left:1.25rem}
.sd-overview-text li{margin-bottom:.4rem}
.sd-overview-text li::marker{color:var(--brand-gold,#c8a24a)}
.sd-overview-text strong,.sd-overview-text b{color:var(--brand-navy);font-weight:600}
.sd-overview-text a{color:var(--brand-navy);text-decoration:underline}
.sd-overview-text hr{border:0;border-top:1px solid #eef1f6;margin:1.4rem 0}
.sd-overview-text 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. */
.sd-overview-text table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.9rem}
.sd-overview-text th,.sd-overview-text td{border:1px solid #eef1f6;padding:.5rem .7rem;text-align:left}
.sd-overview-text th{background:#f6f8fb;color:var(--brand-navy);font-weight:600}

/* ---------- Highlights ---------- */
.sd-highlights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.sd-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;
}
.sd-highlight:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(11,31,58,.1)}
.sd-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);
}
.sd-highlight-icon .icon{width:17px;height:17px}

/* ---------- Itinerary timeline ---------- */
.sd-timeline{position:relative;padding-left:52px}
.sd-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%);
}
.sd-timeline-item{position:relative;padding-bottom:2rem}
.sd-timeline-item:last-child{padding-bottom:0}
.sd-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;
}
.sd-timeline-marker .icon{width:19px;height:19px}
.sd-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);
}
.sd-timeline-time{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-gold)}
.sd-timeline-title-text{font-family:var(--pt-font-display);font-size:1.1rem;color:var(--brand-navy);margin:.15rem 0 .3rem}
.sd-timeline-desc{font-size:.88rem;color:#4b5565;margin:0;line-height:1.55}

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

/* ---------- Gallery ---------- */
/* Spans both grid columns so the gallery runs the full width of the page
   rather than being boxed into the narrower content column beside the
   sidebar. Shared by the sightseeing and destination detail pages. */
.sd-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. */
.sd-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
    gap:1rem;
}
.sd-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;
}
.sd-gallery-img:hover{transform:translateY(-3px);box-shadow:0 20px 38px rgba(11,31,58,.18)}

/* ---------- FAQs ---------- */
.sd-faq-list{display:flex;flex-direction:column;gap:.75rem}
.sd-faq-item{background:#fff;border:1px solid #eef1f6;border-radius:1rem;box-shadow:0 8px 20px rgba(11,31,58,.05);overflow:hidden}
.sd-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;
}
.sd-faq-q .icon{width:16px;height:16px;flex:none;color:#9aa1b3;transition:transform .2s ease}
.sd-faq-q.expanded .icon{transform:rotate(180deg)}
.sd-faq-a{padding:0 1.35rem 1.1rem;font-size:.88rem;color:#4b5565;line-height:1.6}

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

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

/* SightseeingPricing windows. */
.sd-price-table{width:100%;border-collapse:collapse;font-size:.88rem;background:#fff;
    border:1px solid #eef1f6;border-radius:.9rem;overflow:hidden}
.sd-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}
.sd-price-table td{padding:.75rem .9rem;border-bottom:1px solid #f2f5f9;color:#4b5565}
.sd-price-table tr:last-child td{border-bottom:none}

/* ================= Activity cards on the destination guide =================
   .sd-package-card was written for a <div>. The destination page renders it as
   an <a>, which kept the browser's link defaults — blue text and an underline on
   every line of the card, which is what made this section read as a list of raw
   links. Resetting inherit/none here fixes it wherever the class is used as a
   link, without touching the div form. */
a.sd-package-card{color:inherit;text-decoration:none;display:flex;flex-direction:column;padding:0;overflow:hidden}
a.sd-package-card:hover{color:inherit;text-decoration:none}
/* The anchor is a flex column of spans, so its children need to be blocks. */
a.sd-package-card .sd-package-head,
a.sd-package-card .sd-package-facts,
a.sd-package-card .sd-package-name,
a.sd-package-card .sd-activity-body{display:flex}
a.sd-package-card .sd-package-name{display:block}

.sd-activity-image{
    display:block;width:100%;aspect-ratio:16/9;
    background-size:cover;background-position:center;background-color:#eef1f6;
}
.sd-activity-body{
    flex-direction:column;gap:.6rem;padding:1.1rem 1.25rem 1.25rem;flex:1;
}
.sd-activity-card .sd-package-head{margin-bottom:0}
.sd-activity-card .sd-package-facts{
    margin-bottom:0;margin-top:auto;padding-top:.75rem;
    border-top:1px solid #f1f4f9;align-items:center;justify-content:space-between;
}
.sd-activity-more{
    display:inline-flex;align-items:center;gap:.25rem;
    font-size:.76rem;font-weight:700;color:var(--brand-navy);
}
.sd-activity-more .icon{width:13px;height:13px;transition:transform .15s ease}
.sd-activity-card:hover .sd-activity-more .icon{transform:translateX(3px)}

/* Keeps "From" above the amount rather than running into it. */
.sd-activity-card .sd-package-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}