/* Technologies page redesign (DECISION-003, WP-B2).
   Scoped entirely under body.technologies-redesign so no other page is
   affected. Built on static/css/site_redesign.css's shared `--hr-*` tokens
   and header/nav CSS (already loaded globally by base.html for this page's
   key - see site_redesign.css) - this file does NOT redeclare header/nav.

   Real content sourced from the live PageContent rows for key='Technologies'
   (technologies_header_section / technologies_by_categories_section /
   technologies_featured_projects_section / technologies_cta_section) -
   see scripts/diag_technologies_content.py. Structural pattern (glass
   cards, violet/teal alternation, pill tags) follows the same values
   already shipped in home_redesign.css's .hr-card treatment and the
   scratchpad technologies_mockup_v1.html's .cat-card/.tag rules, so the
   glass-card look is identical across pages rather than a near-miss.

   Class names are deliberately namespaced `tr-*` and do NOT reuse the
   legacy CMS blob's own class names (`.tech-hero`, `.gradient-text`,
   `.tech-category-card`, `.tag`, etc). A legacy CSSStyle row (id=7, name
   'technologies') is still attached to this Page via page_css_style and
   will keep loading from base.html's page_css_asset link AFTER this file
   in cascade order regardless of the template cutover (Page.css_styles is
   independent of Page.template) - the same class of cascade-order bug
   SESSION_REVIVAL.md item 90 hit on Home. Using non-colliding class names
   sidesteps it entirely rather than fighting it with !important. */

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

/* #uv-background-canvas restored (was wrongly hidden - see home_redesign.css). */

body.technologies-redesign .tr-page { position: relative; overflow: hidden; }
body.technologies-redesign .tr-hero-wrap { position: relative; }
body.technologies-redesign .tr-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 / page title --- */
body.technologies-redesign .tr-hero {
    position: relative; z-index: 2; text-align: center;
    padding: 90px 64px 60px; max-width: 1100px; margin: 0 auto;
}
body.technologies-redesign .tr-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;
}
/* Glass panel behind the gradient-clip h1 (WP-D4, per-page rollout of the
   Products-page glass-panel rule). The header's own `background` property
   is already consumed by the text-clip effect above, so the panel lives on
   a ::before pseudo-element instead, matching the .tr-cat-card/
   .tr-featured-card glass treatment already used elsewhere on this page. */
body.technologies-redesign .tr-hero h1::before {
    content: '';
    position: absolute;
    inset: -18px -32px;
    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;
}
body.technologies-redesign .tr-divider {
    height: 3px; width: 80px; margin: 0 auto 28px;
    background: linear-gradient(90deg, var(--hr-highlight), var(--hr-primary));
    border-radius: 3px;
}
/* Standalone lead paragraph - not inside a .tr-cat-card/.tr-featured-card,
   so it needs its own glass panel (WP-D4). */
body.technologies-redesign .tr-lead {
    font-family: 'Barlow', sans-serif;
    font-size: 20px; line-height: 1.6; color: var(--hr-text-muted);
    max-width: 780px; margin: 0 auto;
    padding: 26px 34px;
    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;
}

/* --- Category cards --- */
body.technologies-redesign .tr-categories { position: relative; z-index: 2; padding: 24px 64px 0; max-width: 1500px; margin: 0 auto; }
body.technologies-redesign .tr-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
body.technologies-redesign .tr-cat-card {
    position: relative; border-radius: 14px; padding: 30px 32px; overflow: hidden;
    background: 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.technologies-redesign .tr-cat-card.violet { 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); }
body.technologies-redesign .tr-cat-card.teal { 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); }
body.technologies-redesign .tr-cat-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
body.technologies-redesign .tr-cat-header i { font-size: 30px; line-height: 1; }
body.technologies-redesign .tr-cat-card.violet .tr-cat-header i { color: var(--hr-highlight); }
body.technologies-redesign .tr-cat-card.teal .tr-cat-header i { color: var(--hr-primary); }
body.technologies-redesign .tr-cat-header h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 700; margin: 0; }
body.technologies-redesign .tr-cat-card.violet .tr-cat-header h2 { color: var(--hr-highlight); }
body.technologies-redesign .tr-cat-card.teal .tr-cat-header h2 { color: var(--hr-primary); }
body.technologies-redesign .tr-cat-card > p { font-family: 'Barlow', sans-serif; font-size: 16px; line-height: 1.55; color: var(--hr-text-muted); margin-bottom: 22px; }
body.technologies-redesign .tr-tags { display: flex; flex-wrap: wrap; gap: 10px; }
/* WP-PILL1 (869ep9fbm): pill visuals + interactivity now come from the
   shared `.hr-pill` component in static/css/site_redesign.css - this
   page's own `.tr-tag`/`.tr-tag.highlight` rules were fully replaced by
   `.hr-pill`/`.hr-pill.hr-pill--highlight` markup, not layered on top of
   them, so there is nothing left to declare here. `.tr-tags` above stays
   as the layout-only flex/wrap container. */

/* --- Featured projects --- */
body.technologies-redesign .tr-featured { position: relative; z-index: 2; padding: 64px 64px 0; max-width: 1500px; margin: 0 auto; }
body.technologies-redesign .tr-featured-header { text-align: center; margin-bottom: 36px; }
body.technologies-redesign .tr-featured-header h2 {
    position: relative; display: inline-block;
    font-family: 'Barlow Condensed', sans-serif; font-size: 40px; font-weight: 800; letter-spacing: 1px;
    background: linear-gradient(90deg, var(--hr-highlight), var(--hr-primary)) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    margin-bottom: 20px;
}
/* Glass panel behind the gradient-clip h2 - same ::before technique as
   .tr-hero h1 above (WP-D4). */
