/**
 * v3 careerweb — detail panel.
 *
 * Two hero modes:
 *   1. No banner (default): flat panel with padding, 80px brand strip
 *      across the top.
 *   2. With banner (.detail-hero--has-banner): banner image fills the
 *      hero, dark gradient overlay for legibility, content sits in a
 *      frosted-glass card. Brand strip is suppressed because the banner
 *      already carries the brand cue.
 *
 * Glass card margin/width math is tuned so the card's left/right
 * edges align with the body's content padding (responsive overrides
 * adjust this at 1100/860 breakpoints — see responsive.css).
 */

.detail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    position: relative;
    min-height: 400px;
    /* Grid items default to min-width: auto (= min-content), which lets
       wide inner content (apply-bar, banner) push the 1fr column past
       its track. The original styling masked that with overflow:hidden;
       now that the share chip needs to overhang, we drop the clip and
       use min-width: 0 instead to keep the column on its track. */
    min-width: 0;
}

/* Loading state — used both during a filter / sort refetch AND
   while the per-job apply form schema is in flight. Hides the
   underlying content (kept in place so the column height doesn't
   collapse) and paints a single shimmer wave over the panel. One
   loader for the entire transition.
   The back-bar is exempted — on mobile the detail panel is the
   only thing visible, and hiding the back affordance during the
   loading window strands the user with no way to return to the
   list. The wave's ::after pseudo-element sits behind it (z-index
   above the masked content, below the back-bar's own positioning
   context). */
/* Children fade rather than snap during the loading↔loaded swap.
   Was visibility:hidden, which switched abruptly the moment the
   .detail--form-loading class flipped. Opacity transition crossfades
   with the mask (also opacity-transitioned below) so the swap reads
   as a gentle reveal instead of a hard cut. */
.detail > *:not(.detail-back-bar) {
    transition: opacity 200ms ease;
}
.detail--form-loading > *:not(.detail-back-bar) {
    opacity: 0;
}

/* Suppress the legacy form's own spinner inside the v3 detail
   panel — careerwebJobApplyCustomForm_revamped.js toggles the
   .jobApplicationFormLoader element on every getForms() call, which
   stacks visibly on top of (or right next to) our v3 shimmer when a
   context switch fires. v3 owns the loading state via
   .detail--form-loading; the legacy spinner is duplicate UI here. */
.detail .jobApplicationFormLoader,
.detail .cwv3-form-loader {
    display: none !important;
}
/* Mask + shimmer live as pseudo-elements on the base .detail so the
   opacity transition has something to animate. Without the always-
   present rule the pseudos would pop in/out the moment the class is
   added/removed, defeating the fade. The animation keeps running on
   the shimmer pseudo even at opacity 0 — that's fine, it's invisible
   and the browser doesn't repaint hidden layers. */
.detail::before,
.detail::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.detail::before {
    background: var(--surface);
    z-index: 10;
}
.detail::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(14, 14, 14, 0.05) 50%,
        transparent 100%
    );
    background-size: 220% 100%;
    z-index: 11;
    /* Animation only runs while loading — leaving it on the always-
       present pseudo would burn paint cycles for an invisible layer. */
}
.detail--form-loading::before,
.detail--form-loading::after {
    opacity: 1;
}
.detail--form-loading::after {
    animation: cwv3-detail-shimmer 1.4s linear infinite;
}
@keyframes cwv3-detail-shimmer {
    0%   { background-position: 110% 0; }
    100% { background-position: -110% 0; }
}
[data-theme="dark"] .detail--form-loading::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    background-size: 220% 100%;
}

/* ─── Hero (header band of the detail) ─── */
.detail-hero {
    position: relative;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
}
.detail-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 3px;
    width: 80px;
    background: var(--brand);
    z-index: 4;
}
.detail-hero-content {
    position: relative;
    z-index: 3;
    padding: 28px 32px 24px;
}

