/* Editorial hero: styles are scoped so other theme sliders keep their own layout. */
.tt-brand .tt-home-hero { position: relative; isolation: isolate; width: 100%; height: clamp(480px, 62svh, 560px); top: 0; margin: 0 !important; overflow: hidden; background: var(--tt-primary); color: #fff; direction: rtl; font-family: var(--tt-font); touch-action: pan-y pinch-zoom; }
.tt-home-hero [hidden] { display: none !important; }
.tt-home-hero .slide-home { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; pointer-events: none; z-index: 0; transition: opacity .5s ease, visibility 0s .5s; }
.tt-home-hero .slide-home.active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; transition-delay: 0s; }
.tt-home-hero .tt-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tt-home-hero .tt-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(7 45 46 / 16%) 0%, rgb(7 45 46 / 52%) 50%, rgb(4 31 33 / 88%) 100%); pointer-events: none; }
.tt-home-hero .tt-hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px 80px 84px; text-align: center; }
.tt-home-hero .tt-hero-category { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 8px 13px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 4px; background: rgb(7 45 46 / 60%); color: #fff; font: 400 12px/1.5 var(--tt-font); overflow-wrap: anywhere; }
.tt-home-hero .tt-hero-category span { width: 6px; height: 6px; border-radius: 50%; background: var(--tt-accent); flex: 0 0 6px; }
.tt-home-hero .tt-hero-category:hover { background: var(--tt-primary); color: #fff; }
.tt-home-hero .tt-hero-title { max-width: 850px; margin: 0; padding: 0; color: #fff; font: 700 clamp(30px, 3vw, 42px)/1.45 var(--tt-font); text-wrap: balance; }
.tt-home-hero .tt-hero-title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; color: #fff !important; text-decoration: none; text-shadow: 0 2px 12px rgb(0 0 0 / 16%); }
.tt-home-hero .tt-hero-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.tt-home-hero .tt-hero-cta { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 10px 18px; border: 1px solid #fff; border-radius: 4px; background: #fff; color: var(--tt-primary); font: 700 14px/1.5 var(--tt-font); box-shadow: none; text-decoration: none; }
.tt-home-hero .tt-hero-cta:hover { background: var(--tt-paper); color: var(--tt-primary-hover); border-color: var(--tt-paper); }
.tt-home-hero .tt-hero-cta svg { width: 18px; height: 18px; }
.tt-home-hero .tt-hero-arrow, .tt-home-hero .tt-hero-pause { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 0; margin: 0; border: 1px solid rgb(255 255 255 / 40%); border-radius: 4px; background: rgb(7 45 46 / 44%); color: #fff; cursor: pointer; box-shadow: none; }
.tt-home-hero .tt-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.tt-home-hero .tt-hero-prev { inset-inline-start: 24px; }
.tt-home-hero .tt-hero-next { inset-inline-end: 24px; }
.tt-home-hero .tt-hero-arrow svg { width: 22px; height: 22px; }
.tt-home-hero .tt-hero-arrow:hover, .tt-home-hero .tt-hero-pause:hover { background: var(--tt-primary); border-color: #fff; color: #fff; }
.tt-home-hero .tt-hero-toolbar { position: absolute; bottom: 20px; inset-inline: 60px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 16px; }
.tt-home-hero .tt-hero-counter { white-space: nowrap; font: 400 12px/1.5 Arial, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.tt-home-hero .tt-hero-current { font-weight: 700; }
.tt-home-hero .tt-hero-counter-divider { opacity: .6; }
.tt-home-hero .tt-hero-progress { display: block; width: 100px; height: 3px; background: rgb(255 255 255 / 30%); overflow: hidden; }
.tt-home-hero .tt-hero-progress > span { display: block; width: 100%; height: 100%; background: var(--tt-accent); transform: scaleX(var(--tt-hero-progress, 0)); transform-origin: right; }
.tt-home-hero .tt-hero-pause > span { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.tt-home-hero .tt-hero-pause[aria-pressed="true"] > span { width: 0; height: 0; border: solid transparent; border-width: 7px 0 7px 10px; border-left-color: currentColor; }
.tt-home-hero :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 767px) {
  .tt-brand .tt-home-hero { height: clamp(360px, 52svh, 420px); }
  .tt-home-hero .tt-hero-content { padding: 26px 54px 78px; gap: 12px; }
  .tt-home-hero .tt-hero-title { font-size: clamp(22px, 5.8vw, 28px); line-height: 1.45; }
  .tt-home-hero .tt-hero-title a { -webkit-line-clamp: 4; }
  .tt-home-hero .tt-hero-category { font-size: 11px; padding-inline: 10px; }
  .tt-home-hero .tt-hero-cta { font-size: 13px; padding-inline: 14px; gap: 8px; }
  .tt-home-hero .tt-hero-prev { inset-inline-start: 8px; }
  .tt-home-hero .tt-hero-next { inset-inline-end: 8px; }
  .tt-home-hero .tt-hero-toolbar { bottom: 14px; inset-inline: 24px; gap: 12px; }
  .tt-home-hero .tt-hero-progress { width: 80px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .tt-brand .tt-home-hero { height: 360px; }
  .tt-home-hero .tt-hero-content { padding-block: 20px 70px; gap: 10px; }
  .tt-home-hero .tt-hero-title { font-size: 24px; }
  .tt-home-hero .tt-hero-title a { -webkit-line-clamp: 3; }
}
@media (prefers-reduced-motion: reduce) { .tt-home-hero .slide-home { transition: none; } }
