/* ==========================================================================
   NARPO News Cards Block
   ========================================================================== */

.narpo-news-cards {
    /* --nc-card-bg is the brand dark: it colours headings, arrows and the
       placeholder ground. The card surface itself is paper — see below. */
    --nc-accent:        var(--mn-brass, #d99e3f);
    --nc-card-bg:       var(--mn-slate-deep, #0a1423);
    --nc-card-radius:   var(--narpo-radius, 3px);
    --nc-img-h:         220px;
    --nc-stripe-h:      2px;
    --nc-min-card-width: 280px;
    --nc-gap:           clamp(1rem, 2.5vw, 1.75rem);
    --nc-gutter:        var(--narpo-section-gutter, clamp(1.25rem, 4vw, 3rem));
    --nc-btn-bg:        var(--mn-slate-deep, #0a1423);
    --nc-btn-hover-bg:  var(--mn-slate, #142030);

    max-width: var(--narpo-content-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--nc-gutter);
    padding-block: clamp(2.5rem, 6vw, 4rem);
    box-sizing: border-box;
}

.narpo-news-cards--crest-panel {
    position: relative;
    isolation: isolate;
    background: #fff;
    border-top: 8px solid var(--narpo-band, #3C7DE5);
    border-bottom: 8px solid var(--narpo-band, #3C7DE5);
    overflow: hidden;
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.narpo-news-cards--crest-panel > :not(.narpo-news-cards__crest) {
    position: relative;
    z-index: 1;
}

.narpo-news-cards--crest-panel .narpo-news-cards__crest {
    position: absolute;
    top: clamp(-6.25rem, 0vw, -7.5rem);
    left: clamp(-8.5rem, -3vw, -8.5rem);
    height: clamp(20rem, 30vw, 34rem);
    width: auto;
    max-width: none;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
    filter: saturate(0.8);
    object-fit: cover;
    object-position: left center;
    will-change: transform, opacity;
}

/* Wide / full alignment stretch to full viewport width while keeping
   inner content within the content max-width */
.narpo-news-cards.alignwide,
.narpo-news-cards.alignfull {
    max-width: none;
    padding-inline: 0;
}
/* Superseded by the shared column-edge rule at the foot of this file, which
   puts the heading on the same measure as the controls and the card track. */

.narpo-news-cards--crest-panel.alignfull {
    padding-inline: 0;
}

.narpo-news-cards--crest-panel .narpo-news-cards__heading,
.narpo-news-cards--crest-panel .narpo-news-cards__featured,
.narpo-news-cards--crest-panel .narpo-news-cards__viewport,
.narpo-news-cards--crest-panel .narpo-news-cards__slider-controls,
.narpo-news-cards--crest-panel .narpo-news-cards__pagination,
.narpo-news-cards--crest-panel .narpo-news-cards__controls,
.narpo-news-cards--crest-panel .narpo-news-cards__status,
.narpo-news-cards--crest-panel .narpo-news-cards__empty {
    width: 100%;
    max-width: var(--narpo-content-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--nc-gutter);
    box-sizing: border-box;
}

.narpo-news-cards--crest-panel .narpo-news-cards__heading {
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

/* ==========================================================================
   Heading
   ========================================================================== */

.narpo-news-cards__heading {
    text-align: center;
    color: var(--nc-card-bg);
    font-weight: 700;
    margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}

/* ==========================================================================
   Grid (desktop — 3 columns; tablet — 2 columns)
   ========================================================================== */

.narpo-news-cards__viewport {
    /* On desktop the viewport is just the normal flow; on mobile it becomes
       the scroll container (overflow hidden to clip the track). */
    overflow: hidden;
    border-radius: var(--nc-card-radius); /* clips the stripe ::before on curves */
    border-radius: 0; /* Actually keep flat so the stripe bleeds edge to edge */
}

.narpo-news-cards__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nc-gap);
}

/* Each cell holds a card + a Read More button beneath it.
   The card grows to fill the cell's height (which is stretched by the grid
   row) so all Read More buttons sit on the same baseline across a row. */
.narpo-news-cards__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    height: 100%;          /* fill the grid row's stretched height */
}
.narpo-news-cards__cell .narpo-news-cards__card {
    flex: 1 1 auto;        /* card takes all available height */
    width: 100%;
}
.narpo-news-cards__cell .narpo-news-cards__body {
    flex: 1 1 auto;        /* body grows so equal-height cards have matching footers */
}

/* Tablet: 2 columns for archive/grid layouts only */
@media (max-width: 900px) {
    .narpo-news-cards--grid .narpo-news-cards__track {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .narpo-news-cards--grid .narpo-news-cards__track {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Individual card
   ========================================================================== */

.narpo-news-cards__card {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--nc-card-radius);
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow var(--narpo-dur-state) var(--narpo-ease-state);
}
.narpo-news-cards__cell:hover .narpo-news-cards__card {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -16px rgba(13, 31, 92, 0.35);
}

/* ==========================================================================
   Card image
   ========================================================================== */

.narpo-news-cards__media {
    position: relative;
    height: var(--nc-img-h);
    overflow: hidden;
    flex-shrink: 0;
}

.narpo-news-cards__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.narpo-news-cards__card:hover .narpo-news-cards__media img {
    transform: scale(1.04);
}

/* Accent stripe is now handled by border-top on .__body so the image is clean. */

/* Placeholder when no image is available — branded navy with crest watermark.
   The URL is injected via a CSS var so the renderer can supply whichever
   crest attachment URL it wants. */
.narpo-news-cards__media-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--narpo-navy-deep, #081f47);
    background-image:
        linear-gradient( 135deg, rgba(8, 31, 71, 0.7) 0%, rgba(31, 79, 181, 0.5) 100% ),
        var(--narpo-news-placeholder-img, none);
    background-size: cover, 70% auto;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-blend-mode: normal, luminosity;
}

/* ==========================================================================
   Card body — navy panel with centred white text
   ========================================================================== */

.narpo-news-cards__body {
    flex: 1;
    background: var(--nc-card-bg);
    padding: 1.5rem clamp(1.25rem, 2vw, 1.75rem) 1.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    /* Thin accent stripe sits at the very top of the panel */
    border-top: var(--nc-stripe-h) solid var(--nc-accent);
}

.narpo-news-cards__title {
    color: #ffffff;
    font-family: var(--narpo-font-display, inherit);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.narpo-news-cards__excerpt {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(0.85rem, 1.1vw, 0.9rem);
    line-height: 1.55;
    margin: 0;
}

/* ==========================================================================
   Read More button — separate pill BELOW the card
   ========================================================================== */

.narpo-news-cards__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.4rem 1.1rem;
    background: var(--nc-btn-bg);
    color: #ffffff;
    text-decoration: none;
    border-radius: var(--narpo-radius-sm, 6px);
    font-weight: 600;
    font-size: 0.9rem;
    border: 2px solid var(--nc-btn-bg);
    transition: background var(--narpo-dur-state) var(--narpo-ease-state), color var(--narpo-dur-state) var(--narpo-ease-state), border-color var(--narpo-dur-state) var(--narpo-ease-state), transform var(--narpo-dur-fast) var(--narpo-ease-state);
    align-self: center;
}
.narpo-news-cards__btn:hover,
.narpo-news-cards__btn:focus-visible {
    background: #fff;
    color: var(--nc-btn-bg);
    border-color: var(--narpo-accent, #4169E1);
    transform: translateY(-2px);
}

/* ==========================================================================
   Mobile slider controls (prev/next arrows + dots)
   ========================================================================== */

.narpo-news-cards__slider-controls,
.narpo-news-cards__card-controls {
    display: none; /* hidden until mobile breakpoint */
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.narpo-news-cards__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--nc-card-bg);
    border-radius: 50%;
    background: transparent;
    color: var(--nc-card-bg);
    cursor: pointer;
    transition: background var(--narpo-dur-state) var(--narpo-ease-state), color var(--narpo-dur-state) var(--narpo-ease-state);
    flex-shrink: 0;
}
.narpo-news-cards__arrow:hover {
    background: var(--nc-card-bg);
    color: #fff;
}
.narpo-news-cards__arrow:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.narpo-news-cards__dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.narpo-news-cards__dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(13, 31, 92, 0.25);
    cursor: pointer;
    padding: 0;
    transition: background var(--narpo-dur-state) var(--narpo-ease-state), transform var(--narpo-dur-fast) var(--narpo-ease-state);
}
.narpo-news-cards__dot.is-active {
    background: var(--nc-accent);
    transform: scale(1.3);
}

/* ==========================================================================
   Carousel mode for row layouts when 3-up no longer fits
   ========================================================================== */

.narpo-news-cards--row.is-carousel .narpo-news-cards__slider-controls {
    display: flex;
}

.narpo-news-cards--row.is-carousel .narpo-news-cards__viewport {
    overflow: hidden;
    width: 100%;
    max-width: var(--narpo-content-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--nc-gutter);
    box-sizing: border-box;
}

.narpo-news-cards--row.is-carousel .narpo-news-cards__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: var(--nc-gap);
    padding-inline: 0;
    grid-template-columns: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: auto;
}

.narpo-news-cards--row.is-carousel .narpo-news-cards__track::-webkit-scrollbar {
    display: none;
}

.narpo-news-cards--row.is-carousel .narpo-news-cards__cell {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: none;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.narpo-news-cards--crest-panel.narpo-news-cards--row.is-carousel .narpo-news-cards__viewport {
    margin-inline: auto;
    padding-inline: var(--nc-gutter);
}

.narpo-news-cards--crest-panel.narpo-news-cards--row.is-carousel .narpo-news-cards__track {
    padding-inline: 0;
}

/* Very narrow: full-width cards */
@media (max-width: 380px) {
    .narpo-news-cards--row.is-carousel .narpo-news-cards__cell {
        flex: 0 0 100%;
    }
}

/* --------------------------------------------------------------------------
   Pagination (grid layout)
   -------------------------------------------------------------------------- */
.narpo-news-cards__pagination {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}
.narpo-news-cards__pagination ul,
.narpo-news-cards__pagination .page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.narpo-news-cards__pagination li { margin: 0; }
.narpo-news-cards__pagination a,
.narpo-news-cards__pagination span.current,
.narpo-news-cards__pagination .dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 0.85rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--narpo-navy-deep, #081f47);
    background: #fff;
    border: 1.5px solid var(--narpo-line, #d9deea);
    border-radius: 999px;
    text-decoration: none;
    transition: background var(--narpo-dur-state) var(--narpo-ease-state), color var(--narpo-dur-state) var(--narpo-ease-state), border-color var(--narpo-dur-state) var(--narpo-ease-state);
}
.narpo-news-cards__pagination a:hover {
    background: var(--narpo-navy, #0c2a5c);
    color: #fff;
    border-color: var(--narpo-navy, #0c2a5c);
}
.narpo-news-cards__pagination span.current {
    background: var(--narpo-accent, #4169e1);
    color: #fff;
    border-color: var(--narpo-accent, #4169e1);
}
.narpo-news-cards__pagination .dots {
    background: transparent;
    border-color: transparent;
}
.narpo-news-cards__pagination a:focus-visible {
    outline: 3px solid var(--narpo-accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   AJAX-mode controls (search + dropdowns)
   -------------------------------------------------------------------------- */
.narpo-news-cards__controls {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 0.75rem;
    align-items: end;
    margin: 0 auto 1.25rem;
    max-width: var(--narpo-content-width, 1200px);
}
.narpo-news-cards__search {
    position: relative;
    display: flex;
    align-items: center;
}
.narpo-news-cards__search-icon {
    position: absolute;
    left: 1rem;
    color: var(--narpo-ink-soft);
    pointer-events: none;
}
.narpo-news-cards__search-input {
    flex: 1;
    min-height: 48px;
    width: 100%;
    padding: 0.75rem 2.75rem;
    font: inherit;
    font-size: 1rem;
    color: var(--narpo-navy-deep);
    background: #fff;
    border: 1.5px solid var(--narpo-line);
    border-radius: 999px;
    box-shadow: 0 2px 8px -6px rgba(12, 26, 54, 0.18);
    transition: border-color var(--narpo-dur-state) var(--narpo-ease-state), box-shadow var(--narpo-dur-state) var(--narpo-ease-state);
}
.narpo-news-cards__search-input:focus {
    border-color: var(--narpo-accent);
    box-shadow: 0 0 0 4px rgba(65, 105, 225, 0.15);
}
.narpo-news-cards__search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--narpo-navy);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.narpo-news-cards__select-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 200px;
}
.narpo-news-cards__select-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--narpo-ink-soft);
    font-weight: 700;
    line-height: 1;
}
.narpo-news-cards__select {
    position: relative;
    display: flex;
    align-items: center;
}
.narpo-news-cards__select select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 2.5rem 0.65rem 1.1rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--narpo-navy-deep);
    background: #fff;
    border: 1.5px solid var(--narpo-line);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 8px -6px rgba(12, 26, 54, 0.18);
}
.narpo-news-cards__select select:focus {
    border-color: var(--narpo-accent);
    box-shadow: 0 0 0 4px rgba(65, 105, 225, 0.15);
}
.narpo-news-cards__select svg {
    position: absolute;
    right: 1rem;
    color: var(--narpo-navy);
    pointer-events: none;
}

.narpo-news-cards__status {
    text-align: center;
    color: var(--narpo-ink-soft);
    font-size: 0.85rem;
    margin: 0 0 1.25rem;
}
.narpo-news-cards__empty {
    text-align: center;
    padding: 1.5rem;
    background: var(--narpo-cream, #f4f1ea);
    color: var(--narpo-ink-soft);
    border-radius: var(--narpo-radius);
    max-width: 32rem;
    margin: 1.5rem auto 0;
}

/* Loading state */
.narpo-news-cards.is-loading .narpo-news-cards__track {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--narpo-dur-state) var(--narpo-ease-state);
}

@media (max-width: 900px) {
    .narpo-news-cards__controls { grid-template-columns: 1fr 1fr; }
    .narpo-news-cards__search   { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .narpo-news-cards__controls { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
    .narpo-news-cards__crest {
        display: none;
    }
}

/* ==========================================================================
   Featured band — editorially highlighted articles above the main list
   ========================================================================== */

.narpo-news-cards__featured {
    --nc-featured-cols: 3;

    margin: 0 auto clamp(2.25rem, 5vw, 3.25rem);
    padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--narpo-line, #d9deea);
}

.narpo-news-cards__featured[hidden] {
    display: none;
}

.narpo-news-cards__featured--1-up { --nc-featured-cols: 1; }
.narpo-news-cards__featured--2-up { --nc-featured-cols: 2; }

.narpo-news-cards__featured-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
    font-family: var(--narpo-font-display, inherit);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nc-accent);
}

.narpo-news-cards__featured-heading::before,
.narpo-news-cards__featured-heading::after {
    content: "";
    height: 2px;
    width: clamp(1.5rem, 6vw, 3.5rem);
    background: currentColor;
    opacity: 0.35;
    flex: 0 0 auto;
}

.narpo-news-cards__featured-track {
    display: grid;
    grid-template-columns: repeat(var(--nc-featured-cols), minmax(0, 1fr));
    gap: var(--nc-gap);
    align-items: stretch;
}

/* A lone featured article shouldn't stretch the full content width. */
.narpo-news-cards__featured--1-up .narpo-news-cards__featured-track {
    max-width: 42rem;
    margin-inline: auto;
}

/* The featured card itself — same anatomy, more presence. */
.narpo-news-cards__card--featured {
    box-shadow: 0 18px 38px -22px rgba(13, 31, 92, 0.5);
}

.narpo-news-cards__card--featured .narpo-news-cards__media {
    height: calc(var(--nc-img-h) * 1.25);
}

.narpo-news-cards__card--featured .narpo-news-cards__body {
    border-top-width: calc(var(--nc-stripe-h) * 1.5);
}

.narpo-news-cards__card--featured .narpo-news-cards__title {
    font-size: clamp(1.15rem, 1.9vw, 1.4rem);
}

/* "Featured" pill over the card image. */
.narpo-news-cards__badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 2;
    display: inline-block;
    padding: 0.28rem 0.7rem;
    background: var(--nc-accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 4px 12px -4px rgba(13, 31, 92, 0.55);
    pointer-events: none;
}

@media (max-width: 900px) {
    .narpo-news-cards__featured { --nc-featured-cols: 2; }
    .narpo-news-cards__featured--1-up { --nc-featured-cols: 1; }
}

@media (max-width: 650px) {
    .narpo-news-cards__featured,
    .narpo-news-cards__featured--2-up { --nc-featured-cols: 1; }

    .narpo-news-cards__featured--1-up .narpo-news-cards__featured-track {
        max-width: none;
    }
}

/* ==========================================================================
   MANCHESTER · Ecosystem Index
   The the previous build cards were navy tiles with centred white text, a 12px
   radius, a lift and a drop shadow — the SaaS card. These are printed cards:
   paper stock, a hairline mount, a mono dateline, left-flush text, and a
   typographic action at the foot instead of a button hanging underneath.
   ========================================================================== */

.narpo-news-cards--crest-panel {
    background: var(--mn-paper, #f9f6f1);
    border-top: 2px solid var(--mn-brass, #d99e3f);
    border-bottom: 1px solid var(--mn-rule, #d4cec5);
}

/* --- Section head: left-flush over left-flush content -------------------- */
.narpo-news-cards__heading,
.narpo-news-cards__featured-heading {
    color: var(--mn-slate-deep, #0a1423);
    font-family: var(--narpo-font-display, Georgia, serif);
    font-weight: 600;
    letter-spacing: var(--narpo-tracking-display, -0.014em);
    text-align: left;
    text-wrap: balance;
}
.narpo-news-cards.alignwide .narpo-news-cards__heading,
.narpo-news-cards.alignfull .narpo-news-cards__heading,
.narpo-news-cards--crest-panel .narpo-news-cards__heading {
    text-align: left;
}
.narpo-news-cards__heading::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2px;
    margin-top: 0.9rem;
    background: var(--mn-brass, #d99e3f);
}

/* --- The card is the cell: article + action read as one mounted print ---- */
.narpo-news-cards__cell {
    display: flex;
    flex-direction: column;
    /* Load-bearing. The cell carries `height: 100%` from the base layer so a
       row's Read More links share a baseline. Under content-box that 100% is
       the *content* height, so the plate's own 1px top and bottom borders sat
       2px outside the grid row — and the viewport, which clips for the mobile
       carousel, sliced the bottom border off every card on the site. */
    box-sizing: border-box;
    background: var(--mn-paper, #f9f6f1);
    border: 1px solid var(--mn-rule, #d4cec5);
    border-radius: var(--narpo-radius, 3px);
    overflow: hidden;
    transition:
        border-color var(--narpo-dur-state) var(--narpo-ease-state),
        background-color var(--narpo-dur-state) var(--narpo-ease-state);
}
.narpo-news-cards__cell > * {
    box-sizing: border-box;
}
.narpo-news-cards__cell:hover,
.narpo-news-cards__cell:focus-within {
    border-color: var(--mn-brass, #d99e3f);
}

.narpo-news-cards__card,
.narpo-news-cards__cell .narpo-news-cards__card {
    flex: 1;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}
.narpo-news-cards__cell:hover .narpo-news-cards__card {
    transform: none;
    box-shadow: none;
}

.narpo-news-cards__media {
    border-bottom: 1px solid var(--mn-rule, #d4cec5);
}
.narpo-news-cards__card:hover .narpo-news-cards__media img {
    transform: scale(1.03);
}

/* Cards without a photograph get the branch bee held on slate, not a blue
   gradient with a force crest behind it. */
.narpo-news-cards__media-placeholder {
    position: relative;
    background-color: var(--mn-slate-deep, #0a1423);
    background-image: none;
}
.narpo-news-cards__media-placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mn-bee) 62% 46% / 34% auto no-repeat;
    opacity: 0.085;
}

.narpo-news-cards__body {
    background: transparent;
    text-align: left;
    border-top: 0;
    padding: clamp(1.1rem, 1.6vw, 1.5rem) clamp(1.1rem, 1.6vw, 1.5rem) 1.1rem;
    gap: 0.6rem;
}

.narpo-news-cards__title {
    color: var(--mn-slate-deep, #0a1423);
    font-weight: 600;
    font-size: clamp(1.1rem, 1.5vw, 1.28rem);
    line-height: 1.22;
    letter-spacing: -0.008em;
    text-wrap: balance;
}

.narpo-news-cards__excerpt {
    color: var(--mn-ink-muted, #4e5661);
    font-size: 0.94rem;
    line-height: 1.55;
}

/* Featured flag: a brass plate, set in the record mono. */
.narpo-news-cards__badge {
    background: var(--mn-brass, #d99e3f);
    color: var(--mn-slate-deep, #0a1423);
    font-family: var(--narpo-font-mono, ui-monospace, monospace);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 0.28rem 0.5rem;
}

/* --- The action: a typographic link at the foot of the card -------------- */
.narpo-news-cards__btn {
    align-self: stretch;
    justify-content: flex-start;
    min-height: 44px;                       /* WCAG target size */
    padding: 0.85rem clamp(1.1rem, 1.6vw, 1.5rem);
    background: transparent;
    color: var(--mn-brass-ink, #8e4900);
    border: 0;
    border-top: 1px solid var(--mn-rule, #d4cec5);
    border-radius: 0;
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    transition: background var(--narpo-dur-state) var(--narpo-ease-state), color var(--narpo-dur-state) var(--narpo-ease-state);
}
.narpo-news-cards__btn::after {
    content: "";
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.5em;
    background: currentColor;
    /* A drawn arrow, not an icon-font glyph or an emoji. */
    clip-path: polygon(0 44%, 62% 44%, 40% 12%, 55% 0, 100% 50%, 55% 100%, 40% 88%, 62% 56%, 0 56%);
    transition: transform var(--narpo-dur, 0.22s) var(--narpo-ease, ease);
}
.narpo-news-cards__btn:hover,
.narpo-news-cards__btn:focus-visible {
    background: var(--mn-paper-2, #f1ede6);
    color: var(--mn-slate-deep, #0a1423);
    border-color: var(--mn-rule, #d4cec5);
}
.narpo-news-cards__btn:hover::after,
.narpo-news-cards__btn:focus-visible::after {
    transform: translateX(3px);
}

/* --- Controls: search, filters, pagination ------------------------------- */

/* The wrapper is positioning only — it must not draw a second box around the
   control it holds. The rectangle-around-a-pill came from styling it here
   while the <select> inside kept the inherited 999px border-radius. */
.narpo-news-cards__select {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-height: 0;
}

.narpo-news-cards__search-input,
.narpo-news-cards__select select {
    box-sizing: border-box;
    min-height: 46px;
    border: 1px solid var(--mn-rule-strong, #beb6ab);
    border-radius: var(--narpo-radius, 3px);
    background: var(--mn-paper, #f9f6f1);
    color: var(--mn-ink, #19222f);
    box-shadow: none;
    font-family: var(--narpo-font-sans, system-ui, sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    transition:
        border-color var(--narpo-dur-state) var(--narpo-ease-state),
        background-color var(--narpo-dur-state) var(--narpo-ease-state),
        box-shadow var(--narpo-dur-state) var(--narpo-ease-state);
}

.narpo-news-cards__search-input:hover,
.narpo-news-cards__select select:hover {
    border-color: var(--mn-ink-faint, #747b84);
    background: var(--mn-paper-2, #f1ede6);
}

/* The focus ring is the site's ring, not a soft blue halo. It never animates. */
.narpo-news-cards__search-input:focus-visible,
.narpo-news-cards__select select:focus-visible {
    border-color: var(--mn-brass, #d99e3f);
    background: var(--mn-paper, #f9f6f1);
    box-shadow: none;
    transition: none;
}
.narpo-news-cards__search-input:focus,
.narpo-news-cards__select select:focus {
    border-color: var(--mn-brass, #d99e3f);
    box-shadow: none;
}

/* The label is a record label — the mono outlier, role 1 of 2. */
.narpo-news-cards__select-label {
    font-family: var(--narpo-font-mono, ui-monospace, monospace);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--mn-ink-muted, #4e5661);
}

.narpo-news-cards__select svg {
    color: var(--mn-ink-muted, #4e5661);
    transition: color var(--narpo-dur-state) var(--narpo-ease-state);
}
.narpo-news-cards__select:hover svg,
.narpo-news-cards__select:focus-within svg {
    color: var(--mn-brass-ink, #8e4900);
}

.narpo-news-cards__search-icon {
    color: var(--mn-ink-faint, #747b84);
    transition: color var(--narpo-dur-state) var(--narpo-ease-state);
}
.narpo-news-cards__search:focus-within .narpo-news-cards__search-icon {
    color: var(--mn-brass-ink, #8e4900);
}

.narpo-news-cards__search-clear {
    background: var(--mn-slate-deep, #0a1423);
    border-radius: var(--narpo-radius, 3px);
    transition:
        background-color var(--narpo-dur-state) var(--narpo-ease-state),
        color var(--narpo-dur-state) var(--narpo-ease-state);
}
.narpo-news-cards__search-clear:hover,
.narpo-news-cards__search-clear:focus-visible {
    background: var(--mn-brass, #d99e3f);
    color: var(--mn-slate-deep, #0a1423);
}

.narpo-news-cards__status {
    font-family: var(--narpo-font-mono, ui-monospace, monospace);
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mn-ink-faint, #747b84);
}

.narpo-news-cards__pagination a,
.narpo-news-cards__pagination span.current,
.narpo-news-cards__pagination .dots {
    border-radius: var(--narpo-radius, 3px);
    border: 1px solid var(--mn-rule, #d4cec5);
    background: var(--mn-paper, #f9f6f1);
    color: var(--mn-ink, #19222f);
    font-variant-numeric: tabular-nums;
}
.narpo-news-cards__pagination a:hover {
    background: var(--mn-paper-3, #e6e0d8);
    color: var(--mn-slate-deep, #0a1423);
    border-color: var(--mn-rule-strong, #beb6ab);
}
.narpo-news-cards__pagination span.current {
    background: var(--mn-slate-deep, #0a1423);
    color: var(--mn-on-slate, #f1eee9);
    border-color: var(--mn-slate-deep, #0a1423);
}

.narpo-news-cards__arrow {
    border-radius: var(--narpo-radius, 3px);
    border-width: 1px;
    border-color: var(--mn-rule-strong, #beb6ab);
}
.narpo-news-cards__arrow:hover {
    background: var(--mn-slate-deep, #0a1423);
    color: var(--mn-paper, #f9f6f1);
    border-color: var(--mn-slate-deep, #0a1423);
}
.narpo-news-cards__dot {
    border-radius: 2px;
    background: var(--mn-rule-strong, #beb6ab);
}
.narpo-news-cards__dot.is-active {
    background: var(--mn-brass, #d99e3f);
}

@media (prefers-reduced-motion: reduce) {
    .narpo-news-cards__card:hover .narpo-news-cards__media img { transform: none; }
    .narpo-news-cards__btn::after { transition: none; }
}

/* --------------------------------------------------------------------------
   One column edge for the whole block.
   In the alignwide/alignfull variants the heading carried its own gutter, the
   controls carried a max-width and the card track carried neither — so the
   section head, the search row and the cards each started at a different left
   edge. Everything now shares one measure.
   -------------------------------------------------------------------------- */
.narpo-news-cards.alignwide  > *,
.narpo-news-cards.alignfull > * {
    /* --narpo-container is the site-wide measure every other band uses, so
       the news page lines up with the hero above it and the bands below. */
    width: var(--narpo-container);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
}
/* The crest panel is edge-to-edge, so its children keep the gutter. */
.narpo-news-cards--crest-panel.alignwide  > *,
.narpo-news-cards--crest-panel.alignfull > * {
    width: var(--narpo-container);
    padding-inline: 0;
}

/* The clear-search control is a real button, so it gets a real target. */
.narpo-news-cards__search-clear {
    width: 40px;
    height: 40px;
    min-width: 40px;
}

/* Carousel dots. The button is a 40px target; the dot inside it is the mark.
   Drawing the dot as a pseudo-element keeps the pip small without making the
   thing you have to hit small — the pattern the old 8px button got wrong. */
.narpo-news-cards__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    transform: none;
}
.narpo-news-cards__dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--mn-rule-strong, #beb6ab);
    transition: background var(--narpo-dur-state) var(--narpo-ease-state), width var(--narpo-dur, 0.22s) var(--narpo-ease, ease);
}
.narpo-news-cards__dot.is-active {
    background: transparent;
    transform: none;
}
.narpo-news-cards__dot.is-active::after {
    background: var(--mn-brass, #d99e3f);
    width: 20px;
}
.narpo-news-cards__dots {
    gap: 0;
}

/* The panel watermark is the branch bee held as a printed ghost. The artwork
   is white-on-transparent so it can be tinted at the use site; on paper it has
   to be knocked to ink first or it vanishes into the stock. */
.narpo-news-cards--crest-panel .narpo-news-cards__crest {
    filter: brightness(0) saturate(0);
    opacity: 0.05;
    top: -10%;
    left: clamp(-7rem, -4vw, -3rem);
    height: 120%;
}

/* The clear-search control ships with `hidden` until there is a query, but the
   layout rule that gives it `display: inline-flex` outranks the UA's
   `[hidden] { display: none }` — so an empty search box carried a live-looking
   × that cleared nothing. */
.narpo-news-cards__search-clear[hidden] {
    display: none;
}

/* --- The card plate is a ratio, not a fixed height ------------------------
   `--nc-img-h: 220px` happens to be 16:9 at the desktop column width and
   nothing like it anywhere else, so the same artwork was cropped differently
   at every breakpoint — the 200 Club mark lost its numeral off the left edge
   on a phone. One ratio crops every card the same way at every width. */
.narpo-news-cards__media {
    height: auto;
    aspect-ratio: 16 / 9;
}

.narpo-news-cards__card--featured .narpo-news-cards__media {
    aspect-ratio: 3 / 2;
}

/* The bee watermark is sized as a share of the plate, so it follows the ratio
   instead of stretching with a fixed pixel height. */
.narpo-news-cards__media-placeholder {
    height: 100%;
}

/* --- Cards without a photograph -------------------------------------------
   design.md holds the bee to "a watermark at 5–9% opacity, bleeding off one
   edge — the page's single deliberate grid-break", and warns "never as an
   icon". Six cards without a photograph put six identical bees in one grid at
   the same size in the same place, which is the opposite of a grid-break: it
   reads as a missing-image icon repeated down the page.

   The plate keeps the bee, but every card holds it differently — a different
   edge to bleed off, a different scale — so a run of them reads as printed
   stock rather than a placeholder graphic. The chequer closes the top of one
   in four, the way it closes a hero.                                        */

.narpo-news-cards__media-placeholder::after {
    background-position: 62% 46%;
    background-size: 34% auto;
    opacity: 0.085;
}

.narpo-news-cards__cell:nth-child(4n + 2) .narpo-news-cards__media-placeholder::after {
    background-position: 8% 62%;
    background-size: 46% auto;
    opacity: 0.07;
}

.narpo-news-cards__cell:nth-child(4n + 3) .narpo-news-cards__media-placeholder::after {
    background-position: 88% 108%;
    background-size: 52% auto;
    opacity: 0.075;
}

.narpo-news-cards__cell:nth-child(4n) .narpo-news-cards__media-placeholder::after {
    background-position: 30% -18%;
    background-size: 40% auto;
    opacity: 0.065;
}

/* Three gold bendlets for the city's three rivers, at the weight the 200 Club
   mark uses them. They sit under the bee, never with it at full strength. */
.narpo-news-cards__media-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        118deg,
        transparent 0 34px,
        var(--mn-brass, #d99e3f) 34px 36px,
        transparent 36px 74px
    );
    opacity: 0.05;
}

/* No chequer here. design.md holds it to "heavy furniture only, at most twice
   per page" — the foot of the hero and the head of the footer, both of which
   this page already spends. A third and fourth placement on cards would make
   it decoration rather than furniture. */