/* dash/homepage.css — HOMEPAGE ONLY (HARD SCOPED, CLEAN)
   Contract:
   - Scope ONLY to .homepage subtree
   - No :has()
   - No dependency on .shell-root/.shell-main/.shell-grid-3
   - Desktop: homepage is a single canvas (no right rail here)
   - Mobile: normal page scroll
*/

/* ======================================================================
   1) TOKENS (scoped)
   ====================================================================== */
.homepage{
  --hp-bg:#000;

  --hp-text: rgba(255,255,255,0.92);
  --hp-dim:  rgba(255,255,255,0.66);
  --hp-faint:rgba(255,255,255,0.52);

  --hp-gap: 16px;

  /* widget_full cards (MAIN) — ✅ DO NOT CHANGE */
  --hp-card-w: 320px;
  --hp-thumb-h: 130px;

  /* widget2 / widget6 strip cards — ✅ requested adjustments (NOT main) */
  --hp-strip-card-w: 288px;      /* -10% from 320px */
  --hp-strip-thumb-h: 156px;     /* +20% vs main thumb */

  /* strip spacing (NOT main) */
  --hp-strip-gap: 13px;

  /* typography */
  --hp-font: "DM Serif Text", serif;
  --hp-ui: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* unified card surface (FULL + widget2 + widget6) */
  --hp-card-bg:
    radial-gradient(1200px 280px at 50% -18%, rgba(255,255,255,0.070), rgba(0,0,0,0.00) 60%),
    radial-gradient(900px 220px at 15% 115%, rgba(255,255,255,0.040), rgba(0,0,0,0.00) 58%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.020) 0px,
      rgba(255,255,255,0.020) 1px,
      rgba(0,0,0,0.00) 1px,
      rgba(0,0,0,0.00) 6px),
    linear-gradient(180deg,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.54) 40%,
      rgba(0,0,0,0.26) 100%
    );

  --hp-card-border: 0 0 0 1px rgba(255,255,255,0.085) inset;
  --hp-card-outline: 0 0 0 1px rgba(255,255,255,0.030);
  --hp-card-shadow: 0 14px 34px rgba(0,0,0,0.82);

  --hp-card-hover-bg:
    radial-gradient(1200px 280px at 50% -18%, rgba(255,255,255,0.095), rgba(0,0,0,0.00) 62%),
    radial-gradient(900px 220px at 15% 115%, rgba(255,255,255,0.050), rgba(0,0,0,0.00) 60%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.028) 0px,
      rgba(255,255,255,0.028) 1px,
      rgba(0,0,0,0.00) 1px,
      rgba(0,0,0,0.00) 6px),
    linear-gradient(180deg,
      rgba(0,0,0,0.88) 0%,
      rgba(0,0,0,0.58) 40%,
      rgba(0,0,0,0.30) 100%
    );

  --hp-card-hover-shadow: 0 22px 56px rgba(0,0,0,0.86);

  /* depth fade on bottom of ALL cards */
  --hp-card-depth:
    linear-gradient(180deg,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.30) 38%,
      rgba(0,0,0,0.90) 100%
    );

  /* +20% text zone */
  --hp-body-min: 92px;

  background: var(--hp-bg) !important;
  color: var(--hp-text) !important;
  font-family: var(--hp-ui) !important;
}

/* Kill default blue links INSIDE homepage */
.homepage a,
.homepage a:link,
.homepage a:visited,
.homepage a:hover,
.homepage a:active,
.homepage a:focus{
  color: inherit !important;
  text-decoration: none !important;
  outline: none !important;
}

/* ======================================================================
   2) CANVAS LAYOUT
   ====================================================================== */
.homepage .hp-canvas{
  display:block !important;
  min-width: 0 !important;
}
.homepage .hp-left{
  display:grid !important;
  gap: var(--hp-gap) !important;
  align-content: start !important;
  min-width:0 !important;
}

/* ======================================================================
   3) HEADINGS
   ====================================================================== */
.homepage :is(.hpyt-head, .hpw6-head, .hpw2-headline, .hpch-head){
  font-family: var(--hp-ui) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1.12 !important;
  color: rgba(255,255,255,0.88) !important;
}

.homepage :is(.hpw6-sub, .hpch-sub, .hpw2-sub){
  font-family: var(--hp-ui) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.58) !important;
}

/* category row titles (widget_full): bigger, NOT bold */
.homepage .hpyt-row-title{
  font-family: var(--hp-ui) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1.12 !important;
  color: rgba(255,255,255,0.84) !important;
  padding: 2px 2px !important;
}

/* 1-line gap before YT feed */
.homepage .hpyt-head{
  margin-bottom: 20px !important;
}

/* ======================================================================
   4) TOP SIGNALS (hpch-*)
   ====================================================================== */
