/* VAIO Final Hero Mirror + Safe Audio Polish
   Final override: keep the same hero design, only mirror visual sides and enlarge the preview slightly.
   Text/CTA = left side, preview image = right side. No overlapping zones. */

/* Remove older mobile/flip positioning conflicts by becoming the final loaded layer. */
body.home .vaio-hero,
.vaio-hero{
  overflow:hidden!important;
}

@media (min-width:901px){
  body.home .vaio-hero-slide,
  .vaio-hero-slide{
    display:grid!important;
    grid-template-columns:minmax(420px, .96fr) minmax(420px, 1.04fr)!important;
    align-items:center!important;
    gap:clamp(28px,4vw,76px)!important;
    padding-inline:clamp(76px,7vw,128px)!important;
  }
  body.lang-ar .vaio-hero-slide,
  .vaio-hero-slide{direction:rtl!important;}

  body.home .vaio-hero .vaio-hero-content,
  body.lang-ar .vaio-hero .vaio-hero-content,
  .vaio-hero .vaio-hero-content{
    grid-column:1!important;
    order:1!important;
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    max-width:640px!important;
    padding:0!important;
    margin:0!important;
    text-align:right!important;
    direction:rtl!important;
    z-index:12!important;
  }
  body:not(.lang-ar) .vaio-hero .vaio-hero-content{direction:ltr!important;text-align:left!important;}

  body.home .vaio-hero .vaio-hero-art,
  body.lang-ar .vaio-hero .vaio-hero-art,
  .vaio-hero .vaio-hero-art{
    grid-column:2!important;
    order:2!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:390px!important;
    max-height:none!important;
    display:grid!important;
    place-items:center!important;
    z-index:7!important;
    pointer-events:none!important;
  }
  .vaio-hero .vaio-hero-art img,
  .vaio-hero .vaio-hero-art .vaio-hero-char{
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    max-height:430px!important;
    object-fit:contain!important;
    border-radius:26px!important;
    transform:none!important;
  }
  .vaio-hero .vaio-hero-cta,
  body.lang-ar .vaio-hero .vaio-hero-cta{
    justify-content:flex-start!important;
  }
}

@media (max-width:900px){
  body.home .vaio-hero,
  .vaio-hero{
    position:relative!important;
    height:610px!important;
    min-height:610px!important;
    --vaio-hero-ticker-h:46px;
    overflow:hidden!important;
  }
  body.home .vaio-hero-slides,
  .vaio-hero-slides{
    position:relative!important;
    height:calc(610px - var(--vaio-hero-ticker-h))!important;
    min-height:calc(610px - 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;
  }

  /* LEFT SIDE: text + CTA. Physical left is intentional, even for Arabic. */
  body.home .vaio-hero .vaio-hero-content,
  body.lang-ar .vaio-hero .vaio-hero-content,
  .vaio-hero .vaio-hero-content{
    position:absolute!important;
    z-index:15!important;
    top:92px!important;
    left:18px!important;
    right:auto!important;
    width:min(54vw, 310px)!important;
    max-width:min(54vw, 310px)!important;
    min-height:0!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 .vaio-hero-content{
    text-align:left!important;
    direction:ltr!important;
  }

  .vaio-hero .vaio-hero-eyebrow{
    display:inline-flex!important;
    width:auto!important;
    min-width:44px!important;
    max-width:58px!important;
    height:24px!important;
    min-height:24px!important;
    margin:0 0 13px!important;
    padding:0 11px!important;
    font-size:0!important;
    line-height:0!important;
    overflow:hidden!important;
  }
  .vaio-hero .vaio-hero-eyebrow .vaio-pulse-dot{width:8px!important;height:8px!important;margin:0!important;}
  .vaio-hero .vaio-hero-title{
    font-size:clamp(30px, 8.2vw, 40px)!important;
    line-height:1.05!important;
    letter-spacing:-.7px!important;
    margin:0 0 10px!important;
    max-width:100%!important;
    min-height:86px!important;
    max-height:92px!important;
    overflow:hidden!important;
  }
  .vaio-hero .vaio-hero-sub{
    font-size:clamp(13.5px, 3.55vw, 16px)!important;
    line-height:1.5!important;
    margin:0 0 14px!important;
    max-width:100%!important;
    min-height:42px!important;
    max-height:48px!important;
    color:rgba(226,232,255,.74)!important;
    overflow:hidden!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
  }
  .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;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!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;
  }

  /* RIGHT SIDE: preview image, slightly bigger than before without crowding CTA/text. */
  body.home .vaio-hero .vaio-hero-art,
  body.lang-ar .vaio-hero .vaio-hero-art,
  .vaio-hero .vaio-hero-art{
    position:absolute!important;
    z-index:9!important;
    top:304px!important;
    right:16px!important;
    left:auto!important;
    bottom:auto!important;
    width:min(48vw, 260px)!important;
    height:188px!important;
    min-height:0!important;
    max-height:188px!important;
    display:grid!important;
    place-items:center!important;
    pointer-events:none!important;
    opacity:.98!important;
  }
  body:not(.lang-ar) .vaio-hero .vaio-hero-art{right:16px!important;left:auto!important;}
  .vaio-hero .vaio-hero-art img,
  .vaio-hero .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;
    transform:none!important;
    animation:none!important;
    filter:drop-shadow(0 20px 44px rgba(124,58,237,.42))!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;
    transform:none!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 14px rgba(34,211,238,.88)!important;
  }
  .vaio-news-ticker{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:16!important;
    height:var(--vaio-hero-ticker-h)!important;
    min-height:var(--vaio-hero-ticker-h)!important;
    background:rgba(6,10,24,.90)!important;
    backdrop-filter:blur(12px)!important;
  }
}

