/* RedFeed — feed estilo Instagram: preview 4:5 com cover, sem moldura preta */

:root {
  /* IG feed: retrato — caixa um pouco mais alta para menos corte */
  --rf-feed-preview-ratio: 3 / 4;
  --rf-feed-preview-max-h: min(78dvh, 680px);
  --rf-feed-preview-focus: top center;
}

@media (min-width: 769px) {
  :root {
    --rf-feed-preview-max-h: min(82dvh, 780px);
  }
}

/* —— Viewer Reels (fullscreen) — não aplicar crop do feed —— */
.rf-feed-reels-viewer .rf-feed-reels-media-wrap,
.rf-feed-reels-viewer .rf-feed-reels-slide {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

.rf-feed-reels-viewer .rf-feed-reels-media-wrap video,
.rf-feed-reels-viewer .rf-feed-reels-media-wrap img,
.rf-feed-reels-viewer .rf-reels-poster-cover {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

.rf-feed-reels-viewer .rf-post-media,
.rf-feed-reels-viewer .rf-feed-vid-shell {
  max-height: none !important;
  height: 100% !important;
}

/* —— Container mídia no feed (caixa 4:5, cover) —— */
body.rf-redfeed-home .rf-post-stream .rf-post-list article.rf-post .rf-post-media,
body.rf-redfeed-home .rf-post-list article.rf-post .rf-post-media,
body.rf-redfeed-home article.rf-post .rf-post-media,
html[data-rf-native-app="1"] .rf-post-stream .rf-post-list article.rf-post .rf-post-media,
html[data-rf-native-app="1"] .rf-post-list article.rf-post .rf-post-media,
html[data-rf-native-app="1"] article.rf-post .rf-post-media,
html[data-rf-native-app="1"] .rf-post-media-wrap .rf-post-media,
html[data-rf-native-app="1"] .rf-post-media.rf-feed-open-reels,
body.rf-redfeed-home .rf-post-media-wrap .rf-post-media,
body.rf-redfeed-home .rf-post-media.rf-feed-open-reels,
body.rf-feed-layout-classic.rf-redfeed-home .rf-post-media-wrap .rf-post-media,
body.rf-feed-layout-cards.rf-redfeed-home .rf-post-media-wrap .rf-post-media,
html[data-rf-feed-layout="classic"] body.rf-redfeed-home .rf-post-media-wrap .rf-post-media,
html[data-rf-feed-layout="classic"] html[data-rf-native-app="1"] .rf-post-media-wrap .rf-post-media,
html[data-rf-feed-layout="cards"] body.rf-redfeed-home .rf-post-media-wrap .rf-post-media,
html[data-rf-feed-layout="cards"] html[data-rf-native-app="1"] .rf-post-media-wrap .rf-post-media,
html[data-rf-feed-layout="cards"] body.rf-redfeed-home .rf-post-media.rf-feed-open-reels,
html[data-rf-feed-layout="cards"] html[data-rf-native-app="1"] .rf-post-media.rf-feed-open-reels {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: var(--rf-feed-preview-max-h) !important;
  aspect-ratio: var(--rf-feed-preview-ratio) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: transparent !important;
  line-height: 0;
}

/* Vídeo/imagem: largura total + cover (corta topo/baixo — igual IG) */
body.rf-redfeed-home .rf-post-stream .rf-post-list article.rf-post .rf-post-media > video,
body.rf-redfeed-home .rf-post-list article.rf-post .rf-post-media > video,
body.rf-redfeed-home article.rf-post .rf-post-media > video,
body.rf-redfeed-home .rf-post-media video.rf-feed-vid-lazy,
body.rf-redfeed-home .rf-post-media > img,
html[data-rf-native-app="1"] .rf-post-stream .rf-post-list article.rf-post .rf-post-media > video,
html[data-rf-native-app="1"] .rf-post-list article.rf-post .rf-post-media > video,
html[data-rf-native-app="1"] article.rf-post .rf-post-media > video,
html[data-rf-native-app="1"] .rf-post-media video.rf-feed-vid-lazy,
html[data-rf-native-app="1"] .rf-post-media > img,
body.rf-feed-layout-classic.rf-redfeed-home .rf-post-media video,
body.rf-feed-layout-classic.rf-redfeed-home .rf-post-media > img,
body.rf-feed-layout-cards.rf-redfeed-home .rf-post-media video,
body.rf-feed-layout-cards.rf-redfeed-home .rf-post-media > img,
html[data-rf-feed-layout="classic"] body.rf-redfeed-home .rf-post-media video,
html[data-rf-feed-layout="classic"] body.rf-redfeed-home .rf-post-media > img,
html[data-rf-feed-layout="cards"] body.rf-redfeed-home .rf-post-media video,
html[data-rf-feed-layout="cards"] body.rf-redfeed-home .rf-post-media > img,
html[data-rf-feed-layout="cards"] html[data-rf-native-app="1"] .rf-post-media video,
html[data-rf-feed-layout="cards"] html[data-rf-native-app="1"] .rf-post-media > img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: var(--rf-feed-preview-focus) !important;
  display: block !important;
  transform: none !important;
  background: transparent !important;
  pointer-events: none;
}

/* Shell lazy-load */
body.rf-redfeed-home .rf-post-media .rf-feed-vid-shell,
body.rf-redfeed-home .rf-post-media-wrap .rf-feed-vid-shell,
html[data-rf-native-app="1"] .rf-post-media .rf-feed-vid-shell,
html[data-rf-native-app="1"] .rf-post-media-wrap .rf-feed-vid-shell {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  background: #000 !important;
  line-height: 0;
}

body.rf-redfeed-home .rf-feed-vid-shell .rf-feed-vid-lazy,
body.rf-redfeed-home .rf-feed-vid-shell > video,
html[data-rf-native-app="1"] .rf-feed-vid-shell .rf-feed-vid-lazy,
html[data-rf-native-app="1"] .rf-feed-vid-shell > video {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: var(--rf-feed-preview-focus) !important;
  background: #000 !important;
  position: relative !important;
  z-index: 2;
}

body.rf-redfeed-home .rf-feed-vid-poster,
body.rf-redfeed-home .rf-feed-vid-shell .rf-feed-vid-poster,
html[data-rf-native-app="1"] .rf-feed-vid-poster,
html[data-rf-native-app="1"] .rf-feed-vid-shell .rf-feed-vid-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--rf-feed-preview-focus);
  z-index: 3;
  pointer-events: none;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #000 !important;
  transition: opacity 0.2s ease;
}

