/* ============================================================
   Itinerary Hero — Left-to-Right Gradient Overlay
   Dark (75% opacity) on the left behind text,
   fading to near-clear (20% opacity) on the right
   so the hero image stays visible.
   ============================================================ */

/* 1. Hero stacking context */
html body .sds .sds-hero,
html body .sds-hero {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: #1c1814 !important;
    color: #ebe5da !important;
    z-index: 0 !important;
}

/* 2. Hero image — full opacity so it shows clearly on the right */
html body .sds .sds-hero > img,
html body .sds-hero > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    z-index: 1 !important;
    display: block !important;
}

/* 3. Left-to-right gradient overlay */
html body .sds .sds-hero::after,
html body .sds-hero::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.55) 40%,
        rgba(0, 0, 0, 0.30) 65%,
        rgba(0, 0, 0, 0.20) 100%
    ) !important;
}

/* 4. Remove any previously injected solid overlay */
html body .sds .sds-hero::before,
html body .sds-hero::before {
    display: none !important;
    content: none !important;
}

/* 5. Content sits above overlay */
html body .sds .sds-hero .sds-wrap,
html body .sds-hero .sds-wrap {
    position: relative !important;
    z-index: 3 !important;
}

/* 6. Text colours */
html body .sds .sds-hero h1,
html body .sds-hero h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.45) !important;
}

html body .sds .sds-hero .sds-sub,
html body .sds-hero .sds-sub {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.35) !important;
}

html body .sds .sds-hero .sds-eyebrow,
html body .sds-hero .sds-eyebrow {
    color: #c9a66b !important;
}

html body .sds .sds-hero .sds-dt,
html body .sds-hero .sds-dt {
    color: rgba(255, 255, 255, 0.65) !important;
}

html body .sds .sds-hero .sds-dd,
html body .sds-hero .sds-dd {
    color: #ffffff !important;
}

html body .sds .sds-hero .sds-dd.gold,
html body .sds-hero .sds-dd.gold {
    color: #c9a66b !important;
}

html body .sds .sds-hero .sds-facts,
html body .sds-hero .sds-facts {
    border-top-color: rgba(255, 255, 255, 0.2) !important;
}