/* v311 — HERO responsive composition overhaul.
   Goal: keep the photo readable on phone/tablet and anchor the AV/dots group to the bottom on desktop. */

/* Reset the old artificial desktop offset and let the content use the full hero height. */
#hero .hero__inner.container-xl{
  align-items:stretch !important;
}
#hero .hero__content{
  top:0 !important;
  height:100% !important;
  min-height:0 !important;
  position:relative !important;
  justify-content:flex-start !important;
}

/* Desktop: title/buttons in the lower-left visual zone, AV + progress anchored at the bottom. */
@media (min-width:1200px){
  #hero .hero__inner.container-xl{
    padding-top:0 !important;
    padding-bottom:28px !important;
  }
  #hero .hero__content{
    width:min(100%,620px) !important;
    max-width:620px !important;
    padding-top:clamp(92px,14vh,150px) !important;
  }
  #hero .hero__main{
    margin:0 !important;
  }
  #hero .hero__action{
    margin-top:28px !important;
  }
  #hero .hero-av-slot{
    position:absolute !important;
    left:0 !important;
    bottom:58px !important;
    width:430px !important;
    margin:0 !important;
  }
  #hero .hero__controls{
    position:absolute !important;
    left:0 !important;
    bottom:0 !important;
    margin:0 !important;
  }
  #hero .hero__nav-btn{top:50% !important;}
}

/* Short desktop/laptop screens need the title higher but the bottom block stays pinned. */
@media (min-width:1200px) and (max-height:820px){
  #hero .hero__content{padding-top:clamp(46px,8vh,72px) !important;}
  #hero .hero__main .hero__title{font-size:clamp(44px,3.15vw,54px) !important;}
  #hero .hero__action{margin-top:20px !important;}
  #hero .hero-av-slot{bottom:46px !important;}
  #hero .hero__controls{bottom:-2px !important;}
}

/* Laptop / large tablet landscape. */
@media (min-width:992px) and (max-width:1199.98px){
  #hero .hero__slider{
    height:calc(100vh - var(--header-h)) !important;
    height:calc(100svh - var(--header-h)) !important;
    min-height:0 !important;
  }
  #hero .hero__inner.container-xl{
    padding:0 54px 24px 72px !important;
  }
  #hero .hero__content{
    width:min(100%,540px) !important;
    max-width:540px !important;
    padding-top:clamp(54px,9vh,88px) !important;
  }
  #hero .hero__main{max-width:500px !important;}
  #hero .hero__main .hero__title{font-size:clamp(42px,4.7vw,52px) !important;}
  #hero .hero__action{margin-top:20px !important;}
  #hero .hero-av-slot{
    position:absolute !important;
    left:0 !important;
    bottom:50px !important;
    width:350px !important;
    margin:0 !important;
  }
  #hero .hero__controls{
    position:absolute !important;
    left:0 !important;
    bottom:0 !important;
    margin:0 !important;
  }
  #hero .hero__nav-btn{top:50% !important;}
  #hero .hero__bg::before{width:58% !important;}
}

/* Portrait tablets: reserve the right half primarily for the photograph. */
@media (min-width:768px) and (max-width:991.98px){
  #hero .hero__slider{
    height:calc(100vh - var(--header-h)) !important;
    height:calc(100svh - var(--header-h)) !important;
    min-height:0 !important;
  }
  #hero .hero__inner.container-xl{
    padding:0 44px 22px 58px !important;
  }
  #hero .hero__content{
    width:min(100%,470px) !important;
    max-width:470px !important;
    padding-top:clamp(34px,6vh,66px) !important;
  }
  #hero .hero__main{max-width:440px !important;}
  #hero .hero__main .hero__title{
    max-width:440px !important;
    font-size:clamp(38px,5.5vw,48px) !important;
    line-height:1.02 !important;
  }
  #hero .hero__action{
    margin-top:18px !important;
    gap:8px !important;
  }
  #hero .hero__action .btn,
  #hero .hero__action .hero__btn-secondary{
    min-height:46px !important;
    height:46px !important;
    padding:0 16px !important;
    font-size:11.5px !important;
  }
  #hero .hero__action .btn--gold{min-width:155px !important;}
  #hero .hero__action .hero__btn-secondary{min-width:225px !important;}
  #hero .hero-av-slot{
    position:absolute !important;
    left:0 !important;
    bottom:48px !important;
    width:320px !important;
    margin:0 !important;
  }
  #hero #heroAvTools.hero-av-tools{gap:8px !important;}
  #hero #heroAvTools .hero-av-actions{gap:10px !important;}
  #hero #heroAvTools .hero-av-tool,
  #hero #heroAvTools .hero-av-btn{width:145px !important;min-width:145px !important;}
  #hero #heroAvTools .hero-av-btn{height:46px !important;min-height:46px !important;}
  #hero .hero__controls{
    position:absolute !important;
    left:0 !important;
    bottom:0 !important;
    margin:0 !important;
  }
  #hero .hero__nav-btn{top:50% !important;}
  #hero .hero__bg::before{width:58% !important;}
  #hero .hero__slide:nth-child(1) .hero__bg{background-position:60% center !important;}
  #hero .hero__slide:nth-child(2) .hero__bg{background-position:59% center !important;}
  #hero .hero__slide:nth-child(3) .hero__bg{background-position:60% center !important;}
}

