/* Feed */

.ff-feed{display:flex; flex-direction:column; gap:14px}
.ff-feed__sentinel{padding:10px 0}

.ff-feedItem{overflow:hidden}
.ff-feedItem__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px 10px;
}
.ff-feedItem__model{display:flex; align-items:center; gap:10px; text-decoration:none}
.ff-feedItem__avatar{width:36px; height:36px; border-radius:999px; overflow:hidden; border:1px solid var(--ff-border); background:rgba(0,0,0,.25);}
.ff-feedItem__avatar img{width:36px; height:36px; object-fit:cover}
.ff-feedItem__who{display:flex; flex-direction:column; min-width:0; line-height:1.2}
/* Match typography from right sidebar "Лучшее" cards */
.ff-feedItem__name{
  font-weight:800;
  font-size:16px;
  line-height:1.15;
  color: var(--ff-txt);
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ff-feedItem__user{
  font-weight:700;
  font-size:12px;
  letter-spacing:.2px;
  color:var(--ff-txt);
  opacity:.88;
  margin-top:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ff-feedItem__media{position:relative}

/* Media box: 4:3 container, full-bleed media, portrait -> blurred side fill */
.ff-mediaBox{
  position:relative;
  width:100%;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.25);
  aspect-ratio: 4/3;
}
@supports not (aspect-ratio: 4/3){
  .ff-mediaBox{height:0; padding-top:75%;}
}
.ff-mediaBox__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter: blur(24px) saturate(1.15);
  transform: scale(1.2);
  opacity:0;
  transition: opacity .18s ease;
}
.ff-mediaBox.is-portrait .ff-mediaBox__bg{opacity:1}
.ff-mediaBox__fg{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Media stage: keeps portrait media inside 4:3 box without changing outer aspect-ratio */
.ff-mediaStage{
  position:relative;
  height:100%;
  max-height:100%;
  max-width:100%;
  flex:0 0 auto;
  container-type:inline-size;
}
.ff-mediaStage--photo{ aspect-ratio: 3/4; }
.ff-mediaStage--video{ aspect-ratio: 9/16; }

.ff-mediaBox .ff-photo,
.ff-mediaBox .ff-video,
.ff-mediaBox .ff-video img,
.ff-mediaBox .ff-video__fallback{
  width:100%;
  height:100%;
  display:block;
}
.ff-mediaBox .ff-photo{object-fit:contain}
.ff-mediaBox .ff-video{position:relative}
.ff-mediaBox .ff-video img{object-fit:contain}
.ff-mediaBox .ff-video__fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ff-muted);
}
.ff-mediaBox.is-portrait .ff-photo,
.ff-mediaBox.is-portrait .ff-video img{
  object-fit:contain;
}

.ff-video__play{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:62px;
  height:62px;
  border-radius:999px;

  /* Match last (pink) CTA button in header, but circular */
  border:1px solid rgba(255,79,216,.55);
  background: rgba(255,79,216,.22);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);

  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
}
.ff-video__play:hover{
  background: rgba(255,79,216,.38);
  transform: translate(-50%, -50%) scale(1.03);
  box-shadow: 0 18px 52px rgba(0,0,0,.28);
}
.ff-video__play i{ font-size:20px; }

.ff-video.is-playing .ff-video__play{
  opacity:0;
  pointer-events:none;
  transform: translate(-50%, -50%) scale(.98);
}

/* Watermark (letters only) */
.ff-mediaBox__wm{
  position:absolute;
  right: clamp(6px, 1.8vw, 14px);
  bottom: clamp(6px, 1.8vw, 14px);
  z-index:6;
  pointer-events:none;

  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;

  color: rgba(210,210,210,.55);
  font-weight:800;
  font-size: clamp(10px, 2.6vw, 18px);
  line-height:1;
  letter-spacing:.2px;
  text-shadow:none;
}
/* Prefer sizing relative to the actual media (stage width) when supported */
@supports (font-size: 1cqw){
  .ff-mediaBox__wm{
    right: clamp(6px, 1.8cqw, 14px);
    bottom: clamp(6px, 1.8cqw, 14px);
    font-size: clamp(10px, 3.2cqw, 18px);
  }
}

.ff-mediaBox__wm--modal{right:12px; bottom:12px}


.ff-feedItem__caption{padding:10px 12px 12px; color: rgba(233,238,252,.92)}
.ff-feedItem__caption p{margin:0 0 8px}
.ff-feedItem__caption p:last-child{margin-bottom:0}

.ff-like{min-width:72px}
.ff-like__icon{font-size:16px; line-height:1}
.ff-like.is-liked{border-color: rgba(255,79,216,.35)}
.ff-like.is-liked .ff-like__icon{color: var(--ff-accent2)}
/* Like count should match "username" style from right sidebar cards */
.ff-like__count{font-size:12px; font-weight:700; letter-spacing:.2px; color:var(--ff-txt); opacity:.88}

/* Player modal */
.ff-player{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:16px}
.ff-player[hidden]{display:none}
.ff-player__backdrop{position:absolute; inset:0; background: rgba(0,0,0,.65)}
.ff-player__card{position:relative; width:min(980px, 100%); border-radius:var(--ff-radius2); overflow:hidden;}
.ff-player__top{display:flex; align-items:center; justify-content:space-between; padding:10px 12px}
.ff-player__body{background:#000}
.ff-player__body iframe,.ff-player__body video{width:100%; height:min(70vh, 560px); display:block}

.ff-feedItem__model:hover{ text-decoration:none }
.ff-feedItem__model:hover .ff-feedItem__name,
.ff-feedItem__model:hover .ff-feedItem__user{ text-decoration:none }


/* Inline video element */
.ff-video .ff-video__el{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

/* Sound button (only control) */
.ff-video__sound{
  position:absolute;
  z-index:4;
  left:12px;
  bottom:12px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:0;
  background: rgba(18,18,26,.55);
  color: rgba(255,255,255,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(var(--ff-blur));
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}

.ff-video:not(.has-video) .ff-video__sound{
  opacity:.35;
  pointer-events:none;
}

.ff-video__sound i{ font-size:14px; }

.ff-video__sound:hover{
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* Mobile/Tablet: media container ratio follows media type */
@media (max-width: 980px){
  .ff-mediaBox.ff-mediaBox--photo{aspect-ratio:3 / 4}
  .ff-mediaBox.ff-mediaBox--video{aspect-ratio:9 / 16}
}