/* VAIO Hero Premium Rescue Final
   Restores a clean AAA hero composition. Text, CTA, preview art, arrows, dots and ticker each have a fixed zone.
   No element is allowed to overlap another on mobile or desktop. */

/* Neutralize previous experimental hero overrides that moved the CTA over text/art. */
.vaio-hero .vaio-hero-content,
.vaio-hero .vaio-hero-cta,
.vaio-hero .vaio-hero-art,
.vaio-hero .vaio-hero-dots,
.vaio-hero .vaio-news-ticker{
  box-sizing:border-box!important;
}

@media (min-width:901px){
  body.home .vaio-hero,
  .vaio-hero{
    min-height:640px!important;
    height:auto!important;
    overflow:hidden!important;
  }
  body.home .vaio-hero-slides,
  .vaio-hero-slides{
    min-height:590px!important;
    height:auto!important;
  }
  body.home .vaio-hero-slide,
  .vaio-hero-slide{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    align-items:center!important;
    gap:clamp(24px,4vw,70px)!important;
    min-height:590px!important;
    height:auto!important;
    padding:clamp(58px,6vw,88px) clamp(72px,7vw,120px) 108px!important;
    overflow:hidden!important;
  }
  body.lang-ar .vaio-hero-slide{direction:rtl!important;}

  .vaio-hero-content,
  body.lang-ar .vaio-hero-content{
    position:relative!important;
    z-index:8!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:auto!important;
    max-width:640px!important;
    padding:0!important;
    margin:0!important;
    text-align:start!important;
    direction:inherit!important;
    order:1!important;
  }
  body.lang-ar .vaio-hero-content{text-align:right!important;order:2!important;}

  .vaio-hero-title{margin:0 0 18px!important;max-width:100%!important;}
  .vaio-hero-sub{margin:0 0 26px!important;max-width:560px!important;}
  .vaio-hero-cta,
  body .vaio-hero .vaio-hero-cta,
  body.lang-ar .vaio-hero .vaio-hero-cta{
    position:relative!important;
    z-index:12!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
    width:auto!important;
    max-width:100%!important;
  }
  body.lang-ar .vaio-hero .vaio-hero-cta{justify-content:flex-start!important;}

  .vaio-hero-art,
  body.lang-ar .vaio-hero-art{
    position:relative!important;
    z-index:6!important;
    inset:auto!important;
    order:2!important;
    width:100%!important;
    min-height:360px!important;
    height:auto!important;
    max-height:none!important;
    display:grid!important;
    place-items:center!important;
    pointer-events:none!important;
  }
  body.lang-ar .vaio-hero-art{order:1!important;}
  .vaio-hero-art img,
  .vaio-hero-art .vaio-hero-char{
    max-height:390px!important;
    width:auto!important;
    max-width:100%!important;
    object-fit:contain!important;
    border-radius:24px!important;
  }

  .vaio-hero-dots,
  body .vaio-hero-dots[data-vaio-hero-dots]{
    bottom:64px!important;
    z-index:22!important;
  }
  .vaio-news-ticker{height:50px!important;min-height:50px!important;}
}

