/* WP-C3 (DECISION-003 Products/Projects/Work Feed extension), re-applied as
   WP-E3 (docs/WORKPACK_DECISION003_ALL_SUBPAGES.md) after the 2026-08-21
   "ALL SUBPAGES ARE TO BE CONVERTED TO NEW STYLING" instruction reversed the
   earlier out-of-scope ruling (commit 0440d5a). Re-created from the original
   commit 1e96e0a as a starting point - see that commit's own message for the
   full original rationale, reproduced below unchanged where still accurate.

   templates/portfolio/work_feed.html only - scoped entirely under
   body.work-feed-redesign so no other page is affected.

   /work-feed is not a fresh page: it already runs a real, tested,
   production feature set (static/js/uv-background.js's live particle
   canvas, the feature/workfeed-category-legend 6-swatch legend, the
   reciprocal /projects cross-link, WorkFeedEntry-backed pagination) that
   this file restyles AROUND, not over. Every existing wf-* class name and
   every bit of Jinja logic in the template is left exactly as
   tests/test_wp_d2_work_feed_page.py and
   tests/test_workfeed_category_and_image_url_migration.py found it - this
   stylesheet only changes appearance, loaded after
   static/css/portfolio_work_feed.css so its `body.work-feed-redesign .wf-*`
   selectors (two classes) win on specificity over that file's bare `.wf-*`
   (one class) without needing !important.

   #uv-background-canvas (position:fixed, z-index:-1, static/js/
   uv-background.js) must stay fully visible and animating - this is the
   exact page that proved, this same Watch, that every other *_redesign.css
   file had wrongly hidden it with a display:none rule. No such rule exists
   below, on this element or any equivalent (visibility:hidden, opacity:0,
   z-index below the canvas's own -1, etc.). The opaque `--hr-bg` body
   background below is safe precisely because the canvas is a negative
   z-index descendant, which the CSS painting order places ABOVE the root
   box's own background regardless of what color that background is - the
   same reason home_redesign.css's identical `background: var(--hr-bg)
   !important` on body.home-redesign does not hide it there either.

   Token values, header/nav, and .hr-connector-logo rules below are a
   deliberate page-scoped COPY of static/css/site_redesign.css's shared
   rules (values only, not a re-export) - carried over unchanged from the
   original 1e96e0a rationale: site_redesign.css's selector lists still do
   not cover body.work-feed-redesign (WP-E0 only extended the
   redesigned_pages *gate*, not this specific shared-value list), and this
   ticket's own instructions are to build workfeed_redesign.css as a
   standalone file, not to edit the shared file concurrently with the
   parallel WP-E1/WP-E2 tickets. Candidate for a later consolidation pass.

   ---------------------------------------------------------------------
   WP-E3 FIX - root cause CONFIRMED BY REPRODUCTION, not guessed:

   .hr-page carries `overflow: hidden` (below) - required, because the
   decorative .hr-connector-logo is deliberately oversized and positioned
   off-canvas (width up to 1700px, right: -500px) and relies on that clip to
   not add its own scrollbar. That same overflow:hidden also means any OTHER
   element on the page that happens to lay out wider than the viewport does
   not produce a horizontal scrollbar either - it is silently clipped
   in place instead. That is the exact mechanism the original bug report
   described ("badges/text clipped on the card edges"): not a scrollable
   page, a visually truncated one, at cards' own right edge.

   Reproduced directly (scripts/validation/wp_e3_overflow_check.py against a
   real seeded /work-feed instance, headless Chrome, real CSS pixel
   measurements via getBoundingClientRect - not inspection): a
   WorkFeedEntry.tags entry containing one long unbroken token (no spaces or
   hyphens - the one shape default CSS word-wrapping does NOT break without
   `overflow-wrap`/`word-break`) renders as `.wf-feed-tag`, a flex child of
   `.wf-feed-meta` (`display:flex; flex-wrap:wrap`). flex-wrap wraps ITEMS
   onto new lines; it does not shrink one item's own unbreakable text below
   its intrinsic width. At a 375px viewport the reproduction's `.wf-feed-tag`
   measured right edge = 389.5px against a 375px viewport (14.5px of real,
   confirmed overflow) while `document.documentElement.scrollWidth` stayed
   at exactly 375px throughout - proving the clip, not a scrollbar, is what
   silently absorbed it. Tags are free-text (WorkFeedEntry.tags, entered by
   whoever publishes an entry), the one field in this view genuinely capable
   of containing an arbitrary unbroken string; the fixed, short, closed
   WORKFEED_CATEGORY_VOCABULARY/ENTRY_TYPE_LABELS badges were tested the
   same way (scripts/validation/wp_e3_legend_dump.py,
   wp_e3_dimension_dump.py) and do NOT overflow at any width down to 320px
   with the real vocabulary's longest label ("Partner Cooperation (CZ)") -
   so they are left as originally designed (single-line nowrap chips) rather
   than "fixed" for a defect they do not actually have.

   The fix is NOT `overflow:hidden` anywhere new (.hr-page already has it,
   which is precisely how the original bug went undetected as a scrollbar)
   and it is NOT removed here either - .hr-page's own overflow:hidden must
   stay, or the connector-logo bleed grows its own scrollbar. The actual fix
   is to give `.wf-feed-tag` (and `.wf-project-chip`'s inner text, the other
   free-text field in this row) a real break opportunity - `overflow-wrap:
   break-word` + `word-break: break-word` - so a long unbroken token wraps
   onto a second line inside its own chip instead of extending past it.
   Applied at all widths (not only the narrow breakpoint) because an
   unbroken token long enough to overflow is a function of the token's own
   length, not the viewport - a narrow screen simply reaches that threshold
   sooner (confirmed by testing this in the ranges 320px-1920px). */