.homepage .hpchbar{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  padding: 12px !important;
  min-width: 0 !important;
}

.homepage .hpch-top{
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding: 2px 2px 10px 2px !important;
}

.homepage .hpch-row{
  display:flex !important;
  gap:12px !important;
  padding: 6px 2px 2px 2px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  min-width: 0 !important;
}
.homepage .hpch-row::-webkit-scrollbar{ height: 10px; }
.homepage .hpch-row::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.10); }
.homepage .hpch-row::-webkit-scrollbar-track{ background: rgba(0,0,0,0.35); }

.homepage .hpch-btn{
  position:relative !important;
  display:block !important;
  flex: 0 0 auto !important;
  width: 270px !important;
  min-width: 270px !important;
  height: 74px !important;

  background: linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.18)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset !important;

  scroll-snap-align: start !important;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.homepage .hpch-mini{
  position:absolute !important;
  inset: 8px 10px 8px 10px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset !important;
  background: rgba(0,0,0,0.22) !important;
  overflow:hidden !important;
}

.homepage .hpch-candle{ position:absolute !important; top:0 !important; bottom:0 !important; width:0 !important; pointer-events:none !important; }
.homepage .hpch-wick{ position:absolute !important; left:0 !important; width:1px !important; transform: translateX(-50%) !important; background: rgba(255,255,255,0.38) !important; }
.homepage .hpch-body{ position:absolute !important; left:0 !important; width:6px !important; transform: translateX(-50%) !important; background: rgba(255,255,255,0.30) !important; }
.homepage .hpch-candle--bull .hpch-body{ background: rgba(255,255,255,0.40) !important; }
.homepage .hpch-candle--bear .hpch-body{ background: rgba(255,255,255,0.18) !important; }

.homepage .hpch-overlay{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  pointer-events:none !important;
  padding: 0 10px !important;
  text-align:center !important;
}
.homepage .hpch-label{
  font-family: var(--hp-ui) !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55) !important;
}
.homepage .hpch-meta{
  font-family: var(--hp-ui) !important;
  color: rgba(255,255,255,0.62) !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* ======================================================================
   5) BREAKING BAR (widget2) — STRIP
   ====================================================================== */
.homepage .hpw2bar{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  padding: 12px !important;
  min-width: 0 !important;
}

.homepage .hpw2bar .hpw2-panel{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  display:block !important;
  overflow:hidden !important;
}

.homepage .hpw2bar .hpw2-topline{
  padding: 2px 2px 10px 2px !important;
}

.homepage .hpw2bar .hpw2-scroll{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  display:flex !important;
  gap: var(--hp-strip-gap) !important;
  padding: 6px 2px 2px 2px !important;

  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y !important;
}
.homepage .hpw2bar .hpw2-scroll::-webkit-scrollbar{ height: 10px; }
.homepage .hpw2bar .hpw2-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.10); }
.homepage .hpw2bar .hpw2-scroll::-webkit-scrollbar-track{ background: rgba(0,0,0,0.35); }

/* ======================================================================
   6) STOCKS (widget6) — STRIP
   ====================================================================== */
.homepage .hpw6bar{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  padding: 12px !important;
  min-width: 0 !important;
}

.homepage .hpw6-top{
  display:grid !important;
  gap:4px !important;
  padding: 2px 2px 10px 2px !important;
}

.homepage .hpw6-scroll2{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  display:flex !important;
  gap: var(--hp-strip-gap) !important;
  padding: 6px 2px 2px 2px !important;

  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y !important;
}
.homepage .hpw6-scroll2::-webkit-scrollbar{ height: 10px; }
.homepage .hpw6-scroll2::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.10); }
.homepage .hpw6-scroll2::-webkit-scrollbar-track{ background: rgba(0,0,0,0.35); }

/* ======================================================================
   7) YT FEED (widget_full / hpyt-*) — ✅ MAIN SECTION (DO NOT TOUCH)
   ====================================================================== */
.homepage .hpyt-wrap{ min-width:0 !important; }
.homepage .hpyt-rows{ display:grid !important; gap:18px !important; min-width:0 !important; }
.homepage .hpyt-row{ display:grid !important; gap:10px !important; min-width:0 !important; }

.homepage .hpyt-row-carousel{
  min-width:0 !important;
  display:flex !important;
  gap:12px !important;
  padding: 8px 2px 2px 2px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.homepage .hpyt-row-carousel::-webkit-scrollbar{ height: 10px; }
.homepage .hpyt-row-carousel::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.10); }
.homepage .hpyt-row-carousel::-webkit-scrollbar-track{ background: rgba(0,0,0,0.35); }

.homepage .hpyt-card{
  position: relative !important;
  flex: 0 0 auto !important;
  width: var(--hp-card-w) !important;
  min-width: var(--hp-card-w) !important;

  display:grid !important;
  grid-template-rows: var(--hp-thumb-h) auto !important;
  gap:8px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.02) 30%,
      rgba(0,0,0,0.35)
    ) !important;

  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;

  scroll-snap-align: start !important;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

