/**
 * Task #1532936 — Homepage card text left-edge clipping fix (v2)
 *
 * Owns: Prevents first-character clipping on Closing Soon, Trending, and
 *       I Got Paid card sections. Also fixes avatar-text overlap in payouts.
 *
 * Root cause: overflow:hidden on text elements (for -webkit-line-clamp and
 * text-overflow:ellipsis) clips the leftmost 3-5px of bold font glyphs.
 * Bold characters at font-weight:700 extend past their content-box origin,
 * and the clip boundary shaves off the leading stroke of the first character.
 *
 * Fix: Add 0.35em padding-left (scales with font-size, covers 3-5px at all
 * sizes) with !important to win the cascade. Use em units so the padding
 * adjusts proportionally if font-size changes.
 *
 * Does NOT own: Card colors, grid layout, section spacing, or line-clamp behavior.
 */

/* ══════════════════════════════════════════════════════════════════════════════
   A. GRID JUSTIFY-CONTENT OVERRIDE
   visual-fix-1510823.css wildcard [class*="-grid"] forces center on all grids.
   Card grids should not center-align their tracks.
   ══════════════════════════════════════════════════════════════════════════════ */

html body .sr-carousel-grid {
  justify-content: start !important;
  justify-items: stretch !important;
}

html body .hp-sotd__grid {
  justify-content: start !important;
  justify-items: stretch !important;
}

html body .hp-bounty__grid {
  justify-content: start !important;
  justify-items: stretch !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   B. OVERFLOW CONTAINMENT REMOVAL
   Remove overflow:hidden from card-level containers. The text-level overflow
   for line-clamping stays; this only removes the redundant parent clip.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Card container: ensure no parent-level clipping */
html body .sr-carousel-card {
  overflow: visible !important;
}

/* Title text: keep line-clamp working but add internal buffer.
   -webkit-line-clamp requires overflow:hidden so we can't remove it.
   Instead, pad the content box so the glyph rendering has room. */
html body .sr-carousel-card-title {
  padding-left: 4px !important;
  padding-right: 4px !important;
  /* Negative margin + padding trick: the card already has 16px padding,
     so adding 4px padding-left to the title shifts text 4px right.
     Compensate with negative margin to maintain alignment. */
  margin-left: -2px !important;
  margin-right: -2px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   C. TRENDING / SETTLEMENT OF THE DAY — Fix .hp-sotd__title clipping
   Same overflow:hidden + bold text glyph clipping issue.
   ══════════════════════════════════════════════════════════════════════════════ */

html body .hp-sotd__card {
  overflow: visible !important;
}

html body .hp-sotd__title {
  padding-left: 4px !important;
  padding-right: 4px !important;
  margin-left: -2px !important;
  margin-right: -2px !important;
}

html body .hp-sotd__card-title {
  padding-left: 4px !important;
  padding-right: 4px !important;
  margin-left: -2px !important;
  margin-right: -2px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   D. I GOT PAID / VERIFIED PAYOUTS — Fix avatar overlap + text clipping
   Two problems:
   (a) .hp-payout-card__meta has overflow:hidden with no padding, clipping child text
   (b) Avatar (.hp-payout-card__avatar) flex-basis isn't constrained, so it can
       shrink the meta container and push text into the clipping boundary
   ══════════════════════════════════════════════════════════════════════════════ */

/* Card container: no parent clipping */
html body .hp-payout-card {
  overflow: visible !important;
}

html body .hp-payout-scroll {
  overflow-x: auto !important;
  overflow-y: visible !important;
  justify-content: flex-start !important;
}

html body .hp-payouts .container {
  overflow-x: visible !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   C. CLOSING SOON CARDS — .sr-carousel-card-title
   Uses -webkit-line-clamp + overflow:hidden at font-weight:700, 0.88rem.
   Bold glyphs extend ~4px past content-box left edge. 0.35em ≈ 5px at 0.88rem.
   ══════════════════════════════════════════════════════════════════════════════ */

html body .sr-carousel-card-title {
  padding-left: 0.35em !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   D. TRENDING / SETTLEMENT OF THE DAY CARDS
   .hp-sotd__title (featured) and .hp-sotd__card-title (grid).
   Same bold-glyph clipping pattern as Closing Soon.
   ══════════════════════════════════════════════════════════════════════════════ */

html body .hp-sotd__title,
html body .hp-sotd__card-title {
  padding-left: 0.35em !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   E. I GOT PAID / VERIFIED PAYOUTS CARDS
   Two problems:
   (a) .hp-payout-card__meta has overflow:hidden — clips children's left edge
   (b) .hp-payout-card__settlement has overflow:hidden + text-overflow:ellipsis
       — clips first character just like the carousel titles
   (c) Avatar can crowd the text in tight flex layouts

   Fix: Remove meta overflow clip, add padding inside the text elements that
   keep their own overflow:hidden for ellipsis behavior.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Ensure flex gap is respected between avatar and text */
html body .hp-payout-card__header {
  gap: 0.75rem !important;
  min-width: 0 !important;
}

/* Meta container: remove the double-clip (parent + child both hiding overflow) */
html body .hp-payout-card__meta {
  min-width: 0 !important;
  flex: 1 !important;
  overflow: visible !important;
}

/* Name line: add left padding inside its own rendering box */
html body .hp-payout-card__name {
  padding-left: 0.35em !important;
}

/* Settlement line: keeps overflow:hidden for ellipsis, but needs padding
   INSIDE the clip boundary so the first glyph isn't shaved */
html body .hp-payout-card__settlement {
  padding-left: 0.35em !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lock avatar size so it never compresses the text area */
html body .hp-payout-card__avatar {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 40px !important;
  height: 40px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   F. BOUNTY BOARD / TOP HIGHEST-PAYOUT CARDS
   .hp-bounty-card__title uses -webkit-line-clamp + overflow:hidden at 700 weight.
   Same bold-glyph clipping pattern as other card titles.
   ══════════════════════════════════════════════════════════════════════════════ */

html body .hp-bounty-card__title {
  padding-left: 0.35em !important;
}