/*
 * feed.css — shared styling for the modern News + Blog feeds.
 * Rendered markup comes from views/feed.twig; behavior from js/feed-search.js.
 *
 * Tokens mirror css/job-openings.css so the feeds match the jobs pages (and the
 * header-and-menu-revision navy/cyan palette). Keep these in sync with that file.
 * NOTE: style.css sets html { font-size: 62.5% } so 1rem = 10px — always use px here.
 *
 * Design convention (see project plan): a filter/toolbar-above-a-results-list page
 * always sizes its toolbar to exactly the width of its results, left-aligned with
 * the page's <h1> — never narrower, never wider, never centered. `.feed-page`
 * mirrors `.job-openings-page`'s own inset (padding: 24px 20px 48px) so News/Blog
 * match the Jobs page's effective content width too.
 */

:root {
    --feed-navy:         #002b5c;
    --feed-cyan:         #00ADEF;
    --feed-page-bg:      #F8FAFC;
    --feed-card-bg:      #ffffff;
    --feed-border:       #e2e8f0;
    --feed-border-hover: #00ADEF;
    --feed-text:         #1e293b;
    --feed-text-muted:   #64748b;
    --feed-text-light:   #94a3b8;
}

.feed-page {
    /* No horizontal padding — align with the breadcrumb / simple-page pages
       (the .container already provides the inset); the extra 20px pushed the
       page in past the breadcrumb, worst on mobile. */
    padding: 24px 0 48px;
}

/* Bare heading inside .feed-page has no theme class, so without this it falls back
   to the site-wide generic <h1> style (31px/400/lighter blue) instead of matching
   .job-openings-header-left h1 — which made the description below it read as
   undersized by comparison, even though the description itself already matches
   the Jobs page's paragraph size exactly. */
.feed-page > h1 {
    font-size: 36px;
    font-weight: 800;
    color: var(--feed-navy);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 12px;
}

/* Matches .job-openings-header-left p exactly. No max-width: on the Jobs page
   the paragraph is naturally capped by sharing a flex row with the badges next
   to it, but here it's the only thing on its line, so a fixed max-width just
   forced an early wrap that read as too narrow. */
.feed-page-description {
    color: var(--feed-text-muted);
    font-size: 17px;
    font-weight: 500;
    margin: 0 0 24px;
}

.feed-wrap {
    color: var(--feed-text);
    font-family: inherit;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────────
   Structure mirrors the jobs page exactly: `.feed-toolbar` is a spacing-only
   wrapper (like `.job-filter-section`) — the header row sits unboxed above the
   card, and only `.feed-toolbar-bar` (like `.job-filter-bar`) carries the actual
   border/background/shadow. ── */
.feed-toolbar {
    margin-bottom: 20px;
}

.feed-toolbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 2px;
    min-height: 24px;
}

/* Sized to match .feed-count ("Showing N items") rather than the smaller/bolder
   .job-filter-section-label it was cloned from — the two sit far apart on the
   page (top of the toolbar vs. above the list) so matching them reads as one
   consistent "section label" style, unlike on the Jobs page where the two
   labels sit close enough together that their size difference doesn't stand out. */
.feed-toolbar-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 43, 92, 0.6);
}

.feed-toolbar-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    padding: 20px 24px;
    background: var(--feed-card-bg);
    border: 1px solid var(--feed-border);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Groups Software + Fonts together so they can share a row independently of
   Search at intermediate widths — see the responsive rules below. */
.feed-toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* basis 460px = 2×220px min-width dropdowns + gap, so both fit on one line
       before this is asked to shrink — see .feed-search-field for why basis:0%
       (the shorthand default) wasn't enough. */
    flex: 1 1 460px;
}

.feed-field {
    display: flex;
    flex-direction: column;
}

/* Filter fields grow to share the row evenly (min 220px) instead of sitting at
   a fixed 220px with dead space beside them — so between ~460px and full width
   the dropdowns fill the toolbar rather than looking cramped, and drop to a
   clean stack once neither fits. */
