/* 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 === */
/* === GRdesign event detail extended hero 20260724 BEGIN === */
@media screen and (min-width: 781px) {
  html body.t-page.is-grde-events-page.is-grde-event-detail #body.is-shared-hero-page,
  html body.t-page.is-grde-events-page #body.is-shared-hero-page.is-grde-event-detail,
  html body.t-page.is-grde-trip-tips-page:has(.grdt-zoo-detail--magazine) #body.is-shared-hero-page {
    --grde-detail-hero-height: clamp(680px, 72vh, 800px);
  }

  html body.t-page.is-grde-events-page.is-grde-event-detail #body.is-shared-hero-page #header,
  html body.t-page.is-grde-events-page #body.is-shared-hero-page.is-grde-event-detail #header,
  html body.t-page.is-grde-trip-tips-page:has(.grdt-zoo-detail--magazine) #body.is-shared-hero-page #header {
    height: var(--grde-detail-hero-height) !important;
    min-height: var(--grde-detail-hero-height) !important;
    max-height: none !important;
  }

  html body.t-page.is-grde-events-page.is-grde-event-detail #body.is-shared-hero-page .article-hero-stage,
  html body.t-page.is-grde-events-page #body.is-shared-hero-page.is-grde-event-detail .article-hero-stage,
  html body.t-page.is-grde-trip-tips-page:has(.grdt-zoo-detail--magazine) #body.is-shared-hero-page .article-hero-stage {
    height: var(--grde-detail-hero-height) !important;
    min-height: var(--grde-detail-hero-height) !important;
    max-height: none !important;
    margin-top: calc(-1 * var(--grde-detail-hero-height)) !important;
  }

  html body.t-page.is-grde-events-page.is-grde-event-detail #body.is-shared-hero-page article.grde-detail,
  html body.t-page.is-grde-events-page #body.is-shared-hero-page.is-grde-event-detail article.grde-detail {
    position: relative !important;
    z-index: 20 !important;
    margin-top: calc(400px - var(--grde-detail-hero-height)) !important;
  }

  html body.t-page.is-grde-trip-tips-page:has(.grdt-zoo-detail--magazine) #body.is-shared-hero-page .grdt-zoo-detail--magazine {
    position: relative !important;
    z-index: 20 !important;
    margin-top: calc(400px - var(--grde-detail-hero-height)) !important;
  }
}

@media screen and (max-width: 780px) {
  html body.t-page.is-grde-events-page.is-grde-event-detail #body.is-shared-hero-page,
  html body.t-page.is-grde-events-page #body.is-shared-hero-page.is-grde-event-detail {
    --grde-detail-hero-height: clamp(500px, 68vh, 600px);
  }

  html body.t-page.is-grde-events-page.is-grde-event-detail #body.is-shared-hero-page .article-hero-stage,
  html body.t-page.is-grde-events-page #body.is-shared-hero-page.is-grde-event-detail .article-hero-stage {
    height: var(--grde-detail-hero-height) !important;
    min-height: var(--grde-detail-hero-height) !important;
    max-height: none !important;
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .22) 42%, rgba(0, 0, 0, 0) 64%),
      linear-gradient(to top, rgba(232, 220, 203, 1) 0%, rgba(232, 220, 203, .98) 30%, rgba(232, 220, 203, .86) 55%, rgba(232, 220, 203, .35) 78%, 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.is-grde-events-page.is-grde-event-detail #body.is-shared-hero-page .grde-page--detail::before,
  html body.t-page.is-grde-events-page #body.is-shared-hero-page.is-grde-event-detail .grde-page--detail::before {
    background: linear-gradient(180deg,
      rgba(232, 220, 203, 0) 0,
      rgba(232, 220, 203, .12) 72px,
      rgba(232, 220, 203, .58) 180px,
      rgba(232, 220, 203, .94) 300px,
      rgba(232, 220, 203, 1) 390px) !important;
  }

  html body.t-page.is-grde-events-page.is-grde-event-detail #body.is-shared-hero-page .article-hero-copy,
  html body.t-page.is-grde-events-page #body.is-shared-hero-page.is-grde-event-detail .article-hero-copy {
    display: none !important;
  }

  html body.t-page.is-grde-events-page.is-grde-event-detail #body.is-shared-hero-page article.grde-detail,
  html body.t-page.is-grde-events-page #body.is-shared-hero-page.is-grde-event-detail article.grde-detail {
    position: relative !important;
    z-index: 20 !important;
    margin-top: calc(176px - var(--grde-detail-hero-height)) !important;
  }
}/* === GRdesign event detail extended hero 20260724 END === */

/* === GRdesign calendar overview smooth hero + content overlap 20260724 BEGIN === */
@media screen and (min-width: 781px) {
  html body.t-page.is-grde-events-page #body.is-shared-hero-page #header.is-hero-fade-ready {
    overflow: visible !important;
    isolation: isolate !important;
    background: #e8dccb !important;
  }

  html body.t-page.is-grde-events-page #body.is-shared-hero-page #header.is-hero-fade-ready > .article-hero-bg {
    position: absolute !important;
    inset: 0 0 -210px !important;
    z-index: 0 !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
  }

  html body.t-page.is-grde-events-page #body.is-shared-hero-page #header.is-hero-fade-ready > .article-hero-vignette {
    position: absolute !important;
    inset: 0 0 -235px !important;
    z-index: 1 !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, .12) 52%, rgba(0, 0, 0, 0) 68%),
      linear-gradient(180deg, rgba(232, 220, 203, 0) 52%, rgba(232, 220, 203, .30) 68%, rgba(232, 220, 203, .84) 84%, #e8dccb 94%, #e8dccb 100%) !important;
    pointer-events: none !important;
  }

  html body.t-page.is-grde-events-page #body.is-shared-hero-page #header.is-hero-fade-ready > :not(.article-hero-bg):not(.article-hero-vignette) {
    position: relative !important;
    z-index: 3 !important;
  }

  html body.t-page.is-grde-events-page #body.is-shared-hero-page .grde-page--overview {
    position: relative !important;
    z-index: 21 !important;
    background: transparent !important;
  }
}

