/* VAIO Hero Responsive Layout Final
   Keeps CTA, dots, ticker and slide copy in stable non-overlapping zones on mobile and desktop. */

.vaio-hero,
.vaio-hero *{
  box-sizing:border-box;
}

/* Desktop/tablet: keep original premium composition, only reserve enough lower safe area. */
@media (min-width: 901px){
  .vaio-hero{min-height:620px!important;}
  .vaio-hero-slides{min-height:570px!important;}
  .vaio-hero-slide{min-height:570px!important;padding-bottom:82px!important;}
  .vaio-hero-cta{position:relative!important;margin-top:24px!important;margin-bottom:0!important;z-index:9!important;}
  .vaio-hero-dots{bottom:62px!important;}
  .vaio-news-ticker{height:50px!important;}
}

/* Mobile: fixed layout zones, not based on variable title height. */
@media (max-width: 900px){
  body.home .vaio-hero,
  .vaio-hero{
    position:relative!important;
    min-height:620px!important;
    height:620px!important;
    overflow:hidden!important;
    padding:0!important;
    --vaio-hero-ticker-h:46px;
    --vaio-hero-dots-y:62px;
    --vaio-hero-cta-y:118px;
  }

  body.home .vaio-hero-slides,
  .vaio-hero-slides{
    position:relative!important;
    min-height:calc(620px - var(--vaio-hero-ticker-h))!important;
    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;
    min-height:0!important;
    height:auto!important;
    display:block!important;
    padding:0!important;
    overflow:hidden!important;
    background-position:center!important;
  }

  .vaio-hero-bg{inset:0!important;}

  .vaio-hero-art{
    position:absolute!important;
    z-index:2!important;
    inset:auto 0 76px 42%!important;
    width:58%!important;
    min-height:0!important;
    height:250px!important;
    max-height:250px!important;
    display:grid!important;
    place-items:center!important;
    pointer-events:none!important;
    opacity:.95!important;
  }
  body.lang-ar .vaio-hero-art{inset:auto 0 76px 42%!important;}
  .vaio-hero-art img,
  .vaio-hero-art .vaio-hero-char{
    max-height:240px!important;
    width:auto!important;
    max-width:100%!important;
    object-fit:contain!important;
  }

  .vaio-hero-content,
  body.lang-ar .vaio-hero-content{
    position:absolute!important;
    z-index:5!important;
    top:110px!important;
    inset-inline-start:24px!important;
    inset-inline-end:auto!important;
    width:min(58vw, 300px)!important;
    max-width:min(58vw, 300px)!important;
    padding:0!important;
    margin:0!important;
    text-align:start!important;
    direction:inherit!important;
  }

  .vaio-hero-eyebrow{
    display:inline-flex!important;
    min-height:22px!important;
    height:22px!important;
    padding:0 10px!important;
    font-size:0!important;
    letter-spacing:0!important;
    margin:0 0 12px!important;
    max-width:58px!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(31px, 8.4vw, 42px)!important;
    line-height:1.05!important;
    margin:0 0 10px!important;
    max-width:100%!important;
    letter-spacing:-.8px!important;
  }

  .vaio-hero-sub{
    font-size:clamp(14px, 3.7vw, 17px)!important;
    line-height:1.55!important;
    margin:0!important;
    max-width:100%!important;
    color:rgba(226,232,255,.72)!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  .vaio-hero .vaio-hero-cta,
  body .vaio-hero .vaio-hero-cta,
  body.lang-ar .vaio-hero .vaio-hero-cta{
    position:absolute!important;
    z-index:22!important;
    left:22px!important;
    right:auto!important;
    bottom:var(--vaio-hero-cta-y)!important;
    transform:none!important;
    width:auto!important;
    max-width:calc(100% - 44px)!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:10px!important;
    pointer-events:auto!important;
  }

  body.lang-ar .vaio-hero .vaio-hero-cta{
    left:22px!important;
    right:auto!important;
  }

  .vaio-hero .vaio-hero-cta .vaio-btn,
  .vaio-hero .vaio-hero-cta a,
  .vaio-hero .vaio-hero-cta button{
    min-height:38px!important;
    height:38px!important;
    min-width:0!important;
    width:auto!important;
    padding:0 15px!important;
    border-radius:15px!important;
    font-size:13px!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;
  }

  .vaio-hero .vaio-hero-cta .vaio-btn-ghost{
    opacity:.86!important;
    background:rgba(15,23,42,.54)!important;
    backdrop-filter:blur(8px)!important;
  }

  .vaio-hero-dots,
  body .vaio-hero-dots[data-vaio-hero-dots]{
    position:absolute!important;
    z-index:20!important;
    bottom:var(--vaio-hero-dots-y)!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    display:flex!important;
    gap:10px!important;
    align-items:center!important;
    justify-content:center!important;
    height:12px!important;
    padding:0!important;
    margin:0!important;
    pointer-events:auto!important;
  }

  .vaio-hero-dot,
  .vaio-hero-dot.is-active{
    width:6px!important;
    min-width:6px!important;
    max-width:6px!important;
    height:6px!important;
    border-radius:999px!important;
    padding:0!important;
    opacity:.52!important;
    transform:none!important;
    background:rgba(255,255,255,.45)!important;
    box-shadow:0 0 10px rgba(255,255,255,.18)!important;
  }
  .vaio-hero-dot.is-active{
    opacity:1!important;
    background:#22d3ee!important;
    box-shadow:0 0 12px rgba(34,211,238,.85)!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;
    padding:0 10px!important;
    gap:8px!important;
    background:rgba(6,10,24,.88)!important;
    backdrop-filter:blur(12px)!important;
  }
  .vaio-ticker-label{height:36px!important;min-width:max-content!important;padding:0 12px!important;font-size:12px!important;}
  .vaio-ticker-track{font-size:12px!important;line-height:1!important;}

  .vaio-hero-arrow{z-index:23!important;width:44px!important;height:44px!important;}
  .vaio-hero-arrow-prev{left:16px!important;}
  .vaio-hero-arrow-next{right:16px!important;}
}

@media (max-width: 520px){
  body.home .vaio-hero,
  .vaio-hero{height:610px!important;min-height:610px!important;--vaio-hero-cta-y:112px;--vaio-hero-dots-y:58px;}
  body.home .vaio-hero-slides,.vaio-hero-slides{height:calc(610px - var(--vaio-hero-ticker-h))!important;min-height:calc(610px - var(--vaio-hero-ticker-h))!important;}
  .vaio-hero-content,body.lang-ar .vaio-hero-content{top:96px!important;inset-inline-start:20px!important;width:58vw!important;max-width:58vw!important;}
  .vaio-hero-title{font-size:clamp(30px, 9vw, 39px)!important;}
  .vaio-hero-sub{font-size:clamp(13.5px, 3.8vw, 16px)!important;}
  .vaio-hero-art{inset:auto -10px 82px 44%!important;width:60%!important;height:238px!important;}
  body.lang-ar .vaio-hero-art{inset:auto -10px 82px 44%!important;}
  .vaio-hero-art img,.vaio-hero-art .vaio-hero-char{max-height:230px!important;}
  .vaio-hero .vaio-hero-cta,body .vaio-hero .vaio-hero-cta,body.lang-ar .vaio-hero .vaio-hero-cta{left:18px!important;gap:8px!important;}
  .vaio-hero .vaio-hero-cta .vaio-btn,.vaio-hero .vaio-hero-cta a,.vaio-hero .vaio-hero-cta button{height:36px!important;min-height:36px!important;padding:0 13px!important;font-size:12px!important;border-radius:14px!important;}
}

@media (max-width: 390px){
  body.home .vaio-hero,.vaio-hero{height:590px!important;min-height:590px!important;--vaio-hero-cta-y:106px;--vaio-hero-dots-y:56px;}
  body.home .vaio-hero-slides,.vaio-hero-slides{height:calc(590px - var(--vaio-hero-ticker-h))!important;min-height:calc(590px - var(--vaio-hero-ticker-h))!important;}
  .vaio-hero-content,body.lang-ar .vaio-hero-content{top:88px!important;inset-inline-start:18px!important;width:57vw!important;max-width:57vw!important;}
  .vaio-hero-title{font-size:clamp(28px, 8.8vw, 35px)!important;}
  .vaio-hero-sub{font-size:13px!important;line-height:1.45!important;}
  .vaio-hero-art{height:220px!important;bottom:78px!important;}
  .vaio-hero-art img,.vaio-hero-art .vaio-hero-char{max-height:215px!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;}
}