.feed-toolbar-filters .feed-field {
    flex: 1 1 220px;
    min-width: 0;
}

/* JS hides a filter field (label + control) when it has <2 sources. The display:flex
   above would otherwise beat the browser's default [hidden]{display:none}. */
.feed-field[hidden] {
    display: none;
}

.feed-field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--feed-text-muted);
    margin-bottom: 6px;
}

.feed-search-field {
    /* Explicit flex-basis (not the shorthand's implied 0%) so this and
       .feed-toolbar-filters each reserve real space before growing — with
       basis:0% the 2:1 ratio alone left .feed-toolbar-filters only ~300px on a
       1280px screen, not enough for two 220px-min-width dropdowns side by side,
       so they wrapped onto separate lines even at full desktop width. */
    flex: 2 1 300px;
    min-width: 200px;
}

.feed-search-inner {
    position: relative;
}

.feed-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--feed-text-light);
    font-size: 14px;
    pointer-events: none;
}

.feed-search {
    width: 100%;
    padding: 9px 12px 9px 36px;
    border: 1px solid var(--feed-border);
    border-radius: 10px;
    font-size: 15px;
    color: var(--feed-text);
    background: var(--feed-card-bg);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.feed-search:focus {
    outline: none;
    border-color: var(--feed-cyan);
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

/* Software / Fonts filters (multi-select dropdowns, JS-built) */
.feed-filter {
    position: relative;
    min-width: 220px;
    flex: 1;
}

.feed-filter-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    background: var(--feed-card-bg);
    border: 1px solid var(--feed-border);
    border-radius: 10px;
    font-size: 15px;
    color: var(--feed-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.feed-filter-btn:hover,
.feed-filter-btn:focus-visible,
.feed-filter.is-open .feed-filter-btn {
    border-color: var(--feed-cyan);
}

.feed-filter.is-open .feed-filter-btn {
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

.feed-filter-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

.feed-filter-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-filter-chevron {
    flex: 0 0 auto;
    border: solid var(--feed-text-muted);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    margin-top: -3px;
}

.feed-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    /* Without a cap, a long option name (e.g. "Audio Project Manager") can grow
       the panel wide enough to spill over the neighboring Software/Fonts field —
       long names wrap onto a second line instead. */
    max-width: 320px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--feed-card-bg);
    border: 1px solid var(--feed-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: 6px;
}

.feed-filter.is-open .feed-filter-panel {
    display: block;
    animation: feedPanelIn 0.12s ease;
}

@keyframes feedPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.feed-filter-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--feed-text-muted);
    transition: background 0.1s;
}

.feed-filter-option:hover {
    background: var(--feed-page-bg);
}

.feed-filter-option.is-selected {
    color: var(--feed-navy);
    font-weight: 600;
}

.feed-filter-check {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 4px;
    border: 1.5px solid var(--feed-border);
    background: var(--feed-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
}

.feed-filter-option.is-selected .feed-filter-check {
    background: var(--feed-cyan);
    border-color: var(--feed-cyan);
    color: #fff;
}

/* ── Results bar (count + view toggle) — sits above the list, like the jobs page ── */
.feed-resultsbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 2px;
    margin-bottom: 16px;
}

.feed-count {
    /* Matches .job-results-count exactly: "SHOWING N ITEMS" via text-transform,
       not typed uppercase, so the noun/plural can stay normal case in markup. */
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--feed-text-muted);
}

.feed-count-num {
    color: var(--feed-navy);
}

.feed-view {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feed-view-label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 43, 92, 0.6);
}

/* View toggle — segmented control with icon + text */
.feed-view-toggle {
    display: inline-flex;
    border: 1px solid var(--feed-border);
    border-radius: 10px;
    overflow: hidden;
}

.feed-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 0;
    background: var(--feed-card-bg);
    color: var(--feed-text-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    /* Deliberately NOT transitioned — see the same note on .software-view-btn
       in product-catalog.css: the relayout is instant, so cross-fading the
       pressed button made the selection lag the change it had just made. */
}