/* Banner image fills the hero behind the glass card */
.detail-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
}
/* Soft gradient overlay — strengthens text contrast over busy banners */
.detail-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.18) 0%,
        rgba(0, 0, 0, 0.32) 100%
    );
    pointer-events: none;
}

/* When the hero has a banner, swap to glass-card layout. The hero
   height now scales with the detail panel width via a banner-style
   aspect ratio, with a min-height floor so very narrow viewports
   still leave room for the glass card and a max-height ceiling so
   ultrawide displays don't grow a wall of imagery. The flex
   end-alignment lets the glass card sit at the bottom regardless. */
.detail-hero--has-banner {
    aspect-ratio: 16 / 5;
    min-height: 240px;
    max-height: 420px;
    display: flex;
    align-items: flex-end;
}
.detail-hero--has-banner::before {
    display: none;  /* banner provides the brand cue, drop the strip */
}
.detail-hero--has-banner .detail-hero-content {
    margin: 22px 32px;
    padding: 22px 26px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    width: calc(100% - 64px);  /* matches body's 32px padding each side */
}
/* Pay display inside a glass card loses its own background so it
   doesn't read as a card-in-card — divider line instead */
.detail-hero--has-banner .pay-display {
    background: transparent;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 14px 0 0;
    margin-top: 4px;
}

/* ─── Title row ─── */
.detail-title-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    padding-right: 150px;  /* clears the absolutely-positioned actions */
}
.detail-hero--has-banner .detail-title-row {
    padding-right: 0;  /* actions float above the card, no reservation */
}
.detail-title-stack { flex: 1; min-width: 0; }

/* Hero-variant phone chip — slightly smaller than the apply-section
   one since it sits inside the glass card next to the title. Top-
   aligned with the title so the brand-coloured icon reads as a peer
   to the title weight. */
.cwv3-phone-affordance--hero {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 2px;
}
.detail-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: -0.03em;
    margin: 0 0 8px;
    max-width: 580px;
}
/* The 580px cap above suits the no-banner paragraph layout, but the
   glass-card variant has the title row sitting inside a card that
   spans the full hero width — capping at 580px forces a needless
   2-line wrap (e.g. "CDL A Lease Purchase Dedicated Truck / Drivers")
   that visibly pushes the bottom-anchored card upward. Let the title
   use whatever room the card gives it; the title-stack already has
   `flex: 1; min-width: 0;` so it stops short of the phone chip and
   never overflows. */
.detail-hero--has-banner .detail-title {
    max-width: none;
}
.detail-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--ink-2);
    font-size: 13.5px;
}
.detail-subtitle .dot { color: var(--ink-3); }
.detail-subtitle strong { color: var(--ink); font-weight: 600; }
.detail-subtitle i { font-size: 14px; vertical-align: -2px; }

/* ─── Pay display ─── */
.pay-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.pay-display-value {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 34px;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1;
}
.pay-display-unit {
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    color: var(--ink-2);
    font-weight: 400;
    margin-left: 4px;
    letter-spacing: 0;
}
.pay-display-empty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-2);
    border-radius: var(--radius);
    color: var(--ink-2);
    font-size: 13.5px;
}
.pay-display-empty i { font-size: 16px; color: var(--ink-3); }

/* ─── Hero key-benefits strip ───
   Sits inside the glass card under the pay display, separated by a
   light divider. Up to 4 highlights on desktop laid out in a flex row
   with vertical dividers; responsive.css narrows the visible count to
   2 below the 860px breakpoint. */
.hero-highlights {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.hero-highlight {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 1px solid var(--border);
}
.hero-highlight:first-child {
    padding-left: 0;
    border-left: none;
}
.hero-highlight:last-child {
    padding-right: 0;
}
/* Solid brand-coloured chip with contrasting stroke. Inverting the
   colour pair (--brand backplate, --brand-on stroke) instead of using
   --brand-tint + --brand keeps the icon readable for light brand
   hues (yellow / lime / cream) where the tinted backplate and the
   stroke would both wash out against the glass card's translucent
   white.
   The thin dark ring (rgba ink) holds the chip's edge against the
   bright translucent banner area — without it a yellow chip can
   dissolve into the glass card on lighter banner regions. */
.hero-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-on);
    box-shadow:
        0 0 0 1px rgba(14, 14, 14, 0.12),
        0 1px 3px rgba(20, 20, 20, 0.18);
}
.hero-highlight-icon svg { display: block; }
/* Dark theme: the ring loses contrast on the dark surface — swap to
   a light ring instead. */
