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

/* Widen the layout to the 1320px redesign grid (framework caps at 1140px) */
@media (min-width: 1200px) {
    .container {
        max-width: 1390px;
    }
}

/* Tighten the gaps py-md-8 creates above/below the row: 4rem (64px) padding
   both sides, pulled in to 2.125rem (34px) on top and 24px on the bottom
   (feeding into the newsletter below). Also targets main.pledge-page -
   PledgePage overrides main_class away from "fact-check", so without this
   it falls back to the unstyled 64px default and the breadcrumb/title sit
   noticeably lower than on every other new-design content type. */
@media (min-width: 768px) {
    main.fact-check .container.py-3.py-md-8,
    main.pledge-page .container.py-3.py-md-8 {
        padding-top: 2.125rem !important;
        padding-bottom: 1px !important;
    }
}

/* Custom replacement for the Bootstrap row/col-lg-3/col-lg-6 grid: a plain
   CSS Grid, without Bootstrap's row negative-margin/col-padding gutter
   mechanism so each column is free to carry its own padding.
   Three tiers: mobile (1 column, byline/most-viewed hidden - mobile-only
   markup covers that content instead), 992-1214px (2 columns: byline +
   article - most-viewed drops to the footer, below Related), and 1215px+
   (the full 3/6/3 25%/50%/25% layout with most-viewed back in the row). */
.fact-check-grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .fact-check-grid {
        grid-template-columns: 3fr 6fr;
        -webkit-column-gap: 60px;
           -moz-column-gap: 60px;
                column-gap: 60px;
    }
}

@media (min-width: 1215px) {
    .fact-check-grid {
        grid-template-columns: 3fr 6fr 3fr;
    }
}

.fact-check-grid__col--article {
    padding-bottom: 30px;
}

/* Byline and the row-2 spacer (which mirrors byline's column width) appear
   from 992px; most-viewed's row-1 slot doesn't reappear until 1215px, since
   below that it's shown in the footer instead (see .most-viewed--footer) */
.fact-check-grid__col--byline,
.fact-check-grid__col--spacer {
    display: none;
}

.fact-check-grid__col--sidebar {
    display: none;
    /* Vertically centre within the row (whose height is set by the article
       column) rather than stretching full height - flex-end put this at the
       very bottom of long real articles instead of partway down. */
    -ms-flex-item-align: center;
        align-self: center;
}

@media (min-width: 992px) {
    .fact-check-grid__col--byline,
    .fact-check-grid__col--spacer {
        display: block;
    }
}

@media (min-width: 1215px) {
    .fact-check-grid__col--sidebar {
        display: block;
    }
}

