/* contest-user-hub-shell.css — contest card page shell parity with admin dashboard hub */

/* Premium shell backdrop — parity with contests_public (dc-theme html::before/::after) */
html body.contest-user-open.contest-user-hub-page.dc-premium-shell-open,
html body.contest-user-open.contest-user-hub-page {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html:has(body.contest-user-open.contest-user-hub-page) {
  overflow-x: clip !important;
  height: auto !important;
  min-height: 0 !important;
}

html body.contest-user-open.contest-user-hub-page {
  overflow-x: clip !important;
  height: auto !important;
  min-height: 100dvh !important;
  min-height: 100vh !important;
  max-height: none !important;
  -webkit-overflow-scrolling: touch;
}

html body.contest-user-open.contest-user-hub-page {
  --cu-hub-breadcrumb-h: var(--dc-hub-pinned-bar-h, 40px);
  --cu-hub-breadcrumb-gap: var(--dc-hub-pinned-bar-gap, 8px);
  padding-bottom: 0 !important;
  --dc-mobile-content-bottom-buffer: 10px;
}

/* Real iOS/Android PWA: dc-mobile-pwa-shell generic .wrap padding must not override hub insets. */
html body.dc-runtime-pwa.contest-user-open.contest-user-hub-page .wrap,
html body.dc-pwa-standalone.contest-user-open.contest-user-hub-page .wrap,
html body.dc-runtime-pwa.user-mode.contest-user-open.contest-user-hub-page:not(.admin-mode):not(.auth-mode) .wrap,
html body.dc-pwa-standalone.user-mode.contest-user-open.contest-user-hub-page:not(.admin-mode):not(.auth-mode) .wrap {
  padding-top: calc(
    var(--admin-header-height, 68px) + var(--dc-admin-vv-offset-top, 0px)
    + var(--dc-hub-pinned-bar-h, 40px) + var(--dc-hub-pinned-bar-gap, 8px)
    + var(--dc-safe-top, env(safe-area-inset-top, 0px))
  ) !important;
  scroll-padding-top: calc(
    var(--admin-header-height, 68px) + var(--dc-admin-vv-offset-top, 0px)
    + var(--dc-hub-pinned-bar-h, 40px) + var(--dc-hub-pinned-bar-gap, 8px)
    + var(--dc-safe-top, env(safe-area-inset-top, 0px))
  );
  padding-bottom: calc(
    var(--dc-bottom-nav-mobile-reserve, 72px)
    + var(--dc-mobile-content-bottom-buffer, 10px)
    + env(safe-area-inset-bottom, 0px)
  ) !important;
  scroll-padding-bottom: calc(
    var(--dc-bottom-nav-mobile-reserve, 72px)
    + var(--dc-mobile-content-bottom-buffer, 10px)
    + env(safe-area-inset-bottom, 0px)
  );
}

html body.contest-user-open.contest-user-hub-page .wrap,
html body.user-mode.contest-user-open.contest-user-hub-page:not(.admin-mode):not(.comments-mode):not(.dc-shell-open) .wrap {
  position: relative;
  z-index: 1;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding-top: calc(
    var(--admin-header-height, 68px) + var(--dc-admin-vv-offset-top, 0px)
    + var(--dc-hub-pinned-bar-h, 40px) + var(--dc-hub-pinned-bar-gap, 8px)
  ) !important;
  scroll-padding-top: calc(
    var(--admin-header-height, 68px) + var(--dc-admin-vv-offset-top, 0px)
    + var(--dc-hub-pinned-bar-h, 40px) + var(--dc-hub-pinned-bar-gap, 8px)
  );
  padding-bottom: calc(
    var(--dc-bottom-nav-mobile-reserve, 72px)
    + var(--dc-mobile-content-bottom-buffer, 10px)
    + env(safe-area-inset-bottom, 0px)
  ) !important;
  scroll-padding-bottom: calc(
    var(--dc-bottom-nav-mobile-reserve, 72px)
    + var(--dc-mobile-content-bottom-buffer, 10px)
    + env(safe-area-inset-bottom, 0px)
  );
  box-sizing: border-box !important;
}

html body.contest-user-open .dc-safe-bottom-chrome,
html body.contest-user-open #dcViewportDebug,
html body.contest-user-open #dcContextDebugPanel,
html body.contest-user-open.contest-user-hub-page .dc-safe-bottom-chrome,
html body.contest-user-open.contest-user-hub-page #dcViewportDebug,
html body.contest-user-open.contest-user-hub-page #dcContextDebugPanel {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.contest-user-open.contest-user-hub-page .cu-page > .cu-payment:last-child {
  margin-bottom: 0;
}

body.contest-user-open.contest-user-hub-page .cu-payment-action,
body.contest-user-open.contest-user-hub-page .cu-payment-open-btn,
body.contest-user-open.contest-user-hub-page .cu-payment {
  scroll-margin-bottom: calc(
    var(--dc-bottom-nav-mobile-reserve, 72px)
    + var(--dc-mobile-content-bottom-buffer, 10px)
    + env(safe-area-inset-bottom, 0px)
  );
}

html body.dc-runtime-pwa.contest-user-open.contest-user-hub-page,
html body.dc-pwa-standalone.contest-user-open.contest-user-hub-page {
  min-height: 100% !important;
  height: auto !important;
  max-height: none !important;
}

html body.contest-user-open.contest-user-hub-page.dc-shell-no-bottom-nav .wrap {
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}

html body.contest-user-open.contest-user-hub-page .cu-page {
  width: 100%;
  max-width: var(--cp-hub-max, 767px);
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
}

