/* cislondon2027 — additions on top of the shared docroot design system
   (layout.css + typography.css + site-styles.css, linked from chrome/header.php). */

/* ---- page banner (statics + article hero) ----
   environ idiom: banner with .slider__title overlay bottom-left, 1/3 width */
.banner {
    position: relative;
    background-color: var(--panel);
    width: 100%;
    max-width: 62.5rem;
    margin: 0 auto;
}
.banner img {
    display: block;
    width: 100%;
}
.banner .slider__title {
    z-index: 10;
    color: var(--ink);
    background: var(--panel);
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 33.3333%;
    padding: .25em .625em .25em 5px;
}

/* ---- hub cards (home): uses card.css classes; nothing to add ---- */

/* ---- article ---- */
.news-article {
    max-width: 46rem;
}
.news-article .news-date {
    color: var(--slate);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.news-article h1.news-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 1rem;
}
.news-article .news-body p,
.news-article .news-body ul,
.news-article .news-body ol {
    margin-bottom: 1rem;
}
.news-article .news-body a { color: var(--navy); }
.news-meta-row {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 1.5rem;
}

/* ---- listing rows (category/tag/archive) ---- */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-card);
}
.news-list li:first-child { padding-top: 0; }
.news-list .news-list-date {
    color: var(--slate);
    font-size: 13px;
    display: block;
    margin-bottom: .2rem;
}
.news-list a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
}
.news-list a:hover { text-decoration: underline; }

/* ---- area chips ---- */
.area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    align-items: baseline;
    margin: 0 0 1.25rem;
    font-size: 14px;
}
.area-chips .area-chips-label {
    font-weight: 600;
    color: var(--slate);
    margin-right: .2rem;
}
.area-chips a, .area-chips strong {
    border: 1px solid var(--border-card);
    background: var(--white);
    padding: .2rem .6rem;
    text-decoration: none;
    color: var(--navy);
}
.area-chips strong { background: var(--navy); color: var(--white); }

/* ---- pagination ---- */
.pager {
    display: flex;
    gap: .4rem;
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
}
.pager a, .pager span {
    display: block;
    padding: .4rem .8rem;
    border: 1px solid var(--border-card);
    background: var(--white);
    color: var(--navy);
    text-decoration: none;
}
.pager .active span { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---- empty state ---- */
.empty-callout {
    background: var(--white);
    border: 1px solid var(--border-card);
    padding: 2rem;
    text-align: center;
    color: var(--slate);
}