/* Image rendering safety fixes: real images take priority over placeholders. */
.story-thumb,
.featured-media,
.article-hero,
.related-thumb{
  position:relative;
  overflow:hidden;
}

.story-thumb img,
.featured-media img,
.article-hero img,
.related-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  position:relative;
  z-index:2;
}

.story-thumb:has(img)::before,
.featured-media:has(img)::before,
.article-hero:has(img)::before,
.related-thumb:has(img)::before{
  display:none!important;
  content:none!important;
}

.story-thumb:has(img),
.featured-media:has(img),
.article-hero:has(img),
.related-thumb:has(img){
  background:#e9eeea;
}

.story-badge,
.related-badge{
  z-index:3;
}

/* Article detail: use the same category-thumbnail language as the home feed
   when there is no real image. */
.article-hero.visual-good:not(:has(img)){
  background:linear-gradient(145deg,#f2c5bf,#cc7c72)!important;
}
.article-hero.visual-forward:not(:has(img)){
  background:linear-gradient(145deg,#b9cbe5,#6f8fc0)!important;
}
.article-hero.visual-nature:not(:has(img)){
  background:linear-gradient(145deg,#b9d8ba,#6a9a70)!important;
}
.article-hero.visual-repair:not(:has(img)){
  background:linear-gradient(145deg,#e2c4a7,#aa7548)!important;
}
.article-hero.visual-mind:not(:has(img)){
  background:linear-gradient(145deg,#d0c7e2,#8775ad)!important;
}
.article-hero.visual-food:not(:has(img)){
  background:linear-gradient(145deg,#eddcae,#c49b42)!important;
}
.article-hero:not(:has(img))::before{
  color:rgba(255,255,255,.30)!important;
  text-shadow:0 1px 0 rgba(0,0,0,.025);
}

/* Mobile: separate the daily discovery image from its copy.
   Keep image-less cards visually consistent with the home feed thumbnails. */
@media(max-width:899px){
  .featured-card{
    display:flex!important;
    flex-direction:column;
    height:auto!important;
    min-height:0!important;
    background:#fff!important;
    border:1px solid #e0e7e1!important;
    box-shadow:0 8px 24px rgba(38,69,53,.06)!important;
  }

  .featured-card::after{
    display:none!important;
    content:none!important;
  }

  .featured-media{
    position:relative!important;
    inset:auto!important;
    width:100%;
    height:210px;
    flex:0 0 210px;
  }

  .featured-media.visual-good:not(:has(img)){
    background:linear-gradient(145deg,#f2c5bf,#cc7c72)!important;
  }
  .featured-media.visual-forward:not(:has(img)){
    background:linear-gradient(145deg,#b9cbe5,#6f8fc0)!important;
  }
  .featured-media.visual-nature:not(:has(img)){
    background:linear-gradient(145deg,#b9d8ba,#6a9a70)!important;
  }
  .featured-media.visual-repair:not(:has(img)){
    background:linear-gradient(145deg,#e2c4a7,#aa7548)!important;
  }
  .featured-media.visual-mind:not(:has(img)){
    background:linear-gradient(145deg,#d0c7e2,#8775ad)!important;
  }
  .featured-media.visual-food:not(:has(img)){
    background:linear-gradient(145deg,#eddcae,#c49b42)!important;
  }

  .featured-media img{
    position:absolute!important;
    inset:0;
  }

  .featured-media[data-mark]::before{
    content:attr(data-mark);
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:92px;
    font-weight:900;
    color:rgba(255,255,255,.22);
    z-index:1;
  }

  .featured-copy{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    z-index:2;
    padding:18px 18px 20px;
    background:#fff;
    color:var(--text)!important;
  }

  .featured-copy h2{
    margin:0 0 12px!important;
    color:var(--text)!important;
    font-size:21px!important;
    line-height:1.48!important;
  }

  .featured-comment{
    margin:0!important;
    padding-top:11px!important;
    border-top:1px solid #e5ebe6!important;
    color:#5c6861!important;
    font-size:12.5px!important;
    line-height:1.7!important;
  }

  .featured-tag{
    margin-bottom:10px!important;
  }

  .featured-brow{
    top:14px!important;
    left:14px!important;
    background:rgba(28,42,35,.70)!important;
    color:#fff!important;
    border-color:rgba(255,255,255,.18)!important;
    backdrop-filter:blur(5px);
  }
}

@media(max-width:420px){
  .featured-media{
    height:190px;
    flex-basis:190px;
  }

  .featured-copy{
    padding:17px 16px 19px;
  }

  .featured-copy h2{
    font-size:20px!important;
  }
}

@media(min-width:900px){
  .featured-media img{
    position:absolute!important;
    inset:0;
  }
}