@media (max-width:900px){
  body.home .vaio-hero,
  .vaio-hero{
    position:relative!important;
    height:620px!important;
    min-height:620px!important;
    overflow:hidden!important;
    padding:0!important;
    --vaio-hero-ticker-h:46px;
  }
  body.home .vaio-hero-slides,
  .vaio-hero-slides{
    position:relative!important;
    height:calc(620px - var(--vaio-hero-ticker-h))!important;
    min-height:calc(620px - var(--vaio-hero-ticker-h))!important;
  }
  body.home .vaio-hero-slide,
  .vaio-hero-slide{
    position:absolute!important;
    inset:0 0 var(--vaio-hero-ticker-h) 0!important;
    display:block!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    overflow:hidden!important;
    background-size:cover!important;
    background-position:center!important;
  }

  /* Text zone: restored to the main reading side, away from preview image. */
  .vaio-hero-content,
  body.lang-ar .vaio-hero-content{
    position:absolute!important;
    z-index:12!important;
    top:92px!important;
    right:20px!important;
    left:auto!important;
    width:min(56vw, 315px)!important;
    max-width:min(56vw, 315px)!important;
    min-height:220px!important;
    padding:0!important;
    margin:0!important;
    text-align:right!important;
    direction:rtl!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
  }
  body:not(.lang-ar) .vaio-hero-content{
    left:20px!important;
    right:auto!important;
    text-align:left!important;
    direction:ltr!important;
  }

  .vaio-hero-eyebrow{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:44px!important;
    max-width:60px!important;
    height:24px!important;
    min-height:24px!important;
    margin:0 0 14px!important;
    padding:0 12px!important;
    font-size:0!important;
    line-height:0!important;
    overflow:hidden!important;
  }
  .vaio-hero-eyebrow .vaio-pulse-dot{width:8px!important;height:8px!important;margin:0!important;}

  .vaio-hero-title{
    font-size:clamp(29px, 8.1vw, 41px)!important;
    line-height:1.05!important;
    letter-spacing:-.7px!important;
    margin:0 0 10px!important;
    max-width:100%!important;
    min-height:92px!important;
    max-height:94px!important;
    overflow:hidden!important;
    display:block!important;
  }
  .vaio-hero-sub{
    font-size:clamp(13.5px, 3.65vw, 16px)!important;
    line-height:1.55!important;
    margin:0 0 16px!important;
    max-width:100%!important;
    min-height:44px!important;
    max-height:50px!important;
    color:rgba(226,232,255,.72)!important;
    overflow:hidden!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
  }

  /* CTA zone: inside text block under subtitle. It will not float over preview or ticker. */
  .vaio-hero .vaio-hero-cta,
  body .vaio-hero .vaio-hero-cta,
  body.lang-ar .vaio-hero .vaio-hero-cta{
    position:relative!important;
    z-index:24!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    pointer-events:auto!important;
  }
  .vaio-hero .vaio-hero-cta .vaio-btn,
  .vaio-hero .vaio-hero-cta a,
  .vaio-hero .vaio-hero-cta button{
    min-height:36px!important;
    height:36px!important;
    min-width:0!important;
    width:auto!important;
    padding:0 12px!important;
    border-radius:14px!important;
    font-size:12px!important;
    line-height:1!important;
    white-space:nowrap!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
  }

  /* Preview image zone: opposite side, below text zone, never under CTA. */
  .vaio-hero-art,
  body.lang-ar .vaio-hero-art{
    position:absolute!important;
    z-index:8!important;
    top:312px!important;
    left:18px!important;
    right:auto!important;
    bottom:auto!important;
    width:min(47vw, 248px)!important;
    height:170px!important;
    min-height:0!important;
    max-height:170px!important;
    display:grid!important;
    place-items:center!important;
    pointer-events:none!important;
    opacity:.98!important;
  }
  body:not(.lang-ar) .vaio-hero-art{
    right:18px!important;
    left:auto!important;
  }
  .vaio-hero-art img,
  .vaio-hero-art .vaio-hero-char{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:cover!important;
    border-radius:18px!important;
    filter:drop-shadow(0 20px 45px rgba(124,58,237,.38))!important;
    animation:none!important;
  }

  .vaio-hero-arrow{
    z-index:25!important;
    width:42px!important;
    height:42px!important;
    top:62%!important;
    transform:translateY(-50%)!important;
  }
  .vaio-hero-arrow:hover{transform:translateY(-50%) scale(1.04)!important;}
  .vaio-hero-arrow-prev{left:14px!important;right:auto!important;}
  .vaio-hero-arrow-next{right:14px!important;left:auto!important;}

  .vaio-hero-dots,
  body .vaio-hero-dots[data-vaio-hero-dots]{
    position:absolute!important;
    z-index:24!important;
    left:50%!important;
    right:auto!important;
    bottom:56px!important;
    transform:translateX(-50%)!important;
    display:flex!important;
    gap:10px!important;
    align-items:center!important;
    justify-content:center!important;
    height:10px!important;
    padding:0!important;
    margin:0!important;
    pointer-events:auto!important;
  }
  .vaio-hero-dot,
  .vaio-hero-dot.is-active,
  body .vaio-hero-dots[data-vaio-hero-dots] .vaio-hero-dot,
  body .vaio-hero-dots[data-vaio-hero-dots] .vaio-hero-dot.is-active{
    width:5px!important;
    min-width:5px!important;
    max-width:5px!important;
    height:5px!important;
    min-height:5px!important;
    max-height:5px!important;
    border-radius:999px!important;
    padding:0!important;
    opacity:.55!important;
    transform:none!important;
    background:rgba(255,255,255,.42)!important;
    box-shadow:0 0 8px rgba(255,255,255,.16)!important;
  }
  .vaio-hero-dot.is-active,
  body .vaio-hero-dots[data-vaio-hero-dots] .vaio-hero-dot.is-active{
    opacity:1!important;
    background:#22d3ee!important;
    box-shadow:0 0 12px rgba(34,211,238,.88)!important;
  }

  .vaio-news-ticker{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:20!important;
    height:var(--vaio-hero-ticker-h)!important;
    min-height:var(--vaio-hero-ticker-h)!important;
    padding:0 10px!important;
    background:rgba(6,10,24,.90)!important;
    backdrop-filter:blur(12px)!important;
  }
}