body.technologies-redesign .tr-featured-header h2::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;
}
body.technologies-redesign .tr-featured-header .tr-divider { margin: 0 auto 20px; }
/* Standalone sub-header paragraph - not inside a .tr-featured-card, so it
   needs its own glass panel (WP-D4). */
body.technologies-redesign .tr-featured-header p {
    display: inline-block; max-width: 640px; margin: 0 auto;
    font-family: 'Barlow', sans-serif; font-size: 17px; color: var(--hr-text-muted);
    padding: 16px 28px;
    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;
}
body.technologies-redesign .tr-featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
body.technologies-redesign .tr-featured-card {
    position: relative;
    border-radius: 14px; padding: 26px 28px; 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);
}
body.technologies-redesign .tr-featured-card h3 {
    position: relative; z-index: 2;
    font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700;
    color: var(--hr-light); margin-bottom: 16px;
}
/* WP-PILL1 (869ep9fbm): showcase cards are clickable through to their own
   project detail page (distinct from their pills, which filter /projects).
   A real <a> cannot wrap the whole card because the pills inside are also
   real <a> elements - nested anchors are invalid HTML and browsers break
   the outer anchor's hit-region unpredictably when they hit an inner one.
   Instead the card gets a single full-bleed overlay anchor at a lower
   z-index than its content; the pills (`.tr-tags`, z-index:2 below) sit
   above it and remain independently clickable/hoverable, while clicking
   anywhere else on the card activates the overlay link. */
body.technologies-redesign .tr-featured-card--linked { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
body.technologies-redesign .tr-featured-card--linked:hover {
    transform: translateY(-4px);
    border-color: rgba(1,206,211,0.35);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
body.technologies-redesign .tr-featured-card-overlay {
    position: absolute; inset: 0; z-index: 1; border-radius: inherit;
}
body.technologies-redesign .tr-featured-card .tr-tags { position: relative; z-index: 2; }

/* --- CTA --- */
body.technologies-redesign .tr-cta { position: relative; z-index: 2; text-align: center; padding: 80px 64px 120px; max-width: 900px; margin: 0 auto; }
/* CTA h2 does not use the gradient-text-clip technique, so the glass panel
   can sit directly on the element's own background (WP-D4) - no ::before
   pseudo-element needed here. */
body.technologies-redesign .tr-cta h2 {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif; font-size: 40px; font-weight: 800; letter-spacing: 1px;
    color: var(--hr-light); margin-bottom: 20px;
    padding: 14px 30px;
    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;
}
/* Standalone CTA body paragraph - needs its own glass panel (WP-D4). */
body.technologies-redesign .tr-cta p {
    display: inline-block; max-width: 720px;
    font-family: 'Barlow', sans-serif; font-size: 17px; line-height: 1.6; color: var(--hr-text-muted); margin-bottom: 36px;
    padding: 20px 30px;
    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;
}
body.technologies-redesign .tr-cta-pill {
    display: inline-flex; align-items: center; padding: 22px 46px; border-radius: 8px;
    background: linear-gradient(90deg, var(--hr-highlight), var(--hr-primary)); color: var(--hr-light);
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase;
    text-decoration: none; box-shadow: 0 0 40px rgba(181,51,247,0.25);
}

/* --- Responsive: built in from the start, tablet (1024px) then phone
   (768px), mirroring home_redesign.css's own breakpoint discipline
   (SESSION_REVIVAL.md item 89 - the original Home rebuild shipped with
   zero breakpoints and had to be retrofitted; not repeating that here). --- */
@media (max-width: 1024px) {
    body.technologies-redesign .tr-hero { padding: 60px 40px 40px; }
    body.technologies-redesign .tr-hero h1 { font-size: 48px; }
    body.technologies-redesign .tr-hero h1::before { inset: -14px -24px; }
    body.technologies-redesign .tr-lead { font-size: 18px; }
    body.technologies-redesign .tr-categories,
    body.technologies-redesign .tr-featured,
    body.technologies-redesign .tr-cta { padding-left: 40px; padding-right: 40px; }
    body.technologies-redesign .tr-featured-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    body.technologies-redesign .tr-hero { padding: 40px 20px 30px; }
    body.technologies-redesign .tr-hero h1 { font-size: 34px; }
    body.technologies-redesign .tr-hero h1::before { inset: -10px -18px; }
    body.technologies-redesign .tr-lead { font-size: 16px; padding: 20px 22px; }

    body.technologies-redesign .tr-categories,
    body.technologies-redesign .tr-featured,
    body.technologies-redesign .tr-cta { padding-left: 20px; padding-right: 20px; }

    body.technologies-redesign .tr-cat-grid { grid-template-columns: 1fr; gap: 16px; }
    body.technologies-redesign .tr-cat-card { padding: 22px 22px 20px; }
    body.technologies-redesign .tr-cat-header h2 { font-size: 22px; }
    body.technologies-redesign .tr-cat-header i { font-size: 24px; }

    body.technologies-redesign .tr-featured { padding-top: 40px; }
    body.technologies-redesign .tr-featured-header h2 { font-size: 28px; }
    body.technologies-redesign .tr-featured-header h2::before { inset: -10px -16px; }
    body.technologies-redesign .tr-featured-header p { padding: 14px 18px; }
    body.technologies-redesign .tr-featured-grid { grid-template-columns: 1fr; gap: 16px; }

    body.technologies-redesign .tr-cta { padding: 50px 20px 70px; }
    body.technologies-redesign .tr-cta h2 { font-size: 28px; padding: 12px 20px; }
    body.technologies-redesign .tr-cta p { padding: 16px 20px; }
}