/* WP-C2 (DECISION-003 Products/Projects/Work Feed extension).
   templates/portfolio/projects.html only - scoped entirely under
   body.projects-redesign so no other page is affected.

   /projects is not a fresh page: it already runs a real, tested,
   production feature set (static/js/uv-background.js's live particle
   canvas, WP-D1's category filter panel + search, ProjectCard-backed
   card grid, the reciprocal /work-feed cross-link) that this file
   restyles AROUND, not over. Every existing pp-* class name and every
   bit of Jinja logic in the template is left exactly as
   tests/test_wp_d1_projects_page.py found it - this stylesheet only
   changes appearance, loaded after static/css/portfolio_projects.css so
   its `body.projects-redesign .pp-*` selectors (two classes) win on
   specificity over that file's bare `.pp-*` (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 class of regression already found and fixed site-wide this
   Watch on the original 5 pages (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) - see this template's own
   extra_css block comment for why: site_redesign.css's selector lists do
   not yet include body.projects-redesign (nor the sibling WP-C1/WP-C3
   ticket body classes), and editing that shared file from three parallel
   tickets at once would race on the same lines. WP-C3's
   workfeed_redesign.css already took the identical approach for its own
   body class - this file mirrors it. Candidate for a later WP-A0-style
   consolidation once all three land. */

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

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

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

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

body.projects-redesign .navbar {
    padding: 20px 0; border-bottom: none !important; box-shadow: none !important;
    transition: padding 0.25s ease, box-shadow 0.25s ease;
}
body.projects-redesign .navbar.hr-nav-scrolled {
    padding: 8px 0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
}
body.projects-redesign .navbar-brand {
    position: relative; display: inline-block; height: 88px;
    transition: height 0.25s ease;
}
body.projects-redesign .navbar-brand img { height: 88px; width: auto; visibility: hidden; transition: height 0.25s ease; }
body.projects-redesign .navbar.hr-nav-scrolled .navbar-brand,
body.projects-redesign .navbar.hr-nav-scrolled .navbar-brand img { height: 48px; }
body.projects-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.projects-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.projects-redesign .nav-link.active,
body.projects-redesign .nav-item .nav-link:hover { color: var(--hr-highlight) !important; }

/* --- Connector-logo motif (required on every redesigned page) --- */
body.projects-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.projects-redesign .hr-page { position: relative; overflow: hidden; }
body.projects-redesign .hr-hero-wrap { position: relative; }
body.projects-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%);
}

/* --- Hero content: the existing WP-D1 header/partnership-panel content
   (rendered by render_page_content('projects', ...) in the template) is
   restyled in place here, not replaced - the <h1> and .partnership-box
   markup are the same real content rows WP-D1 already renders, just
   given the hero treatment. The CTA row (portfolio_cta_section) shares
   this same render_page_content call (app.py's helper has no
   "include only this key" filter) so it is styled here too, at a lower
   visual weight than the page title. --- */
body.projects-redesign .hr-hero.pp-hero {
    position: relative; z-index: 2;
    padding: 90px 64px 50px; max-width: 1500px; margin: 0 auto;
}
body.projects-redesign .hr-hero.pp-hero h1 {
    position: relative; display: inline-block;
    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: 24px;
}
/* WP-D6 (869en538j, direct Primarch instruction after the Products-page
   glass-panel screenshots: "same goes for other pages. each text block
   must have glass boxes."). The h1's own `background` is consumed by the
   gradient-text-clip above, so its glass panel is a ::before instead -
   identical technique already used on static/css/home_redesign.css's
   `.hr-hero h1::before`. Values match every other glass panel already on
   this page (.pp-filter-panel / .pp-card / .pp-empty-state below). */