/* ======================================================================
   7A) UNIFIED CARD LOOK (FULL + widget2 + widget6) — DO NOT change MAIN sizing
   - adds separation from pure black
   - same gradient/halo/depth for ALL cards
   ====================================================================== */

/* Apply shared surface to ALL cards (full + strips) */
.homepage .hpyt-card{
  background: var(--hp-card-bg) !important;
  box-shadow: var(--hp-card-border), var(--hp-card-outline), var(--hp-card-shadow) !important;
}

/* widths/heights kept separate: strip cards get their own sizing */
.homepage .hpstrip-card{
  width: var(--hp-strip-card-w) !important;
  min-width: var(--hp-strip-card-w) !important;
  grid-template-rows: var(--hp-strip-thumb-h) auto !important;
}

/* bottom depth fade for ALL cards */
.homepage .hpyt-card::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  height: 60% !important;
  pointer-events:none !important;
  z-index: 3 !important;
  background: var(--hp-card-depth) !important;
}

/* +20% height ONLY in text area for ALL cards (thumb unchanged) */
.homepage .hpyt-card .hpyt-body{
  min-height: var(--hp-body-min) !important;
  padding-bottom: 18px !important;
}

/* keep your clamp if you want; this just gives room */
.homepage .hpyt-card .hpyt-sum{
  -webkit-line-clamp: 3 !important;
}

/* thumb wrapper */
.homepage .hpyt-thumbwrap{
  position: relative !important;
  height: var(--hp-thumb-h) !important;
  overflow: hidden !important;
}

/* strip thumb height only for strip cards */
.homepage .hpstrip-card .hpyt-thumbwrap{
  height: var(--hp-strip-thumb-h) !important;
}

/* thumb fills wrapper */
.homepage .hpyt-thumbwrap .hpyt-thumb{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  width:100% !important;
  height:100% !important;

  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;

  opacity: 0.90 !important;
  filter: saturate(0.95) contrast(0.95) !important;
}

/* pixel grid + vignette overlay on hpyt-thumb ONLY */
.homepage .hpyt-thumbwrap .hpyt-thumb::before,
.homepage .hpyt-thumbwrap .hpyt-thumb::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.homepage .hpyt-thumbwrap .hpyt-thumb::before{
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.00) 0px,
      rgba(0,0,0,0.00) 7px,
      rgba(0,0,0,0.22) 7px,
      rgba(0,0,0,0.22) 8px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.00) 0px,
      rgba(0,0,0,0.00) 7px,
      rgba(0,0,0,0.18) 7px,
      rgba(0,0,0,0.18) 8px);
  mix-blend-mode: multiply !important;
  opacity: .80 !important;
}
.homepage .hpyt-thumbwrap .hpyt-thumb::after{
  background:
    radial-gradient(closest-side, rgba(0,0,0,0.08), rgba(0,0,0,0.60)),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 2px,
      rgba(255,255,255,0.06) 2px,
      rgba(255,255,255,0.06) 3px);
  opacity: .58 !important;
}

/* plate behind title text */
.homepage .hpyt-thumbwrap .hpyt-topic-plate{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(88%, 260px) !important;
  padding: 12px 16px !important;

  background: rgba(0,0,0,0.46) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset !important;

  z-index: 3 !important;
  pointer-events: none !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}

/* text styling */
.homepage .hpyt-thumbwrap .hpyt-topic-text{
  display:block !important;

  font-family: var(--hp-ui) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1.10 !important;

  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.78) !important;

  overflow-wrap:anywhere !important;
  word-break: break-word !important;
  hyphens:auto !important;
}

/* body */
.homepage .hpyt-body{
  padding: 6px 14px 14px 14px !important;
  display:grid !important;
  gap:8px !important;
  min-width:0 !important;
  background: transparent !important;
}

.homepage .hpyt-line1{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:center !important;
  min-width:0 !important;
}

.homepage .hpyt-badge,
.homepage .hpyt-source{
  font-family: var(--hp-ui) !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.90) !important;

  background: rgba(255,255,255,0.04) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset !important;
  padding: 2px 6px !important;
}
.homepage .hpyt-source{ color: rgba(255,255,255,0.72) !important; }

.homepage .hpyt-channel{
  font-family: var(--hp-ui) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.78) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