body.rf-redfeed-home .rf-feed-vid-shell.is-playing .rf-feed-vid-poster,
html[data-rf-native-app="1"] .rf-feed-vid-shell.is-playing .rf-feed-vid-poster {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Wrapper sem moldura */
body.rf-redfeed-home .rf-post-media-wrap,
html[data-rf-native-app="1"] .rf-post-media-wrap {
  background: transparent !important;
  line-height: 0;
}

html:not([data-rf-theme="light"]) body.rf-redfeed-home .rf-post-media-wrap,
html:not([data-rf-theme="light"]) html[data-rf-native-app="1"] .rf-post-media-wrap {
  background: #000 !important;
}

html[data-rf-theme="light"] body.rf-redfeed-home .rf-post-media-wrap,
html[data-rf-theme="light"] html[data-rf-native-app="1"] .rf-post-media-wrap,
html[data-rf-theme="light"] body.rf-redfeed-home .rf-post-media-wrap .rf-post-media,
html[data-rf-theme="light"] body.rf-redfeed-home .rf-post-media > video,
html[data-rf-theme="light"] body.rf-redfeed-home .rf-post-media > img,
html[data-rf-theme="light"] .rf-feed-vid-shell,
html[data-rf-theme="light"] .rf-feed-vid-shell .rf-feed-vid-lazy,
html[data-rf-theme="light"] .rf-feed-vid-poster {
  background: transparent !important;
}

/* Barra de ações compacta (IG) */
body.rf-redfeed-home .rf-post-actions,
html[data-rf-native-app="1"] .rf-post-actions {
  gap: 0 !important;
  padding: 2px 0 4px !important;
}

body.rf-redfeed-home .rf-post-top img,
html[data-rf-native-app="1"] .rf-post-top img {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
}

body.rf-redfeed-home .rf-post-top,
html[data-rf-native-app="1"] .rf-post-top {
  padding: 10px 14px 8px !important;
}

body.rf-redfeed-home .rf-post-top strong,
html[data-rf-native-app="1"] .rf-post-top strong {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
}

body.rf-redfeed-home .rf-post-top span,
html[data-rf-native-app="1"] .rf-post-top span {
  font-size: 0.74rem;
}

/* Modal comentários desktop */
body.rf-desktop-ui .rf-comment-sheet--desktop-split .rf-comment-sheet-media {
  align-items: stretch !important;
  justify-content: stretch !important;
  background: #000 !important;
}

body.rf-desktop-ui .rf-comment-sheet--desktop-split .rf-comment-sheet-media-inner {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  position: relative !important;
  background: #000 !important;
}

body.rf-desktop-ui .rf-comment-sheet--desktop-split .rf-comment-sheet-media-vid,
body.rf-desktop-ui .rf-comment-sheet--desktop-split .rf-comment-sheet-media-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  background: #000 !important;
}