/* Font Awesome glyph — size with font-size, not width/height (that sized the
   old inline SVG and does nothing for an <i>). See the same note in
   product-catalog.css. */
.feed-view-icon {
    /* Font Awesome glyphs don't fill their em box, so at font-size 15px they
       inked only ~13px tall against the Card SVG's true 15px and read as
       visibly smaller and slightly high. 17px brings fa-table's ink to 15.0px,
       matching the SVG exactly; fa-bars is a flatter glyph and lands at ~12.8px,
       which is as close as a single size gets without making it overbearingly
       wide. Box widened to 18px because fa-table inks ~16.9px across at 17px
       and would otherwise be clipped by a 16px box. */
    font-size: 17px;
    line-height: 1;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* Hidden below 759px (see responsive block) — the SVG icon alone identifies the
   button there; aria-label on the button keeps it accessible either way. */
.feed-view-btn-label {
    white-space: nowrap;
}

.feed-view-btn + .feed-view-btn {
    border-left: 1px solid var(--feed-border);
}

.feed-view-btn:hover,
.feed-view-btn:focus-visible {
    color: var(--feed-navy);
}

.feed-view-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

.feed-view-btn.is-active {
    background: var(--feed-navy);
    color: #fff;
}

/* Clear button — matches .job-clear-all-btn exactly */
.feed-clear {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: var(--feed-cyan);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}

.feed-clear[hidden] {
    display: none;
}

.feed-clear:hover,
.feed-clear:focus-visible {
    text-decoration: underline;
}

.feed-clear:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}

/* ── Feed list ───────────────────────────────────────────────────────────── */
.feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feed-month {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--feed-text-muted);
    margin: 18px 0 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--feed-border);
}

.feed-month:first-child {
    margin-top: 0;
}

.feed-item {
    position: relative; /* anchor for the stretched-link overlay below */
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 20px 22px;
    background: var(--feed-card-bg);
    border: 1px solid var(--feed-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
}

.feed-item:hover {
    border-color: var(--feed-border-hover);
    box-shadow: 0 8px 28px rgba(0, 43, 92, 0.1);
    transform: translateY(-2px);
}

.feed-logo {
    flex: 0 0 auto;
}

.feed-logo img,
.feed-logo .custom-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    object-position: left center;
}

.feed-body {
    flex: 1 1 auto;
    min-width: 0;
}

.feed-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 4px;
}

/* Stretched-link pattern (same idea as .job-card-btn::after): a dedicated
   invisible overlay link covers the whole card so anywhere on the row
   navigates to the article — the primary action, like clicking a job card.
   It's a real sibling element rather than a pseudo-element on the title link
   because compact view puts `overflow: hidden` on .feed-title (for the
   ellipsis truncation), which would otherwise clip an inset:0 overlay down to
   just the title's own box. aria-hidden + tabindex="-1": the title link below
   already provides the accessible/keyboard route to the same destination, so
   this stays out of the tab order and screen-reader tree.
   The logo link and source name link to a different destination (the
   subsite), and the title/read-more links are worth keeping directly
   clickable too, so all four sit above the overlay via z-index — same trick
   job-card.css uses to keep its title/tags clickable over its own stretched
   link. */
.feed-item-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.feed-logo a,
.feed-source,
.feed-title a,
.feed-more {
    position: relative;
    z-index: 2;
}

.feed-source {
    font-size: 13px;
    font-weight: 700;
    color: var(--feed-navy);
    text-decoration: none;
}

.feed-source:hover {
    color: var(--feed-cyan);
}

.feed-date {
    font-size: 12px;
    color: var(--feed-text-light);
}

.feed-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
}

.feed-title a {
    color: var(--feed-navy);
    text-decoration: none;
}

.feed-title a:hover {
    color: var(--feed-cyan);
}

.feed-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--feed-text-muted);
    margin: 0;
    /* Break long unbroken tokens (URLs, long product strings) so an excerpt
       can't force horizontal scroll at phone widths. */
    overflow-wrap: break-word;
    word-break: break-word;
}

.feed-title,
.feed-title a {
    overflow-wrap: break-word;
    word-break: break-word;
}

