/* === SportCV media viewer story overlay final ===
   Gallery/video media use a rounded, full-image story card with safe text overlays.
   Profile photo remains clean: no story title/date/comment overlay. */

/* Fix: .media-viewer-backdrop is nested inside .scv-page-content (not a
   direct child of <body>). .scv-page-content picks up `transform` during
   the html.scv-soft-loading state (see data-true.a20fef2aca.css), and any
   transform on an ancestor turns it into the containing block for our
   position:fixed modal -- silently breaking true-viewport centering
   regardless of any width rule on the modal itself. Force it off for the
   full duration the modal is open. */
body.media-viewer-open .scv-page-content{
  transform:none !important;
  filter:none !important;
  perspective:none !important;
}
.media-viewer:has(.media-viewer-story-card),
.media-viewer.is-story-media-viewer{
  position:relative !important;
  width:min(1320px, calc(100vw - 64px)) !important;
  border-radius:28px !important;
  background:#FFFFFF !important;
}
@media(min-width:1600px){
  .media-viewer:has(.media-viewer-story-card),
  .media-viewer.is-story-media-viewer{
    width:min(1520px, calc(100vw - 120px)) !important;
  }
}
.media-viewer:has(.media-viewer-story-card) .media-viewer-head,
.media-viewer.is-story-media-viewer .media-viewer-head{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:30 !important;
  min-height:0 !important;
  height:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  pointer-events:none !important;
}
.media-viewer:has(.media-viewer-story-card) .media-viewer-title,
.media-viewer.is-story-media-viewer .media-viewer-title{
  display:none !important;
}
.media-viewer:has(.media-viewer-story-card) .media-viewer-close,
.media-viewer.is-story-media-viewer .media-viewer-close{
  top:14px !important;
  right:14px !important;
  transform:none !important;
  z-index:40 !important;
  width:44px !important;
  height:44px !important;
  border:1px solid rgba(255,255,255,.78) !important;
  background:rgba(255,255,255,.88) !important;
  color:#071833 !important;
  box-shadow:0 10px 26px rgba(7,24,51,.18) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  pointer-events:auto !important;
}
.media-viewer:has(.media-viewer-story-card) .media-viewer-close:hover,
.media-viewer.is-story-media-viewer .media-viewer-close:hover{
  background:#FFFFFF !important;
  border-color:#FFFFFF !important;
}
.media-viewer:has(.media-viewer-story-card) .media-viewer-stage,
.media-viewer.is-story-media-viewer .media-viewer-stage{
  padding:14px !important;
  background:#F8FBFF !important;
}
.media-viewer-story-card{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  min-height:380px !important;
  overflow:hidden !important;
  border-radius:22px !important;
  background:#071833 !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 16px 40px rgba(7,24,51,.16) !important;
  isolation:isolate !important;
}
.media-viewer-story-photo-card > img,
.media-viewer-story-video-card .media-viewer-video-thumb,
.media-viewer-story-video-card .media-viewer-native-video,
.media-viewer-story-video-card .media-viewer-video{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  height:clamp(360px, 76vh, 900px) !important;
  max-height:none !important;
  object-fit:contain !important;
  border-radius:0 !important;
  background:#071833 !important;
  display:block !important;
}
.media-viewer-story-video-card .media-viewer-video-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.media-viewer-story-video-card .media-viewer-native-video,
.media-viewer-story-video-card .media-viewer-video{
  border:0 !important;
}
.media-viewer-story-gradient{
  position:absolute !important;
  inset:0 !important;
  z-index:5 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg, rgba(7,24,51,.48) 0%, rgba(7,24,51,.16) 22%, rgba(7,24,51,0) 42%),
    linear-gradient(0deg, rgba(7,24,51,.72) 0%, rgba(7,24,51,.48) 18%, rgba(7,24,51,0) 46%) !important;
}
.media-viewer-story-title{
  position:absolute !important;
  top:22px !important;
  left:80px !important;
  right:80px !important;
  z-index:12 !important;
  margin:0 !important;
  color:#FFFFFF !important;
  font-size:26px !important;
  line-height:1.08 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  text-align:center !important;
  text-shadow:0 2px 14px rgba(0,0,0,.40) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  pointer-events:none !important;
}
.media-viewer-story-card .media-viewer-photo-counter,
.media-viewer-story-counter{
  position:absolute !important;
  z-index:14 !important;
  top:22px !important;
  left:22px !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:30px !important;
  padding:7px 11px !important;
  border-radius:999px !important;
  background:rgba(7,24,51,.60) !important;
  color:#FFFFFF !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.02em !important;
  box-shadow:0 8px 20px rgba(7,24,51,.20) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
.media-viewer-story-card .media-viewer-photo-nav{
  z-index:16 !important;
  width:52px !important;
  height:52px !important;
  border:1px solid rgba(255,255,255,.78) !important;
  background:rgba(255,255,255,.88) !important;
  color:#071833 !important;
  font-size:36px !important;
  font-weight:950 !important;
  box-shadow:0 14px 30px rgba(7,24,51,.18) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
.media-viewer-story-card .media-viewer-photo-nav:hover{
  background:#FFFFFF !important;
  border-color:#FFFFFF !important;
  transform:translateY(-50%) scale(1.03) !important;
}
.media-viewer-story-card .media-viewer-photo-nav.prev{left:16px !important;}
.media-viewer-story-card .media-viewer-photo-nav.next{right:16px !important;}
.media-viewer-story-card .media-viewer-media-footer,
.media-viewer-story-card .media-viewer-photo-meta{
  position:absolute !important;
  left:22px !important;
  right:22px !important;
  bottom:18px !important;
  z-index:15 !important;
  margin:0 !important;
  padding:0 58px 0 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:14px !important;
  color:#FFFFFF !important;
  pointer-events:auto !important;
}
.media-viewer-story-card .media-viewer-media-footer-main{
  min-width:0 !important;
  max-width:100% !important;
  display:block !important;
}
.media-viewer-story-card .media-viewer-photo-uploaded,
.media-viewer-story-card .media-viewer-media-date{
  display:block !important;
  color:rgba(255,255,255,.92) !important;
  font-size:17px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  text-shadow:0 2px 12px rgba(0,0,0,.48) !important;
  margin:0 0 6px !important;
}
.media-viewer-story-card .media-viewer-photo-comment-display,
.media-viewer-story-card .media-viewer-media-note{
  display:block !important;
  width:auto !important;
  max-width:min(760px, 100%) !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#FFFFFF !important;
  font-size:20px !important;
  line-height:1.24 !important;
  font-weight:900 !important;
  letter-spacing:-.025em !important;
  text-shadow:0 2px 14px rgba(0,0,0,.50) !important;
  white-space:normal !important;
  overflow:visible !important;
  overflow-wrap:break-word !important;
}


.media-viewer-story-card .media-viewer-media-edit-btn,
.media-viewer-story-card .media-viewer-photo-edit-btn{
  position:absolute !important;
  right:0 !important;
  bottom:0 !important;
  z-index:18 !important;
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  border:1px solid rgba(255,255,255,.76) !important;
  background:rgba(255,255,255,.90) !important;
  color:#3159AE !important;
  box-shadow:0 10px 24px rgba(7,24,51,.18) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
.media-viewer-story-card .media-viewer-media-edit-btn:hover,
.media-viewer-story-card .media-viewer-photo-edit-btn:hover{
  background:#FFFFFF !important;
  border-color:#FFFFFF !important;
}
.media-viewer-story-card .media-viewer-photo-meta.is-editing,
.media-viewer-story-card .media-viewer-media-footer.is-editing{
  left:18px !important;
  right:18px !important;
  bottom:18px !important;
  display:block !important;
  padding:14px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(255,255,255,.78) !important;
  box-shadow:0 16px 34px rgba(7,24,51,.22) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}
.media-viewer-story-card .media-viewer-photo-meta.is-editing .media-viewer-note-edit-date,
.media-viewer-story-card .media-viewer-media-footer.is-editing .media-viewer-note-edit-date{
  color:#52627A !important;
  text-shadow:none !important;
}
.media-viewer-story-card .media-viewer-video-open-float{
  z-index:17 !important;
  right:22px !important;
  bottom:88px !important;
  min-height:40px !important;
  padding:10px 16px !important;
  box-shadow:0 14px 30px rgba(37,99,235,.26) !important;
}
.media-viewer-story-video-card .media-viewer-play-badge{
  z-index:10 !important;
  width:72px !important;
  height:72px !important;
  background:rgba(7,24,51,.62) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
.media-viewer-profile-photo-shell{
  min-height:360px !important;
  padding:18px !important;
  border-radius:22px !important;
  background:#EEF4FB !important;
}
.media-viewer-profile-photo-shell img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:66vh !important;
  object-fit:contain !important;
  border-radius:18px !important;
  background:#EEF4FB !important;
  box-shadow:0 14px 34px rgba(7,24,51,.10) !important;
}
@media(max-width:700px){
  .media-viewer:has(.media-viewer-story-card),
  .media-viewer.is-story-media-viewer{
    width:100% !important;
    max-width:100% !important;
    border-radius:24px !important;
  }
  .media-viewer:has(.media-viewer-story-card) .media-viewer-stage,
  .media-viewer.is-story-media-viewer .media-viewer-stage{
    padding:10px !important;
  }
  .media-viewer:has(.media-viewer-story-card) .media-viewer-close,
  .media-viewer.is-story-media-viewer .media-viewer-close{
    top:10px !important;
    right:10px !important;
    width:40px !important;
    height:40px !important;
  }
  .media-viewer-story-card{
    min-height:300px !important;
    border-radius:19px !important;
  }
  .media-viewer-story-photo-card > img,
  .media-viewer-story-video-card .media-viewer-video-thumb,
  .media-viewer-story-video-card .media-viewer-native-video,
  .media-viewer-story-video-card .media-viewer-video{
    height:clamp(270px, 58vh, 560px) !important;
  }
  .media-viewer-story-title{
    top:17px !important;
    left:56px !important;
    right:56px !important;
    font-size:20px !important;
    line-height:1.12 !important;
  }
  .media-viewer-story-card .media-viewer-photo-counter,
  .media-viewer-story-counter{
    top:16px !important;
    left:16px !important;
    min-height:27px !important;
    padding:6px 9px !important;
    font-size:12px !important;
  }
  .media-viewer-story-card .media-viewer-photo-nav{
    width:42px !important;
    height:42px !important;
    font-size:31px !important;
  }
  .media-viewer-story-card .media-viewer-photo-nav.prev{left:10px !important;}
  .media-viewer-story-card .media-viewer-photo-nav.next{right:10px !important;}
  .media-viewer-story-card .media-viewer-media-footer,
  .media-viewer-story-card .media-viewer-photo-meta{
    left:16px !important;
    right:16px !important;
    bottom:14px !important;
    padding-right:48px !important;
    gap:10px !important;
  }
  .media-viewer-story-card .media-viewer-photo-uploaded,
  .media-viewer-story-card .media-viewer-media-date{
    font-size:14px !important;
    margin-bottom:4px !important;
  }
  .media-viewer-story-card .media-viewer-photo-comment-display,
  .media-viewer-story-card .media-viewer-media-note{
    font-size:16px !important;
    line-height:1.28 !important;
    max-height:4.9em !important;
    overflow:hidden !important;
  }
  .media-viewer-story-card .media-viewer-media-edit-btn,
  .media-viewer-story-card .media-viewer-photo-edit-btn{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }
  .media-viewer-story-card .media-viewer-video-open-float{
    right:16px !important;
    bottom:78px !important;
    min-height:36px !important;
    padding:9px 12px !important;
    font-size:12px !important;
  }
  .media-viewer-profile-photo-shell{
    min-height:280px !important;
    padding:12px !important;
    border-radius:19px !important;
  }
  .media-viewer-profile-photo-shell img{
    max-height:58vh !important;
    border-radius:15px !important;
  }
}
