/* ==========================================================
   Hero Slider — Ken Burns zoom + progress bar
   ========================================================== */

.dynamic-hero-slider {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    user-select: none !important; /* prevent text-selection while dragging */
    touch-action: pan-y !important; /* allow vertical scroll, we handle horizontal drag ourselves */
}

.dynamic-hero-track {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

.dynamic-hero-slide {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    /* visibility is included in the transition list on purpose: it makes
       the browser delay switching to hidden until the opacity fade-out
       finishes, instead of cutting instantly — that instant cut is what
       was causing the flash between slides */
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
}

.dynamic-hero-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1 !important;
}

.dynamic-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    overflow: hidden !important;
}

.dynamic-hero-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    -webkit-user-drag: none !important; /* stops Safari's native image-drag ghost preview */
    user-select: none !important;
    /* NOTE: no `transform` here (and no !important on one) — a static
       !important transform always wins over an animation's transform on
       every frame, which is what was freezing the Ken Burns zoom at
       scale(1) the whole time. The keyframes below fully own transform. */
}

/* Ken Burns zoom — only runs on the active slide, restarts each time via JS re-adding the class */
.dynamic-hero-slide.is-active .dynamic-hero-bg img {
    animation: dhs-kenburns 8s ease-out forwards !important;
}

@keyframes dhs-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

/* Dark overlay across the ENTIRE slide (not just behind the text) —
   matches TBPL's whole-banner gradient rather than a text-only scrim */
.dynamic-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.1) 100%
    ) !important;
}

.dynamic-hero-content {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important; /* anchor to bottom instead of vertical center */
    gap: 16px !important;
    width: 100% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 40px 100px !important;
    box-sizing: border-box !important;
    color: #fff !important;
}

.dynamic-hero-title {
    margin: 0 !important;
    max-width: 700px !important;
    font-size: 48px !important;
    font-weight: 500 !important;
    color: #fff !important;
}

.dynamic-hero-subtitle {
    margin: 0 !important;
    max-width: 700px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #fff !important;
    line-height: 1.5 !important;
}

.dynamic-hero-btn {
    display: inline-block !important;
    padding: 12px 24px 12px 24px !important; /* desktop: top 12 right 24 bottom 12 left 24 */
    background: #FFFFFF !important;
    color: #000000 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 0px !important;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dynamic-hero-btn:hover {
    background: #072653 !important;
    color: #FFFFFF !important;
}

/* ---------- Progress bar nav ---------- */
.dynamic-hero-progress {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 32px !important;
    z-index: 3 !important;
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
}

.dynamic-hero-progress-seg {
    flex: none !important; /* was flex:1 — that stretched each segment across the full row */
    width: 48px !important;
    height: 2px !important;
    background: rgba(255,255,255,0.35) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.dynamic-hero-progress-fill {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    background: var(--dfp-primary, #D2AE5B) !important;
    transform: scaleX(0);
    transform-origin: left !important;
}

/* transition is intentionally NOT set here — JS sets it inline on every
   slide change (see startFill/resetFill in the JS file). A leftover
   !important transition rule here previously referenced the old `width`
   property and could have silently overridden the JS's inline transition,
   the same class of bug as the earlier max-height/width issues. */

/* ---------- Breakpoints ---------- */
@media (max-width: 1024px) {
    .dynamic-hero-content { padding: 0 32px 90px !important; }
    .dynamic-hero-title { font-size: 34px !important; max-width: 100% !important; }
    .dynamic-hero-subtitle { max-width: 100% !important; }
    .dynamic-hero-progress { padding: 0 32px !important; }
}

@media (max-width: 767px) {
    .dynamic-hero-content {
        padding: 0 24px 80px !important;
    }
    .dynamic-hero-title { font-size: 26px !important; }
    .dynamic-hero-subtitle { font-size: 15px !important; }
    .dynamic-hero-btn { padding: 10px 18px 10px 18px !important; }
    .dynamic-hero-progress { padding: 0 24px !important; bottom: 20px !important; }
}