[data-theme="dark"] .hero-highlight-icon {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.4);
}
.hero-highlight-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hero-highlight-key {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
}
.hero-highlight-val {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: -0.005em;
    overflow-wrap: anywhere;
}
/* When the hero is over a banner the glass card sits on top of busy
   imagery — bump the contrast a notch so labels stay readable. */
.detail-hero--has-banner .hero-highlight-key { color: var(--ink-2); }

/* ─── Detail body sections ─── */
.detail-body { padding: 28px 32px 32px; }
.detail-section { margin-bottom: 32px; }
.detail-section:last-child { margin-bottom: 0; }
.section-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.section-prose {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
    margin: 0;
}

/* Richtext rendering for job_description + job_requirements, both
   come from the DB as HTML (server-side cleanData('htmlPurify') in
   v1). Selector-level rules ensure the embedded markup reads well
   without dragging Bootstrap's defaults along. */
.section-richtext { font-size: 15px; line-height: 1.65; color: var(--ink); }
.section-richtext p     { margin: 0 0 12px; }
.section-richtext p:last-child { margin-bottom: 0; }
.section-richtext ul,
.section-richtext ol    { margin: 8px 0 12px; padding-left: 20px; }
.section-richtext li    { margin: 4px 0; }
.section-richtext strong,
.section-richtext b     { font-weight: 700; color: var(--ink); }
.section-richtext em,
.section-richtext i     { font-style: italic; }
.section-richtext h1,
.section-richtext h2,
.section-richtext h3,
.section-richtext h4    {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 18px 0 8px;
    color: var(--ink);
}
.section-richtext h2 { font-size: 18px; }
.section-richtext h3 { font-size: 16px; }
.section-richtext h4 { font-size: 14.5px; }
.section-richtext a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.section-richtext a:hover { filter: brightness(0.9); }
.section-richtext hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px 0;
}

/* ─── Apply CTAs row (Apply by chat / Apply by phone) ───
   Lives above the inline form. Mirrors v1's button row that sits
   between the summary and the form. Brand-coloured chat button,
   neutral phone button so they read as primary / secondary. */
.cwv3-apply-ctas {
    margin-top: 8px;
}
.cwv3-cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cwv3-cta-btn {
    flex: 1 1 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: var(--radius);
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--border-2);
    transition: all 120ms ease;
    box-sizing: border-box;
    color: var(--ink);
    background: var(--surface);
}
.cwv3-cta-btn:hover {
    transform: translateY(-1px);
    border-color: var(--ink-3);
    box-shadow: var(--shadow-sm);
}
.cwv3-cta-btn i { font-size: 18px; }
.cwv3-cta-chat {
    background: var(--brand);
    color: var(--brand-on);
    border-color: var(--brand);
}
.cwv3-cta-chat:hover {
    border-color: var(--brand);
    filter: brightness(0.92);
    box-shadow: 0 4px 12px var(--brand-tint-strong);
}

/* ─── Phone affordance ───
   Icon-only chip by default; expands inline on first tap to reveal
   the formatted number, then dials on the next tap (the anchor's
   tel: href fires). The whole affordance is one <a> so right-click
   copy-link and keyboard activation work unchanged.
   Sits to the right of the brand-coloured chat CTA; doesn't compete
   for visual weight since it's secondary action. */
