/* VESNA Case Hero Widget 1.13 */

.elementor-widget-vesna_case_hero {
  position: relative;
  z-index: 1;
}

.vesna-case-hero {
  position: relative;
  width: 100%;
  color: var(--vesna-text, #111111);
  background: var(--vesna-bg, #f7f7f5);
  overflow: hidden;
}

.vesna-case-hero-content {
  position: relative;
  z-index: 3;
}

.vesna-case-hero-kicker {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 44px;
  color: currentColor;
}

.vesna-case-hero-headline {
  margin: 0;
  padding: 0;
  font-size: 64px;
  line-height: 1.12;
  font-weight: 400;
  color: currentColor;
}

.vesna-case-hero-button,
.vesna-case-hero-button:visited,
.vesna-case-hero-button:hover,
.vesna-case-hero-button:focus,
.vesna-case-hero-button:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin-top: 42px;
  padding: 18px 28px;
  border: 0 !important;
  border-radius: 999px;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: var(--vesna-text, #111111);
  color: var(--vesna-bg, #f7f7f5);
  line-height: 1;
  transition: background-color 260ms ease, color 260ms ease, transform 260ms ease;
}

.vesna-case-hero-button:hover,
.vesna-case-hero-button:focus-visible {
  opacity: 1 !important;
  background: var(--vesna-bg, #f7f7f5);
  color: var(--vesna-text, #111111);
  transform: translateY(-1px);
}

/* Standard */
.vesna-case-hero--standard {
  padding: 132px 48px 96px;
}

.vesna-case-hero--standard .vesna-case-hero-copy {
  max-width: 980px;
}

/* Fullscreen */
.vesna-case-hero--fullscreen {
  min-height: 100vh;
  height: 100vh;
  padding: 0;
  background: #111111;
  color: #ffffff;
}

.vesna-case-hero--fullscreen .vesna-case-hero-content {
  min-height: inherit;
  height: inherit;
  display: flex;
  align-items: flex-end;
  padding: 0 48px 96px;
}

.vesna-case-hero--fullscreen .vesna-case-hero-copy {
  max-width: 1120px;
}

.vesna-case-hero-media,
.vesna-case-hero-bg,
.vesna-case-hero-overlay,
.vesna-case-hero-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vesna-case-hero-bg {
  object-fit: cover;
  display: block;
  border: 0;
}

.vesna-case-hero-bg-iframe {
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.7778vh;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.vesna-case-hero-overlay {
  z-index: 2;
  background: #000;
  pointer-events: none;
}

.vesna-case-hero-placeholder {
  background: #333;
}

.vesna-case-hero--fullscreen .vesna-case-hero-kicker,
.vesna-case-hero--fullscreen .vesna-case-hero-headline {
  color: #ffffff;
}

.vesna-case-hero--fullscreen .vesna-case-hero-button,
.vesna-case-hero--fullscreen .vesna-case-hero-button:visited,
.vesna-case-hero--fullscreen .vesna-case-hero-button:hover,
.vesna-case-hero--fullscreen .vesna-case-hero-button:focus,
.vesna-case-hero--fullscreen .vesna-case-hero-button:active {
  background: #111111;
  color: #ffffff;
}


body.vesna-case-hero-fullscreen-over-hero .elementor-location-header,
body.vesna-case-hero-fullscreen-over-hero [data-elementor-type="header"],
body.vesna-case-hero-fullscreen-over-hero .elementor-section-wrap > .elementor-section:first-child,
body.vesna-case-hero-fullscreen-over-hero header.site-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.vesna-case-hero-fullscreen-over-hero .elementor-location-header *,
body.vesna-case-hero-fullscreen-over-hero [data-elementor-type="header"] * {
  box-shadow: none;
}

body.vesna-case-hero-fullscreen-over-hero .elementor-location-header .e-con,
body.vesna-case-hero-fullscreen-over-hero [data-elementor-type="header"] .e-con,
body.vesna-case-hero-fullscreen-over-hero .elementor-location-header .elementor-section,
body.vesna-case-hero-fullscreen-over-hero [data-elementor-type="header"] .elementor-section {
  background: transparent !important;
  background-color: transparent !important;
}

/* Make VESNA header overlay fullscreen hero */
body.vesna-case-hero-fullscreen-over-hero .elementor-widget-vesna_header,
body.vesna-case-hero-fullscreen-over-hero .elementor-widget-vesna-header,
body.vesna-case-hero-fullscreen-over-hero .elementor-widget-vesna_theme_header,
body.vesna-case-hero-fullscreen-over-hero .elementor-widget-vesna-theme-header,
body.vesna-case-hero-fullscreen-over-hero .elementor-widget-vesna_theme_mode_header,
body.vesna-case-hero-fullscreen-over-hero .elementor-widget-vesna-theme-mode-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: 9999 !important;
}

body.vesna-case-hero-fullscreen-over-hero .vesna-header,
body.vesna-case-hero-fullscreen-over-hero .vesna-site-header,
body.vesna-case-hero-fullscreen-over-hero header.vesna-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body.vesna-case-hero-fullscreen-over-hero .vesna-header.is-scrolled,
body.vesna-case-hero-fullscreen-over-hero .vesna-header.is-hidden {
  transform: none !important;
  background: transparent !important;
  border-bottom: 0 !important;
}

/* Fullscreen hero: force header to light mode over image/video, only while viewport is inside hero */
body.vesna-case-hero-fullscreen-over-hero,
body.vesna-case-hero-fullscreen-over-hero .vesna-header,
body.vesna-case-hero-fullscreen-over-hero .vesna-header * {
  --vesna-text: #ffffff !important;
  --vesna-bg: transparent !important;
  --vesna-border: rgba(255,255,255,0.16) !important;
}

body.vesna-case-hero-fullscreen-over-hero .vesna-header,
body.vesna-case-hero-fullscreen-over-hero .vesna-header.is-scrolled,
body.vesna-case-hero-fullscreen-over-hero .vesna-header.is-hidden {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-logo,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-logo svg,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-logo svg *,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-desktop-nav,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-desktop-nav a,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-desktop-nav a:visited,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-desktop-nav a:hover,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-desktop-nav a:focus,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-desktop-nav a:active {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button:link,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button:visited,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button:focus,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(255,255,255,0.9) !important;
}

body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-border,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-border:link,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-border:visited,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-border:focus,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-border:active {
  background: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(255,255,255,0.9) !important;
}

body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-fill,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-fill:link,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-fill:visited,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-fill:focus,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-fill:active {
  background: #ffffff !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  border-color: #ffffff !important;
}

body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-blur,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-blur:link,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-blur:visited,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-blur:focus,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-blur:active {
  background: rgba(30,30,30,0.30) !important;
  backdrop-filter: blur(60px) !important;
  -webkit-backdrop-filter: blur(60px) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(255,255,255,0.16) !important;
}

body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-border:hover,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-fill:hover {
  background: #ffffff !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  border-color: #ffffff !important;
}

body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-blur:hover,
body.vesna-case-hero-fullscreen-over-hero .vesna-header .vesna-connect-button--style-blur:focus-visible {
  background: rgba(30,30,30,0.42) !important;
  backdrop-filter: blur(60px) !important;
  -webkit-backdrop-filter: blur(60px) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(255,255,255,0.24) !important;
}

/* Never show play icon from this widget */
.vesna-case-play,
.vesna-case-hero-play,
.vesna-case-hero .play,
.vesna-case-hero .eicon-play {
  display: none !important;
}

@media (max-width: 767px) {
  .vesna-case-hero--standard {
    padding: 96px 21px 64px;
  }

  .vesna-case-hero--fullscreen {
    min-height: 100svh;
    height: 100svh;
  }

  .vesna-case-hero--fullscreen .vesna-case-hero-content {
    min-height: inherit;
    height: inherit;
    padding: 0 21px 74px;
  }

  .vesna-case-hero-bg-iframe {
    width: 100vh;
    height: 177.7778vh;
    min-width: 100vw;
    min-height: 100vh;
  }
}


/* VESNA Case Hero 1.6: button hover inversion, no opacity fade */
.vesna-case-hero .vesna-case-hero-button:hover,
.vesna-case-hero .vesna-case-hero-button:focus-visible {
  opacity: 1 !important;
  background: var(--vesna-bg, #f7f7f5) !important;
  color: var(--vesna-text, #111111) !important;
}

.vesna-case-hero--fullscreen .vesna-case-hero-button:hover,
.vesna-case-hero--fullscreen .vesna-case-hero-button:focus-visible {
  opacity: 1 !important;
  background: #ffffff !important;
  color: #111111 !important;
}


/* VESNA Case Hero 1.9: reliable tablet/mobile layout + automatic responsive typography */
@media (max-width: 1024px) {
  .vesna-case-hero .vesna-case-hero-content,
  .vesna-case-hero--standard .vesna-case-hero-content,
  .vesna-case-hero--fullscreen .vesna-case-hero-content {
    width: 100%;
    max-width: 100%;
  }

  .vesna-case-hero .vesna-case-hero-copy {
    width: 100%;
    max-width: 760px;
  }

  .vesna-case-hero .vesna-case-hero-kicker {
    font-size: clamp(16px, 2.1vw, 21px) !important;
    line-height: 1.18 !important;
  }

  .vesna-case-hero .vesna-case-hero-headline {
    font-size: clamp(42px, 6.1vw, 72px) !important;
    line-height: 1.08 !important;
  }

  .vesna-case-hero .vesna-case-hero-button {
    font-size: clamp(14px, 1.55vw, 17px) !important;
  }
}

@media (max-width: 767px) {
  .vesna-case-hero,
  .vesna-case-hero--standard {
    padding-left: 21px !important;
    padding-right: 21px !important;
  }

  .vesna-case-hero--standard {
    padding-top: 96px !important;
    padding-bottom: 64px !important;
  }

  .vesna-case-hero--fullscreen .vesna-case-hero-content {
    padding-left: 21px !important;
    padding-right: 21px !important;
    padding-bottom: 74px !important;
  }

  .vesna-case-hero .vesna-case-hero-copy {
    width: 100%;
    max-width: 100% !important;
  }

  .vesna-case-hero .vesna-case-hero-kicker {
    font-size: clamp(15px, 4.8vw, 19px) !important;
    line-height: 1.18 !important;
    margin-bottom: 28px !important;
  }

  .vesna-case-hero .vesna-case-hero-headline {
    font-size: clamp(31px, 10vw, 42px) !important;
    line-height: 1.12 !important;
    max-width: 100% !important;
  }

  .vesna-case-hero .vesna-case-hero-button {
    margin-top: 34px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    padding: 16px 24px !important;
  }
}


/* VESNA Case Hero 1.12: borderless button hover contrast */
.vesna-case-hero .vesna-case-hero-button,
.vesna-case-hero .vesna-case-hero-button:link,
.vesna-case-hero .vesna-case-hero-button:visited,
.vesna-case-hero .vesna-case-hero-button:focus,
.vesna-case-hero .vesna-case-hero-button:active,
.vesna-case-hero .vesna-case-hero-button:hover {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.vesna-case-hero:not(.vesna-case-hero--fullscreen) .vesna-case-hero-button:hover,
.vesna-case-hero:not(.vesna-case-hero--fullscreen) .vesna-case-hero-button:focus-visible {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--vesna-text, #111111) 8%, transparent) !important;
  color: var(--vesna-text, #111111) !important;
  transform: translateY(-1px);
}

.vesna-case-hero--fullscreen .vesna-case-hero-button,
.vesna-case-hero--fullscreen .vesna-case-hero-button:visited,
.vesna-case-hero--fullscreen .vesna-case-hero-button:focus,
.vesna-case-hero--fullscreen .vesna-case-hero-button:active {
  background: #111111 !important;
  color: #ffffff !important;
  border: 0 !important;
}

.vesna-case-hero--fullscreen .vesna-case-hero-button:hover,
.vesna-case-hero--fullscreen .vesna-case-hero-button:focus-visible {
  opacity: 1 !important;
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  border: 0 !important;
  transform: translateY(-1px);
}

[data-vesna-theme="dark"] .vesna-case-hero:not(.vesna-case-hero--fullscreen) .vesna-case-hero-button:hover,
[data-vesna-theme="dark"] .vesna-case-hero:not(.vesna-case-hero--fullscreen) .vesna-case-hero-button:focus-visible,
body[data-vesna-theme="dark"] .vesna-case-hero:not(.vesna-case-hero--fullscreen) .vesna-case-hero-button:hover,
body[data-vesna-theme="dark"] .vesna-case-hero:not(.vesna-case-hero--fullscreen) .vesna-case-hero-button:focus-visible {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  border: 0 !important;
}


/* VESNA Case Hero 1.13: fullscreen hero button uses blur pill instead of solid black */
.vesna-case-hero--fullscreen .vesna-case-hero-button,
.vesna-case-hero--fullscreen .vesna-case-hero-button:link,
.vesna-case-hero--fullscreen .vesna-case-hero-button:visited,
.vesna-case-hero--fullscreen .vesna-case-hero-button:focus,
.vesna-case-hero--fullscreen .vesna-case-hero-button:active {
  background: rgba(30, 30, 30, 0.30) !important;
  backdrop-filter: blur(60px) !important;
  -webkit-backdrop-filter: blur(60px) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.vesna-case-hero--fullscreen .vesna-case-hero-button:hover,
.vesna-case-hero--fullscreen .vesna-case-hero-button:focus-visible {
  opacity: 1 !important;
  background: rgba(30, 30, 30, 0.46) !important;
  backdrop-filter: blur(60px) !important;
  -webkit-backdrop-filter: blur(60px) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}