/**
 * ==========================================================
 * Yusaso
 * Persona FULL - horizontal Post Film Strip
 * ==========================================================
 *
 * Sept 29 2026 - built for the Persona FULL view's Latest Posts / Photos /
 * Audio / Clips / Videos strips below the Feature Board, per her explicit
 * instruction: "There is NO need to create new CSS other than the film
 * strip." Everything in this file is that one mechanism - the horizontal
 * scroll track and its prev/next buttons - and nothing else. It never
 * restyles a post card, a media tile, a button, or any color/font/border
 * that a theme already owns; those keep coming from the rest of this same
 * theme's CSS exactly as they do everywhere else those same elements
 * render.
 *
 * How the override works: .post_list (feed.css/feed_layout.css) and
 * .profile_media_gallery (persona.css/post_layout.css) are both
 * `display:grid` everywhere else on the site - that is untouched. The
 * rules below only fire when one of those two containers is a DIRECT
 * child of .post_filmstrip_track, switching JUST that instance to a
 * single-row flex layout with fixed-width children so it scrolls
 * sideways instead of wrapping into a grid. Reused, unmodified, as-is:
 * renderPostCard()'s own .post_card markup and renderProfileMediaGallery()'s
 * own .profile_media_tile markup/colors/borders.
 *
 * Lives in themes/, not global_includes/, per her direct correction: this
 * is theme CSS like every other file in this folder, not global site CSS.
 * Registered as ONE row in platform_assets (never a per-theme row) with a
 * bare `assets/css/post_filmstrip.css` path - the site's own established
 * "universal row" convention (see Stage 5-7 notes): platformAssetResolvedThemePath()
 * recognizes the bare `assets/` prefix and prepends `themes/{slug}/` at
 * READ time, using the requesting viewer's own active theme, never a value
 * stored on the row. That's why this exact file must exist, byte-identical,
 * under EVERY stock theme's own assets/css/ folder (teal AND light-grey
 * today) - one registered row, one real file per theme, same as every
 * other theme-relative asset on the site. It carries no theme-specific
 * values itself (no colors/fonts), so "identical across themes" is
 * expected and correct, not a sign it should have been global.
 *
 * Genuinely reusable regardless of where it lives: any future page in this
 * same theme that wraps content in <div class="post_filmstrip"
 * data-post-filmstrip> ... <div class="post_filmstrip_track"
 * data-post-filmstrip-track> ... </div> ... </div> gets the same
 * horizontal strip, no per-page CSS needed - this is what makes the
 * homepage dashboard reuse she asked for possible later. The companion JS
 * (global_includes/posts/assets/js/post_filmstrip.js) stays in
 * global_includes/ since it's pure behavior, not theme-owned.
 * ==========================================================
 */

.post_filmstrip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

