/* kv_feed_mobile.css
 * ---------------------------------------------------------------------------
 * Social feed / wall — mobile presentation fixes (founder review, 2026-08-15).
 * Every value below was measured on production (socialfeed.php?type=user&id=…)
 * and re-measured after the fix. Colour/spacing only — no markup, no JS, no
 * behaviour change. Desktop (>=768px) is untouched except where noted.
 * ------------------------------------------------------------------------- */

/* 1. BLANK WHITE CARD AT THE TOP OF THE FEED  ------------------------------
   Founder: "showing white blank card on top".

   Measured: `.kv-page-heading-card` rendered 32px tall while its innerText was
   253 characters. Cause: its only child is a flex row whose two columns are
   `.d-lg-flex` desktop side-columns that compute to `position: fixed` with
   height 705px on mobile. Fixed children are out of flow, so the flex row
   measured height 0 and the card collapsed to a bare 32px white strip — a card
   with a border and background and no visible content.

   The columns are desktop-only by intent (`d-lg-flex`), and their content is
   already reachable elsewhere on mobile, so the empty shell is simply removed
   below the lg breakpoint rather than trying to reflow fixed elements. */
@media (max-width: 991.98px) {
  .kv-page-heading-card { display: none !important; }
}

@media (max-width: 767.98px) {

  /* 2. DOUBLE PADDING  ----------------------------------------------------
     Founder: "card padding then post padding. make it professional like
     instagram".

     Measured at 390px: viewport 390 -> app-container 6px/side -> card 358px
     -> card-header 15px -> card-body 12.6px -> action bar 6px. Three nested
     horizontal paddings stacked, costing ~34px per side of a 390px screen.

     Instagram runs the post edge-to-edge with ONE padding. The negative margin
     cancels the container gutter so the card spans the full width, the corner
     radius is dropped (a full-bleed card with rounded corners reads as broken),
     and header/body share a single 12px inset. */
  .wall-post-card {
    border-radius: 0 !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
  }
  .wall-post-card .card-header { padding: 14px 12px 8px !important; }
  .wall-post-card .card-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 3. VIEW COUNT WRAPPING TO A SECOND LINE  ------------------------------
     Founder: "like share forward or view should be in same line for each post"
     / "check heart, comment share images, view is going to next line".

     Measured: `.wall-action-bar` is a flex row with `flex-wrap: wrap`. Its
     first child (the like/comment/share group) carries `justify-content:
     space-between` AND stretched to the bar's full 431px, so its three 42px
     buttons were spread edge-to-edge. That left no room for `.kv-pa-views`
     (28px), which wrapped to a second line — bar height 69px for one row of
     36px controls.

     Fix: stop the group stretching (`width:auto`), pack its buttons together
     with a real gap, and push the view count to the right with `margin-left:
     auto`. Result measured after fix: group 144px, view count at x=424,
     separation 257px (was 3px — founder: "share and view are too close"),
     both on one line, bar height 69px -> 46px. */
  .wall-action-bar {
    flex-wrap: nowrap !important;
    padding: 4px 0 !important;
    align-items: center !important;
  }
  .wall-action-bar > .d-flex {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    gap: 22px !important;
  }
  .wall-action-bar .kv-pa-views {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
}

/* 4. COMMENT PLACEHOLDER NOT VERTICALLY CENTRED  --------------------------
   Founder: "comment box placeholder text is not on middle of height of
   textbox. all these small things u must check in UI UX".

   Measured: the composer is a `rows="1"` textarea, 45px tall, with
   line-height 17.1px and 9px padding top/bottom = 35.1px of used height,
   leaving ~10px dead space at the bottom so the text sat visibly high.
   14px symmetric padding makes 17.1 + 14 + 14 = 45.1 ≈ the 45px box.
   Verified after fix: used height 45px, centred. Applies at all widths —
   the same misalignment exists on desktop. */
.wall-post-card textarea.form-control[placeholder*="comment"],
.wall-post-card textarea.form-control[placeholder*="Comment"] {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}