/* Profile cover & avatar sane defaults */
.profile-cover { width:100%; max-height:320px; object-fit:cover; border-radius:12px; display:block; }
.profile-avatar { width:112px; height:112px; object-fit:cover; border-radius:999px; border:3px solid rgba(255,255,255,.9); background:#111; display:block; }

/* CRITICAL: any media image inside post cards/feed must never overflow */
.post-card img,
.feed img,
.content img,
main img {
  max-width: 100%;
  height: auto;
}

/* Also cap tall images so they don't become gigantic */
.post-card img,
.feed img {
  max-height: 720px;
  object-fit: contain;
  display: block;
}

/* HARD STOP: slike u glavnom sadržaju nikad ne smeju preći širinu kolone */
main .container img,
main .content img,
main .feed img,
main .post-card img,
main img {
  max-width: 100% !important;
  height: auto !important;
}

/* Ako je neka slika ekstremno visoka */
main img {
  max-height: 900px !important;
  object-fit: contain !important;
}

/* PROFILE PAGE: prevent any top/hero image from becoming gigantic */
main .profile img,
main .profile-header img,
main .profile-cover,
main .cover,
main .banner,
main .hero img {
  width: 100% !important;
  max-height: 320px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 12px;
}

/* If cover is inside a container, keep container sane too */
main .profile-header,
main .profile-cover-wrap,
main .cover-wrap,
main .banner-wrap,
main .hero {
  max-height: 320px !important;
  overflow: hidden !important;
  border-radius: 12px;
}

/* STAVRONNET profile hero cover fix (.sn-hero / .sn-hero-inner) */
.sn-hero {
  max-height: 320px !important;
  overflow: hidden !important;
  border-radius: 12px;
}

.sn-hero-inner img,
.sn-hero img {
  width: 100% !important;
  max-height: 320px !important;
  object-fit: cover !important;
  display: block !important;
}

/* ===== HARD PROFILE HERO FIX (img OR background) ===== */

/* parent must be positioning context */
.sn-hero,
.sn-hero-inner {
  position: relative !important;
}

/* Cap hero height no matter what */
.sn-hero,
.sn-hero-inner,
.sn-hero-bg {
  height: 320px !important;
  max-height: 320px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

/* If hero uses background-image */
.sn-hero-bg {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* If hero uses <img> */
.sn-hero img,
.sn-hero-inner img {
  width: 100% !important;
  height: 320px !important;
  max-height: 320px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Avatar wrap visible always */
.sn-avatar-wrap {
  position: absolute !important;
  left: 24px !important;
  bottom: -56px !important;
  z-index: 9999 !important;
}

/* Avatar itself */
.profile-avatar {
  width: 112px !important;
  height: 112px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  border: 3px solid rgba(255,255,255,.9) !important;
  background: #111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
}


/* === HARD PROFILE FIX (sn-hero) === */
.sn-hero { position: relative !important; max-height: 320px !important; overflow: hidden !important; border-radius: 12px; }
.sn-hero-inner { position: relative !important; min-height: 240px !important; }

.sn-hero-bg { 
  max-height: 320px !important;
  height: 320px !important;
  background-size: cover !important;
  background-position: center !important;
}

/* if cover is an <img> anywhere in hero */
.sn-hero img, .sn-hero-inner img {
  width: 100% !important;
  max-height: 320px !important;
  height: 320px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Avatar visibility */
.sn-avatar-wrap{
  position:absolute !important;
  left: 24px !important;
  bottom: -56px !important;
  z-index: 9999 !important;
  display:block !important;
}
.profile-avatar{
  width:112px !important;
  height:112px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  border: 3px solid rgba(255,255,255,.9) !important;
  background: #111 !important;
  display:block !important;
}


/* === REAL PROFILE TEMPLATE FIX (hn-*) === */

/* Cover image (it is currently <img alt="cover">) */
img[alt="cover"],
.profile-cover {
  width: 100% !important;
  max-height: 320px !important;
  height: 320px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 12px !important;
}

/* Avatar */
.hn-avatar-xxl img.profile-avatar,
img.profile-avatar {
  width: 112px !important;
  height: 112px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  display: block !important;
  border: 3px solid rgba(255,255,255,.9) !important;
  background: #111 !important;
}

/* If fallback is shown, keep it nice */
.hn-avatar-fallback {
  width: 112px !important;
  height: 112px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
}


/* FINAL HARD STOP */
body .sn-hero img.profile-cover,
body img.profile-cover {
  width: 100% !important;
  max-height: 320px !important;
  height: 320px !important;
  object-fit: cover !important;
  display: block !important;
}


/* Ensure avatar is visible on hero */
.hn-profile-hero { position: relative !important; }
.hn-avatar-xxl { position: relative !important; z-index: 10 !important; }
.hn-avatar-xxl img.profile-avatar,
.hn-avatar-xl img.profile-avatar{
  width:112px !important;
  height:112px !important;
  border-radius:999px !important;
  object-fit:cover !important;
  display:block !important;
}
.hn-profile-cover { overflow:hidden !important; }
.hn-profile-cover img.profile-cover,
.hn-profile-cover img[alt="cover"]{
  width:100% !important;
  max-height:320px !important;
  height:320px !important;
  object-fit:cover !important;
  display:block !important;
}

/* === Drag-to-focus (modern) === */
.hn-focusable{
  cursor: grab !important;
  user-select: none !important;
  touch-action: none !important;
}
.hn-focusable:active{ cursor: grabbing !important; }

.hn-focusable-wrap{
  position: relative !important;
}
.hn-focusable-hint{
  position:absolute;
  left:12px; bottom:12px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  pointer-events:none;
}

/* Hide legacy sliders (we use drag-to-focus now) */
input[name="cover_pos_x"],
input[name="cover_pos_y"],
input[name="avatar_pos_x"],
input[name="avatar_pos_y"]{
  display:none !important;
}

/* if there are labels next to them */
label[for="id_cover_pos_x"],
label[for="id_cover_pos_y"],
label[for="id_avatar_pos_x"],
label[for="id_avatar_pos_y"]{
  display:none !important;
}

/* Kill any focus-position bubbles / hints / overlays */
.hn-focus-bubble,
.hn-focus-hint,
.hn-focus-toast,
.hn-focus-overlay,
[data-hn-bubble],
[data-hn-hint]{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* === KILL "POSITION" BALLOON / HINTS (generic) === */
/* Anything that looks like a floating hint/toast over image editor */
.hn-profile-hero [class*="bubble" i],
.hn-profile-hero [class*="hint" i],
.hn-profile-hero [class*="toast" i],
.hn-profile-hero [class*="tooltip" i],
.hn-profile-hero [class*="overlay" i],
.hn-profile-hero [class*="pos" i],
.hn-profile-hero [id*="bubble" i],
.hn-profile-hero [id*="hint" i],
.hn-profile-hero [id*="toast" i],
.hn-profile-hero [id*="tooltip" i],
.hn-profile-hero [id*="overlay" i],
.hn-profile-hero [id*="pos" i],
.hn-profile-hero [data-pos],
.hn-profile-hero [data-position],
.hn-profile-hero [data-hint],
.hn-profile-hero [data-tooltip],
.hn-profile-hero [data-toast]{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Also kill common bootstrap tooltips/popovers if they appear */
.tooltip, .popover, .toast-container, .toast{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}