/* Progress.tz v2.9.6 — Smart White Progress Shorts Cards */

/*
 Canonical visual system:
 - editorial white card
 - light neutral border
 - clean media block
 - NO gradient overlay on text
 - dark navy typography
 - Progress green used only as accent
*/

.progress-shorts-social{
  --ps296-bg:#f4f7fb;
  --ps296-card:#ffffff;
  --ps296-card-soft:#f8fafc;
  --ps296-text:#162033;
  --ps296-muted:#667085;
  --ps296-line:#e3e8ef;
  --ps296-line-strong:#d8dee8;
  --ps296-accent:#8cc63f;
  --ps296-blue:#17345e;
  background:transparent!important;
}

.progress-shorts-social .ps-feed{
  max-width:700px!important;
  gap:16px!important;
}

/* Smart white card */
.progress-shorts-social [data-ps-post="1"],
.progress-shorts-social .ps-post{
  background:var(--ps296-card)!important;
  color:var(--ps296-text)!important;
  border:1px solid var(--ps296-line)!important;
  border-radius:18px!important;
  box-shadow:0 8px 26px rgba(21,35,55,.07)!important;
  overflow:hidden!important;
}

/* Feature media stays clean and separate from text */
.progress-shorts-social .ps-media{
  position:relative!important;
  width:100%!important;
  background:#eef2f6!important;
  border:0!important;
  border-bottom:1px solid var(--ps296-line)!important;
}

/* REMOVE all media/story gradients and pseudo overlays */
.progress-shorts-social .ps-media::before,
.progress-shorts-social .ps-media::after,
.progress-shorts-social .ps-body::before,
.progress-shorts-social .ps-body::after,
.progress-shorts-social .ps-story-text::before,
.progress-shorts-social .ps-story-text::after,
.progress-shorts-social [data-ps-post="1"]::before,
.progress-shorts-social [data-ps-post="1"]::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  opacity:0!important;
}

/* Remove gradient/image backgrounds from story text area */
.progress-shorts-social .ps-body,
.progress-shorts-social .ps-story-text,
.progress-shorts-social .ps-caption{
  background:var(--ps296-card)!important;
  background-image:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  text-shadow:none!important;
}

/* Story text block */
.progress-shorts-social .ps-body{
  padding:16px 18px 12px!important;
}

.progress-shorts-social .ps-title{
  margin:0 0 8px!important;
  color:var(--ps296-text)!important;
  font-size:18px!important;
  line-height:1.35!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
}

.progress-shorts-social .ps-story-text{
  color:#344054!important;
  font-size:15px!important;
  line-height:1.62!important;
}

.progress-shorts-social .ps-caption{
  margin-top:9px!important;
  color:var(--ps296-muted)!important;
  font-size:12.5px!important;
  line-height:1.45!important;
}

/* Engagement strip */
.progress-shorts-social .ps-engagement{
  background:var(--ps296-card)!important;
  color:var(--ps296-muted)!important;
  padding:10px 18px!important;
  border-top:1px solid #f1f3f6!important;
}

/* Action rail */
.progress-shorts-social .ps-actions{
  margin:0!important;
  padding:6px 10px!important;
  background:var(--ps296-card)!important;
  border-top:1px solid var(--ps296-line)!important;
  border-bottom:1px solid var(--ps296-line)!important;
}

.progress-shorts-social .ps-action{
  color:#475467!important;
  background:transparent!important;
  border-radius:10px!important;
  padding:10px 8px!important;
  font-weight:700!important;
}

.progress-shorts-social .ps-action:hover,
.progress-shorts-social .ps-action:focus-visible{
  background:#f2f4f7!important;
}

.progress-shorts-social .ps-action.is-active{
  color:var(--ps296-blue)!important;
}

/* Comments are lighter, matching Progress Brief card language */
.progress-shorts-social .ps-comments{
  background:var(--ps296-card)!important;
  padding:12px 18px 10px!important;
}

.progress-shorts-social .ps-comments-toggle{
  color:var(--ps296-muted)!important;
}

.progress-shorts-social .ps-comment-bubble{
  background:#f2f4f7!important;
  color:#344054!important;
  border:1px solid #eaecf0!important;
}

.progress-shorts-social .ps-comment-compose input{
  background:#f2f4f7!important;
  color:#344054!important;
  border:1px solid #eaecf0!important;
}

/* Read more footer */
.progress-shorts-social .ps-read-more-footer{
  background:var(--ps296-card)!important;
  padding:8px 18px 16px!important;
}

.progress-shorts-social .ps-read-more-footer a,
.progress-shorts-social .ps-full-story{
  color:var(--ps296-blue)!important;
  font-weight:800!important;
}

/* Load more adopts same smart white card language */
.progress-shorts-social .ps-load-more-wrap{
  padding-top:4px!important;
}

.progress-shorts-social .ps-load-more{
  background:#fff!important;
  color:var(--ps296-blue)!important;
  border:1px solid var(--ps296-line-strong)!important;
  border-radius:12px!important;
  box-shadow:0 4px 14px rgba(21,35,55,.06)!important;
}

.progress-shorts-social .ps-load-more:hover{
  background:#f8fafc!important;
  border-color:#cdd5df!important;
}

/* Remove any older gradient utility inherited by descendants */
.progress-shorts-social [data-ps-post="1"] [class*="gradient"],
.progress-shorts-social [data-ps-post="1"] [class*="overlay"]{
  background-image:none!important;
}

@media(max-width:720px){
  .progress-shorts-social [data-ps-post="1"],
  .progress-shorts-social .ps-post{
    border-radius:14px!important;
    border-left:1px solid var(--ps296-line)!important;
    border-right:1px solid var(--ps296-line)!important;
    margin-inline:10px!important;
    width:calc(100% - 20px)!important;
  }

  .progress-shorts-social .ps-feed{
    gap:12px!important;
  }

  .progress-shorts-social .ps-body{
    padding:14px 15px 11px!important;
  }

  .progress-shorts-social .ps-engagement,
  .progress-shorts-social .ps-comments,
  .progress-shorts-social .ps-read-more-footer{
    padding-left:15px!important;
    padding-right:15px!important;
  }
}