body.work-feed-redesign {
    --hr-bg: #000000;
    --hr-primary: #01CED3;
    --hr-secondary: #238CB6;
    --hr-highlight: #B533F7;
    --hr-light: #FFFFFF;
    --hr-text-muted: #918b8e;
}

body.work-feed-redesign {
    background: var(--hr-bg) !important;
    font-family: 'Barlow', sans-serif;
}

/* --- Header / nav parity with the other redesigned pages --- */
body.work-feed-redesign header { position: sticky; top: 0; z-index: 50; background: var(--hr-bg) !important; }

body.work-feed-redesign .navbar.navbar-dark,
body.work-feed-redesign .navbar-dark.bg-dark { background: var(--hr-bg) !important; position: relative; z-index: 5; }

body.work-feed-redesign .navbar {
    padding: 20px 0; border-bottom: none !important; box-shadow: none !important;
    transition: padding 0.25s ease, box-shadow 0.25s ease;
}
body.work-feed-redesign .navbar.hr-nav-scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
}
body.work-feed-redesign .navbar-brand {
    position: relative; display: inline-block; height: 88px;
    transition: height 0.25s ease;
}
body.work-feed-redesign .navbar-brand img { height: 88px; width: auto; visibility: hidden; transition: height 0.25s ease; }
body.work-feed-redesign .navbar.hr-nav-scrolled .navbar-brand,
body.work-feed-redesign .navbar.hr-nav-scrolled .navbar-brand img { height: 48px; }
body.work-feed-redesign .navbar-brand .hr-logo-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--hr-highlight), var(--hr-primary));
    -webkit-mask-image: url('/static/images/logo_transparent.png');
    mask-image: url('/static/images/logo_transparent.png');
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: left center; mask-position: left center;
}
body.work-feed-redesign .nav-link {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; text-transform: uppercase; font-size: 15px;
    letter-spacing: 1px; color: var(--hr-light) !important;
}
body.work-feed-redesign .nav-link.active,
body.work-feed-redesign .nav-item .nav-link:hover { color: var(--hr-highlight) !important; }

