/* ShotGram v1.3.9-fix48 — content first.
   Phones: a shorter profile header (the posts start higher) and Explore without its big title.
   Computers: a wider Explore grid, and a Create page that is a drop zone instead of a phone gallery. */

/* ---- Profile: shorter cover, smaller avatar, calmer links, country + joined on one line ---- */
.pf-b .cover { height: clamp(112px, 32vw, 140px) !important; }
.pf-b .profile-head { margin-top: -54px !important; }
.pf-b .profile-avatar .avatar { width: 92px !important; height: 92px !important; font-size: 34px; }
.pf-b .profile-meta > .profile-socials { margin: 8px 0 0 !important; gap: 8px !important; }
.pf-b .profile-meta > .profile-socials .social-dot { width: 30px !important; height: 30px !important; }
.pf-b .profile-meta > .pf-facts { margin-top: 8px !important; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 2px 14px !important; }
.pf-b .pf-stats { padding-top: 10px !important; }
.pf-b .profile-actions { margin-top: 10px !important; }

/* ---- Explore: the grid comes first (the title stays for screen readers only) ---- */
.xp-head { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; margin: -1px !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Computers ---- */
@media (min-width: 1024px) {
  /* Explore: a wide grid instead of a phone-width column */
  html.sg-web body.explore-open { --shell: 980px; }
  html.sg-web body.explore-open #exploreGrid .grid { grid-template-columns: repeat(4, 1fr); }

  /* Create: a drop zone. No phone "Gallery" bar, no webcam tile that only opens a file picker. */
  html.sg-web .ig-pick:has(#pickEmpty) .ig-pick-bar,
  html.sg-web .ig-pick:has(#pickEmpty) .ig-grid { display: none; }
  html.sg-web .ig-tile-action#pickCamera { display: none; }
  html.sg-web .ig-drop-hint { display: block; }
}
@media (min-width: 1600px) {
  html.sg-web body.explore-open { --shell: 1240px; }
  html.sg-web body.explore-open #exploreGrid .grid { grid-template-columns: repeat(5, 1fr); }
}
.ig-drop-hint { display: none; margin-top: 6px; font-size: 13px; opacity: .8; }


/* ---- v1.3.9-fix53 — Explore: loading spinner under the grid, retry button, staff report link ---- */
#exploreFoot { min-height: 44px; display: grid; place-items: center; padding: 8px 0; }
.xp-spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: #3f92ff; animation: xp-spin .8s linear infinite; }
@keyframes xp-spin { to { transform: rotate(360deg); } }
.xp-report { text-align: center; padding: 6px 0 90px; }


/* ---- v1.3.9-fix60 — Stories on a computer: phone-shaped window, picture never zoomed ----
   On the Explore page --shell grows to 980–1240px and the story window grew with it, so a
   9:16 story was scaled to 1240px wide and cropped (only its top part showed). The window now
   stays 9:16 (never wider than the screen height allows) and the picture is pinned inside it. */
.story-media img, .story-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
@media (min-width: 900px) {
  .story-stage { width: min(100%, calc(100vh * 9 / 16)); width: min(100%, calc(100dvh * 9 / 16)); }
}