/* Shared-page-only layout overrides. Loaded after menu.css. */

/* === GRdesign shared mobile fixed chrome 20260714 BEGIN === */
@media screen and (max-width: 780px) {
  html body.t-page #body.is-shared-hero-page #header,
  html body #body.is-shared-hero-page #header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    margin: 0 !important;
    overflow: visible !important;
    isolation: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 30000 !important;
  }

  html body.t-page #body.is-shared-hero-page #header::before,
  html body #body.is-shared-hero-page #header::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    top: -34px !important;
    right: auto !important;
    left: 50% !important;
    width: 150vw !important;
    height: 160px !important;
    transform: translateX(-50%) !important;
    background: url(header.webp) center top / 100% auto no-repeat !important;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, .6)) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  html body.t-page #body.is-shared-hero-page #header #colOne,
  html body.t-page #body.is-shared-hero-page #header #rame,
  html body.t-page #body.is-shared-hero-page #header #rame > header,
  html body.t-page #body.is-shared-hero-page #header .grdesign_menu,
  html body.t-page #body.is-shared-hero-page #header .grdesign_menu_header {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  html body.t-page #body.is-shared-hero-page #header #colOne,
  html body.t-page #body.is-shared-hero-page #header .grdesign_menu,
  html body.t-page #body.is-shared-hero-page #header .grdesign_menu_header {
    z-index: 2 !important;
  }

  html body.t-page #body.is-shared-hero-page #header .grdesign_menu_logo {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    float: none !important;
    width: 160px !important;
    height: auto !important;
    aspect-ratio: 219 / 146 !important;
    margin: 0 0 0 28px !important;
    transform: none !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: 3 !important;
  }

  html body.t-page #body.is-shared-hero-page .article-hero-stage {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .65) 45%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(0deg, #121212 0%, rgba(18, 18, 18, 0) 30%),
      linear-gradient(90deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .2) 20%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 80%, rgba(0, 0, 0, .75) 100%),
      var(--article-hero-image, var(--shared-hero-image, url(header.webp))) center center / cover no-repeat !important;
    z-index: 1 !important;
  }

  html body.t-page.is-grde-events-page #body.is-shared-hero-page #header {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
  }
  html body.t-page.is-grde-events-page #body.is-shared-hero-page .article-hero-stage {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(to top, rgba(232, 220, 203, 1) 0%, rgba(232, 220, 203, 0) 100%),
      var(--article-hero-image, var(--shared-hero-image, url(header.webp))) center center / cover no-repeat !important;
  }

  html body.t-page #body.is-shared-hero-page .article-hero-copy {
    position: absolute !important;
    top: 229px !important;
    right: 20px !important;
    bottom: auto !important;
    left: 20px !important;
    width: auto !important;
    transform: none !important;
    z-index: 2 !important;
  }

  html body.t-page #body.is-shared-hero-page .article-hero-title-slot,
  html body.t-page #body.is-shared-hero-page .article-hero-title-slot h1,
  html body.t-page #body.is-shared-hero-page .article-hero-kicker,
  html body.t-page #body.is-shared-hero-page .article-hero-nav,
  html body.t-page #body.is-shared-hero-page .article-hero-description {
    position: relative !important;
    z-index: 2 !important;
  }
}
/* === GRdesign shared mobile fixed chrome 20260714 END === */