/* One bounded feed column: shrink with its parent, never exceed 470px. */
.home-feed {
  width: 100%;
  max-width: 470px;
  min-width: 0;
  margin-inline: auto;
}
.home-feed .social-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.home-feed .social-grid > .portrait-post {
  width: 100%;
  min-width: 0;
  margin-inline: 0;
  padding: 0 0 22px;
}
/* The shell flows naturally: author header, reserved media slot, then actions.
   Persisted width/height sets --media-ratio BEFORE any media is fetched.
   4:5 is the tallest slot, 1.91:1 the shortest; legacy slots retain 4:5. */
.portrait-media {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: var(--media-ratio, 0.8);
  overflow: hidden;
  background: #e8eee2;
}
/* Absolute positioning prevents intrinsic dimensions from stretching the slot.
   Centered cover crops 9:16 and ultra-wide uploads into the allowed geometry. */
.portrait-media > img,
.portrait-media > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.portrait-post .post-head { min-height: 47px; }
.portrait-post .post-actions { min-height: 40px; }
.portrait-post .post-caption { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .home-feed .social-grid > .portrait-post { margin-inline: 0; }
  .home-feed .portrait-post .post-head,
  .home-feed .portrait-post .post-actions,
  .home-feed .portrait-post .post-caption { margin-inline: 0; }
}