/* --- Connector-logo motif (required on every redesigned page) --- */
body.work-feed-redesign .hr-connector-logo {
    position: absolute; top: -140px; right: -500px;
    width: 1700px; height: 3800px; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, var(--hr-highlight) 0%, #7a3fb0 20%, var(--hr-primary) 45%, var(--hr-primary) 75%, #7a3fb0 90%, var(--hr-highlight) 100%);
    -webkit-mask-image: url('/static/images/uv_sygnet_4x.webp');
    mask-image: url('/static/images/uv_sygnet_4x.webp');
    -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y;
    -webkit-mask-position: center top; mask-position: center top;
    -webkit-mask-size: 1700px 1970px; mask-size: 1700px 1970px;
}

/* --- hr-page / hero shell --- */
body.work-feed-redesign .hr-page { position: relative; overflow: hidden; }
body.work-feed-redesign .hr-hero-wrap { position: relative; }
body.work-feed-redesign .hr-veins {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 15% 10%, rgba(181,51,247,0.09), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(1,206,211,0.07), transparent 45%);
}

body.work-feed-redesign .hr-hero.wf-hero {
    position: relative; z-index: 2;
    padding: 90px 64px 60px; max-width: 1500px; margin: 0 auto;
}
body.work-feed-redesign .hr-hero.wf-hero .wf-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 64px; font-weight: 800; letter-spacing: 1px;
    background: linear-gradient(90deg, var(--hr-highlight) 0%, #7b5fd0 30%, #4a9fd8 65%, var(--hr-primary) 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    line-height: 1.05; margin-bottom: 14px;
}
body.work-feed-redesign .hr-hero.wf-hero .wf-lead {
    font-family: 'Barlow', sans-serif;
    font-size: 20px; color: var(--hr-text-muted); font-weight: 400; max-width: 780px;
}

/* --- Body container beneath the hero: crosslink / legend / feed / empty
   state. .wf-page keeps its own --wf-* tokens (static/css/
   portfolio_work_feed.css) for the parts of this section that are still
   themed off them (entry-type badge colors, feed rail gradient); this
   layer restyles the panels themselves to the glass/glow language. --- */
body.work-feed-redesign .container.wf-page { position: relative; z-index: 2; }

body.work-feed-redesign .wf-feed-crosslink {
    display: inline-flex; align-items: center;
    color: var(--hr-light); font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase;
    border-bottom: 1px solid rgba(1,206,211,0.35);
}
body.work-feed-redesign .wf-feed-crosslink:hover { border-bottom-color: var(--hr-primary); color: var(--hr-primary); }

