/* ============================================================
   STORMY TITANS™ — PROFILE IMAGE VIEW REFINEMENT — 002-R8

   GOALS
   1) Letterbox artwork instead of cropping it.
   2) Center gallery lightbox images inside the visible iPhone viewport.
   3) Re-home the orphan blue divider into the top header treatment.
   ============================================================ */

/* ------------------------------------------------------------
   PRIMARY PROFILE ART
   The artwork itself is never cropped merely to fill the frame.
   Black negative space becomes the intentional letterbox.
   ------------------------------------------------------------ */
.st-profile-photo{
  box-sizing:border-box !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#000 !important;
  padding:6px !important;
}

/* Keep placeholders visually unchanged. */
.st-profile-placeholder{
  padding:0 !important;
}

/* ------------------------------------------------------------
   PROFILE PHOTO ROW / GALLERY THUMBNAILS
   Preserve complete artwork in the small preview tiles too.
   ------------------------------------------------------------ */
.r6-gallery-thumb{
  background:#000 !important;
}

.r6-gallery-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#000 !important;
}

/* Edit-profile previews should use the same no-crop rule. */
.edit-primary-photo{
  background:#000 !important;
}

.edit-primary-photo img,
.edit-gallery-item img{
  object-fit:contain !important;
  object-position:center center !important;
  background:#000 !important;
}

/* ------------------------------------------------------------
   FULL-SCREEN GALLERY VIEWER
   Use the visible viewport and device safe-area insets.
   Do not allow portrait art to wander beyond the right edge.
   ------------------------------------------------------------ */
.r6-gallery-lightbox{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483646 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-sizing:border-box !important;
  width:100vw !important;
  height:var(--st-vvh, 100dvh) !important;
  max-width:100vw !important;
  max-height:var(--st-vvh, 100dvh) !important;

  padding-top:max(18px, env(safe-area-inset-top)) !important;
  padding-right:max(18px, env(safe-area-inset-right)) !important;
  padding-bottom:max(18px, env(safe-area-inset-bottom)) !important;
  padding-left:max(18px, env(safe-area-inset-left)) !important;

  overflow:hidden !important;
  background:#000 !important;
}

.r6-gallery-lightbox[hidden]{
  display:none !important;
}

.r6-gallery-lightbox img{
  display:block !important;
  position:static !important;

  width:auto !important;
  height:auto !important;

  max-width:calc(
    100vw
    - max(18px, env(safe-area-inset-left))
    - max(18px, env(safe-area-inset-right))
  ) !important;

  max-height:calc(
    var(--st-vvh, 100dvh)
    - max(18px, env(safe-area-inset-top))
    - max(18px, env(safe-area-inset-bottom))
  ) !important;

  margin:auto !important;
  box-sizing:border-box !important;
  object-fit:contain !important;
  object-position:center center !important;

  background:#000 !important;
  border:2px solid #fff !important;
  border-radius:8px !important;
}

/* Close control remains inside the real hardware-safe corner. */
.r6-gallery-close{
  right:max(14px, env(safe-area-inset-right)) !important;
  top:calc(max(14px, env(safe-area-inset-top)) + var(--st-vvtop, 0px)) !important;
}

/* ------------------------------------------------------------
   TOP HEADER DIVIDER
   The old standalone .head-divider could appear as a floating
   thick blue stripe while the page scrolled. Remove that free-
   floating element and make the separator part of the header.
   ------------------------------------------------------------ */
.head-divider{
  display:none !important;
}

.stormy-head{
  border-bottom:2px solid rgba(82, 160, 213, .72) !important;
}

/* ------------------------------------------------------------
   MOBILE TUNING
   Slightly more internal black breathing room around artwork
   where rounded profile frames are most visually aggressive.
   ------------------------------------------------------------ */
@media (max-width:700px){
  .st-profile-photo{
    padding:8px !important;
  }

  .r6-gallery-lightbox{
    padding-left:max(14px, env(safe-area-inset-left)) !important;
    padding-right:max(14px, env(safe-area-inset-right)) !important;
  }

  .r6-gallery-lightbox img{
    max-width:calc(
      100vw
      - max(14px, env(safe-area-inset-left))
      - max(14px, env(safe-area-inset-right))
    ) !important;
  }
}