.hit-screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;color:#111!important;background:#fff!important} .hit-history-hero{--hit-hero-height-desktop:760px;--hit-hero-height-mobile:620px;--hit-hero-image-position-x:50%;--hit-hero-image-position-y:50%;position:relative;width:100%!important;max-width:100%!important;height:var(--hit-hero-height-desktop);margin:0!important;padding:0!important;left:auto!important;right:auto!important;transform:none!important;box-sizing:border-box!important;background:#181416!important;overflow:hidden;direction:rtl;isolation:isolate;color:#fff;font-family:"Heebo",Arial,sans-serif!important;contain:layout paint} .hit-hero-track,.hit-hero-slide{position:absolute;inset:0;width:100%;height:100%} .hit-hero-slide{display:flex;align-items:flex-end;padding-bottom:max(clamp(42px,8vh,96px),env(safe-area-inset-bottom));box-sizing:border-box;visibility:hidden;opacity:0;pointer-events:none;z-index:1;transition:opacity .82s cubic-bezier(.22,.61,.36,1),visibility 0s linear .84s} .hit-hero-slide.is-active{visibility:visible;opacity:1;pointer-events:auto;z-index:2;transition:opacity .82s cubic-bezier(.22,.61,.36,1),visibility 0s linear 0s} .hit-hero-slide::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(10,8,9,.9) 0%,rgba(10,8,9,.82) 22%,rgba(10,8,9,.68) 42%,rgba(10,8,9,.56) 56%,rgba(10,8,9,.36) 67%,rgba(10,8,9,.12) 76%,rgba(10,8,9,0) 84%)} .hit-hero-image{position:absolute;inset:0;display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:var(--hit-hero-image-position-x) var(--hit-hero-image-position-y)!important;transform-origin:var(--hit-hero-image-position-x) var(--hit-hero-image-position-y);z-index:1;background:#181416;will-change:auto;backface-visibility:hidden} .hit-hero-slide.is-active:nth-child(odd) .hit-hero-image{will-change:transform;animation:hitHeroImageOdd 7.4s cubic-bezier(.18,.7,.25,1) both} .hit-hero-slide.is-active:nth-child(even) .hit-hero-image{will-change:transform;animation:hitHeroImageEven 7.4s cubic-bezier(.18,.7,.25,1) both} @keyframes hitHeroImageOdd{0%{transform:scale(1.012) translate3d(0,0,0)}100%{transform:scale(1.048) translate3d(-.55%,-.25%,0)}} @keyframes hitHeroImageEven{0%{transform:scale(1.012) translate3d(0,0,0)}100%{transform:scale(1.048) translate3d(.55%,-.25%,0)}} .hit-hero-content{position:relative;z-index:3;width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(22px,4vw,52px);box-sizing:border-box;color:#fff!important} .hit-hero-slide.is-active .hit-hero-content{animation:hitHeroContentIn .72s .12s cubic-bezier(.2,.7,.2,1) both} @keyframes hitHeroContentIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}} .hit-hero-copy{position:relative;width:min(940px,calc(100% - 110px));max-width:100%;padding:0;box-sizing:border-box;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important} .hit-history-hero .hit-hero-category,.hit-history-hero a.hit-hero-category,.hit-history-hero a.hit-hero-category:visited{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;margin:0 0 16px!important;padding:8px 15px!important;box-sizing:border-box!important;border:1px solid rgba(212,175,55,.64)!important;border-radius:5px!important;background:#4c2d33!important;color:#fff!important;font-size:.88rem!important;font-weight:800!important;letter-spacing:.4px;text-decoration:none!important;box-shadow:0 3px 12px rgba(0,0,0,.18)!important;transition:background .2s ease,color .2s ease,transform .2s ease!important;touch-action:manipulation} .hit-history-hero a.hit-hero-category:hover,.hit-history-hero a.hit-hero-category:focus-visible{background:#d4af37!important;color:#241a04!important;transform:translateY(-1px)} .hit-hero-content h2{max-width:980px;margin:0 0 15px!important;color:#fff!important;font-size:clamp(1.8rem,5vw,4.15rem)!important;font-weight:900!important;line-height:1.1!important;letter-spacing:-.02em;text-wrap:balance;-webkit-text-stroke:0!important;paint-order:normal;text-shadow:0 2px 10px rgba(0,0,0,.28)!important} .hit-hero-content p{max-width:780px;margin:0 0 26px!important;color:#fff!important;font-size:clamp(1rem,1.75vw,1.22rem)!important;font-weight:600!important;line-height:1.62!important;-webkit-text-stroke:0!important;paint-order:normal;text-shadow:0 1px 6px rgba(0,0,0,.24)!important} .hit-history-hero .hit-hero-button,.hit-history-hero a.hit-hero-button,.hit-history-hero a.hit-hero-button:visited{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;min-width:48px!important;min-height:48px!important;padding:12px 27px!important;box-sizing:border-box!important;border:1px solid rgba(255,255,255,.84)!important;border-radius:5px!important;background:#f7f4ee!important;color:#241c1f!important;font-size:1.05rem!important;font-weight:800!important;text-decoration:none!important;box-shadow:0 6px 18px rgba(0,0,0,.24)!important;transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease!important;width:auto!important;max-width:100%!important;flex:0 0 auto!important;line-height:1.35!important;-webkit-text-fill-color:#241c1f!important;touch-action:manipulation} .hit-history-hero .hit-hero-button:hover,.hit-history-hero .hit-hero-button:focus-visible{background:#d4af37!important;color:#211704!important;transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.28)!important;-webkit-text-fill-color:#211704!important} .hit-history-hero a.hit-hero-button>span{display:inline!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;opacity:1!important;visibility:visible!important} .hit-history-hero a.hit-hero-button svg,.hit-history-hero a.hit-hero-button svg path{color:inherit!important;stroke:currentColor!important;opacity:1!important;visibility:visible!important} .hit-hero-button svg,.hit-hero-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .hit-hero-progress{position:absolute;z-index:6;top:0;right:0;left:0;height:4px;background:rgba(15,12,13,.38);overflow:hidden} .hit-hero-progress span{display:block;width:100%;height:100%;background:#d4af37!important;transform:scaleX(0);transform-origin:right center;transition:transform .3s ease;will-change:transform} .hit-history-hero .hit-hero-arrow{position:absolute;z-index:7;top:50%;display:flex!important;align-items:center!important;justify-content:center!important;width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important;margin-top:-28px!important;padding:0!important;box-sizing:border-box!important;border:1px solid rgba(212,175,55,.62)!important;border-radius:50%!important;background:rgba(14,10,12,.56)!important;color:#f1cf66!important;box-shadow:0 3px 12px rgba(0,0,0,.22)!important;cursor:pointer;opacity:.3;transform:scale(.94);transition:opacity .25s ease,transform .25s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease!important;touch-action:manipulation} .hit-hero-next{right:max(18px,env(safe-area-inset-right))}.hit-hero-prev{left:max(18px,env(safe-area-inset-left))} .hit-hero-controls{position:absolute;z-index:7;bottom:20px;left:max(20px,env(safe-area-inset-left));display:flex;align-items:center;gap:12px} .hit-history-hero .hit-hero-playpause{display:flex!important;align-items:center!important;justify-content:center!important;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;margin:0!important;padding:0!important;box-sizing:border-box!important;border:2px solid rgba(212,175,55,.9)!important;border-radius:50%!important;background:rgba(14,10,12,.9)!important;color:#f1cf66!important;box-shadow:0 5px 18px rgba(0,0,0,.34)!important;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease!important;touch-action:manipulation} .hit-history-hero .hit-hero-playpause:hover{background:#d4af37!important;color:#1a1502!important;transform:scale(1.05)} .hit-hero-playpause svg{width:18px;height:18px;fill:currentColor}.hit-icon-play{display:none}.hit-hero-playpause.is-paused .hit-icon-play{display:block}.hit-hero-playpause.is-paused .hit-icon-pause{display:none} .hit-hero-counter{min-height:36px;padding:7px 13px;box-sizing:border-box;border:1px solid rgba(212,175,55,.75);border-radius:20px;background:rgba(14,10,12,.9);color:#fff;font-size:.88rem;font-weight:700;line-height:20px;direction:ltr;box-shadow:0 5px 16px rgba(0,0,0,.28)} .hit-history-hero :is(a,button):focus-visible{outline:3px solid #fff!important;outline-offset:3px!important;box-shadow:0 0 0 6px #4c2d33!important} @media (max-width:1024px){.hit-history-hero .hit-hero-arrow{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;margin-top:-24px!important}.hit-hero-next{right:max(8px,env(safe-area-inset-right))}.hit-hero-prev{left:max(8px,env(safe-area-inset-left))}.hit-hero-copy{width:min(850px,calc(100% - 86px))}} @media (max-width:768px){.hit-history-hero{height:var(--hit-hero-height-mobile)}.hit-hero-slide{padding-bottom:max(76px,env(safe-area-inset-bottom))}.hit-hero-slide::after{background:linear-gradient(to top,rgba(10,8,9,.93) 0%,rgba(10,8,9,.87) 30%,rgba(10,8,9,.72) 50%,rgba(10,8,9,.58) 66%,rgba(10,8,9,.42) 76%,rgba(10,8,9,.16) 85%,rgba(10,8,9,0) 92%)}.hit-hero-content{padding:0 20px}.hit-hero-copy{width:100%}.hit-history-hero .hit-hero-button{min-height:48px!important;padding:12px 23px!important;font-size:1rem!important}.hit-hero-controls{bottom:14px;left:max(14px,env(safe-area-inset-left))}.hit-hero-content h2{font-size:clamp(1.65rem,7.5vw,2.7rem)!important;line-height:1.12!important}.hit-hero-content p{font-size:clamp(.98rem,4vw,1.08rem)!important;line-height:1.55!important}} @media (max-width:680px){.hit-hero-content p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}} @media (max-width:420px){.hit-hero-content{padding:0 17px}.hit-history-hero .hit-hero-category{margin-bottom:12px!important}.hit-hero-content h2{margin-bottom:12px!important}.hit-hero-content p{margin-bottom:20px!important}.hit-hero-counter{display:none}} @media (prefers-reduced-motion:reduce){.hit-hero-slide{transition:none!important}.hit-hero-slide.is-active .hit-hero-image,.hit-hero-slide.is-active .hit-hero-content{animation:none!important}.hit-history-hero .hit-hero-category,.hit-history-hero .hit-hero-button,.hit-history-hero .hit-hero-arrow,.hit-hero-progress span{transition:none!important}.hit-hero-playpause{display:none!important}} @media (forced-colors:active){.hit-hero-slide::after{display:none}.hit-hero-content h2,.hit-hero-content p{color:CanvasText!important;-webkit-text-stroke:0!important;text-shadow:none!important;background:Canvas!important}.hit-history-hero .hit-hero-category,.hit-history-hero .hit-hero-button,.hit-history-hero .hit-hero-arrow,.hit-history-hero .hit-hero-playpause{forced-color-adjust:auto;border:2px solid ButtonText!important;background:Canvas!important;color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}.hit-history-hero :is(a,button):focus-visible{outline:3px solid Highlight!important;box-shadow:none!important}} /* Live Coverage indicator ------------------------------------------------- * Server-rendered only when the hero item is an actively updating report. * The existing category chip keeps its size and position; only a small live * dot is added inside it. The pulse uses compositor-friendly opacity/transform * and is paused on inactive slides, so carousel performance is unchanged. */ .hit-hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 16px!important;min-height:44px} .hit-history-hero .hit-hero-meta .hit-hero-category{margin:0!important} .hit-history-hero .hit-hero-category.is-live{gap:8px!important} .hit-hero-live-dot{position:relative;display:inline-block;width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#e02d46;box-shadow:0 0 0 1px rgba(255,255,255,.24)} .hit-hero-live-dot::after{content:"";position:absolute;inset:-4px;border:1.5px solid rgba(224,45,70,.76);border-radius:50%;transform:scale(.72);opacity:.86;animation:hitHeroLivePulse 1.45s ease-out infinite;pointer-events:none} .hit-hero-slide:not(.is-active) .hit-hero-live-dot::after{animation-play-state:paused} @keyframes hitHeroLivePulse{0%{transform:scale(.72);opacity:.86}70%,100%{transform:scale(1.9);opacity:0}} /* Touch devices can retain CSS :hover after a tap. Explicit touch-state * colors prevent a theme rule from producing white text on a white surface. */ @media (hover:none),(pointer:coarse){ .hit-history-hero a.hit-hero-category:hover,.hit-history-hero a.hit-hero-category:active{background:#4c2d33!important;color:#fff!important;-webkit-text-fill-color:#fff!important;transform:none!important} .hit-history-hero .hit-hero-button:hover,.hit-history-hero .hit-hero-button:active{background:#f7f4ee!important;color:#241c1f!important;-webkit-text-fill-color:#241c1f!important;transform:none!important} .hit-history-hero .hit-hero-playpause:hover,.hit-history-hero .hit-hero-playpause:active{background:rgba(14,10,12,.9)!important;color:#f1cf66!important;transform:none!important} } @media (max-width:768px){ .hit-hero-meta{gap:7px;margin-bottom:13px!important;min-height:40px} .hit-history-hero .hit-hero-category.is-live{gap:7px!important} .hit-hero-live-dot{width:7px;height:7px;flex-basis:7px} } @media (max-width:420px){.hit-history-hero .hit-hero-meta .hit-hero-category{margin:0!important}.hit-hero-meta{margin-bottom:12px!important}} @media (prefers-reduced-motion:reduce){.hit-hero-live-dot::after{animation:none!important;display:none!important}} @media (forced-colors:active){.hit-hero-live-dot{background:Highlight!important;box-shadow:none!important}.hit-hero-live-dot::after{display:none!important}} /* Dynamic CTA labels ------------------------------------------------------ * Some editorial post types have longer action text. Keep the existing * visual language while preventing narrow-screen overflow. */ .hit-history-hero .hit-hero-button{max-width:100%;white-space:normal;text-align:center} .hit-history-hero .hit-hero-button>span{min-width:0;overflow-wrap:anywhere} @media (max-width:420px){.hit-history-hero .hit-hero-button{width:fit-content;max-width:100%;padding-inline:18px!important}} /* Touch gesture handling: allow horizontal carousel swipes without blocking * ordinary vertical page scrolling. */ @media (hover:none),(pointer:coarse){ .hit-history-hero{touch-action:pan-y pinch-zoom} .hit-history-hero .hit-hero-controls,.hit-history-hero .hit-hero-arrow{z-index:8!important} .hit-history-hero a.hit-hero-category,.hit-history-hero a.hit-hero-button, .hit-history-hero button.hit-hero-playpause,.hit-history-hero button.hit-hero-arrow{touch-action:manipulation} } @media (max-width:768px){ /* Use the configured mobile height, but never allow viewport quirks to make * the hero narrower than its container or horizontally scrollable. */ .hit-history-hero{ width:100%!important; max-width:100%!important; min-width:0!important; overflow:hidden!important; } .hit-hero-track, .hit-hero-slide, .hit-hero-content, .hit-hero-copy{ min-width:0; max-width:100%; box-sizing:border-box; } /* Reserve a little more breathing room around the fixed controls while * retaining the original composition and typography. */ .hit-hero-slide{ padding-bottom:max(82px,env(safe-area-inset-bottom))!important; } .hit-hero-content{ padding-right:max(18px,env(safe-area-inset-right))!important; padding-left:max(18px,env(safe-area-inset-left))!important; } .hit-hero-content h2, .hit-hero-content p{ max-width:100%!important; overflow-wrap:anywhere; } /* Keep side arrows clear of the screen edges and large enough to tap. */ .hit-history-hero .hit-hero-arrow{ width:48px!important; height:48px!important; min-width:48px!important; min-height:48px!important; margin-top:-24px!important; } .hit-history-hero .hit-hero-arrow svg{width:18px!important;height:18px!important;stroke-width:2.2!important} .hit-hero-next{right:max(10px,env(safe-area-inset-right))!important} .hit-hero-prev{left:max(10px,env(safe-area-inset-left))!important} .hit-history-hero .hit-hero-playpause{ width:48px!important; height:48px!important; min-width:48px!important; min-height:48px!important; } } @media (max-width:420px){ .hit-hero-content{ padding-right:max(16px,env(safe-area-inset-right))!important; padding-left:max(16px,env(safe-area-inset-left))!important; } .hit-history-hero .hit-hero-button{ max-width:100%!important; } } /* Accessibility and rendering safeguards - v2.7.3 ---------------------- */ @media (prefers-reduced-motion:reduce){ .hit-history-hero .hit-hero-slide, .hit-history-hero .hit-hero-content, .hit-history-hero .hit-hero-image, .hit-history-hero .hit-hero-progress span, .hit-history-hero :is(a,button){ animation:none!important; transition-duration:.01ms!important; transition-delay:0s!important; } .hit-history-hero .hit-hero-image{transform:none!important;will-change:auto!important} } @media (forced-colors:active){ .hit-history-hero .hit-hero-arrow, .hit-history-hero .hit-hero-playpause, .hit-history-hero .hit-hero-counter{ forced-color-adjust:auto!important; background:Canvas!important; color:CanvasText!important; border:2px solid ButtonText!important; box-shadow:none!important; opacity:1!important; } .hit-history-hero :is(a,button):focus-visible{outline:3px solid Highlight!important;box-shadow:none!important} } /* v2.7.4 - contextual carousel navigation. All selector changes are confined * to the existing hero. Invisible arrows retain their 48/56px hit areas so the * initial mobile tap still reveals them. Focus-visible always reveals controls. */ .hit-history-hero{ --hit-nav-ink:#fff; --hit-nav-surface:rgba(34,24,29,.84); --hit-nav-border:rgba(255,255,255,.78); } .hit-history-hero .hit-hero-arrow{ color:var(--hit-nav-ink)!important; background:var(--hit-nav-surface)!important; border-color:var(--hit-nav-border)!important; box-shadow:0 3px 14px rgba(0,0,0,.25)!important; opacity:0!important; transform:translateY(7px) scale(.94)!important; pointer-events:auto!important; transition:opacity .36s cubic-bezier(.2,.7,.2,1),transform .36s cubic-bezier(.2,.7,.2,1),background .2s ease,border-color .2s ease,box-shadow .2s ease!important; } /* Hover is only meaningful with a real hover-capable primary pointer. */ @media (hover:hover) and (pointer:fine){ .hit-history-hero:hover .hit-hero-arrow{ opacity:.70!important;transform:translateY(0) scale(1)!important; } .hit-history-hero .hit-hero-arrow:hover{ opacity:1!important;background:#4c2d33!important; border-color:#fff!important;box-shadow:0 6px 22px rgba(0,0,0,.36)!important; transform:translateY(0) scale(1.06)!important; } } /* Touch reveal is state-driven, never dependent on the browser's sticky :hover * or :focus-within behaviour after a tap. */ @media (hover:none),(pointer:coarse){ .hit-history-hero .hit-hero-arrow, .hit-history-hero:hover .hit-hero-arrow, .hit-history-hero .hit-hero-arrow:focus:not(:focus-visible){ opacity:0!important;transform:translateY(7px) scale(.94)!important; background:var(--hit-nav-surface)!important;border-color:var(--hit-nav-border)!important; } .hit-history-hero.is-touch-active .hit-hero-arrow, .hit-history-hero.is-touch-hint .hit-hero-arrow{ opacity:.76!important;transform:translateY(0) scale(1)!important; } .hit-history-hero.is-touch-active .hit-hero-arrow:active{ opacity:1!important;background:#4c2d33!important; transform:translateY(0) scale(.97)!important; } } /* Keyboard navigation must always make focused navigation visible, including * on tablet keyboards and when controls have timed out after touch. */ .hit-history-hero .hit-hero-arrow:focus-visible, .hit-history-hero:hover .hit-hero-arrow:focus-visible{ opacity:1!important;transform:translateY(0) scale(1)!important; background:#4c2d33!important;border-color:#fff!important; } @media (prefers-reduced-motion:reduce){ .hit-history-hero .hit-hero-arrow{transition:none!important;transform:none!important} } @media (forced-colors:active){ .hit-history-hero .hit-hero-arrow{ color:ButtonText!important;background:ButtonFace!important; border:2px solid ButtonText!important;box-shadow:none!important; } .hit-history-hero.is-touch-active .hit-hero-arrow, .hit-history-hero.is-touch-hint .hit-hero-arrow, .hit-history-hero:hover .hit-hero-arrow, .hit-history-hero .hit-hero-arrow:focus-visible{opacity:1!important} } /* 2.8.0: accessible segmented navigation and measured mobile typography. */ .hit-history-hero .hit-hero-jump{ display:flex;align-items:center;justify-content:center;gap:3px; min-width:0;width:clamp(116px,18vw,208px);height:48px; padding:0 4px;border-radius:9px;background:rgba(25,17,20,.80); border:1px solid rgba(255,255,255,.42);direction:rtl; } .hit-history-hero .hit-hero-jump-item{ position:relative;display:flex;align-items:center;justify-content:center; flex:1 1 0;min-width:0;height:44px;margin:0;padding:0 1px; border:0;border-radius:4px;background:transparent;box-shadow:none; color:#f7f4ee;cursor:pointer;touch-action:manipulation; } .hit-history-hero .hit-hero-jump-line{ display:block;width:100%;height:4px;border-radius:4px; background:rgba(255,255,255,.42);transition:background .22s ease,height .22s ease; } .hit-history-hero .hit-hero-jump-item.is-current .hit-hero-jump-line{ height:5px;background:#f7f4ee; } @media (hover:hover) and (pointer:fine){ .hit-history-hero .hit-hero-jump-item:hover .hit-hero-jump-line, .hit-history-hero .hit-hero-jump-item:focus-visible .hit-hero-jump-line{ height:7px;background:#fff; } } .hit-history-hero .hit-hero-arrow{ transform:translateX(0) scale(.96)!important; pointer-events:none!important; } .hit-history-hero .hit-hero-next{transform:translateX(9px) scale(.96)!important} .hit-history-hero .hit-hero-prev{transform:translateX(-9px) scale(.96)!important} @media (hover:hover) and (pointer:fine){ .hit-history-hero:hover .hit-hero-arrow{opacity:.74!important;transform:translateX(0) scale(1)!important;pointer-events:auto!important} .hit-history-hero .hit-hero-arrow:hover{opacity:1!important;transform:translateX(0) scale(1.045)!important} } @media (hover:none),(pointer:coarse){ .hit-history-hero.is-touch-active .hit-hero-arrow, .hit-history-hero.is-touch-hint .hit-hero-arrow{ opacity:.82!important;transform:translateX(0) scale(1)!important;pointer-events:auto!important; } } .hit-history-hero .hit-hero-arrow:focus-visible{ opacity:1!important;transform:translateX(0) scale(1)!important; pointer-events:auto!important; } @media (max-width:768px){ .hit-history-hero .hit-hero-jump{width:clamp(112px,38vw,172px);gap:2px;height:46px} .hit-history-hero .hit-hero-jump-item{height:44px} .hit-history-hero .hit-hero-controls{gap:8px} .hit-history-hero .hit-hero-content h2{ font-size:clamp(1.52rem,6.8vw,2.5rem)!important; line-height:1.17!important; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4; overflow:hidden;overflow-wrap:break-word; } .hit-history-hero .hit-hero-content p{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3; overflow:hidden;font-size:clamp(.95rem,3.8vw,1.08rem)!important; } } @media (max-width:390px){ .hit-history-hero .hit-hero-jump{width:clamp(110px,36vw,140px)} .hit-history-hero .hit-hero-content h2{-webkit-line-clamp:3} .hit-history-hero .hit-hero-content p{-webkit-line-clamp:2} } @media (prefers-reduced-motion:reduce){ /* Button remains available for explicit user-started rotation. */ .hit-history-hero .hit-hero-playpause{display:flex!important} .hit-history-hero .hit-hero-jump-line{transition:none!important} .hit-history-hero .hit-hero-arrow, .hit-history-hero .hit-hero-next,.hit-history-hero .hit-hero-prev{ transform:none!important;transition:none!important; } } @media (forced-colors:active){ .hit-history-hero .hit-hero-jump{border:1px solid ButtonText;background:Canvas} .hit-history-hero .hit-hero-jump-line{background:ButtonText} .hit-history-hero .hit-hero-jump-item.is-current .hit-hero-jump-line{ background:Highlight;height:8px; } } /* Accessible native direct-jump fallback when editors configure 9-20 items. */ .hit-history-hero .hit-hero-select-wrap{display:flex;align-items:center;max-width:min(240px,48vw);height:48px} .hit-history-hero .hit-hero-select{box-sizing:border-box;min-height:44px;width:100%;max-width:100%;padding:6px 9px;background:#332127;color:#fff;border:1px solid #e1d9d7;border-radius:6px;font:700 .84rem "Heebo",Arial,sans-serif;cursor:pointer} .hit-history-hero .hit-hero-select:focus-visible{outline:3px solid #fff;outline-offset:3px} @media (max-width:420px){.hit-history-hero .hit-hero-select-wrap{max-width:38vw}} @media (forced-colors:active){.hit-history-hero .hit-hero-select{background:Canvas;color:CanvasText;border-color:ButtonText}} /* v2.8.1: centered segmented navigation, bounded shared tooltip, subtle CTA feedback. * New rules are scoped to this hero only. Other carousel behavior is unchanged. */ /* v2.8.2: place the segmented navigation at the actual geometrical * center of the hero, independently of the playback button and RTL flex. */ .hit-history-hero .hit-hero-controls { position:absolute!important;left:0!important;right:0!important; bottom:max(20px,env(safe-area-inset-bottom))!important; width:100%!important;max-width:none!important;height:50px!important; margin:0!important;padding:0!important;box-sizing:border-box!important; display:block!important;transform:none!important;pointer-events:none; } .hit-history-hero .hit-hero-controls > .hit-hero-jump, .hit-history-hero .hit-hero-controls > .hit-hero-select-wrap { position:absolute!important;left:50%!important;right:auto!important; top:50%!important;transform:translate(-50%,-50%)!important; margin:0!important;pointer-events:auto;z-index:1; } .hit-history-hero .hit-hero-controls > .hit-hero-playpause { position:absolute!important;left:max(20px,env(safe-area-inset-left))!important; right:auto!important;top:50%!important; transform:translateY(-50%)!important;margin:0!important; pointer-events:auto;z-index:2; } @media (hover:hover) and (pointer:fine){ .hit-history-hero .hit-hero-controls > .hit-hero-playpause:hover { transform:translateY(-50%) scale(1.05)!important } } .hit-history-hero .hit-hero-jump {overflow:visible!important;isolation:isolate} /* A real HTML node, not generated pseudo-content, so even long titles * stay inside their background. The entire bubble is centered over the rail. */ .hit-history-hero .hit-hero-jump > .hit-hero-jump-tooltip { display:block!important;position:absolute!important;z-index:15!important; left:50%!important;right:auto!important;bottom:calc(100% + 12px)!important; transform:translate(-50%,8px)!important; width:min(420px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important; min-width:0!important;height:auto!important;max-height:none!important; padding:11px 15px!important;margin:0!important;box-sizing:border-box!important; border:1px solid rgba(247,244,238,.72)!important;border-radius:11px!important; background:#312026!important;color:#fff!important; font:700 clamp(.84rem,1.25vw,.98rem)/1.5 "Heebo",Arial,sans-serif!important; direction:rtl!important;text-align:center!important;white-space:normal!important; word-break:normal!important;overflow-wrap:anywhere!important;hyphens:auto!important; box-shadow:0 9px 28px rgba(0,0,0,.36)!important; visibility:hidden!important;opacity:0!important;pointer-events:none!important; transition:opacity .22s ease,transform .22s ease,visibility .22s ease!important; } .hit-history-hero .hit-hero-jump.is-tooltip-visible > .hit-hero-jump-tooltip { visibility:visible!important;opacity:1!important;transform:translate(-50%,0)!important; } .hit-history-hero .hit-hero-category:is(a),.hit-history-hero a.hit-hero-button { will-change:auto; transition:background-color .25s ease,border-color .25s ease,color .25s ease, transform .3s cubic-bezier(.22,.65,.25,1),box-shadow .3s ease!important; } .hit-history-hero .hit-hero-button svg {transition:transform .28s ease!important} @media (hover:hover) and (pointer:fine){ .hit-history-hero a.hit-hero-category:hover,.hit-history-hero a.hit-hero-category:focus-visible { background:#69404a!important;color:#fff!important;-webkit-text-fill-color:#fff!important; border-color:#f7f4ee!important;transform:translateY(-3px)!important; box-shadow:0 8px 20px rgba(0,0,0,.3),0 0 0 2px rgba(255,255,255,.1)!important; } .hit-history-hero a.hit-hero-button:hover,.hit-history-hero a.hit-hero-button:focus-visible { background:#fff!important;color:#38252b!important;-webkit-text-fill-color:#38252b!important; transform:translateY(-3px)!important;box-shadow:0 11px 28px rgba(0,0,0,.38)!important; border-color:#fff!important; } .hit-history-hero a.hit-hero-button:is(:hover,:focus-visible) svg {transform:translateX(-4px)} } @media (hover:none),(pointer:coarse){ .hit-history-hero a.hit-hero-category:active {transform:scale(.98)!important;background:#69404a!important} .hit-history-hero a.hit-hero-button:active {transform:scale(.985)!important;background:#fff!important} } @media (max-width:768px){ .hit-history-hero .hit-hero-controls {bottom:max(14px,env(safe-area-inset-bottom))!important} .hit-history-hero .hit-hero-controls > .hit-hero-playpause {left:max(14px,env(safe-area-inset-left))!important} } @media (max-width:420px){ } @media (prefers-reduced-motion:reduce){ .hit-history-hero .hit-hero-button svg{transition:none!important} .hit-history-hero .hit-hero-controls > .hit-hero-playpause {transform:translateY(-50%)!important} .hit-history-hero a.hit-hero-category,.hit-history-hero a.hit-hero-button {transform:none!important} } @media (forced-colors:active){ } /* A keyboard focus ring and hover feedback remain clear on hybrid touch devices. */ .hit-history-hero a.hit-hero-category:focus-visible { background:#69404a!important;color:#fff!important;-webkit-text-fill-color:#fff!important; border-color:#fff!important;box-shadow:0 0 0 4px #4c2d33!important; } .hit-history-hero a.hit-hero-button:focus-visible { background:#fff!important;color:#38252b!important;-webkit-text-fill-color:#38252b!important; } @media (max-width:768px){ .hit-history-hero .hit-hero-controls {bottom:max(14px,env(safe-area-inset-bottom))!important} .hit-history-hero .hit-hero-controls > .hit-hero-playpause {left:max(14px,env(safe-area-inset-left))!important} } @media (max-width:420px){ .hit-history-hero .hit-hero-jump > .hit-hero-jump-tooltip { width:calc(100vw - 28px)!important;max-width:calc(100vw - 28px)!important;padding:10px 12px!important; } } @media (prefers-reduced-motion:reduce){ .hit-history-hero .hit-hero-jump > .hit-hero-jump-tooltip {transition:none!important} } @media (forced-colors:active){ .hit-history-hero .hit-hero-jump > .hit-hero-jump-tooltip { background:Canvas!important;color:CanvasText!important;border:2px solid ButtonText!important; box-shadow:none!important; } } /* v2.8.3: Frameless centered slide bars. Keep the existing clickable targets, geometric centering, tooltip and play/pause placement unchanged. */ .hit-history-hero .hit-hero-jump { background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; padding:0!important; } @media (forced-colors:active){ .hit-history-hero .hit-hero-jump{ background:transparent!important; border:0!important; } } /* v2.9.8: isolated full-bleed video host. The actual