/* ==========================================================================
   News section
   --------------------------------------------------------------------------
   Styles for news.php (listing) and news_article.php (single article).

   The site's global stylesheet zeroes the margins on p, ul, ol and headings
   and removes underlines from every link. That is fine for the hand built
   Mobirise blocks, but it flattens editor written article text into one
   solid slab. Spacing and link underlines are put back, scoped to the
   article body only, so nothing else on the site is affected.
   ========================================================================== */

.news-list,
.news-article {
    background-color: #ffffff;
    padding: 4rem 0;
}

.news-list .container,
.news-article .container {
    max-width: 1200px;
}

/* --------------------------------------------------------------------------
   Listing header
   -------------------------------------------------------------------------- */

.news-list__header {
    margin-bottom: 3rem;
    text-align: center;
}

.news-list__heading {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 1.2;
    color: #33363b;
    margin: 0 0 0.75rem;
}

.news-list__standfirst {
    font-family: 'Heebo', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #63676c;
    margin: 0 auto;
    max-width: 44rem;
}

.news-empty {
    font-family: 'Heebo', sans-serif;
    font-size: 1.1rem;
    color: #63676c;
    text-align: center;
    padding: 2rem 0;
}

/* --------------------------------------------------------------------------
   Article cards
   -------------------------------------------------------------------------- */

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.news-card {
    background-color: #ffffff;
    border: 1px solid #e3e5e9;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    height: 100%;
}

.news-card:hover,
.news-card:focus-within {
    box-shadow: 0 8px 24px rgba(51, 54, 59, 0.14);
    transform: translateY(-2px);
}

.news-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
}

.news-card__media {
    position: relative;
    width: 100%;
    /* Fallback for browsers without aspect-ratio: 16:9 box. */
    padding-top: 56.25%;
    background-color: #efefef;
    overflow: hidden;
}

.news-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Thumbnails are deliberately cropped to a common shape so the grid
       stays tidy. The full article shows the photo at its real ratio. */
    object-fit: cover;
    object-position: center;
    display: block;
}

@supports (aspect-ratio: 16 / 9) {
    .news-card__media {
        padding-top: 0;
        aspect-ratio: 16 / 9;
    }

    .news-card__image {
        position: static;
    }
}

.news-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.5rem;
}

.news-card__date {
    display: block;
    font-family: 'Heebo', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #365c9a;
    margin-bottom: 0.5rem;
}

.news-card__title {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 1.5rem;
    line-height: 1.25;
    color: #33363b;
    margin: 0 0 0.75rem;
}

.news-card__excerpt {
    font-family: 'Heebo', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #63676c;
    margin: 0 0 1.25rem;
}

.news-card__more {
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #365c9a;
    margin-top: auto;
}

.news-card__link:hover .news-card__more,
.news-card__link:focus .news-card__more {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 3rem;
}

.news-pagination__link {
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    color: #ffffff;
    background-color: #365c9a;
    border: 2px solid #365c9a;
    border-radius: 3px;
    padding: 10px 24px;
}

.news-pagination__link:hover,
.news-pagination__link:focus {
    background-color: #2b4a7d;
    border-color: #2b4a7d;
    color: #ffffff;
}

.news-pagination__status {
    font-family: 'Heebo', sans-serif;
    color: #63676c;
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Single article
   -------------------------------------------------------------------------- */

.news-article__inner {
    max-width: 48rem;
    margin: 0 auto;
}

.news-article__breadcrumb {
    max-width: 48rem;
    margin: 0 auto 2rem;
}

.news-back {
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    color: #365c9a;
}

.news-back:hover,
.news-back:focus {
    text-decoration: underline;
}

.news-article__header {
    margin-bottom: 2rem;
}

.news-article__title {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 2.5rem;
    line-height: 1.2;
    color: #33363b;
    margin: 0 0 0.75rem;
}

.news-article__date {
    display: block;
    font-family: 'Heebo', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #365c9a;
    margin-bottom: 1rem;
}

.news-article__standfirst {
    font-family: 'Heebo', sans-serif;
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 500;
    color: #45484d;
    margin: 0;
}

.news-article__figure {
    margin: 0 0 2.5rem;
}

.news-article__image {
    display: block;
    width: 100%;
    /* The real width and height are on the element, so the browser keeps the
       photo's own proportions instead of forcing one fixed ratio. */
    height: auto;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Article body: restore the spacing the global stylesheet removes
   -------------------------------------------------------------------------- */

.news-article__body {
    font-family: 'Heebo', sans-serif;
    font-size: 1.1rem;
    line-height: 1.75;
    color: #33363b;
}

.news-article__body p,
.news-article__body ul,
.news-article__body ol,
.news-article__body blockquote,
.news-article__body table,
.news-article__body figure {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.news-article__body > *:last-child {
    margin-bottom: 0;
}

.news-article__body h1,
.news-article__body h2,
.news-article__body h3,
.news-article__body h4,
.news-article__body h5,
.news-article__body h6 {
    font-family: 'Barlow Semi Condensed', sans-serif;
    color: #33363b;
    line-height: 1.25;
    margin: 2.5rem 0 1rem;
}

.news-article__body h1,
.news-article__body h2 {
    font-size: 1.9rem;
}

.news-article__body h3 {
    font-size: 1.55rem;
}

.news-article__body h4,
.news-article__body h5,
.news-article__body h6 {
    font-size: 1.3rem;
}

.news-article__body ul,
.news-article__body ol {
    padding-left: 1.5rem;
}

.news-article__body li {
    margin-bottom: 0.5rem;
}

.news-article__body a {
    color: #365c9a;
    text-decoration: underline;
}

.news-article__body a:hover,
.news-article__body a:focus {
    color: #2b4a7d;
    text-decoration: underline;
}

.news-article__body blockquote {
    border-left: 3px solid #365c9a;
    padding: 0.25rem 0 0.25rem 1.5rem;
    color: #45484d;
    font-style: italic;
}

/* Images pasted into the editor are capped to the column so an oversized
   photo can never blow out the layout. */
.news-article__body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2rem auto;
    border-radius: 4px;
}

.news-article__body hr {
    border: 0;
    border-top: 1px solid #e3e5e9;
    margin: 2.5rem 0;
}

.news-article__body table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
}

.news-article__body th,
.news-article__body td {
    border: 1px solid #e3e5e9;
    padding: 0.6rem 0.8rem;
    text-align: left;
}

.news-article__body th {
    background-color: #f5f6f8;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Previous / next article
   -------------------------------------------------------------------------- */

.news-article__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
    max-width: 48rem;
    margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid #e3e5e9;
}

.news-article__nav-link {
    flex: 1 1 250px;
    color: #33363b;
}

.news-article__nav-link--next {
    text-align: right;
}

.news-article__nav-label {
    display: block;
    font-family: 'Heebo', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #365c9a;
    margin-bottom: 0.35rem;
}

.news-article__nav-title {
    display: block;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 1.2rem;
    line-height: 1.3;
}

.news-article__nav-link:hover .news-article__nav-title,
.news-article__nav-link:focus .news-article__nav-title {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .news-list,
    .news-article {
        padding: 2.5rem 0;
    }

    .news-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .news-list__heading,
    .news-article__title {
        font-size: 2rem;
    }

    .news-article__body {
        font-size: 1.05rem;
    }

    .news-article__nav-link--next {
        text-align: left;
    }
}