body.projects-redesign .hr-hero.pp-hero h1::before {
    content: '';
    position: absolute; inset: -14px -26px; z-index: -1;
    background: radial-gradient(circle at 15% 0%, rgba(181,51,247,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
}
/* WP-D6: the header intro copy (portfolio_header_section's `.lead`
   paragraph) sat directly on the hero background with no container at
   all before this - now boxed the same as every other text block. */
body.projects-redesign .hr-hero.pp-hero .lead {
    display: block; max-width: 900px;
    color: var(--hr-light) !important;
    background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
    padding: 1rem 1.25rem;
}
body.projects-redesign .hr-hero.pp-hero .partnership-box {
    max-width: 900px;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    background: radial-gradient(circle at 15% 0%, rgba(181,51,247,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    /* WP-D6: hairline border added so this panel matches the exact glass
       value set used everywhere else on the page (it already had the
       background+blur, just not the border). */
    border: 1px solid rgba(255,255,255,0.08);
}
body.projects-redesign .hr-hero.pp-hero .partnership-box h3 {
    color: var(--hr-primary) !important;
}
body.projects-redesign .hr-hero.pp-hero .partnership-box p {
    color: var(--hr-light) !important;
}
body.projects-redesign .hr-hero.pp-hero [data-content-key="portfolio_cta_section"] {
    margin-top: 28px;
}
body.projects-redesign .hr-hero.pp-hero [data-content-key="portfolio_cta_section"] h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 26px; font-weight: 700;
    color: var(--hr-light) !important;
}
/* WP-D6: the real content_html for this row (instance/app.db,
   portfolio_cta_section) wraps its own h2+p+button in a `.cta-section`
   div - that class already carries an unrelated purple gradient
   background from the globally-loaded static/css/service_details.css
   (loaded before this file, lower specificity, safely overridden here).
   Boxed as one glass panel around the CTA copy, matching "CTA text" in
   this ticket's own audit list. The button itself is left alone - out of
   scope (a control, not a text block). */
body.projects-redesign .hr-hero.pp-hero [data-content-key="portfolio_cta_section"] .cta-section {
    display: inline-block; max-width: 700px;
    background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
    padding: 1.75rem 2rem;
}
body.projects-redesign .hr-hero.pp-hero [data-content-key="portfolio_cta_section"] .cta-section p {
    color: var(--hr-text-muted) !important;
}

/* --- Body container beneath the hero: crosslink / filter panel / card
   grid / empty state. .pp-page keeps its own --pp-* tokens (static/css/
   portfolio_projects.css) for everything still themed off them (card
   backgrounds, per-category filter colors) - this layer only lifts the
   whole section above the connector logo and restyles the crosslink and
   the panel chrome to the glass/glow language. --- */
body.projects-redesign .container.pp-page { position: relative; z-index: 2; }

body.projects-redesign .pp-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.projects-redesign .pp-feed-crosslink:hover { border-bottom-color: var(--hr-primary); color: var(--hr-primary); }

body.projects-redesign .pp-filter-panel {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: radial-gradient(circle at 15% 0%, rgba(181,51,247,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

body.projects-redesign .pp-btn-primary {
    background: linear-gradient(90deg, var(--hr-highlight), var(--hr-primary));
    color: var(--hr-light);
}
body.projects-redesign .pp-btn-primary:hover { color: var(--hr-light); }

body.projects-redesign .pp-card {
    background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
}

body.projects-redesign .pp-empty-state {
    border: 1px dashed rgba(1,206,211,0.3);
    background: radial-gradient(circle at 15% 0%, rgba(181,51,247,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* WP-D6: the "Showing N published projects" status line sat directly on
   the page background with no container - boxed the same as every other
   standalone text block on this page. The "Clear filter"/"Clear search"
   links stay unboxed, matching this design system's own established
   precedent for inline nav-style links (e.g. home_redesign.css's
   `.hr-more-link`, projects_redesign.css's own `.pp-feed-crosslink`
   above - controls, not body-copy text blocks). */
body.projects-redesign .pp-result-count {
    display: inline-block;
    background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
    padding: 0.5rem 1rem;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    body.projects-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.projects-redesign .hr-hero.pp-hero { padding: 60px 40px 36px; }
    body.projects-redesign .hr-hero.pp-hero h1 { font-size: 46px; }
}

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

    body.projects-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.projects-redesign .hr-hero.pp-hero { padding: 40px 20px 28px; }
    body.projects-redesign .hr-hero.pp-hero h1 { font-size: 34px; }
    body.projects-redesign .hr-hero.pp-hero .lead { padding: 0.85rem 1rem; }
    body.projects-redesign .hr-hero.pp-hero .partnership-box { padding: 1rem 1.15rem; }
    body.projects-redesign .hr-hero.pp-hero [data-content-key="portfolio_cta_section"] .cta-section { padding: 1.25rem 1.5rem; }
    body.projects-redesign .pp-result-count { padding: 0.4rem 0.75rem; }
}