.fact-check-badge {
    display: inline-block;
    background: var(--brand-primary, #00fce8);
    color: var(--brand-neutral-black, #1e1e1e);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 6px 13px;
    margin-bottom: 10px;
}

/* Prototype-only: kept in sync across both .fact-check-badge instances by the
   category carousel JS. Colours match the existing type labels in list.css. */
.fact-check-badge--comment {
    background: var(--brand-accent-pink, #ff51a9);
    color: #fff;
}

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

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

.category-carousel {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* Mix: .fact-check-badge instance sitting inline in the carousel row rather
   than stacked above content (its usual placement) */
.fact-check-badge--carousel {
    margin-bottom: 0;
    margin-right: auto;
}

.article-title {
    font-size: 46px !important;
    font-weight: 900;
    line-height: 1.1;
}

.byline {
    margin-bottom: 2rem;
}

/* Each block sits under a thin divider, matching the Figma sidebar */
.byline__section {
    border-top: 1px solid #e3e3e3;
    padding: 1rem 0;
}

.byline__author {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 1rem;
}

.byline__avatar {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 64px;
    height: 64px;
    /* border-radius: 50%; */
    -o-object-fit: cover;
       object-fit: cover;
    /* background: var(--brand-neutral-grey, #e5e5e5); */
}

.byline__name {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 0.1rem;
}

/* Prototype-only: the persistent underline on every link (name, body links)
   turns out to come from a global `a { --box-shadow-color: #00FCE8; box-shadow:
   ... inset }` in the pattern library, not the animated-link hover mixin -
   overriding that custom property is what actually changes the colour. */
.byline__name-link {
    color: inherit;
    text-decoration: none;
    --box-shadow-color: var(--category-accent, var(--brand-primary, #00fce8));
    --animated-link-color: var(
        --category-accent,
        var(--brand-primary, #00fce8)
    );
}

/* Same fix for cms-content body links. --animated-link-color needs !important
   here because the library also sets it via the more specific
   .cms-content p a:not(.btn), which otherwise outranks a plain .cms-content a. */
.cms-content a {
    --box-shadow-color: var(--category-accent, var(--brand-primary, #00fce8));
    --animated-link-color: var(
        --category-accent,
        var(--brand-primary, #00fce8)
    ) !important;
}

/* The pattern library hardcodes this accent bar orange for every pledge page
   (main.pledge-page .accent::before) regardless of the pledge's actual
   status - but this specific bar sits next to "Our verdict", so it should
   track the pledge's status colour (pink for "Not kept" etc, see
   page.status_colour) instead of the page-wide Gov Tracker branding colour.
   Needs the extra .card-conclusion-body class to outrank the library's rule
   on specificity (2 classes vs 3), regardless of source order. */
main.pledge-page .card-conclusion-body.accent::before {
    background-color: var(--verdict-accent-colour, #ff9900);
}

/* .related sits inside .cms-content too, but its links should stay the
   fixed brand-primary blue rather than following the category carousel -
   same specificity as .cms-content a above, so this must stay below it to
   win on source order. */
.related .sidebar__item-link {
    --box-shadow-color: var(--brand-primary, #00fce8);
    --animated-link-color: var(--brand-primary, #00fce8) !important;
}

.byline__role {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 300;
    margin-bottom: 0;
}

/* Standalone (not byline__*): also reused by .article-mobile-footer's
   "Related topics"/"Share" labels, so it was never really a byline element */
.meta-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #6c757d;
    margin: 0 0 0.25rem;
}

.meta-label--updated {
    margin-top: 15px;
}

/* Now dt/dd (was p/p) - reset the dl/dd UA defaults (block margin on dl,
   40px inline start on dd) since .byline__section already handles spacing */
.byline__meta {
    margin: 0;
}

.byline__meta dd {
    margin: 0;
}

.byline__meta-value {
    font-size: 14px;
    font-weight: 300;
}

/* Standalone (not byline__*): also reused by .article-mobile-footer's
   "Related topics" tags, so it was never really a byline element */
.topic-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.5rem;
}

.topic {
    font-weight: 700;
}

.topic--primary {
    background: var(--brand-neutral-black, #1e1e1e);
    color: #fff;
    font-size: 14px;
}

/* Without this, the pattern library's global .btn:hover/a:hover rule
   (color: #1e1e1e) makes the text invisible against this badge's own black
   background on hover - .topic--secondary avoids the same bug by already
   setting its own :hover color. */
.topic--primary:hover {
    color: #fff;
}

.topic--secondary {
    background: #7a7a7a;
    color: #fff;
    font-size: 14px;
}

.topic--secondary:hover {
    background: #666;
    color: #fff;
}

/* Standalone (not byline__*): also reused by .article-mobile-footer's
   share icons, so it was never really a byline element */
.share-list {
    display: -ms-flexbox;
    display: flex;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* The mobile-footer copy of this list sits inside .cms-content, where the
   pattern library's `.cms-content ul { padding-left: 3.5rem }` (a class +
   element selector) otherwise outranks the plain .share-list above */
.cms-content .share-list {
    padding-left: 0;
}

.share-list__link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    width: 38px;
    aspect-ratio: 1;
    border: 1px solid #d5d5d5;
    box-shadow: none;
    color: var(--brand-neutral-black, #1e1e1e);
    font-size: 1.05rem;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
}

.share-list__link:hover {
    background: var(--brand-neutral-black, #1e1e1e);
    border-color: var(--brand-neutral-black, #1e1e1e);
    color: #fff;
}

/* Floating popup shown on text selection inside .cms-content - hidden by
   default, shown/positioned by JS (see the quote-share block in script.js).
   position:fixed since getBoundingClientRect() (used to position it) is
   already viewport-relative, so no scroll-offset math is needed. */
.quote-share {
    display: none;
    position: fixed;
    z-index: 1000;
    gap: 2px;
    background: var(--brand-neutral-black, #1e1e1e);
    padding: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.quote-share__link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    width: 34px;
    aspect-ratio: 1;
    border: none;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s;
}

.quote-share__link:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* The pattern library's .jumbotron rule (padding: 3rem 0, non-responsive)
   leaves "Was this helpful?" feeling cramped directly under the big accent
   graphic above it - extra top breathing room, scoped by ID since this is
   the one donate-ask instance sitting right below that graphic. 6rem
   overshot into feeling too spacious, though - 4rem instead. */
#ga-inline-donate {
    padding-top: 2.5rem;
}

/* Pinning is handled by JS (position/top/left/width set inline as it switches
   between static/fixed while scrolling) since it needs to travel further than
   its own column's height - background/z-index just need to be ready for
   when it goes fixed. */
.byline__section--share {
    background: #fff;
    z-index: 10;
}

/* claim-review — pure BEM, no card/row/col grid classes.
   .claim-review is the grey outer wrapper; the claim and verdict panels
   sit side by side above 768px and stack below it. */
.claim-review {
    position: relative;
    background: #f0f0f0;
    border: 1px solid #dfdfdf;
    margin-top: 30px;
    margin-bottom: 20px;
}

/* White on white would be invisible sitting inside the (white) verdict
   panel, so it's anchored to the extreme bottom-left corner of the whole
   card instead, where it reads as a subtle textured accent against the
   grey background (same technique as signup__accent on the newsletter). */
.claim-review__pattern {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 150px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.claim-review__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .claim-review__grid {
        grid-template-columns: 0.9fr 1fr;
    }
}

.claim-review__claim,
.claim-review__verdict {
    padding: 19px 19px;
}

.claim-review__verdict-body {
    /* margin: 0 16px 16px; */
    padding: 12px;
}

.claim-review__claim-title,
.claim-review__verdict-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    color: #6c757d;
    margin: 0;
    font-weight: 400;
}

.claim-review__claim-text,
.claim-review__verdict-text {
    font-size: 17px;
    line-height: 1.4;
    margin: 0.5rem 0 0;
}

.claim-review__verdict {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    gap: 12px;
}

/* Houses "Our verdict" and the outcome-preview carousel controls on the same
   line, inside the card rather than floating above it */
.claim-review__verdict-heading {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
        align-items: flex-start;
    -ms-flex-pack: justify;
        justify-content: space-between;
    gap: 1rem;
}

.claim-review__verdict-body {
    /* Grows to fill whatever height the row ends up being (set by the claim
       text next to it, which varies article to article), then pins the
       badge to the top and the verdict text to the bottom of that height. */
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
        flex: 1;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: justify;
        justify-content: space-between;
    gap: 0.75rem;
    background: #fff;
    /* A/B test pending - the tier modifier class (.claim-review__verdict--red
       etc, see claim_conclusion_block_new_design.html) isn't applied for now,
       so this plain brand teal is what actually shows. The tier-specific
       overrides below are left in place, ready for when it's switched back on. */
    border-left: 4px solid var(--brand-primary, #00fce8);
}

/* Mix: .verdict-badge instance floated to the right edge of its flex
   container, rather than the badge's usual static placement */
.verdict-badge--float-end {
    -ms-flex-item-align: end;
        align-self: flex-end;
}

/* Prototype-only: kept in sync with the verdict badge's tier by the carousel JS.
   .claim-review__verdict carries the modifier so badge.closest() still finds it,
   but the border itself lives on the nested white box. */
.claim-review__verdict--red .claim-review__verdict-body {
    border-left-color: #c70000;
}

.claim-review__verdict--amber .claim-review__verdict-body {
    border-left-color: #f5a800;
}

.claim-review__verdict--green .claim-review__verdict-body {
    border-left-color: var(--brand-accent-green, #00ff3b);
}

/* verdict-badge — standalone, reusable: also mixed onto the article figure caption */
.verdict-badge {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 0.5em;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    font-size: 11px;
    padding: 5px 19px;
    color: #fff;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 30px;
}

/* Custom X icon (replaces fa-times on red statuses) */
.verdict-badge__icon {
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding-top: 2px;
}

.verdict-badge--false,
.verdict-badge--red {
    background: #c70000;
    border-bottom: 3px solid #9d0303;
}

.verdict-badge--amber {
    background: #f5a800;
    border-bottom: 3px solid #b97e00;
    color: var(--brand-neutral-black, #1e1e1e);
}

.verdict-badge--green {
    background: var(--brand-accent-green, #00ff3b);
    border-bottom: 3px solid #00b82c;
    color: var(--brand-neutral-black, #1e1e1e);
}

/* Prototype-only: shared prev/count/next control strip - used by both the
   verdict-outcome carousel and the category carousel, so it's its own block
   rather than being named after either one. */
.carousel-controls {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 8px;
}

.carousel-controls__btn {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #d5d5d5;
    background: #fff;
    color: var(--brand-neutral-black, #1e1e1e);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.carousel-controls__btn:hover {
    background: var(--brand-neutral-black, #1e1e1e);
    border-color: var(--brand-neutral-black, #1e1e1e);
    color: #fff;
}

.carousel-controls__count {
    font-size: 12px;
    color: #6c757d;
    white-space: nowrap;
}

.article-figure {
    position: relative;
    margin: 1.5rem 0;
}

/* Whatever image is supplied here gets masked to 16:9, cropping to fill
   rather than letterboxing/distorting */
.article-figure__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
}

/* Prototype-only: set on <body> by the carousel JS so the figure image
   reflects the currently-previewed verdict tier */
body[data-verdict-tier="red"] .article-figure__image {
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
}

.article-figure__badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

/* !important: .related's copy of this sits inside .cms-content, where the
   pattern library's `.cms-content h2 { margin-top: 2rem/2.5rem; }` (a class +
   element selector) otherwise outranks a plain .sidebar__title on specificity */
.sidebar__title {
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-bottom: 2px solid var(--brand-accent-pink, #ec008c);
    padding-bottom: 0.5rem;
    margin: 0 0 0.75rem !important;
}

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

.sidebar__item {
    padding-left: 1rem;
    position: relative;
    margin-bottom: 1rem;
}

/* .related nests .sidebar__list inside .cms-content, whose ul/li::before
   rules outrank the plain .sidebar__item selectors above on class count
   alone — repeat the class here so our square bullet wins instead of the
   library's cyan ■. */
.cms-content .sidebar__list {
    padding-left: 0;
}

.sidebar__item::before,
.cms-content .sidebar__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 8px;
    height: 8px;
    background: var(--brand-accent-pink, #ec008c);
}

/* Shared box treatment for both .sidebar mixes below (.most-viewed, .related) -
   was duplicated identically on each before */
.sidebar {
    background: #f5f5f5;
    padding: 1rem;
}

/* Duplicate of the row-1 most-viewed aside, shown below Related instead,
   for viewports under 1215px (mirrors the existing mobile-duplicate-content
   pattern already used for the byline/meta/share blocks) */
.most-viewed--footer {
    margin-top: 2rem;
}

@media (min-width: 1215px) {
    .most-viewed--footer {
        display: none;
    }
}

.signup {
    background: var(--brand-neutral-black, #1e1e1e);
    padding: 1rem 0;
    margin: 0 0 32px;
    position: relative;
    overflow: hidden;
    padding-bottom: 26px;
    z-index: 20;
    /* Full-bleed break-out: in the prototype this sat outside the grid/container
       entirely, but the real inline signup_cta_block renders nested deep inside
       the article column, so it needs to escape that width itself.
       width:100vw + left:50%/margin-left:-50vw only centres correctly when the
       containing block is itself centred in the viewport - true at 1215px+
       (byline/sidebar are equal width, so the article column is symmetric) and
       below 992px (single-column), but NOT at 992-1214px, where the grid is
       byline+article only and the article column sits off-centre. That range
       needs the actual pixel offset from the viewport edge, which CSS alone
       can't know - see the measure/update block in script.js. These are just
       the pre-JS/no-JS fallback values. */
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.signup__accent {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 160px;
    height: auto;
    pointer-events: none;
}

.signup__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    /* max-width: 1198px; */
}

.signup__heading {
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    margin: 0;
    -ms-flex: 1 1 280px;
        flex: 1 1 280px;
    max-width: 33rem;
}

.signup__form {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
        align-items: flex-end;
    gap: 1rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-left: 30px;
}

.signup__form .btn {
    font-size: 14px;
    font-weight: 600;
}

.signup__field {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}

.signup__label {
    color: #fff;
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 0.4rem;
}

.signup__field .form-control {
    min-width: 15rem;
    font-size: 13px;
    font-weight: 500;
}

.signup__submit {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 0.5em;
    white-space: nowrap;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

/* Real signup form's privacy notice, dropped onto the dark .signup background */
.signup__privacy {
    color: #ccc;
    font-size: 0.75rem;
    /* margin-top: 1rem; */
}

.signup__privacy a {
    color: #fff;
}

/* Standalone placement at the bottom of the page (light background),
   instead of sitting inside the dark .signup card */
.signup__privacy--footer {
    color: #6c757d;
    /* margin: 2rem 0; */
}

.signup__privacy--footer a {
    color: inherit;
}

/* The real signup form (both footer and inline CTA) uses Bootstrap's
   floating-label field partials - not our prototype's .signup__field markup.
   Rather than touch those shared partials, reshape them here to match:
   visible labels above inputs, one flex row, instead of a stacked Bootstrap
   grid with labels hidden behind placeholders. */
.signup .form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
        align-items: flex-end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
}

.signup .form-row > * {
    /* These wrapper divs carry real Bootstrap grid/utility classes too
       (offset-1, pb-2, etc.) - offset-1's margin isn't !important so normal
       specificity wins, but pb-2/pt-2-style padding utilities are, hence
       padding needing !important here as well. Bootstrap's .col-* also sets
       a plain `width: 100%` alongside its flex-basis - with flex-basis:auto
       that width wins as the effective basis, so every column tried to be
       full-width regardless of the flex shorthand below. Resetting width
       directly fixes it. */
    -ms-flex: 1 1 0%;
        flex: 1 1 0%;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 !important;
}

.signup .form-row > *:first-child {
    padding-left: 30px;
}

/* The button's wrapper is always last - keep it sized to content rather than
   growing to fill space like the input wrappers */
.signup .form-row > *:last-child {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
}

.signup .form-label-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    margin-bottom: 0;
}

.signup .form-label-group label {
    /* This label also carries real Bootstrap utility classes (border, px-1,
       mb-1, d-block) - those are all !important in the compiled CSS, so a
       plain (non-important) reset like `all: unset` can never beat them.
       Every property that a utility class also sets has to be !important
       here too, or the utility wins regardless of specificity. */
    position: static !important;
    -ms-flex-order: -1;
        order: -1;
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    margin: 0 0 0.4rem !important;
    line-height: normal !important;
}

.signup .form-label-group input {
    /* This input also carries Bootstrap utility classes (pt-2, py-1, m-0,
       border) - same !important situation as the label above. */
    min-width: 15rem;
    font-size: 13px;
    font-weight: 500;
    /* Explicit height rather than relying on padding+line-height math -
       <input> and <button> don't always agree on that even with identical
       values, so this guarantees the two actually match pixel-for-pixel. */
    height: 2.375rem !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    border: 1px solid #d5d5d5 !important;
}

.signup .form-label-group input::-webkit-input-placeholder {
    color: #767676;
    opacity: 1;
}

.signup .form-label-group input:-ms-input-placeholder {
    color: #767676;
    opacity: 1;
}

.signup .form-label-group input::-ms-input-placeholder {
    color: #767676;
    opacity: 1;
}

.signup .form-label-group input::placeholder {
    color: #767676;
    opacity: 1;
}

.signup .btn-block {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    gap: 0.5em;
    width: auto;
    white-space: nowrap;
    /* Explicit height matching the inputs exactly (see .form-label-group
       input) - the button also has an inline style="min-height: 3.125rem;"
       from the shared partial, so this needs !important to win. Padding
       alone never quite matched the inputs pixel-for-pixel. */
    height: 2.375rem !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 13px;
    border: 1px solid transparent;
}

/* Same arrow glyph as the prototype's signup__submit button (see the inline
   svg used there) - encoded as a background image since this button's text
   comes from a real settings value / block override, not markup we can add
   an <svg> into directly. */
.signup .btn-block::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='10' viewBox='0 0 11 10' fill='none'%3E%3Cpath d='M4.52599 8.75681L7.47251 5.81029L0.0584907 5.81242L-0.000906347 4.22991L7.5213 4.22991L4.39447 1.10308L5.49756 -2.71051e-06L10.5039 5.00631L5.63969 9.8705' fill='white'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.related {
    margin-top: 2rem;
}

/* ------------------------------------------------------------------ */
/* Mobile layout                                                       */
/* On phones the sidebar is dropped: date + badge sit above the title, */
/* a compact byline sits below it, and topics/share move to the foot.  */
/* ------------------------------------------------------------------ */

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

.article-mobile-meta__date {
    font-size: 0.9rem;
}

.article-mobile-meta__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-mobile-byline {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.article-mobile-byline__avatar {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    background: var(--brand-neutral-grey, #e5e5e5);
}

.signup__field .form-control::-webkit-input-placeholder {
    color: #7f7f7f;
}

.signup__field .form-control:-ms-input-placeholder {
    color: #7f7f7f;
}

.signup__field .form-control::-ms-input-placeholder {
    color: #7f7f7f;
}

.signup__field .form-control::placeholder {
    color: #7f7f7f;
}

.article-mobile-byline__link {
    font-weight: 700;
}

.article-mobile-share {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
        justify-content: flex-end;
    margin: -0.75rem 0 1.5rem;
}

.article-mobile-footer {
    margin-top: 2rem;
}

.article-mobile-footer__section {
    border-top: 1px solid #e3e3e3;
    padding: 1rem 0;
}

/* Fixed-size share squares (the sidebar variant stretches to fill the column) */
.share-list--inline .share-list__item {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
}

.share-list--inline .share-list__link {
    width: 44px;
}

/* Kill the CMS square bullet when the share list sits inside .cms-content
   (two classes outrank .cms-content ul li::before's one class + :not(.btn)) */
.cms-content .share-list__item::before {
    content: none;
}

@media (max-width: 991.98px) {
    .article-title {
        font-size: 30px !important;
    }
}

@media (max-width: 987.98px) {
    .signup__heading {
        margin-bottom: 30px;
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    /* Breathing room between the heading and "Your email" below it - the
       flex gap on .signup__form only adds space between the fields, not
       above them */
    .signup__heading {
        margin-bottom: 1.6rem;
    }

    /* Stack the signup: email full width, then name + button share a row */
    .signup__field:first-of-type {
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    }

    .signup__field {
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    }

    .signup__field .form-control {
        min-width: 0;
    }

    /* Pink accent flips to the bottom-right corner on mobile */
    .signup__accent {
        left: auto;
        right: 0;
        width: 110px;
        -webkit-transform: scaleX(-1);
                transform: scaleX(-1);
    }
}

.breadcrumbs__item {
    display: inline;
}

/* Shared so the non-link final crumb (current content type) matches the
   linked crumbs exactly - a bare <span> would otherwise fall back to the
   browser default font-weight instead of this component's medium weight. */
.breadcrumbs__link,
.breadcrumbs__current {
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 11px;
}

.breadcrumbs__link {
    text-decoration: none;
}

.breadcrumbs__link:hover {
    text-decoration: underline;
}

.breadcrumbs__separator {
    display: inline-block;
    margin: 0 0.15em;
}

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

.mx-n2.mx-sm-0 {
    margin-top: 20px;
}