@media (max-width:520px){
  body.home .vaio-hero,
  .vaio-hero{height:600px!important;min-height:600px!important;}
  body.home .vaio-hero-slides,
  .vaio-hero-slides{height:calc(600px - var(--vaio-hero-ticker-h))!important;min-height:calc(600px - var(--vaio-hero-ticker-h))!important;}
  body.home .vaio-hero .vaio-hero-content,
  body.lang-ar .vaio-hero .vaio-hero-content,
  .vaio-hero .vaio-hero-content{top:88px!important;left:16px!important;width:53vw!important;max-width:53vw!important;}
  .vaio-hero .vaio-hero-title{font-size:clamp(28px, 8.9vw, 38px)!important;min-height:82px!important;max-height:88px!important;}
  .vaio-hero .vaio-hero-sub{font-size:13px!important;min-height:40px!important;max-height:44px!important;}
  body.home .vaio-hero .vaio-hero-art,
  body.lang-ar .vaio-hero .vaio-hero-art,
  .vaio-hero .vaio-hero-art{top:305px!important;right:14px!important;width:47vw!important;height:178px!important;max-height:178px!important;}
}

@media (max-width:390px){
  body.home .vaio-hero,
  .vaio-hero{height:580px!important;min-height:580px!important;}
  body.home .vaio-hero-slides,
  .vaio-hero-slides{height:calc(580px - var(--vaio-hero-ticker-h))!important;min-height:calc(580px - var(--vaio-hero-ticker-h))!important;}
  body.home .vaio-hero .vaio-hero-content,
  body.lang-ar .vaio-hero .vaio-hero-content,
  .vaio-hero .vaio-hero-content{top:82px!important;left:14px!important;width:52vw!important;max-width:52vw!important;}
  body.home .vaio-hero .vaio-hero-art,
  body.lang-ar .vaio-hero .vaio-hero-art,
  .vaio-hero .vaio-hero-art{top:296px!important;right:12px!important;width:47vw!important;height:166px!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 10px!important;font-size:11.5px!important;}
}


/* VAIO 10.9.6: micro-spacing fix between CTA buttons and preview image.
   Keeps the same mirrored layout, only creates a small breathing gap. */
@media (max-width:900px){
  .vaio-hero .vaio-hero-cta,
  body.lang-ar .vaio-hero .vaio-hero-cta{
    max-width:calc(100% - 8px)!important;
  }
  body.home .vaio-hero .vaio-hero-art,
  body.lang-ar .vaio-hero .vaio-hero-art,
  .vaio-hero .vaio-hero-art{
    top:326px!important;
    right:12px!important;
    width:min(46vw, 252px)!important;
  }
}
@media (max-width:520px){
  body.home .vaio-hero .vaio-hero-art,
  body.lang-ar .vaio-hero .vaio-hero-art,
  .vaio-hero .vaio-hero-art{
    top:324px!important;
    right:12px!important;
    width:46vw!important;
    height:174px!important;
    max-height:174px!important;
  }
  .vaio-hero .vaio-hero-cta,
  body.lang-ar .vaio-hero .vaio-hero-cta{
    gap:7px!important;
  }
}
@media (max-width:390px){
  body.home .vaio-hero .vaio-hero-art,
  body.lang-ar .vaio-hero .vaio-hero-art,
  .vaio-hero .vaio-hero-art{
    top:316px!important;
    right:10px!important;
    width:45.5vw!important;
    height:160px!important;
  }
}