/* ---------- profile media: upload widget + framing ---------- */

/* bootstrap-fileinput's drag-to-reorder handle (see the dragIcon override in
   add_or_edit_profile.stpl) — the vendored theme sizes it to a 16x16 box but doesn't otherwise
   style the glyph itself, so a plain text character was cramped into the corner by default. */
.file-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--wine);
}

/* ---------- media framing ----------
   Uploaded photos are already resized/cropped server-side to a fixed 360:550 portrait box
   (MediaService::process_photo), but videos are stored at whatever aspect ratio they were shot
   in — a landscape phone video sitting next to portrait photos in the same carousel/grid used to
   render "wide" and break the layout. Locking every profile-card thumbnail and carousel item to
   the same aspect-ratio box with object-fit: cover crops (never stretches) both kinds to match,
   the same way the server already crops oversized photos. */
.card-img-top,
.media-frame {
  aspect-ratio: 360 / 550;
  object-fit: cover;
  width: 100%;
  background-color: #000;
}

/* Bootstrap's carousel chrome sits on top of a video's own native control bar and blocks every
   click meant for it:
   - .carousel-indicators is a *full-width* strip pinned to the very bottom (z-index: 15) —
     exactly where a native player's play/seek/volume/fullscreen buttons live, and with the
     highest z-index of anything in the carousel it wins regardless of DOM order.
   - .carousel-control-prev/-next are full-height 15%-wide overlays on each side, covering the
     leftmost/rightmost native buttons (typically play and fullscreen) too.
   Only the parts a viewer actually needs to click — the indicator dots, the arrow glyphs — stay
   clickable; everywhere else in those strips now falls through to the native controls underneath. */
.carousel-indicators,
.carousel-control-prev,
.carousel-control-next {
  pointer-events: none;
}
.carousel-indicators li,
.carousel-control-prev-icon,
.carousel-control-next-icon {
  pointer-events: auto;
}

/* Lift the indicator dots and arrow glyphs clear of the very bottom edge, on top of the
   pointer-events fix above — that frees the strip where a native control bar's own bottom row
   (play/seek/volume) lives. .carousel-control-prev/-next stay full-height (so their pointer-events:
   auto icon keeps a tall, easy-to-hit click target), so the icon itself is shifted with a
   transform instead of just nudging `bottom`, which only moves a flex-centered icon half as far. */
.carousel-indicators {
  bottom: 30px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  transform: translateY(-30px);
}