@media (max-width: 767px) {
  html body.contest-user-open.contest-user-hub-page .wrap {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  :root {
    --cu-landscape-rail-w: min(
      var(--cp-hub-max, 767px),
      calc(
        100vw - max(16px, env(safe-area-inset-left, 0px)) - max(16px, env(safe-area-inset-right, 0px))
      )
    );
  }
}

html.cu-contest-landscape-html {
  --cu-landscape-rail-w: min(
    var(--cp-hub-max, 767px),
    calc(
      100vw - max(16px, env(safe-area-inset-left, 0px)) - max(16px, env(safe-area-inset-right, 0px))
    )
  );
}

@media (orientation: landscape) and (max-height: 620px) {
  html body.contest-user-open.contest-user-hub-page .wrap,
  html body.contest-user-open.contest-user-hub-page.cu-landscape-compact .wrap {
    padding-top: calc(
      var(--admin-header-height, 48px) + var(--dc-admin-vv-offset-top, 0px)
      + var(--dc-hub-pinned-bar-h, 34px) + var(--dc-hub-pinned-bar-gap, 6px)
    ) !important;
    scroll-padding-top: calc(
      var(--admin-header-height, 48px) + var(--dc-admin-vv-offset-top, 0px)
      + var(--dc-hub-pinned-bar-h, 34px) + var(--dc-hub-pinned-bar-gap, 6px)
    );
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.contest-user-open.contest-user-hub-page .cu-page,
  html body.contest-user-open.contest-user-hub-page.cu-landscape-compact .cu-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  body.contest-user-open.contest-user-hub-page > nav.cp-topbar-shell.dc-hub-pinned-bar[data-cp-hub-chrome],
  body.contest-user-open.contest-user-hub-page .wrap > nav.cp-topbar-shell.dc-hub-pinned-bar[data-cp-hub-chrome],
  body.contest-user-open.contest-user-hub-page.cu-landscape-compact > nav.cp-topbar-shell.dc-hub-pinned-bar[data-cp-hub-chrome],
  body.contest-user-open.contest-user-hub-page.cu-landscape-compact .wrap > nav.cp-topbar-shell.dc-hub-pinned-bar[data-cp-hub-chrome] {
    left: 50% !important;
    right: auto !important;
    width: min(
      calc(100vw - max(16px, env(safe-area-inset-left, 0px)) - max(16px, env(safe-area-inset-right, 0px))),
      var(--cu-landscape-rail-w)
    ) !important;
    max-width: var(--cu-landscape-rail-w) !important;
    transform: translateX(-50%) !important;
  }
}

html.cu-contest-landscape-html body.contest-user-open.contest-user-hub-page .wrap {
  padding-top: calc(
    var(--admin-header-height, 48px) + var(--dc-admin-vv-offset-top, 0px)
    + var(--dc-hub-pinned-bar-h, 34px) + var(--dc-hub-pinned-bar-gap, 6px)
  ) !important;
  scroll-padding-top: calc(
    var(--admin-header-height, 48px) + var(--dc-admin-vv-offset-top, 0px)
    + var(--dc-hub-pinned-bar-h, 34px) + var(--dc-hub-pinned-bar-gap, 6px)
  );
  padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.cu-contest-landscape-html body.contest-user-open.contest-user-hub-page .cu-page {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto;
  margin-right: auto;
}

html.cu-contest-landscape-html body.contest-user-open.contest-user-hub-page > nav.cp-topbar-shell.dc-hub-pinned-bar[data-cp-hub-chrome],
html.cu-contest-landscape-html body.contest-user-open.contest-user-hub-page .wrap > nav.cp-topbar-shell.dc-hub-pinned-bar[data-cp-hub-chrome] {
  left: 50% !important;
  right: auto !important;
  width: min(
    calc(100vw - max(16px, env(safe-area-inset-left, 0px)) - max(16px, env(safe-area-inset-right, 0px))),
    var(--cu-landscape-rail-w)
  ) !important;
  max-width: var(--cu-landscape-rail-w) !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 1100px) {
  body.contest-user-open.contest-user-hub-page .cu-hero__details-row {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) and (max-height: 620px) and (min-width: 620px) {
  body.contest-user-open.contest-user-hub-page .cu-hero__details-row:not(.cu-hero__details-row--solo) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

html.cu-contest-landscape-html body.contest-user-open.contest-user-hub-page .cu-hero__details-row:not(.cu-hero__details-row--solo),
body.contest-user-open.contest-user-hub-page.cu-landscape-compact .cu-hero__details-row:not(.cu-hero__details-row--solo) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

html.dc-pwa-emulate body.contest-user-open.contest-user-hub-page .wrap {
  padding-top: calc(
    var(--admin-header-height, 68px) + var(--dc-admin-vv-offset-top, 0px)
    + var(--dc-hub-pinned-bar-h, 40px) + var(--dc-hub-pinned-bar-gap, 8px)
    + var(--dc-emulate-safe-top, 34px)
  ) !important;
  scroll-padding-top: calc(
    var(--admin-header-height, 68px) + var(--dc-admin-vv-offset-top, 0px)
    + var(--dc-hub-pinned-bar-h, 40px) + var(--dc-hub-pinned-bar-gap, 8px)
    + var(--dc-emulate-safe-top, 34px)
  );
  padding-bottom: calc(
    var(--dc-bottom-nav-mobile-reserve, 72px)
    + var(--dc-mobile-content-bottom-buffer, 10px)
    + var(--dc-emulate-safe-bottom, 34px)
  ) !important;
  scroll-padding-bottom: calc(
    var(--dc-bottom-nav-mobile-reserve, 72px)
    + var(--dc-mobile-content-bottom-buffer, 10px)
    + var(--dc-emulate-safe-bottom, 34px)
  );
}