.homepage .hpyt-date{
  font-family: var(--hp-ui) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.56) !important;
}
.homepage .hpyt-slug{
  font-family: var(--hp-ui) !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.62) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.homepage .hpyt-sum{
  font-family: var(--hp-ui) !important;
  font-size: 13px !important;
  line-height: 1.50 !important;
  color: rgba(255,255,255,0.78) !important;

  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

/* safety: kill old overlay title if renderer still emits it */
.homepage .hpyt-card .hpyt-topic{ display:none !important; }

/* ======================================================================
   8) HOVER (unified for ALL cards)
   ====================================================================== */
.homepage .hpyt-card:hover,
.homepage .hpch-btn:hover{
  transform: translateY(-2px) !important;
}

.homepage .hpyt-card:hover{
  background: var(--hp-card-hover-bg) !important;
  box-shadow: var(--hp-card-border), var(--hp-card-outline), var(--hp-card-hover-shadow) !important;
}

/* ======================================================================
   9) RESPONSIVE
   ====================================================================== */
@media (max-width: 1200px){
  .homepage{
    /* MAIN (do not touch) */
    --hp-card-w: 292px;

    /* strip sizing (NOT main) */
    --hp-strip-card-w: 262px;
    --hp-strip-thumb-h: 156px;
  }
}

@media (max-width: 900px){
  .homepage{
    /* MAIN (do not touch) */
    --hp-card-w: 280px;

    /* strip sizing (NOT main) */
    --hp-strip-card-w: 252px;
    --hp-strip-thumb-h: 156px;
  }
}

/* ======================================================================
   FORCE HIDE RIGHT SLUG RAIL ON HOMEPAGE (body flag set via JS)
   ====================================================================== */
body.hp-hide-slugrail .slug-shell.subsidebar,
body.hp-hide-slugrail #slug-panel,
body.hp-hide-slugrail #slug-search{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
}

/* ======================================================================
   MOBILE: scroll affordance arrows for hpw2/hpw6 strips (visual hint only)
   ====================================================================== */
@media (max-width: 900px){
  .homepage .hpw2bar .hpw2-scroll,
  .homepage .hpw6-scroll2{
    position: relative !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .homepage .hpw2bar .hpw2-scroll::before,
  .homepage .hpw2bar .hpw2-scroll::after,
  .homepage .hpw6-scroll2::before,
  .homepage .hpw6-scroll2::after{
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 54px !important;
    pointer-events: none !important;
    z-index: 5 !important;

    background: rgba(0,0,0,0.18) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;

    opacity: 0.85 !important;
  }

  .homepage .hpw2bar .hpw2-scroll::before,
  .homepage .hpw6-scroll2::before{
    left: 4px !important;
    clip-path: polygon(68% 14%, 38% 50%, 68% 86%, 58% 92%, 22% 50%, 58% 8%) !important;
  }

  .homepage .hpw2bar .hpw2-scroll::after,
  .homepage .hpw6-scroll2::after{
    right: 4px !important;
    clip-path: polygon(32% 14%, 62% 50%, 32% 86%, 42% 92%, 78% 50%, 42% 8%) !important;
  }
}

/* PATCH: YT feed padding = same as widget2/widget6 strips */
.homepage .hpyt-row-carousel{
  padding: 6px 2px 2px 2px !important;
}

/* PATCH: YouTube Feed container padding = same as widget2/widget6 bars */
.homepage .hpyt-wrap{
  padding: 12px !important;            /* like .hpw2bar/.hpw6bar */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  min-width: 0 !important;
}

/* align headline/subcontent spacing to match bars */
.homepage .hpyt-wrap .hpyt-head{
  margin: 0 0 10px 0 !important;       /* like topline spacing */
}

/* keep rows flush like strips */
.homepage .hpyt-wrap .hpyt-rows{
  gap: 18px !important;                /* keep your existing rhythm */
}


/* PATCH: hp homepage title-plate darker like yt_main + no title clipping (no font changes) */

/* 1) Darken plate to yt_main level */
.homepage .hpyt-thumbwrap .hpyt-topic-plate{
  background: rgba(0,0,0,0.78) !important; /* yt_main: --ytm-plate-bg */
}

/* 2) Do NOT clip title (remove any clamping/ellipsis) */
.homepage .hpyt-thumbwrap .hpyt-topic-plate{
  overflow: visible !important;
}

.homepage .hpyt-thumbwrap .hpyt-topic-text{
  /* kill any accidental clamp coming from older rules */
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;

  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}


/* PATCH: title plate auto-sizes to text (no overflow), still bounded like yt_main */

/* Plate: grow with content, but never cover whole thumb */
.homepage .hpyt-thumbwrap .hpyt-topic-plate{
  background: rgba(0,0,0,0.78) !important;           /* darker like yt_main */
  height: auto !important;
  max-height: 78% !important;                         /* same spirit as yt_main */
  overflow: hidden !important;                        /* contain text inside plate */
  display: block !important;                          /* ensure normal layout */
}

/* Text: no clamp, wraps, stays inside plate */
.homepage .hpyt-thumbwrap .hpyt-topic-text{
  display: block !important;                          /* not -webkit-box */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;

  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}