/* Shared hero/navbar alignment for test pages using navbar-top-v3. */
body.page-has-hero {
  background: #0f1822;
}

@media (min-width: 768px) {
  body.vv-home-template.page-has-hero .vv-shell {
    margin-top: -5rem;
  }

  body.vv-home-template.page-has-hero .vv-hero {
    min-height: calc(88vh + 5rem);
  }

  body.vv-home-template.page-has-hero .vv-hero-content {
    padding-top: 12rem;
  }

  body.page-has-hero:not(.vv-home-template) main > :is(.nozze-hero, .catalog-hero, .tour-hero):first-child {
    margin-top: -5rem;
    min-height: calc(88vh + 5rem);
  }

  body.page-has-hero:not(.vv-home-template) main > :is(.nozze-hero, .catalog-hero, .tour-hero):first-child :is(.nozze-hero-content, .catalog-hero-content, .tour-hero-content) {
    padding-top: 12rem !important;
  }
}

@media (min-width: 1024px) {
  body.vv-home-template.page-has-hero .vv-hero,
  body.page-has-hero:not(.vv-home-template) main > :is(.nozze-hero, .catalog-hero, .tour-hero):first-child {
    min-height: calc(100vh + 5rem);
  }
}

body.page-has-hero :is(.vv-hero-overlay, .nozze-hero-overlay, .catalog-hero-overlay, .tour-hero-overlay) {
  background: linear-gradient(180deg, rgba(15,24,34,0.18) 0%, rgba(15,24,34,0.46) 48%, rgba(15,24,34,0.82) 100%) !important;
}

@media (max-width: 767px) {
  html,
  body.page-has-hero {
    width: 100dvw !important;
    max-width: 100dvw !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
  }

  body.page-has-hero {
    min-width: 0 !important;
    position: relative !important;
    touch-action: pan-y;
  }

  body.page-has-hero #vg-navbar,
  body.page-has-hero #vg-navbar.vg-scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
    z-index: 10000 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: none !important;
  }

  body.page-has-hero #vg-navbar .vg-nav-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  body.page-has-hero #vg-navbar .vg-actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  body.page-has-hero #vg-navbar .vg-logo {
    min-width: 0 !important;
    max-width: calc(100dvw - 5.25rem) !important;
    overflow: hidden !important;
  }

  body.page-has-hero #vg-navbar .vg-logo img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(178px, calc(100dvw - 5.5rem)) !important;
    max-height: 48px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.page-has-hero #vg-menu-btn-mobile {
    position: fixed !important;
    top: 2.5rem !important;
    right: max(1rem, env(safe-area-inset-right)) !important;
    transform: translateY(-50%) !important;
    z-index: 10001 !important;
  }

  body.page-has-hero #vg-overlay,
  body.page-has-hero #vg-mobile-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
  }

  body.page-has-hero main,
  body.page-has-hero :is(.vv-shell, .vv-hero, .nozze-hero, .catalog-hero, .tour-hero),
  body.page-has-hero :is(.vv-hero-content, .nozze-hero-content, .catalog-hero-content, .tour-hero-content) {
    width: 100dvw !important;
    max-width: 100dvw !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  body.page-has-hero :is(.vv-hero-content, .nozze-hero-content, .catalog-hero-content, .tour-hero-content) {
    box-sizing: border-box !important;
    padding-left: 1.35rem !important;
    padding-right: 1.35rem !important;
    overflow: visible !important;
  }

  body.page-has-hero:not(.vv-home-template) main > :is(.nozze-hero, .catalog-hero, .tour-hero):first-child {
    margin-top: -1.5rem !important;
    min-height: calc(78vh + 1.5rem) !important;
  }

  body.page-has-hero:not(.vv-home-template) main > :is(.nozze-hero, .catalog-hero, .tour-hero):first-child :is(.nozze-hero-pic, .catalog-hero-pic, .tour-hero-pic, .tour-hero-pic img, .nozze-hero-overlay, .catalog-hero-overlay, .tour-hero-overlay) {
    top: -1.5rem !important;
    height: calc(100% + 1.5rem) !important;
  }

  body.page-has-hero :is(.vv-hero-picture, .vv-hero-picture img, .vv-hero-slide, .vv-hero-overlay, .vv-hero-atmosphere, .vv-hero-grain, .nozze-hero-pic, .nozze-hero-overlay, .catalog-hero-pic, .catalog-hero-overlay, .tour-hero-pic, .tour-hero-pic img, .tour-hero-overlay) {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  body.page-has-hero :is(.vv-hero-title, .vv-hero-subtitle, .vv-hero-actions, .nozze-h1, .nozze-sub, .nozze-ctas, .catalog-hero-text, .catalog-hero-sub, .catalog-hero-stats, .tour-h1, .tour-sub, .tour-badges, .hero-facts, .hero-ctas) {
    width: calc(100dvw - 2.7rem) !important;
    max-width: calc(100dvw - 2.7rem) !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body.page-has-hero :is(.vv-hero-title, .nozze-h1, .catalog-hero-text h1, .tour-h1) {
    font-size: clamp(1.85rem, 8.6vw, 2.3rem) !important;
    line-height: 1.08 !important;
  }

  body.page-has-hero :is(.vv-hero-subtitle, .nozze-sub, .catalog-hero-sub, .tour-sub) {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  body.page-has-hero :is(.vv-hero-actions, .nozze-ctas, .hero-ctas) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  body.page-has-hero :is(.btn-primary, .btn-secondary, .nozze-cta-primary, .nozze-cta-ghost, .hero-cta-primary, .hero-cta-ghost, .btn-hero-p, .btn-hero-s) {
    width: auto !important;
    max-width: calc(100dvw - 2.7rem) !important;
    white-space: normal !important;
  }

  body.page-has-hero :is(#sticky-cta, .catalog-mobile-cta) {
    left: 50dvw !important;
    max-width: calc(100dvw - 1.5rem) !important;
    overflow: hidden !important;
  }
}