.post_filmstrip_track {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.post_filmstrip_track::-webkit-scrollbar {
  height: 0.4rem;
}

/* The two reused containers: grid everywhere else on the site, a single
   scrolling row only here. align-items:flex-start (not stretch) is
   deliberate - stretch would force every card in the row to match the
   tallest one (a media-heavy post next to a plain-text one), which is
   exactly the "massive" symptom she reported; each card keeps its own
   natural (now-bounded, see below) height instead. */
.post_filmstrip_track > .post_list,
.post_filmstrip_track > .profile_media_gallery {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1rem;
  width: max-content;
  min-width: 100%;
}

.post_filmstrip_track > .profile_media_gallery > .profile_media_tile {
  flex: 0 0 11rem;
  width: 11rem;
}

/* Sept 29 2026-Oct 2 2026 - the per-element mosaic/single-image/framed-
   photo/link-preview/embedded-image dimension caps that used to live here
   (160px mosaic rows, 10rem single-image/embedded-image/framed-canvas
   caps, link-preview column stacking) are RETIRED Oct 3 2026, her direct
   instruction: reflowing each media type to its own bespoke narrow-width
   dimensions is exactly what was truncating/cropping content differently
   than main_posts.php shows it. Superseded by the single reference-width
   + zoom rule above (.post_filmstrip_single .post_filmstrip_track >
   .post_list > .post_card) - the post now renders at the SAME width/
   layout/proportions as the main feed, then the whole card is scaled down
   together, so a mosaic/framed-photo/link-preview looks identical to the
   main feed, just smaller. Only ever applied to .post_filmstrip_single
   (Latest Posts) in practice - no other page currently feeds a
   multi-card .post_list through this file's non-single multi-tile path
   (that one only ever receives .profile_media_gallery tiles) - so nothing
   else is affected by retiring these. Commented out rather than deleted
   in case a future non-single multi-card reuse wants its own version of
   this:
.post_filmstrip_track .post_image_grid:not(.post_image_grid_1) {
  aspect-ratio: auto;
  gap: 5px;
}
.post_filmstrip_track .post_image_grid_2 {
  grid-template-rows: 160px;
}
.post_filmstrip_track :is(.post_image_grid_3, .post_image_grid_4, .post_image_grid_5, .post_image_grid_6, .post_image_grid_7, .post_image_grid_8) {
  grid-template-rows: repeat(2, 160px);
}
.post_filmstrip_track .post_image_grid_9 {
  grid-template-rows: repeat(3, 160px);
}
.post_filmstrip_track .post_image_grid_1:not(.post_image_grid_framed) > .post_image_open > img {
  max-height: 10rem !important;
  object-fit: cover !important;
}
.post_filmstrip_track .composer_page_embedded_image .post_image_open,
.post_filmstrip_track .composer_page_embedded_image .post_image_open > img {
  max-height: 10rem !important;
  object-fit: cover !important;
}
.post_filmstrip_track .post_image_grid_framed,
.post_filmstrip_track .post_framed_content_canvas {
  aspect-ratio: auto !important;
  height: 10rem !important;
}
.post_filmstrip_track .post_link_preview.has_preview_image {
  grid-template-columns: 1fr;
}
.post_filmstrip_track .post_link_preview_image,
.post_filmstrip_track .post_link_preview_content {
  grid-column: 1 !important;
}
.post_filmstrip_track .post_link_preview_content {
  grid-row: 2 !important;
}
*/

/* Oct 1 2026 - her report: "footer action buttons need to hide." The
   like/pin/follow/comment/share action bar (post_display.php's
   <footer class="post_card_actions post_action_grid">) doesn't belong on
   a compact filmstrip preview card - hidden here rather than in
   renderPostCard() itself, same "reused, unmodified" approach as every
   other rule in this file. */
/* Oct 5 2026 - selector raised to 3 classes: post_layout.css's
   `.post_card_actions.post_action_grid{display:flex}` (2 classes) was beating
   this rule on source order, so the bar still showed on Latest Posts. */
.post_filmstrip_track .post_card_actions,
.post_filmstrip_track .post_card_actions.post_action_grid {
  display: none;
}

/* Oct 10 2026 #389 - Latest Posts filmstrip shows only the post's content with its date below (like Photos, Videos and Clips): the author badge header is hidden here, and the date caption (rendered by renderPostCard() for media_only cards) appears only inside the strip - the popup, where the card is moved out of the track, shows the normal header and footer instead. */
.post_filmstrip_track .post_card_header {
  display: none;
}

/* Oct 10 2026 - her rule: Latest Posts uses the SAME tile as Photos, Audio, Clips and Videos (.profile_media_tile > .profile_media_thumbnail + .profile_media_caption, sized by the shared tile rules above and by THE SWITCH tokens in persona.css). The post sits inside the tile's square thumbnail, laid out at the feed reference width and scaled down as a whole by post_filmstrip.js (--post-tile-fit) so it always fits, never clipped. Out of the tile (the popup) the scale is not applied. */
.profile_post_tile {
  --post-tile-reference-width: 34rem; /* the post is laid out at roughly the feed's width so its font sizes and line heights come out as in the feed, then scaled down as a whole */
}
.profile_media_thumbnail > .post_card {
  box-sizing: border-box;
  align-self: start;
  width: var(--post-tile-reference-width, 34rem);
  max-width: none;
  margin: 0;
  zoom: var(--post-tile-fit, 1);
  cursor: pointer;
}

/* Oct 2 2026 - Task #145, her report: "Latest Posts card height still
   out of control." The only thing that currently caps a post's text
   height in a filmstrip is JS (post_runtime.js's 4-line collapse,
   re-run scoped to this track by post_filmstrip.js's own
   initializeExpandablePosts(track) call) - nothing in CSS backstops it
   if that collapse doesn't end up applying to a given card (JS/script-
   load-order timing, or a future AJAX-injected strip reusing this file
   per her "homepage dashboard" plan, read before its scripts finish).
   Scoped to :not(.is_collapsed) so this is pure backstop - it never
   competes with the real 4-line .is_collapsed max-height
   (post_layout.css) when that DOES apply, it only stops an
   uncollapsed body from rendering at its full, unbounded natural
   height. 20rem is deliberately much looser than the real ~4-line
   collapse so it never visibly clips a normal short post - it only
   catches the "massive" case. Same "safety valve" pattern as the
   messages.php composer overflow-y:auto fix. */
.post_filmstrip_track .post_card_body_expandable:not(.is_collapsed) {
  max-height: 20rem;
  overflow: hidden;
}

/* Oct 5 2026 - Issue #87, her report: the audio visualizer + background were
   cropped / too big for the filmstrip thumbnail, and video thumbnails were
   cropped to a square. Scoped to the filmstrip track only.
   Audio: the shared .post_audio_visualizer has min-height 9rem (made for a
   full post card), but an 11rem-wide tile only gives its 16:9 thumbnail ~6rem,
   so the canvas was clipped. Here the canvas simply fills the thumbnail box
   (post_embeds.js sizes its drawing buffer from the rendered box, so the
   animation is drawn at tile size, not cropped). The still image used when
   the visualizer is "none" is shown whole instead of cover-cropped.
   Video: thumbnails use the native 16:9 shape of the YouTube/clip image. */
.post_filmstrip_track .profile_audio_tile .post_audio_visualizer {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  border-radius: var(--radius-none);
}

.post_filmstrip_track .profile_audio_tile .profile_media_thumbnail > img {
  object-fit: contain;
}

.post_filmstrip_track .profile_video_tile .profile_media_thumbnail {
  aspect-ratio: 16 / 9;
}

.post_filmstrip_nav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
}

.post_filmstrip_nav[hidden] {
  display: none;
}

/* Oct 5 2026 - her direct rule for ALL filmstrips: a persistent left arrow /
   center strip / right arrow layout. At either end (or when nothing scrolls)
   the arrow is disabled by post_filmstrip.js; visibility (not display) hides
   it so the arrow column keeps its width and the posts never shift. */
.post_filmstrip_nav:disabled {
  visibility: hidden;
}

@media (max-width: 600px) {
  .post_filmstrip_track > .profile_media_gallery > .profile_media_tile {
    flex-basis: 8.5rem;
    width: 8.5rem;
  }

  .post_filmstrip_nav {
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
  }
}