@media screen and (max-width: 780px) {
  html body.t-page.is-grde-events-page #body.is-shared-hero-page .article-hero-stage.is-hero-fade-ready {
    overflow: visible !important;
    isolation: isolate !important;
    background: #e8dccb !important;
  }

  html body.t-page.is-grde-events-page #body.is-shared-hero-page .article-hero-stage.is-hero-fade-ready > .article-hero-bg {
    position: absolute !important;
    inset: 0 0 -160px !important;
    z-index: 0 !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
  }

  html body.t-page.is-grde-events-page #body.is-shared-hero-page .article-hero-stage.is-hero-fade-ready > .article-hero-vignette {
    position: absolute !important;
    inset: 0 0 -185px !important;
    z-index: 1 !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, .08) 54%, rgba(0, 0, 0, 0) 68%),
      linear-gradient(180deg, rgba(232, 220, 203, 0) 51%, rgba(232, 220, 203, .26) 67%, rgba(232, 220, 203, .82) 83%, #e8dccb 94%, #e8dccb 100%) !important;
    pointer-events: none !important;
  }

  html body.t-page.is-grde-events-page #body.is-shared-hero-page .article-hero-stage.is-hero-fade-ready .article-hero-copy {
    position: absolute !important;
    z-index: 3 !important;
  }

  html body.t-page.is-grde-events-page #body.is-shared-hero-page .grde-page--overview {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
  }

  html body.t-page.is-grde-events-page #body.is-shared-hero-page .grde-page--overview::before {
    background: linear-gradient(180deg,
      rgba(232, 220, 203, 0) 0,
      rgba(232, 220, 203, .22) 42px,
      rgba(232, 220, 203, .68) 104px,
      rgba(232, 220, 203, .96) 168px,
      #e8dccb 270px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.t-page.is-grde-events-page #body.is-shared-hero-page .is-hero-fade-ready > .article-hero-bg {
    transition-duration: 1ms !important;
    transform: none !important;
  }
}
/* === GRdesign calendar overview smooth hero + content overlap 20260724 END === */

/* Trip tips overview uses the same hero composition as the calendar. */
@media screen and (min-width: 781px) {
  html body.t-page.is-grde-trip-tips-page:not(.is-grdt-zoo-mobile-hero) #body.is-shared-hero-page #header.is-hero-fade-ready {
    overflow: visible !important;
    isolation: isolate !important;
    background: #f7f4ec !important;
  }

  html body.t-page.is-grde-trip-tips-page:not(.is-grdt-zoo-mobile-hero) #body.is-shared-hero-page #header.is-hero-fade-ready > .article-hero-bg {
    position: absolute !important;
    inset: 0 0 -210px !important;
    z-index: 0 !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
  }

  html body.t-page.is-grde-trip-tips-page:not(.is-grdt-zoo-mobile-hero) #body.is-shared-hero-page #header.is-hero-fade-ready > .article-hero-vignette {
    position: absolute !important;
    inset: 0 0 -235px !important;
    z-index: 1 !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, .12) 52%, rgba(0, 0, 0, 0) 68%),
      linear-gradient(180deg, rgba(247, 244, 236, 0) 52%, rgba(247, 244, 236, .30) 68%, rgba(247, 244, 236, .84) 84%, #f7f4ec 94%, #f7f4ec 100%) !important;
    pointer-events: none !important;
  }

  html body.t-page.is-grde-trip-tips-page:not(.is-grdt-zoo-mobile-hero) #body.is-shared-hero-page #header.is-hero-fade-ready > :not(.article-hero-bg):not(.article-hero-vignette) {
    position: relative !important;
    z-index: 3 !important;
  }
}

@media screen and (max-width: 780px) {
  html body.t-page.is-grde-trip-tips-page:not(.is-grdt-zoo-mobile-hero) #body.is-shared-hero-page .article-hero-stage.is-hero-fade-ready {
    overflow: visible !important;
    isolation: isolate !important;
    background: #f7f4ec !important;
  }

  html body.t-page.is-grde-trip-tips-page:not(.is-grdt-zoo-mobile-hero) #body.is-shared-hero-page .article-hero-stage.is-hero-fade-ready > .article-hero-bg {
    position: absolute !important;
    inset: 0 0 -160px !important;
    z-index: 0 !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
  }

  html body.t-page.is-grde-trip-tips-page:not(.is-grdt-zoo-mobile-hero) #body.is-shared-hero-page .article-hero-stage.is-hero-fade-ready > .article-hero-vignette {
    position: absolute !important;
    inset: 0 0 -185px !important;
    z-index: 1 !important;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, .08) 54%, rgba(0, 0, 0, 0) 68%),
      linear-gradient(180deg, rgba(247, 244, 236, 0) 51%, rgba(247, 244, 236, .26) 67%, rgba(247, 244, 236, .82) 83%, #f7f4ec 94%, #f7f4ec 100%) !important;
    pointer-events: none !important;
  }

  html body.t-page.is-grde-trip-tips-page:not(.is-grdt-zoo-mobile-hero) #body.is-shared-hero-page .article-hero-stage.is-hero-fade-ready .article-hero-copy {
    position: absolute !important;
    z-index: 3 !important;
  }

  html body.t-page.is-grde-trip-tips-page:not(.is-grdt-zoo-mobile-hero) .grdt-page {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
  }
}