/* Streatham News Core v0.1.0
   Frontend deliberately reuses Events classes and Events CSS. */

.stnews-lead{
    margin:20px 0 14px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:20px;
    line-height:1.45;
}

.stnews-content{
    font-size:15px;
    line-height:1.7;
    color:#333;
}

@media(max-width:520px){
    .stnews-lead{
        font-size:18px;
    }
}


/* v0.1.2 status badges (works even if the shared Events stylesheet is cached) */
.ste-event-image{position:relative;display:block}
.ste-media-badges{position:absolute;z-index:3;top:8px;left:8px;display:flex;gap:5px;flex-wrap:wrap;max-width:calc(100% - 16px);pointer-events:none}
.ste-media-badge{display:inline-block;padding:4px 7px;border-radius:2px;background:rgba(20,20,20,.92);color:#fff;font-size:9px;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.035em;box-shadow:0 1px 3px rgba(0,0,0,.16)}


/* v0.1.3 — force badges to overlay the image, never create a strip above it */
.ste-event-image{position:relative!important;overflow:hidden!important;display:block!important;line-height:0!important}
.ste-event-image>img{display:block!important}
.ste-media-badges{position:absolute!important;z-index:5!important;top:8px!important;left:8px!important;margin:0!important;padding:0!important;width:auto!important;height:auto!important;background:transparent!important;line-height:1!important}
.ste-media-badge{position:static!important;margin:0!important;line-height:1!important}


/* v0.2.2 — Home Latest News: 1 large + 3 compact, matching Home Events. */
.stp-news.stnews-home-news{
    display:grid!important;
    grid-template-columns:minmax(0,58fr) minmax(0,42fr)!important;
    gap:9px!important;
    width:100%!important;
    max-width:100%!important;
    height:290px!important;
    min-width:0!important;
    overflow:hidden!important;
}
.stp-news.stnews-home-news .stp-news-main{
    position:relative!important;
    overflow:hidden!important;
    border-radius:5px!important;
    min-width:0!important;
    height:290px!important;
}
.stp-news.stnews-home-news .stp-news-main img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
}
.stp-news.stnews-home-news .stp-news-side{
    display:grid!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    min-width:0!important;
    height:290px!important;
    overflow:hidden!important;
}
.stp-news.stnews-home-news .stp-news-line{
    display:grid!important;
    grid-template-columns:92px minmax(0,1fr)!important;
    gap:9px!important;
    align-items:center!important;
    min-width:0!important;
    overflow:hidden!important;
}
.stp-news.stnews-home-news .stp-news-line img{
    width:92px!important;
    height:82px!important;
    object-fit:cover!important;
    border-radius:4px!important;
}
.stp-news.stnews-home-news .stp-news-line h4{
    font-size:13px!important;
    line-height:1.2!important;
    margin:0 0 4px!important;
    overflow-wrap:anywhere!important;
}
.stp-news.stnews-home-news .stp-news-line p{
    font-size:9px!important;
    line-height:1.35!important;
    margin:0!important;
}
.stnews-home-kicker{font-size:8px;font-weight:800}
.stnews-home-excerpt{font-size:9px}

@media(max-width:850px){
    .stp-news.stnews-home-news{
        grid-template-columns:minmax(0,1fr)!important;
        height:auto!important;
        gap:10px!important;
        overflow:visible!important;
    }
    .stp-news.stnews-home-news .stp-news-main{
        width:100%!important;
        height:290px!important;
    }
    .stp-news.stnews-home-news .stp-news-side{
        height:auto!important;
        grid-template-rows:none!important;
        gap:8px!important;
        overflow:visible!important;
    }
    .stp-news.stnews-home-news .stp-news-line{
        grid-template-columns:82px minmax(0,1fr)!important;
        gap:10px!important;
    }
    .stp-news.stnews-home-news .stp-news-line img{
        width:82px!important;
        height:62px!important;
    }
}
