/* Final hero emphasis — mobile first, with a genuinely soft photo blend. Loaded LAST. */

@media (max-width:760px){
  /* Mobile header: logo + hamburger only. Do not duplicate registration in the top bar. */
  html body .site-header,
  html body .site-header.scrolled{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:0 12px!important;
  }
  html body .site-header .header-cta{display:none!important}
  html body .site-header .menu-toggle{display:block!important;justify-self:end!important}
  html body .site-header .brand{max-width:220px!important;min-width:0!important}

  /* The menu stays navigation-only; the hero owns the two main actions. */
  html body .mobile-menu .button{display:none!important}
  html body .mobile-menu nav>a:not(.button){min-height:54px!important;font-size:clamp(25px,7.4vw,32px)!important}

  html body main#top .ref-hero-left{
    padding:20px 16px 26px!important;
  }

  html body main#top .ref-hero-date{
    width:205px!important;
    min-height:60px!important;
    margin-bottom:18px!important;
  }

  html body main#top .ref-hero-title{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    overflow:visible!important;
  }

  html body main#top .ref-hero-title span{
    display:block!important;
    color:#fff8ee!important;
    font-size:clamp(56px,17vw,72px)!important;
    line-height:.80!important;
    letter-spacing:-.065em!important;
    white-space:nowrap!important;
    text-shadow:0 2px 18px rgba(0,0,0,.12)!important;
  }

  html body main#top .ref-hero-title em{
    display:block!important;
    margin-top:.10em!important;
    color:#24dba6!important;
    font-size:clamp(41px,12.35vw,55px)!important;
    line-height:.87!important;
    letter-spacing:-.065em!important;
    white-space:nowrap!important;
    text-shadow:0 2px 18px rgba(0,0,0,.14)!important;
  }

  html body main#top .ref-hero-desc{
    margin-top:20px!important;
    color:#e6eeea!important;
    font-size:15.5px!important;
    line-height:1.55!important;
  }

  html body main#top .ref-hero-venue{
    margin-top:16px!important;
    color:#eaf0ed!important;
    font-size:12.5px!important;
    line-height:1.5!important;
  }

  /* Exactly two independent CTAs. No mixed labels, no decorative glyphs. */
  html body main#top .ref-hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    margin-top:22px!important;
  }
  html body main#top .ref-hero-btn,
  html body main#top .ref-hero-btn.primary,
  html body main#top .ref-hero-btn.secondary{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    padding:0 18px!important;
    border-radius:12px!important;
    font-size:0!important;
    line-height:1!important;
    letter-spacing:0!important;
    overflow:hidden!important;
  }
  html body main#top .ref-hero-btn i{display:none!important}
  html body main#top .ref-hero-btn::before{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    background:none!important;
    border:0!important;
    transform:none!important;
    font:800 12px/1 Arial,sans-serif!important;
    letter-spacing:.07em!important;
    color:inherit!important;
    white-space:nowrap!important;
  }
  html body main#top .ref-hero-btn.primary::before{content:"КУПИТИ КВИТОК"!important}
  html body main#top .ref-hero-btn.secondary::before{content:"ЗАБРОНЮВАТИ МІСЦЕ"!important}
  html body main#top .ref-hero-btn.primary{
    background:#bd8c50!important;
    border:1px solid #bd8c50!important;
    color:#fff!important;
    box-shadow:0 12px 30px rgba(0,0,0,.12)!important;
  }
  html body main#top .ref-hero-btn.secondary{
    background:rgba(255,255,255,.035)!important;
    border:1px solid rgba(238,244,241,.36)!important;
    color:#f4f4ef!important;
    box-shadow:none!important;
  }

  /* Soft vertical dissolve. The photo itself remains untouched. */
  html body main#top .ref-hero-visual{
    position:relative!important;
    margin-top:-1px!important;
    min-height:300px!important;
    aspect-ratio:4/3!important;
    background-image:
      linear-gradient(180deg,
        #032f27 0%,
        rgba(3,47,39,.96) 13%,
        rgba(3,47,39,.82) 28%,
        rgba(3,47,39,.60) 44%,
        rgba(3,47,39,.38) 59%,
        rgba(3,47,39,.20) 72%,
        rgba(3,47,39,.08) 82%,
        rgba(3,47,39,0) 91%),
      url("assets/conference-main.jpg")!important;
    background-size:100% 100%,cover!important;
    background-position:center top,center center!important;
    background-repeat:no-repeat,no-repeat!important;
    box-shadow:none!important;
  }

  html body main#top .ref-hero-blend{display:none!important}
}

@media (max-width:390px){
  html body main#top .ref-hero-left{padding-inline:14px!important}
  html body main#top .ref-hero-title span{font-size:clamp(53px,16.6vw,65px)!important}
  html body main#top .ref-hero-title em{font-size:clamp(39px,11.9vw,47px)!important}
  html body main#top .ref-hero-desc{font-size:15px!important}
  html body main#top .ref-hero-btn::before{font-size:11.5px!important}
}

/* Desktop / tablet: one continuous alpha fade rather than visible gradient bands. */
@media (min-width:761px){
  html body main#top .ref-hero-title{
    width:max-content!important;
    max-width:46vw!important;
    overflow:visible!important;
  }
  html body main#top .ref-hero-title span{
    display:block!important;
    color:#fff8ee!important;
    font-size:clamp(64px,7.45vw,118px)!important;
    line-height:.80!important;
    letter-spacing:-.065em!important;
    white-space:nowrap!important;
    text-shadow:0 3px 24px rgba(0,0,0,.12)!important;
  }
  html body main#top .ref-hero-title em{
    display:block!important;
    margin-top:.10em!important;
    color:#22d9a4!important;
    font-size:clamp(50px,6.25vw,96px)!important;
    line-height:.84!important;
    letter-spacing:-.058em!important;
    white-space:nowrap!important;
    text-shadow:0 3px 24px rgba(0,0,0,.14)!important;
  }

  html body main#top .ref-hero-blend{
    display:block!important;
    left:33%!important;
    width:45%!important;
    background:#032f27!important;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 18%,rgba(0,0,0,.92) 32%,rgba(0,0,0,.72) 50%,rgba(0,0,0,.48) 66%,rgba(0,0,0,.26) 80%,rgba(0,0,0,.10) 91%,transparent 100%)!important;
    mask-image:linear-gradient(90deg,#000 0%,#000 18%,rgba(0,0,0,.92) 32%,rgba(0,0,0,.72) 50%,rgba(0,0,0,.48) 66%,rgba(0,0,0,.26) 80%,rgba(0,0,0,.10) 91%,transparent 100%)!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    filter:blur(6px)!important;
    transform:scaleX(1.04)!important;
    transform-origin:left center!important;
  }
}

/* Short laptops: preserve readability and keep both CTAs visible. */
@media (min-width:761px) and (max-height:700px){
  html body main#top .ref-hero-title span{font-size:clamp(54px,7vw,76px)!important}
  html body main#top .ref-hero-title em{font-size:clamp(43px,5.8vw,62px)!important}
  html body main#top .ref-hero-desc{margin-top:10px!important}
  html body main#top .ref-hero-venue{margin-top:8px!important}
  html body main#top .ref-hero-actions{margin-top:10px!important}
}