.feed-more {
    color: var(--feed-cyan);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.feed-more:hover {
    text-decoration: underline;
}

/* ── Compact view ────────────────────────────────────────────────────────── */
/* One scannable line per post: [logo] Title …………… Source · Date.
   No excerpt (that's what Normal is for), no card chrome — a dense list.
   Per-row bottom borders (not an outer container border) so a filtered-to-empty
   list leaves nothing behind. */
.feed[data-view="compact"] {
    gap: 0;
}

/* Narrower than the page, and CENTRED.
   750px — the SAME width the Card view now uses, and deliberately so: when the
   two views differ, the list's left edge jumps as you toggle between them
   (it was 345px in Card and 220px in Compact), which is far more distracting
   than the extra width was worth. Matching them pins the left edge in both.

   This was 1000px, chosen because these rows carry a full post title plus
   source and date rather than a short product name. Measured before changing
   it: at 1000px none of the 320 titles truncate, at 800px three do, at 750px
   five do — 1.6%, each handled by the ellipsis this view already applies.
   Losing the ellipsis on five titles is a smaller cost than a 125px jump on
   every toggle.

   (An earlier comment here claimed the "Showing N / View" bar shares this
   width. It does not, and the rule below says why — that attempt was reverted.
   The stale claim is removed rather than left to contradict it.) */
.feed-wrap[data-view="compact"] {
    --feed-compact-width: 750px;
}

/* Only the LIST narrows — the "Showing N / View" bar keeps the full page
   width. See the same note on .software-catalog-wrap in product-catalog.css:
   sharing the width moved the View buttons out from under the cursor that had
   just pressed one. */
.feed-wrap[data-view="compact"] .feed {
    max-width: var(--feed-compact-width);
    margin-left: auto;
    margin-right: auto;
}

.feed[data-view="compact"] .feed-item {
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--feed-border);
    border-radius: 0;
    box-shadow: none;
    gap: 12px;
    align-items: center;
}

.feed[data-view="compact"] .feed-item:hover {
    transform: none;
    box-shadow: none;
    background: var(--feed-page-bg);
}

.feed[data-view="compact"] .feed-logo img,
.feed[data-view="compact"] .feed-logo .custom-logo {
    width: 26px;
    height: 26px;
}

/* Body becomes a single baseline-aligned row: title grows and truncates,
   the meta (source + date) sits at the right. */
.feed[data-view="compact"] .feed-body {
    display: flex;
    align-items: baseline;
    gap: 16px;
    min-width: 0;
}