/* Phones: compact top content + bottom media strip; middle of the photo remains unobstructed. */
@media (max-width:767.98px){
  #hero .hero__slider{
    height:calc(100vh - var(--header-h)) !important;
    height:calc(100svh - var(--header-h)) !important;
    min-height:0 !important;
    max-height:none !important;
  }
  #hero .hero__inner.container-xl{
    padding:0 16px 12px !important;
  }
  #hero .hero__content{
    width:100% !important;
    max-width:100% !important;
    padding-top:clamp(46px,9.5vh,74px) !important;
  }
  #hero .hero__main{
    width:min(94%,360px) !important;
    max-width:360px !important;
  }
  #hero .hero__main .hero__title{
    width:auto !important;
    max-width:360px !important;
    font-size:clamp(30px,9.2vw,40px) !important;
    line-height:1.01 !important;
    letter-spacing:-.025em !important;
  }
  #hero .hero__action{
    width:min(100%,430px) !important;
    margin-top:14px !important;
    gap:8px !important;
    display:grid !important;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.28fr) !important;
  }
  #hero .hero__action .btn,
  #hero .hero__action .hero__btn-secondary{
    width:100% !important;
    min-width:0 !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 8px !important;
    font-size:10px !important;
    line-height:1.1 !important;
    white-space:normal !important;
    text-align:center !important;
  }
  #hero .hero-av-slot{
    position:absolute !important;
    left:0 !important;
    bottom:38px !important;
    width:min(100%,300px) !important;
    margin:0 !important;
  }
  #hero #heroAvTools.hero-av-tools{gap:7px !important;}
  #hero #heroAvTools .hero-av-tools__eyebrow{font-size:8.5px !important;letter-spacing:.18em !important;}
  #hero #heroAvTools .hero-av-actions{gap:8px !important;}
  #hero #heroAvTools .hero-av-tool,
  #hero #heroAvTools .hero-av-btn{
    width:132px !important;
    min-width:132px !important;
  }
  #hero #heroAvTools .hero-av-btn{
    height:40px !important;
    min-height:40px !important;
    padding:0 10px !important;
    gap:8px !important;
  }
  #hero #heroAvTools .hero-av-btn__icon{width:24px !important;height:24px !important;flex-basis:24px !important;}
  #hero #heroAvTools .hero-av-btn__copy strong{font-size:10.5px !important;}
  #hero .hero__controls{
    position:absolute !important;
    left:0 !important;
    bottom:0 !important;
    height:30px !important;
    margin:0 !important;
  }
  #hero .hero__dot,#hero .hero__dot.is-active{
    width:40px !important;
    flex-basis:40px !important;
    height:30px !important;
  }
  #hero .hero__dot::before,#hero .hero__dot::after{top:14px !important;}
  #hero .hero__nav-btn{top:50% !important;width:34px !important;height:34px !important;}
  #hero .hero__nav-btn--prev{left:6px !important;}
  #hero .hero__nav-btn--next{right:6px !important;}
  #hero .hero__slide:nth-child(1) .hero__bg{background-position:64% center !important;}
  #hero .hero__slide:nth-child(2) .hero__bg{background-position:62% center !important;}
  #hero .hero__slide:nth-child(3) .hero__bg{background-position:63% center !important;}
  /* Readability only on the left; the right side remains the original image. */
  #hero .hero__bg::before{
    width:88% !important;
    background:linear-gradient(90deg,
      rgba(5,6,6,.95) 0%,
      rgba(5,6,6,.91) 24%,
      rgba(5,6,6,.78) 43%,
      rgba(5,6,6,.50) 61%,
      rgba(5,6,6,.22) 78%,
      rgba(5,6,6,0) 100%) !important;
  }
}

/* Very narrow/short phones: prioritize fitting the whole composition inside the viewport. */
@media (max-width:359.98px){
  #hero .hero__content{padding-top:34px !important;}
  #hero .hero__main .hero__title{font-size:28px !important;}
  #hero .hero__action{
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:280px !important;
    margin-top:10px !important;
    gap:6px !important;
  }
  #hero .hero__action .btn,
  #hero .hero__action .hero__btn-secondary{height:36px !important;min-height:36px !important;font-size:9.5px !important;}
  #hero .hero-av-slot{bottom:32px !important;width:270px !important;}
  #hero #heroAvTools .hero-av-tool,
  #hero #heroAvTools .hero-av-btn{width:122px !important;min-width:122px !important;}
  #hero #heroAvTools .hero-av-btn{height:38px !important;min-height:38px !important;}
}

@media (max-width:767.98px) and (max-height:650px){
  #hero .hero__content{padding-top:26px !important;}
  #hero .hero__main .hero__title{font-size:clamp(27px,8.7vw,34px) !important;}
  #hero .hero__action{margin-top:9px !important;}
  #hero .hero__action .btn,
  #hero .hero__action .hero__btn-secondary{height:36px !important;min-height:36px !important;}
  #hero .hero-av-slot{bottom:30px !important;}
  #hero #heroAvTools .hero-av-btn{height:36px !important;min-height:36px !important;}
  #hero .hero__controls{height:26px !important;}
}