/* ==========================================================================
   Bird Conservation Nepal — news
   --------------------------------------------------------------------------
   Only what differs from the shared listing in bcn-page.css.

   The section rail is the substance of this file. News is filed under two
   categories that are nothing like the same size — 230 national stories
   against five international ones — and the old page set them as a pair of
   tabs justified across the full width, which read as two equal halves. A rail
   down the left with the count beside each name says what is actually there
   before a reader spends a click finding out.

   Plain CSS, no build step:
     $data['page_css'] = array('bcn-page.css', 'bcn-blocks.css', 'bcn-news.css');
   ========================================================================== */

/* --- The section rail ----------------------------------------------------- */

.rail { margin-bottom: 1.75rem; }

.rail__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 2px solid var(--ink);
}

.rail__list { list-style: none; margin: 0; padding: 0; }

/* Each section is a full-width target with its count set hard right, so the
   two numbers line up under one another and the difference between them is
   the first thing read. */
.rail__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-left: 3px solid transparent;
    border-radius: 0 2px 2px 0;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out,
                color 0.15s ease-out;
}

.rail__item:hover {
    background: var(--paper-hi);
    border-left-color: var(--rule-2);
}

/* The current section is marked by weight, a filled ground and a bar at the
   left edge — three signals, because on a page where both items are short
   words a colour change alone is easy to miss. */
.rail__item.is-current {
    background: var(--paper-hi);
    border-left-color: var(--accent);
}

.rail__name {
    font-family: var(--display);
    font-size: 1.0625rem;
    line-height: 1.2;
}

.rail__item.is-current .rail__name { color: var(--ink); font-weight: 500; }
.rail__item:not(.is-current) .rail__name { color: var(--ink-2); }
.rail__item:hover .rail__name { color: var(--blue); }

.rail__count {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.rail__item.is-current .rail__count { color: var(--accent); }

/* --- The story grid ------------------------------------------------------- */

/* The column left of the rail is wide enough for three across on a desktop,
   which suits a feed of short items better than the two-up the species and
   projects listings use. */
@media (min-width: 1180px) {
    .listing__grid--news { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Field photographs, not the 1600x600 banners the species pages carry. */
.entry__frame { aspect-ratio: 3 / 2; }

/* The date leads the card. It used to sit under the headline, right-aligned,
   where it read as an afterthought; on a news card it is part of the claim the
   headline is making. */
.entry__date {
    margin: 0 0 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
}

/* Headlines run long — several pass 90 characters — so they are clamped rather
   than allowed to set the height of a whole row. */
.entry__names { display: block; border-bottom: none; padding-bottom: 0; }

.entry__name {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.entry__text {
    margin-top: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Single story --------------------------------------------------------- */


.page-head__eyebrow a { color: inherit; }
.page-head__eyebrow a:hover { color: var(--blue); }

.news-standfirst {
    margin: 0.9rem 0 0;
    font-family: var(--display);
    font-size: 1.125rem;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}