.cwv3-phone-affordance {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    max-width: 48px;  /* collapses to icon-only width by default */
    box-sizing: border-box;
    /* Dark ring + soft shadow — same treatment the highlight chips use,
       keeps the affordance's edge defined against the translucent glass
       card on bright banner regions where a thin border alone would
       dissolve. */
    box-shadow:
        0 0 0 1px rgba(14, 14, 14, 0.16),
        0 1px 3px rgba(20, 20, 20, 0.12);
}
.cwv3-phone-affordance:hover {
    background: var(--surface-2);
    box-shadow:
        0 0 0 1px rgba(14, 14, 14, 0.22),
        0 2px 6px rgba(20, 20, 20, 0.16);
}
.cwv3-phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;            /* fills the collapsed pill */
    height: 100%;
    flex-shrink: 0;
    /* Ink (near-black) rather than --brand — yellow / lime / cream brand
       hues blow out a brand-coloured stroke against the chip's white
       backplate. Dark stroke reads on every tenant colour. */
    color: var(--ink);
}
.cwv3-phone-icon i { font-size: 20px; }
[data-theme="dark"] .cwv3-phone-affordance {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.16),
        0 1px 3px rgba(0, 0, 0, 0.5);
}
.cwv3-phone-number {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink);
    letter-spacing: -0.01em;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    padding-right: 0;
    pointer-events: none;
    transition: opacity 180ms ease 60ms,
                max-width 240ms cubic-bezier(0.16, 1, 0.3, 1),
                padding-right 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Revealed state — chip expands width, number fades in.
   max-width target is large enough for any US-format number
   "(555) 555-5555" with the 18px right padding. Keeps the dark ring
   from the default state but stacks a brand-coloured ring underneath
   so the expanded state still reads as the brand action. */
.cwv3-phone-affordance--revealed {
    max-width: 220px;
    background: var(--brand-tint);
    box-shadow:
        0 0 0 1px rgba(14, 14, 14, 0.18),
        0 0 0 3px var(--brand-ring),
        0 2px 8px var(--brand-tint-strong);
}
.cwv3-phone-affordance--revealed .cwv3-phone-icon {
    color: var(--ink);
}
.cwv3-phone-affordance--revealed .cwv3-phone-number {
    opacity: 1;
    max-width: 180px;
    padding-right: 18px;
    pointer-events: auto;
}
.cwv3-phone-affordance--revealed:hover {
    filter: brightness(0.97);
}
[data-theme="dark"] .cwv3-phone-affordance--revealed {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.22),
        0 0 0 3px var(--brand-ring),
        0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ─── Key details list ─── */
.key-details {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.key-detail-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border-top: 1px solid var(--border);
}
.key-detail-row:first-child { border-top: none; }

/* Iconed variant — icon chip on the left, stacked key+body on the
   right. Mirrors v1's .jv-hl-card layout. Falls back to the un-iconed
   stacked layout when getHighlightIcon returns '' (key not in map). */
.key-detail-row--iconed {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
}
/* Same inversion as the hero chip — solid brand backplate, contrast
   stroke. Sits on the white key-details card here so the chip needs
   to carry its own colour weight; the dark ring keeps it defined for
   any brand color. */
.key-detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-on);
    margin-top: 2px;
    box-shadow:
        0 0 0 1px rgba(14, 14, 14, 0.10),
        0 1px 3px rgba(20, 20, 20, 0.12);
}
.key-detail-icon svg { display: block; }
[data-theme="dark"] .key-detail-icon {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.4);
}
.key-detail-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.key-detail-key {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.key-detail-body {
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.55;
}
.key-detail-value { display: block; }
.key-detail-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.key-detail-list li {
    position: relative;
    padding-left: 16px;
}
.key-detail-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    background: var(--brand);
    border-radius: 50%;
}

/* ─── Empty detail state (no desc, no highlights, no inline form) ─── */
.empty-detail {
    padding: 32px;
    text-align: center;
    color: var(--ink-2);
    background: var(--surface-2);
    border-radius: var(--radius);
}
.empty-detail i {
    font-size: 32px;
    color: var(--ink-3);
    margin-bottom: 12px;
    display: block;
}
.empty-detail p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    max-width: 380px;
    margin: 0 auto;
}