/* ==========================================================================
   DEMUREGRAM 2026: INSTAGRAM MEDIA FRAMING & FIT-TO-SCREEN PRECISION ENGINE
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FEED POSTS: 4:5 VERTICAL EDGE-TO-EDGE MEDIA FRAMING
   -------------------------------------------------------------------------- */
.post-media-frame,
.ig-media-frame {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  background-color: #000000 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: 1px solid #262626 !important;
  border-bottom: 1px solid #262626 !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Landscape / 16:9 Feed Media Override */
.post-media-frame.landscape,
.post-media-frame[data-aspect="landscape"],
.ig-media-frame.landscape {
  aspect-ratio: 16 / 9 !important;
}

/* Square / 1:1 Feed Media Override */
.post-media-frame.square,
.post-media-frame[data-aspect="square"],
.ig-media-frame.square {
  aspect-ratio: 1 / 1 !important;
}

/* Feed Images & Videos */
.post-media-frame img,
.post-media-frame video,
.post-media-img,
.post-media-video,
.ig-media-element {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: #000000 !important;
}

/* Multi-Photo Carousel in Feed */
.ig-carousel-container {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  position: relative !important;
  overflow: hidden !important;
  background: #000000 !important;
}

.ig-carousel-track {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.ig-carousel-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #000000 !important;
}

.ig-carousel-slide img,
.ig-carousel-slide video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Text-Only Post Card in Feed */
.post-text-body {
  width: 100% !important;
  min-height: 140px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: #000000 !important;
  padding: 32px 24px !important;
  border-top: 1px solid #262626 !important;
  border-bottom: 1px solid #262626 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   2. REELS: 9:16 VERTICAL IMMERSION FIT-TO-SCREEN
   -------------------------------------------------------------------------- */
.reels-page-wrapper {
  width: 100% !important;
  height: calc(100vh - 60px) !important;
  height: calc(100dvh - 60px) !important;
  display: flex !important;
  justify-content: center !important;
  background: #000000 !important;
  overflow: hidden !important;
  position: relative !important;
}

.reels-feed-container {
  width: 100% !important;
  max-width: 600px !important;
  height: 100% !important;
  overflow-y: scroll !important;
  scroll-snap-type: y mandatory !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.reels-feed-container::-webkit-scrollbar {
  display: none !important;
}

.reel-slide {
  width: 100% !important;
  height: calc(100vh - 60px) !important;
  height: calc(100dvh - 60px) !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 0 !important;
  box-sizing: border-box !important;
}

.reel-content-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  gap: 16px !important;
}

/* Reels Video Box: Strict 9:16 vertical ratio fitting within desktop viewport */
.reel-video-card {
  position: relative !important;
  height: 100% !important;
  max-height: calc(100vh - 84px) !important;
  min-height: 500px !important;
  aspect-ratio: 9 / 16 !important;
  width: auto !important;
  max-width: calc((100vh - 84px) * 9 / 16) !important;
  background-color: #000000 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85) !important;
  border: 1px solid #262626 !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.reel-video-element {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  cursor: pointer !important;
}

/* Mobile Reels: Edge-to-edge full-screen fit */
@media (max-width: 768px) {
  .reels-page-wrapper {
    height: 100vh !important;
    height: 100dvh !important;
  }
  .reels-feed-container {
    max-width: 100vw !important;
    width: 100vw !important;
    padding: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
  .reel-slide {
    height: 100vh !important;
    height: 100dvh !important;
    width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .reel-content-wrapper {
    width: 100vw !important;
    height: 100% !important;
    gap: 0 !important;
  }
  .reel-video-card {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    border: none !important;
    aspect-ratio: unset !important;
  }
  .reel-video-element {
    width: 100vw !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .reel-actions-column {
    right: 12px !important;
    bottom: 30px !important;
  }
  .reel-video-overlay {
    left: 0 !important;
    right: 70px !important;
    bottom: 24px !important;
    padding: 24px 16px 12px 16px !important;
  }
}

/* Bottom Gradient Mask for Creator & Caption */
.reel-video-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 48px 16px 16px 16px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.reel-video-overlay a,
.reel-video-overlay button {
  pointer-events: auto !important;
}

/* Sound Mute Toggle */
.reel-mute-btn {
  position: absolute !important;
  bottom: 16px !important;
  right: 16px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  cursor: pointer !important;
  z-index: 5 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: transform 0.15s ease !important;
  padding: 0 !important;
}

.reel-mute-btn:hover {
  transform: scale(1.1) !important;
}

/* Play/Pause Visual Flash Feedback */
.video-status-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.6) !important;
  width: 64px !important;
  height: 64px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 24px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.25s ease-out !important;
  z-index: 4 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.video-status-icon.animate-flash {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* --------------------------------------------------------------------------
   3. STORIES: 9:16 VERTICAL IMMERSION FIT-TO-SCREEN
   -------------------------------------------------------------------------- */
.story-frame-active {
  position: relative !important;
  height: min(92vh, 860px) !important;
  aspect-ratio: 9 / 16 !important;
  width: calc(min(92vh, 860px) * 9 / 16) !important;
  max-width: 100vw !important;
  background-color: #000000 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9) !important;
  border: 1px solid #262626 !important;
}

@media (max-width: 768px) {
  .story-frame-active {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    border: none !important;
    aspect-ratio: unset !important;
  }
}

.media-element,
.story-media-viewport video,
.story-media-viewport img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* --------------------------------------------------------------------------
   4. TIMESTAMPS & METADATA FORMATTING
   -------------------------------------------------------------------------- */
.post-timestamp,
.post-timestamp.js_moment {
  font-size: 12px !important;
  color: #a8a8a8 !important;
  font-weight: 400 !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.post-timestamp-footer,
.post-timestamp-footer .js_moment {
  font-size: 10px !important;
  letter-spacing: 0.4px !important;
  color: #737373 !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  display: block !important;
}

.reel-timestamp,
.reel-timestamp.js_moment {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 400 !important;
  display: inline-block !important;
}

.story-timestamp,
.story-timestamp.js_moment {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 400 !important;
  display: inline-block !important;
}

.dot-separator,
.meta-separator,
.story-dot-separator {
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 4px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}