/* A feed post's own page (pages/post.html.twig). */

/* The post page (pages/post.html.twig): the post's slides fill the file page's stage like the listing viewer's picture,
   each one fitted whole (no crop) on the stage's black; the column beside them; "More from" the album under the frame. */
.ld-pp-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 56px 24px 16px; overflow: hidden; }
.ld-pp-stage .stage-top { position: absolute; z-index: 4; }
.ld-pp-carousel { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.ld-pp-carousel .ld-post-media { height: calc(var(--fd-h) - 96px); aspect-ratio: auto; background: transparent; }
.ld-pp-carousel .ld-feed-media, .ld-pp-carousel .ld-feed-media.is-fit { background: transparent; }
.ld-pp-carousel .ld-feed-fill { display: none; }
.ld-pp-carousel .ld-feed-media :is(.ph, .ld-feed-video) { object-fit: contain; }
.ld-pp-more { box-sizing: border-box; max-width: 1600px; margin: 0 auto 48px; padding: 0 32px; }
.ld-pp-more-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ld-pp-more-title { font: 700 16px/22px var(--font-display); }
.ld-pp-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ld-pp-tile { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--ld-surface-3); }
.ld-pp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 200ms ease-out; }
.ld-pp-tile:hover img { transform: scale(1.04); }
.ld-pp-tile .play { position: absolute; right: 8px; bottom: 8px; }
.ld-pp-tile:focus-visible { outline: none; box-shadow: var(--ld-focus-ring); }
.ld-pp-gone { box-sizing: border-box; max-width: 520px; margin: 64px auto 96px; padding: 0 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ld-pp-gone .empty-art { width: 112px !important; height: 112px !important; }
.ld-pp-gone .btn { margin-top: 8px; }
@media (max-width: 760px) {
  .ld-pp-phone { padding: 0 16px; }
  .ld-pp-more { margin: 24px auto 32px; padding: 0 16px; }
  .ld-pp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .ld-pp-tile { border-radius: 4px; }
  .ld-pp-gone { margin: 40px auto 64px; }
}
@media (prefers-reduced-motion: reduce) { .ld-pp-tile img { transition: none; } .ld-pp-tile:hover img { transform: none; } }

/* The post's own caption in full under its title, its tags linked. */
.ld-pp-caption { margin: 0; color: var(--ld-text); white-space: pre-line; overflow-wrap: anywhere; }
.ld-pp-caption:has(> [data-post-caption][hidden]) { display: none; }
.ld-pp-who { font-weight: 700; color: var(--ld-text-strong); }
.ld-pp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; }
.ld-pp-meta > * + *::before { content: "·"; margin-right: 6px; }
.ld-pp-meta .ld-feed-fo { display: inline-flex; align-items: center; gap: 4px; }
/* Back to the owner's Posts tab (the phone's; a computer's sits on the stage). */
.ld-pp-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 16px; color: var(--ld-text-secondary); }
.ld-pp-back:hover { color: var(--ld-text); }