html[data-rf-theme="light"] body.rf-desktop-ui .rf-comment-sheet--desktop-split .rf-comment-sheet-media,
html[data-rf-theme="light"] body.rf-desktop-ui .rf-comment-sheet--desktop-split .rf-comment-sheet-media-inner,
html[data-rf-theme="light"] body.rf-desktop-ui .rf-comment-sheet--desktop-split .rf-comment-sheet-media-vid,
html[data-rf-theme="light"] body.rf-desktop-ui .rf-comment-sheet--desktop-split .rf-comment-sheet-media-img {
  background: #fff !important;
}

/* —— Override final: feed home sempre cover 4:5 (ganha de layout-modes / inline) —— */
html[data-rf-feed-layout="classic"] body.rf-redfeed-home .rf-post-media.rf-feed-open-reels,
html[data-rf-feed-layout="cards"] body.rf-redfeed-home .rf-post-media.rf-feed-open-reels,
body.rf-feed-layout-classic.rf-redfeed-home .rf-post-media.rf-feed-open-reels,
body.rf-feed-layout-cards.rf-redfeed-home .rf-post-media.rf-feed-open-reels,
body.rf-redfeed-home .rf-post-stream .rf-post-list article.rf-post .rf-post-media,
body.rf-redfeed-home article.rf-post .rf-post-media.rf-feed-open-reels {
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--rf-feed-preview-ratio) !important;
  max-height: var(--rf-feed-preview-max-h) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

body.rf-redfeed-home .rf-post-media.rf-feed-open-reels > video,
body.rf-redfeed-home .rf-post-media.rf-feed-open-reels video.rf-feed-vid-lazy,
body.rf-redfeed-home .rf-post-media.rf-feed-open-reels > img,
body.rf-redfeed-home .rf-post-media .rf-feed-vid-shell,
body.rf-redfeed-home .rf-post-media .rf-feed-vid-shell video,
body.rf-redfeed-home .rf-post-media .rf-feed-vid-shell .rf-feed-vid-lazy,
body.rf-redfeed-home .rf-post-media .rf-feed-vid-poster {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: var(--rf-feed-preview-focus) !important;
  background: #000 !important;
  display: block !important;
}

body.rf-redfeed-home.rf-comments-open .rf-post.rf-comment-active .rf-post-media {
  aspect-ratio: var(--rf-feed-preview-ratio) !important;
  max-height: 44vh !important;
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
}

body.rf-redfeed-home.rf-comments-open .rf-post.rf-comment-active .rf-post-media video,
body.rf-redfeed-home.rf-comments-open .rf-post.rf-comment-active .rf-post-media img {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: var(--rf-feed-preview-focus) !important;
  background: transparent !important;
}

@media (max-width: 780px) {
  body.rf-redfeed-home.rf-comments-open .rf-post.rf-comment-active .rf-post-media {
    max-height: 28vh !important;
  }
}
