/* SchoolCMS – News listing
   The archive body (template-parts/news/news-listing.php): filter bar,
   excerpt list, recent-posts side menu, plus the single article.
   Restyle per site from Figma. */

/* ── Filter bar (news-filters.php) ───────────────────────── */
.newsFilters {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-md);
    margin:    0 0 var(--space-xl);

    .searchform {
        flex:      1;
        max-width: 440px;
        margin:    0;
    }

    .categoryFilter {
        display: flex;
        width:   100%;

        @media (min-width: 576px) {
            width:       auto;
            margin-left: auto;
        }

        select {
            flex:          1;
            min-width:     0;
            padding:       8px 40px 8px 12px;
            border:        1px solid var(--color-grey);
            border-radius: var(--border-radius-sm);
            appearance:    none;
            background:    var(--color-white) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121d21' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
            color:         var(--color-black);
            font:          var(--text-16or);
            cursor:        pointer;

            @media (min-width: 576px) {
                flex: 0 1 auto;
            }
        }

        .filterSubmit {
            margin-left:   var(--space-xs);
            padding:       8px 16px;
            border:        none;
            border-radius: var(--border-radius-sm);
            background:    var(--color-black);
            color:         var(--color-white);
            cursor:        pointer;

            &:hover {
                background: var(--color-orange);
            }
        }
    }
}

/* ── Excerpt list (news-excerpt.php) ─────────────────────── */
.news-item {
    margin:  0;
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-grey);

    &:first-child {
        border-top: 1px solid var(--color-grey);
    }

    /* the thumbnail and the post meta centre on each other's midline */
    .row {
        align-items: center;
    }

    .news-item-image {
        margin-bottom: var(--space-md);

        @media (min-width: 768px) {
            margin-bottom: 0;
        }

        a {
            display: block;
        }

        /* featured images crop to a consistent card – shallower at full
           width on phones, square beside the post meta from tablet up */
        img {
            width:        100%;
            height:       auto;
            aspect-ratio: 3 / 2;
            object-fit:   cover;

            @media (min-width: 768px) {
                aspect-ratio: 1 / 1;
            }
        }
    }

    .news-title {
        margin: 0;
        font:   var(--text-24ob);

        a {
            color:           var(--color-black);
            text-decoration: none;

            &:hover {
                color: var(--color-orange);
            }
        }
    }

    time.date {
        display:        block;
        margin-top:     var(--space-xs);
        font:           var(--text-14or);
        color:          var(--color-grey-dark);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .news-item-excerpt {
        margin-top: var(--space-sm);

        p {
            margin: 0;
        }
    }
}

/* ── Fact lines (the <type>-meta.php partials) ───────────── */
/* the label: value pairs an item shows in place of a publish date –
   closing date / contract / salary on a vacancy, head of subject / exam
   board on a subject, position on a staff member – inline on wide
   screens, stacked on phones. Events have their own (events.css). */
.metaList {
    display:    flex;
    flex-wrap:  wrap;
    gap:        var(--space-xs) var(--space-md);
    margin-top: var(--space-xs);
    font:       var(--text-14or);
    color:      var(--color-grey-dark);

    .meta-label {
        font-weight: 700;
        color:       var(--color-black);
    }

    a {
        color: var(--color-orange);
    }

    &.isClosed time {
        text-decoration:       line-through;
        text-decoration-color: var(--color-grey);
    }
}

/* ── The body below the breadcrumbs bar ──────────────────── */
/* the listing (news-listing.php) and the single article (single*.php)
   both sit in a .container.newsBody – the same vertical rhythm as a
   block (.contentBlock) or the page shell (.page-content) */
.newsBody {
    /* the page-body rhythm, which this name shares with .pageBody: the
       padding lives once, in css/base/content.css, for both */

    /* blocks rendered INSIDE the article column (the post's content) carry
       their own .container – nested in a grid column its 12px padding would
       push the copy off the grid by a gutter, so it is removed here and the
       block's own .row / .col pair lines the copy up with the column edge */
    .contentBlock .container {
        padding-left:  0;
        padding-right: 0;
        max-width:     none;
    }
}

/* ── Recent-posts side menu (news-sidebar.php) ───────────── */
.newsSidebar {
    /* stacked after the list on small screens; seats on the left of the
       list on desktop, its heading level with the filter bar */
    margin-top: var(--space-xl);

    @media (min-width: 992px) {
        order:         -1;
        margin-top:    0;
        padding-right: var(--space-xl);
    }

    .newsSidebarTitle {
        margin:         0 0 var(--space-md);
        padding-bottom: var(--space-sm);
        border-bottom:  3px solid var(--color-orange);
        font:           var(--text-24ob);
    }

    ul {
        margin:     0;
        padding:    0;
        list-style: none;
    }

    li {
        padding:       var(--space-md) 0;
        border-bottom: 1px solid var(--color-grey);
    }

    a {
        display:         block;
        color:           var(--color-black);
        font:            var(--text-16ob);
        text-decoration: none;

        &:hover {
            color: var(--color-orange);
        }
    }

    .date {
        display:        block;
        margin-top:     var(--space-xs);
        font:           var(--text-14or);
        color:          var(--color-grey-dark);
        text-transform: uppercase;
        letter-spacing: 1px;
    }
}

/* ── Single news article (single.php) ────────────────────── */
.single-news article {
    /* The body is a run of blocks. Between them each keeps .contentBlock's
       own vertical rhythm, but the run carries none at its ends: the first
       block starts just under the facts line and the last ends just over
       the footer, the header and footer holding the one gap each. Until
       2026-09-25 the first and last block kept their full --block-gap, so
       a one-paragraph post sat in a column of empty space above and below
       it (Charlie's call). */
    > .news-header + .contentBlock {
        margin-top: 0;
    }

    > .contentBlock:has(+ .news-footer) {
        margin-bottom: 0;
    }

    .news-header {
        margin-bottom: var(--space-lg);

        /* the facts line – posts show "Posted:" + date, the CPT singles
           their <type>-meta.php. The featured image is the page banner
           (banner.php), not repeated here. */
        .news-meta {
            font:  var(--text-14or);
            color: var(--color-grey-dark);

            .meta-label {
                font-weight: 700;
                color:       var(--color-black);
            }
        }
    }

    .news-footer {
        display:     flex;
        flex-wrap:   wrap;
        align-items: center;
        gap:         var(--space-sm) var(--space-lg);
        margin-top:  var(--space-lg);
        font:        var(--text-14or);

        .news-categories a {
            color: var(--color-orange);
        }

        /* the Apply / Book call to action (the <type>-meta.php partials'
           'cta' part) – the end of the copy, not the header */
        .newsCta {
            flex-basis: 100%;
        }
    }
}

/* ── "← Back" link (single*.php) ─────────────────────────── */
/* the last thing in the MAIN column on every single – directly under the
   content where the eye already is, above a hairline – never further down
   the page below the side menu. It reads "Back" and goes BACK, to the page
   the visitor came from: the href stays the archive (JS off, a new tab,
   crawlers) and js/utilities/back-link.js takes over the plain left click
   when they arrived from this site. Rokeby's pattern, 2026-09-22. */
.single-news .newsBack {
    margin-top:  var(--space-md);   /* the last block's own margin does the rest */
    padding-top: var(--space-md);
    border-top:  1px solid var(--color-grey);

    .backLink {
        display:         inline-block;
        color:           var(--color-black);
        font:            var(--text-16ob);
        text-decoration: none;

        &:hover {
            color: var(--color-orange);
        }
    }
}