body.work-feed-redesign .wf-legend {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(13,15,20,0.42);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.work-feed-redesign .wf-legend-item { color: var(--hr-text-muted); }

body.work-feed-redesign .wf-divider { border-color: rgba(255,255,255,0.08); }

body.work-feed-redesign .wf-feed-item {
    background: rgba(13,15,20,0.42);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 22px 26px;
    margin-bottom: 18px;
}
body.work-feed-redesign .wf-feed-item.wf-feed-item-categorised {
    border-left-width: 3px;
    padding-left: 23px;
    /* Direct correction: the colored border-left shared the card's own
       border-radius:14px on all 4 corners, so at the top-left/bottom-left
       corners the bright category color visually curved into the card's
       faint rgba(255,255,255,0.08) top/bottom border - reading as a second,
       fainter bracket right next to the real one instead of one clean
       accent line. Flattening just the left corners lets the colored
       border-left terminate as a single flat bracket. */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
body.work-feed-redesign .wf-feed-rail { display: none; }
body.work-feed-redesign .wf-feed-body { padding-bottom: 0; }
body.work-feed-redesign .wf-feed-date { color: var(--hr-primary); }
body.work-feed-redesign .wf-feed-title { color: var(--hr-light); font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; }
body.work-feed-redesign .wf-feed-summary { color: var(--hr-text-muted); }
body.work-feed-redesign .wf-feed-meta { color: var(--hr-text-muted); }

body.work-feed-redesign .wf-project-chip a { color: var(--hr-primary); border-bottom-color: rgba(1,206,211,0.35); }
body.work-feed-redesign .wf-project-chip a:hover { border-bottom-color: var(--hr-primary); }
body.work-feed-redesign .wf-feed-more { color: var(--hr-highlight); }
body.work-feed-redesign .wf-feed-more:hover { color: var(--hr-primary); }

body.work-feed-redesign .btn-outline-primary {
    border-color: var(--hr-primary); color: var(--hr-primary);
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
body.work-feed-redesign .btn-outline-primary:hover {
    background: linear-gradient(90deg, var(--hr-highlight), var(--hr-primary));
    border-color: transparent; color: var(--hr-light);
}

body.work-feed-redesign .wf-empty-state {
    border: 1px dashed rgba(1,206,211,0.3);
    border-radius: 14px;
    background: rgba(13,15,20,0.42);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.work-feed-redesign .wf-empty-state .wf-empty-icon { color: var(--hr-primary); }
body.work-feed-redesign .wf-empty-state h3 { color: var(--hr-light); font-family: 'Barlow Condensed', sans-serif; }
body.work-feed-redesign .wf-empty-state p { color: var(--hr-text-muted); }
body.work-feed-redesign .wf-empty-state .wf-btn-primary {
    background: linear-gradient(90deg, var(--hr-highlight), var(--hr-primary));
    color: var(--hr-light); border-radius: 8px; padding: 0.7rem 1.6rem;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}

/* --- WP-E3 FIX (see header comment for the reproduction that confirmed
   this): .wf-feed-tag and .wf-project-chip's inner text are the two
   free-text fields in .wf-feed-meta capable of holding a single long
   unbroken token. Giving them a real break opportunity (not
   white-space:nowrap removal on the closed-vocabulary badges, which do not
   exhibit this defect) lets such a token wrap onto a second line inside its
   own chip instead of extending past the card and being silently clipped by
   .hr-page's overflow:hidden. Applied unconditionally (not viewport-gated):
   the overflow is a function of the token's length, not the breakpoint. --- */
body.work-feed-redesign .wf-feed-tag {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}
body.work-feed-redesign .wf-project-chip {
    max-width: 100%;
}
body.work-feed-redesign .wf-project-chip a,
body.work-feed-redesign .wf-project-chip span {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    body.work-feed-redesign .hr-connector-logo {
        width: 680px; top: -150px;
        -webkit-mask-image: url('/static/images/uv_sygnet_tablet.webp');
        mask-image: url('/static/images/uv_sygnet_tablet.webp');
        -webkit-mask-size: 680px 788px; mask-size: 680px 788px;
    }
    body.work-feed-redesign .hr-hero.wf-hero { padding: 60px 40px 40px; }
    body.work-feed-redesign .hr-hero.wf-hero .wf-heading { font-size: 48px; }
    body.work-feed-redesign .hr-hero.wf-hero .wf-lead { font-size: 18px; }
}

@media (max-width: 768px) {
    body.work-feed-redesign .navbar-brand { height: 56px; }
    body.work-feed-redesign .navbar-brand img { height: 56px; }
    body.work-feed-redesign .navbar.hr-nav-scrolled .navbar-brand,
    body.work-feed-redesign .navbar.hr-nav-scrolled .navbar-brand img { height: 40px; }

    body.work-feed-redesign .hr-connector-logo {
        display: block;
        width: 550px; height: 1900px; top: -60px; right: -150px;
        -webkit-mask-image: url('/static/images/uv_sygnet_1x.png');
        mask-image: url('/static/images/uv_sygnet_1x.png');
        -webkit-mask-size: 550px 637px; mask-size: 550px 637px;
    }

    body.work-feed-redesign .hr-hero.wf-hero { padding: 40px 20px 28px; }
    body.work-feed-redesign .hr-hero.wf-hero .wf-heading { font-size: 34px; }
    body.work-feed-redesign .hr-hero.wf-hero .wf-lead { font-size: 16px; }

    body.work-feed-redesign .wf-feed-item { padding: 18px 18px; }
    body.work-feed-redesign .wf-feed-title { font-size: 19px; }
}