/*
  Prototype-only styles for the article listing redesign.
  Anything that survives design review should move into
  @fullfact/pattern-library rather than live here long-term.
*/

/* Widen the layout to the 1390px redesign grid (framework caps at 1140px) -
   matches prototype.css's override so shared chrome (the main nav) renders
   at the same width on list pages as it does on article pages. */
@media (min-width: 1200px) {
    .container {
        max-width: 1390px;
    }
}

/* Below that, don't let Bootstrap step .container down through its own
   smaller fixed widths (540/720/960px) instead - those leave increasingly
   disproportionate gutters the closer the viewport gets to 1200px from
   below. Go fluid instead, with a comfortable fixed margin either side. */
@media (max-width: 1199.98px) {
    .container {
        max-width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* navbar overrides now live site-wide in custom.css, loaded by base.html on
   every page - previously duplicated here and in prototype.css to scope the
   compact nav to just the new-design pages. */

/* ------------------------------------------------------------------ */
/* Page hero                                                           */
/* ------------------------------------------------------------------ */

.list-hero {
    position: relative;
    overflow: hidden;
    background: var(--brand-neutral-black, #1e1e1e);
    color: #fff;
    padding: 1.2rem 0 1.3rem;
    border-top: 1px solid white;
    min-height: 120px;
}

.list-hero__title {
    font-weight: 900;
    /* Matches the Figma spec exactly (27px) - not the article page's much
       larger .article-title, these are a different, more compact scale. */
    font-size: 27px;
    margin-bottom: 0.35rem;
}

.list-hero__subtitle {
    margin: 0;
    max-width: 42rem;
    color: #fff;
    font-weight: 300;
    line-height: 1.2;
}

/* TopicIndex.description - optional richtext shown below the subtitle.
   Same colour/weight as .list-hero__subtitle above so the two read as one
   consistent style (AuthorPage's biography uses this class too). */
.list-hero__description {
    max-width: 42rem;
    margin-top: 0.75rem;
    color: #fff;
    font-weight: 300;
}

.list-hero__description a {
    color: var(--brand-primary, #00fce8);
}

.list-hero__accent {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 350px;
    pointer-events: none;
    /* Recoloured via mask instead of swapping image files - the shape
       itself (list-hero-accent.svg) stays a single asset; only the colour
       showing through it changes, matching --pill-accent's colour-per-key
       mapping on the filter pills below. */
    background-color: var(--brand-primary, #00fce8);
    -webkit-mask-image: url("/static/prototypes/refresh/img/list-hero-accent.fcdb1ab2c6f2.svg");
    mask-image: url("/static/prototypes/refresh/img/list-hero-accent.fcdb1ab2c6f2.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: right;
    mask-position: right;
    -webkit-mask-size: cover;
    mask-size: cover;
}

.list-hero__accent--comment {
    background-color: var(--brand-accent-pink, #ff51a9);
}

.list-hero__accent--analysis {
    background-color: var(--brand-accent-yellow, #ffff00);
}

.list-hero__accent--government-tracker {
    background-color: var(--brand-accent-orange, #ff9900);
}

/* ------------------------------------------------------------------ */
/* Filter bar                                                          */
/* ------------------------------------------------------------------ */

.list-filters {
    border-bottom: 1px solid #e3e3e3;
    padding: 10px 0;
}

.list-filters .container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: justify;
        justify-content: space-between;
    gap: 1rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.list-filters__pills {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-pill {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 0.4em;
    border: 1px solid var(--brand-neutral-black, #1e1e1e);
    background: #fff;
    color: var(--brand-neutral-black, #1e1e1e);
    font-weight: 400;
    font-size: 12px;
    padding: 0.4em 0.9em;
    text-decoration: none;
    box-shadow: none;
    transition:
        background 0.15s,
        color 0.15s;
}

/* Hover on a non-active pill: previews that pill's own accent colour as the
   same left-edge bar the active state uses (via --pill-accent, set per pill
   below), rather than an unrelated flat grey fill that read as more
   "disabled" than "hover" and didn't tie into the rest of the colour
   system. Stays on a white background so the solid-black active state is
   still unambiguous. */
.filter-pill:hover {
    color: var(--brand-neutral-black, #1e1e1e);
    box-shadow: inset 5px 0 0 var(--pill-accent, var(--brand-primary, #00fce8));
}

.filter-pill--active,
.filter-pill--active:hover {
    background: var(--brand-neutral-black, #1e1e1e);
    color: #fff;
    /* Accent bar down the left edge, colour-matched to the section type
       (--pill-accent set per pill below; defaults to cyan) */
    box-shadow: inset 5px 0 0 var(--pill-accent, var(--brand-primary, #00fce8));
}

/* Per-section accent colours (Fact Checks falls back to the default cyan
   above, matching its own brand colour - Latest isn't a "type" with a
   colour of its own, so it's black instead of inheriting that fallback). */
.filter-pill--latest {
    --pill-accent: var(--brand-neutral-black, #1e1e1e);
}

.filter-pill--comment {
    --pill-accent: var(--brand-accent-pink, #ff51a9);
}

.filter-pill--analysis {
    --pill-accent: var(--brand-accent-yellow, #ffff00);
}

.filter-pill--government-tracker {
    --pill-accent: var(--brand-accent-orange, #ff9900);
}

.filter-pill--select {
    border-color: #c8c8c8;
    font-weight: 400;
    /* Native arrow swapped for .list-filters__topic-chevron below, so it
       can actually be nudged - browsers won't let you reposition the
       built-in one. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.4em;
}

.filter-pill--select:hover {
    background: #fff;
    color: var(--brand-neutral-black, #1e1e1e);
    /* Overrides .filter-pill:hover's coloured left-edge accent bar below -
       that's meant for the Latest/Fact Checks/etc pill buttons, not this
       dropdown, but without this it stays visible after picking an option
       (the cursor is left sitting on the select once its native popup
       closes). */
    box-shadow: none;
}

/* Swap the browser's default blue focus ring for one that matches the
   rest of this design system (brand black, same colour as the pill
   border) rather than removing it outright - keeps a visible focus
   indicator for keyboard users. */
.filter-pill--select:focus,
.filter-pill--select:focus-visible {
    outline: 2px solid var(--brand-neutral-black, #1e1e1e);
    outline-offset: 2px;
}

.list-filters__topic {
    /* Sized by the select alone - the clear button below is absolutely
       positioned outside it rather than a flex sibling, so this box's
       width (and therefore the select's own position in the row) stays
       identical whether or not a topic - and hence the clear button - is
       currently active. Without this, the dropdown visibly shifted left
       whenever the button appeared/disappeared between page loads. */
    position: relative;
    display: inline-block;
}

/* Only rendered when a topic is actually active (see the site_latest_url
   check in the template) - a dedicated, visible affordance rather than
   overloading the select's own placeholder option, which tested as too
   easy to miss. Positioned just outside the select's own box (not inside
   its padding, which is already spoken for by the chevron). */
.list-filters__topic-clear {
    position: absolute;
    top: 50%;
    left: -2.4rem;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    background: var(--brand-neutral-black, #1e1e1e);
    color: #fff;
    box-shadow: none;
}

.list-filters__topic-clear:hover {
    background: #3a3a3a;
}

.list-filters__topic-chevron {
    position: absolute;
    top: 50%;
    /* 10px further in from the edge than the text padding alone would put it */
    right: calc(0.9em + 1px);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    font-size: 0.8em;
    color: var(--brand-neutral-black, #1e1e1e);
    pointer-events: none;
}

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

.list {
    /* Narrower than the page's own .container override (1390px) - the card
       grid reads better capped down, unlike the nav/hero/filters above it. */
    max-width: 1040px;
    /* padding-top: 1rem; */
    /* padding-bottom: 3rem; */
    /* Vertical rules framing the list down both sides of the page */
    border-left: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
    padding-left: 0rem;
    padding-right: 0rem;
}

.list-empty {
    padding: 3rem 0;
    text-align: center;
    color: #6c757d;
    font-size: 1.1rem;
}

/* Plain flex centering instead of Bootstrap's .row - .row's negative side
   margins (meant to be absorbed by a container's padding) had nowhere to
   go once .list's own padding was set to 0 above, pushing this past the
   viewport edge on every screen size. */
.list-pagination {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
}

/* Bootstrap's default .page-link colour here is the site's pink "primary"
   (#ff51a9) both ways round - pink text on white for inactive pages, and
   white text on a pink fill for the active one - each only ~3:1, failing
   WCAG AA's 4.5:1 for normal text. Scoped to .list-pagination rather than
   overriding .page-link globally, since that pink is presumably intentional
   elsewhere on the site. Swapped for the same black/white the active filter
   pill already uses, which is also the highest-contrast option available. */
.list-pagination .page-link {
    color: var(--brand-neutral-black, #1e1e1e);
}

.list-pagination .page-item.active .page-link {
    background-color: var(--brand-neutral-black, #1e1e1e);
    border-color: var(--brand-neutral-black, #1e1e1e);
    color: #fff;
}

.article-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* padding: 2rem 0; */
    border-bottom: 1px solid #e3e3e3;
    padding: 20px;
}

.article-card__body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: start;
        align-items: flex-start;
}

.article-card__meta {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: justify;
        justify-content: space-between;
    width: 100%;
    gap: 1rem;
    margin-bottom: 1rem;
}

.article-card__date {
    font-size: 0.85rem;
    white-space: nowrap;
}

.article-card__date::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-neutral-black, #1e1e1e);
    margin-right: 0.5rem;
    vertical-align: middle;
}

.article-card__labels {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.4rem;
}

.article-card__category {
    color: #6c757d;
    font-size: 13px;
    margin-bottom: 0rem;
}

.article-card__title {
    font-weight: 800;
    font-size: 27px;
    line-height: 1.2;
    margin-bottom: 0.6rem;
}

.article-card__title a {
    color: inherit;
    text-decoration: none;
    box-shadow: none;
}

.article-card__title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--brand-primary, #00fce8);
    text-decoration-thickness: 2px;
}

.article-card__byline {
    color: #333;
    font-size: 0.9rem;
    margin-bottom: 1.85rem;
}

.article-card__excerpt {
    margin-bottom: 0;
}

/* Small inline Read button trailing the excerpt - a compact black pill
   rather than the library's default btn padding/size, matching Figma. */
.article-card__read {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 0.3em;
    box-shadow: none;
    white-space: nowrap;
    margin-left: 0.25rem;
    padding: 0.25em 0.7em;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

.article-card__read .fa {
    font-size: 0.85em;
}

/* Media column */
.article-card__media {
    position: relative;
    min-height: 240px;
    overflow: hidden;
}

.article-card__media-link {
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: none;
}

.article-card__media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    transition: opacity 0.15s;
}

.article-card__media-link:hover img {
    opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* Category labels                                                     */
/* ------------------------------------------------------------------ */

.label {
    display: inline-block;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.4em 0.65em;
    white-space: nowrap;
}

.label--featured {
    background: var(--brand-neutral-black, #1e1e1e);
    color: #fff;
}

.label--fact-check {
    background: var(--brand-primary, #00fce8);
    color: var(--brand-neutral-black, #1e1e1e);
}

.label--analysis {
    background: var(--brand-accent-yellow, #ffff00);
    color: var(--brand-neutral-black, #1e1e1e);
}

.label--gov-tracker {
    background: var(--brand-accent-orange, #ff9900);
    color: var(--brand-neutral-black, #1e1e1e);
}

.label--comment {
    background: var(--brand-accent-pink, #ff51a9);
    /* White text here was ~3:1 against this pink - fails WCAG AA (4.5:1)
       for normal-size text. Black matches the other three labels (already
       black-on-brand-colour) and passes at ~5.6:1. */
    color: var(--brand-neutral-black, #1e1e1e);
}

/* Content-type label overlaid on the image's top-right corner, matching
   Figma - scoped to .article-card__media so the same .label classes still
   work unpositioned wherever else they're used (e.g. .article-card__labels). */
.article-card__media .label {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
}

/* ------------------------------------------------------------------ */
/* Status badges (verdict examples + real Gov Tracker pledge statuses -
   sit in the meta row next to the date)                                */
/* ------------------------------------------------------------------ */

.status-badge {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 0.45em 1.2em;
    color: #fff;
    border-bottom: 2px solid #2f2e2e;
}

/* Gov Tracker's pledge-icons assets are full coloured square tiles (see
   img/pledge-icons/*.svg), not transparent glyphs like the fa- icons above -
   shown small here, matching how pledge_page_new_design.html already uses
   them elsewhere in the new design. */
.status-badge__icon {
    width: 14px;
    height: 14px;
}

.status-badge--false {
    background: linear-gradient(to bottom, #e2001a 0%, #a80014 100%);
}

.status-badge--dark {
    background: var(--brand-neutral-black, #1e1e1e);
}

.status-icon--danger {
    color: #ff3b3b;
}

.status-icon--warning {
    color: var(--brand-accent-yellow, #ffff00);
}

.status-icon--success {
    color: var(--brand-accent-green, #00ff3b);
}

.status-icon--rotate {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

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

.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    padding-top: 20px;
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    .article-card {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 16px;
    }

    /* Image first on mobile */
    .article-card__media {
        -ms-flex-order: -1;
            order: -1;
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .list-filters__pills {
        gap: 0.3rem;
    }

    .list-hero__accent {
        width: 250px;
        opacity: 0.5;
    }

    /* Matches the Figma mobile spec (22px vs 27px on desktop) */
    .list-hero__title {
        font-size: 22px;
    }

    /* Select Topic is desktop-only - no room for it alongside the filter
       pills at this width, and there's no mobile treatment for it in the
       Figma mobile frame either. */
    .list-filters__topic {
        display: none;
    }

    /* Smaller pills, and "Gov Tracker" (see the two spans in the template)
       instead of "Government Tracker" - keeps every pill to one line
       instead of wrapping mid-word. */
    .filter-pill {
        font-size: 0.8rem;
        padding: 0.4em 0.7em;
    }
}