@media (max-width:520px){
  body.home .vaio-hero,.vaio-hero{height:604px!important;min-height:604px!important;}
  body.home .vaio-hero-slides,.vaio-hero-slides{height:calc(604px - var(--vaio-hero-ticker-h))!important;min-height:calc(604px - var(--vaio-hero-ticker-h))!important;}
  .vaio-hero-content,body.lang-ar .vaio-hero-content{top:84px!important;right:18px!important;width:58vw!important;max-width:58vw!important;}
  body:not(.lang-ar) .vaio-hero-content{left:18px!important;right:auto!important;}
  .vaio-hero-title{font-size:clamp(28px, 8.6vw, 38px)!important;min-height:88px!important;max-height:90px!important;}
  .vaio-hero-sub{font-size:13.5px!important;min-height:42px!important;max-height:46px!important;}
  .vaio-hero .vaio-hero-cta .vaio-btn,.vaio-hero .vaio-hero-cta a,.vaio-hero .vaio-hero-cta button{height:34px!important;min-height:34px!important;padding:0 11px!important;font-size:11.5px!important;border-radius:13px!important;}
  .vaio-hero-art,body.lang-ar .vaio-hero-art{top:306px!important;left:16px!important;width:47vw!important;height:158px!important;max-height:158px!important;}
  body:not(.lang-ar) .vaio-hero-art{right:16px!important;left:auto!important;}
  .vaio-hero-arrow{top:64%!important;width:40px!important;height:40px!important;}
}

@media (max-width:390px){
  .vaio-hero-content,body.lang-ar .vaio-hero-content{width:60vw!important;max-width:60vw!important;right:14px!important;}
  body:not(.lang-ar) .vaio-hero-content{left:14px!important;right:auto!important;}
  .vaio-hero-title{font-size:27px!important;min-height:84px!important;}
  .vaio-hero-art,body.lang-ar .vaio-hero-art{left:12px!important;width:45vw!important;height:148px!important;top:314px!important;}
  body:not(.lang-ar) .vaio-hero-art{right:12px!important;left:auto!important;}
  .vaio-hero .vaio-hero-cta{gap:7px!important;}
  .vaio-hero .vaio-hero-cta .vaio-btn,.vaio-hero .vaio-hero-cta a,.vaio-hero .vaio-hero-cta button{padding:0 9px!important;font-size:11px!important;}
}