/* CS_GCN_GLOBE_HERO_BOX_VISUAL_REPAIR_V1_20260627
   Purpose:
   - flatten the spoiled double-card globe presentation
   - remove remaining black/card gap around the hero globe
   - make the globe fit inside the frame without oversized cropping

   Scope: Global Cricket Network landing hero globe only.
   No JS, DB, route, map feed, texture, vendor, or globe init changes.
*/

/* Pull the hero composition closer to the header without touching later sections. */
.page {
  padding-top: clamp(34px, 4.2vw, 58px) !important;
}

.hero {
  align-items: center !important;
  gap: clamp(28px, 4vw, 54px) !important;
}

/* Remove the outer duplicate card treatment. The inner .globe-frame is the real visual frame. */
.hero .globe-shell,
.hero .globe-shell.card,
.globe-shell.card {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Rebuild one clean premium frame instead of nested dark boxes. */
.hero .globe-frame,
.globe-shell > .globe-frame {
  margin-top: 0 !important;
  height: clamp(430px, 38vw, 520px) !important;
  min-height: 430px !important;
  max-height: 520px !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(101, 196, 255, .16), transparent 34%),
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.07), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* Keep the WebGL layer visible but visually fit the earth into the card. */
.hero #globeViz,
.globe-frame #globeViz {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

/* The earlier rescue correctly restores height. This final layer scales/recenters the rendered scene. */
.hero #globeViz .scene-container,
.globe-frame #globeViz .scene-container {
  transform: translate3d(0, -7%, 0) scale(.84) !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

/* Ensure direct canvas rules do not fight the scene-container transform. */
.hero #globeViz canvas,
.globe-frame #globeViz canvas {
  border-radius: inherit !important;
  max-width: none !important;
  max-height: none !important;
}

/* Reduce the heavy glass overlay that was making the box look grey/spoiled. */
.hero .globe-frame::after,
.globe-shell > .globe-frame::after {
  opacity: .22 !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%, rgba(0,0,0,.10)) !important;
}

/* Keep legend inside the one clean frame. */
.hero .globe-frame .info-strip {
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 18 !important;
}

/* Tablet */
@media (max-width: 1040px) {
  .page {
    padding-top: clamp(24px, 4vw, 42px) !important;
  }

  .hero .globe-frame,
  .globe-shell > .globe-frame {
    height: clamp(360px, 55vw, 470px) !important;
    min-height: 360px !important;
    max-height: 470px !important;
    border-radius: 26px !important;
  }

  .hero #globeViz .scene-container,
  .globe-frame #globeViz .scene-container {
    transform: translate3d(0, -5%, 0) scale(.88) !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .page {
    padding-top: 18px !important;
  }

  .hero {
    gap: 16px !important;
  }

  .hero .globe-frame,
  .globe-shell > .globe-frame {
    height: min(68vw, 370px) !important;
    min-height: 300px !important;
    max-height: 370px !important;
    border-radius: 22px !important;
  }

  .hero #globeViz .scene-container,
  .globe-frame #globeViz .scene-container {
    transform: translate3d(0, -3%, 0) scale(.92) !important;
  }

  .hero .globe-frame .info-strip {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
  }
}

/* Small mobile */
@media (max-width: 520px) {
  .page {
    padding-top: 10px !important;
  }

  .hero .globe-frame,
  .globe-shell > .globe-frame {
    height: min(72vw, 340px) !important;
    min-height: 280px !important;
    max-height: 340px !important;
  }

  .hero #globeViz .scene-container,
  .globe-frame #globeViz .scene-container {
    transform: translate3d(0, -2%, 0) scale(.95) !important;
  }
}