.feed[data-view="compact"] .feed-title {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    /* Truncate at a WORD boundary, not mid-word. `text-overflow: ellipsis`
       cuts wherever the pixels run out ("…when importing dr…"); line-clamp
       lets the text wrap normally — which happens at spaces — then shows only
       the first line and appends the ellipsis, so the last word stays whole
       ("…when importing…").

       Measured against the 320 live titles: identical truncation count (5),
       identical title height (18px) and row height (45px) — so this costs
       nothing in layout. A single word longer than the whole line would still
       overflow, but post titles don't contain those.

       The -webkit- prefixes are still required: unprefixed `line-clamp` is
       standardising but the prefixed trio is what ships today, and every
       current browser supports it. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.feed[data-view="compact"] .feed-meta {
    order: 2;
    flex: 0 0 auto;
    margin: 0;
    gap: 10px;
    font-size: 12px;
}

.feed[data-view="compact"] .feed-source {
    font-size: 12px;
}

.feed[data-view="compact"] .feed-excerpt {
    display: none;
}

/* Compact month headers act as light section dividers within the dense list.
   margin-top (not padding) opens clear air above a new month — enough to read as
   "new section" without eating too much space in a view whose point is density;
   the label itself stays snug against its border-bottom. */
.feed[data-view="compact"] .feed-month {
    margin: 24px 0 0;
    padding: 6px 12px;
    font-size: 12px;
    border-bottom: 1px solid var(--feed-border);
}

.feed[data-view="compact"] .feed-month:first-child {
    margin-top: 0;
}

/* Compact view on phones: the single-row layout (title truncated with ellipsis,
   meta pinned right) leaves titles like "Keyman Updat…" unreadable at 390px.
   Stack instead — full-length wrapping title, then the source (muted) + date on
   a line below. Nothing is cut off; density comes from the tight row padding,
   not from hiding the title. */
@media (max-width: 759px) {
    .feed[data-view="compact"] .feed-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .feed[data-view="compact"] .feed-title {
        /* Lift the desktop one-line clamp as well as the old nowrap —
           otherwise the title would still be capped to a single line here. */
        display: block;
        -webkit-line-clamp: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 15px;
        line-height: 1.3;
    }

    /* Meta sits below the title (it already has order:2; the column direction
       does the rest) with the source muted rather than navy-bold. */
    .feed[data-view="compact"] .feed-meta {
        order: 2;
        font-size: 12px;
    }

    .feed[data-view="compact"] .feed-source {
        color: var(--feed-text-muted);
        font-weight: 600;
    }
}

/* ── State: window-hidden (older) + filtering ────────────────────────────── */
.feed-item.feed-hidden,
.feed-month.feed-hidden {
    display: none;
}

/* ── Filter animation ──────────────────────────────────────────────────────
 * A filter change must visibly animate the list, never snap silently — see
 * CLAUDE.md. Same pattern and the same timings as the catalogs'
 * .product-catalog-fading / .product-catalog-refresh (css/product-catalog.css)
 * and the Jobs page's .job-card-fading / .job-card-refresh; named for this
 * file's own .feed-* convention because feed.css is the only one of the three
 * stylesheets loaded on News and Learn, so the classes can't literally be
 * shared. js/feed-search.js drives it from apply().
 */
.feed-fading .feed-item {
    opacity: 0;
    transition: opacity 0.12s ease;
}

@keyframes feedItemRefresh {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.feed-refresh .feed-item {
    animation: feedItemRefresh 0.35s ease-out both;
}

.feed.is-filtering .feed-item,
.feed.is-filtering .feed-month {
    display: none;
}

.feed.is-filtering .feed-item.is-match {
    display: flex;
}

.feed-load-older-wrap {
    text-align: center;
    margin-top: 20px;
}

.feed-load-older {
    padding: 12px 32px;
    border: 1px solid var(--feed-border);
    border-radius: 12px;
    background: var(--feed-card-bg);
    color: var(--feed-navy);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.feed-load-older:hover,
.feed-load-older:focus-visible {
    border-color: var(--feed-cyan);
    box-shadow: 0 8px 28px rgba(0, 43, 92, 0.1);
    transform: translateY(-2px);
}

.feed-load-older:focus-visible {
    outline: none;
}

.feed-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--feed-text-muted);
    font-size: 16px;
}

/* ── Responsive — mirrors job-openings.css's breakpoints and rules exactly ──── */

/* Tablet (760px–991px): Search full-width on row 1; Software + Fonts share row 2,
   same as Jobs' three dropdowns sharing one row while Keywords sits alone above. */
@media (min-width: 760px) and (max-width: 991px) {
    .feed-toolbar-bar {
        flex-wrap: wrap;
        gap: 14px;
    }

    .feed-search-field {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .feed-toolbar-filters {
        flex: none;
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 14px;
    }

    .feed-filter {
        flex: 1;
        min-width: 0;
    }
}

/* Mobile (theme's custom xs breakpoint is 759px): everything stacks in one column. */
@media (max-width: 759px) {
    .feed-page {
        padding: 32px 0 48px;
    }

    .feed-toolbar {
        margin-bottom: 32px;
    }

    .feed-toolbar-bar {
        flex-direction: column;
        gap: 14px;
    }

    .feed-search-field,
    .feed-toolbar-filters {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .feed-toolbar-filters {
        flex-direction: column;
        gap: 14px;
    }

    /* Reset the row-oriented flex-basis on the stacked filter fields. In a
       column container, `flex: 1 1 220px` (set for the row layout, line ~130)
       becomes a 220px HEIGHT basis, forcing each field tall with a big empty
       gap under its content — the documented flex-basis-on-wrong-axis bug. */
    .feed-toolbar-filters .feed-field {
        flex: none;
        width: 100%;
    }

    .feed-filter {
        min-width: 0;
        width: 100%;
    }

    .feed-item {
        padding: 16px;
        gap: 14px;
    }

    .feed-logo img,
    .feed-logo .custom-logo {
        width: 44px;
        height: 44px;
    }

    .feed-title {
        font-size: 16px;
    }

    /* View toggle reduces to icon-only — aria-label on the button (in feed.twig)
       keeps it accessible once the visible text label is hidden. */
    .feed-view-btn-label {
        display: none;
    }

    .feed-view-btn {
        padding: 9px 12px;
    }

    /* Keep the results bar on ONE line — count left, toggle right — instead of
       the toggle wrapping onto its own left-aligned line. Dropping the "VIEW"
       word (the two icon buttons are self-explanatory + aria-labelled) frees
       the width to do it; nowrap + the count taking remaining space pins the
       toggle to the right edge. */
    .feed-resultsbar {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .feed-count {
        flex: 1;
        min-width: 0;
    }

    .feed-view-label {
        display: none;
    }
}

/* ── Compact-row chevron (phones) ─────────────────────────────────────────────
 * Shared pattern — see CLAUDE.md "Compact list rows". A compact row navigates
 * to one destination, so it carries a right chevron to say so. Navigation, not
 * disclosure: nothing expands inline, so a caret or plus would be wrong.
 *
 * Rules that make it behave:
 *   - absolutely positioned and pulled to the row's true vertical centre, not
 *     laid out as a grid/flex cell — as a cell it centres across whatever it
 *     spans, which drifts off-centre once the row's lines differ in height.
 *   - the row reserves padding-right for it, or long titles run underneath.
 *   - drawn from borders, never a text glyph: text in CSS content cannot be
 *     reached by GTranslate (see CLAUDE.md), and it is decoration anyway —
 *     the row's own link carries the destination, so this is aria-hidden by
 *     virtue of being a pseudo-element.
 *   - phones only: at wider widths these views show real columns and the
 *     chevron would just be noise.
 */
@media (max-width: 759px) {
    .feed[data-view="compact"] .feed-item {
        padding-right: 26px;
    }

    .feed[data-view="compact"] .feed-item::after {
        content: '';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--feed-text-muted, #64748b);
        border-bottom: 2px solid var(--feed-text-muted, #64748b);
        opacity: 0.6;
        pointer-events: none;   /* never intercept the row's own link */
    }
}

/* ── Reading width of the News/Learn card list ───────────────────────────────
 * At full width the card excerpt ran about 139 characters per line at 1440px
 * — nearly double the 45-75 that reads comfortably, and well past WCAG 1.4.8's
 * 80-character ceiling. Long lines make the eye lose its place on the return
 * sweep, which is what makes a wide paragraph feel like work.
 *
 * First attempt capped the TEXT and left the card full width. It fixed the
 * measure but left a third of every card empty on the right, which looked
 * worse than the problem. Narrowing the CARD instead — with gutters either
 * side, the way /fonts/ already does it — keeps the text and the card the same
 * shape, so there is no dead space.
 *
 * 750px is not an invented number: it is exactly what the /fonts/ list uses,
 * measured. Matching it keeps the two list pages looking related.
 *
 * Only the list narrows. The filter bar above keeps its own width, for the
 * reason product-catalog.css records: matching it moves the View buttons out
 * from under the cursor that just pressed one.
 */
.feed {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* The Card icon is an inline SVG while Table/Compact are Font Awesome glyphs,
   so it needs sizing in its own right — font-size does nothing to an <svg>,
   and the 16px box the font icons sit in would stretch it. 15px against its
   15-unit viewBox keeps one unit to one pixel, which is what keeps its edges
   sharp. If you ever change one of those numbers, change both. */
svg.feed-view-icon {
    width: 15px;
    height: 15px;
}