/* =====================================================================
   single-other-injury-v2.css
   Professional Negligence — other-injury-v2 variant of the canonical
   .ccl-worksingle-- design system.

   Strategy: reuse the canonical engine in single-work-accident.css and
   remap its --ws-* tokens, scoped to
   .ccl-worksingle--wrapper.is-professional-negligence-v2

   Palette: authoritative deep navy + steel blue, with a restrained gold
   accent rule. On-brand (CCL navy/blue family), distinct from the
   medical-mistake royal-blue variant by way of a darker, advisory tone.
   ===================================================================== */

.ccl-worksingle--wrapper.is-professional-negligence-v2 {
    /* local palette */
    --pn-navy:      #0C1A2E;
    --pn-navy-2:    #152943;
    --pn-steel:     #1F4E79;   /* primary advisory blue */
    --pn-steel-d:   #163A5C;
    --pn-steel-l:   #2C6CA6;
    --pn-gold:      #B8862E;   /* restrained accent rule only */
    --pn-gold-l:    #D9A94A;
    --pn-bone:      #F4F6F9;
    --pn-paper:     #FFFFFF;
    --pn-line:      #DEE4EC;
    --pn-line-2:    #C8D2DE;
    --pn-muted:     #46566B;
    --pn-ink:       #0C1A2E;
    --pn-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* remap the canonical engine so every component pulls the PN palette */
    --ws-royal:            #1F4E79;
    --ws-royal-dark:       #163A5C;
    --ws-statutory:        #0C1A2E;
    --ws-statutory-dark:   #07111E;
    --ws-bridge:           linear-gradient(90deg, #0C1A2E 0%, #1F4E79 100%);
    --ws-bridge-soft:      linear-gradient(90deg, rgba(31,78,121,0.06) 0%, rgba(31,78,121,0.06) 100%);
    --ws-ink:              #0C1A2E;
    --ws-ink-2:            #1B3350;
    --ws-muted:            #46566B;
    --ws-line:             #DEE4EC;
    --ws-line-soft:        #EAEEF4;
    --ws-bg-white:         #FFFFFF;
    --ws-bg-grey:          #F4F6F9;
    --ws-bg-tinted:        #EDF2F8;
    --ws-tint-statutory:   rgba(12,26,46,0.06);
    --ws-tint-royal:       rgba(31,78,121,0.06);
    --ws-tint-statutory-2: rgba(12,26,46,0.14);
    --ws-tint-royal-2:     rgba(31,78,121,0.14);
    --ws-amber:            #B8862E;
    --ws-emerald:          #1F4E79;
    --ws-radius:           6px;
    --ws-radius-lg:        10px;
}

/* ---------------------------------------------------------------------
   PN signature accents — what makes this variant read as "advisory"
   rather than a recolor of the medical-mistake page.
   --------------------------------------------------------------------- */

/* Hero: gold hairline under the kicker + serif-leaning authoritative headline */
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--hero {
    background:
        linear-gradient(180deg, #0C1A2E 0%, #142B47 100%);
}
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--hero-kicker {
    color: var(--pn-gold-l);
    border-bottom: 1px solid rgba(184,134,46,0.45);
    padding-bottom: 10px;
    letter-spacing: 0.14em;
}
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--hero-headline {
    letter-spacing: -0.015em;
}
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--hero-stat-value {
    color: var(--pn-gold-l);
    font-size: 38px;
}

/* Section eyebrows get a gold tick rule, not the default blue */
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--sec-eyebrow::before {
    background: var(--pn-gold);
}

/* Two-foundation cards: distinct top rules — navy for retainer, gold for negligence */
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--twotrack-card.is-statutory::before {
    background: var(--pn-navy);
}
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--twotrack-card.is-common::before {
    background: linear-gradient(90deg, var(--pn-gold) 0%, var(--pn-gold-l) 100%);
}

/* Scenario / clock numbers and tags pull the advisory palette */
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--scenario-num {
    color: var(--pn-steel);
}
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--scenario-tag.is-statutory {
    background: rgba(12,26,46,0.08);
    color: var(--pn-navy);
}
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--scenario-tag.is-common {
    background: rgba(31,78,121,0.10);
    color: var(--pn-steel-d);
}

/* Damages columns: gold statute chips for the "other loss" column */
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--damages-col.is-common .ccl-worksingle--damages-statute {
    color: var(--pn-gold);
}

/* Process step tags: monospace gold index for an audit-trail feel */
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--fees-card-tag {
    color: var(--pn-gold);
    letter-spacing: 0.12em;
}

/* Sticky toolbar call button */
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--toolbar-cta {
    background: var(--pn-gold);
    color: #1A1206;
}
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--toolbar-cta:hover {
    background: var(--pn-gold-l);
}
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--toolbar-station.is-active {
    color: #fff;
}
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--toolbar-station.is-active .ccl-worksingle--toolbar-station-num {
    background: var(--pn-steel);
    color: #fff;
}

/* Why-choose number medallions: navy field, gold figure */
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--why-card-num {
    color: var(--pn-gold);
}

/* FAQ tag pill */
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--faq-tag.is-both {
    background: rgba(31,78,121,0.10);
    color: var(--pn-steel-d);
}

/* Final CTA: deep navy field with gold rule */
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--final-cta {
    background: linear-gradient(180deg, #0C1A2E 0%, #15294A 100%);
    border-top: 3px solid var(--pn-gold);
}


/* --- Session fixes 30 May 2026 --- */
/* Widen hero stats row so "No win, no fee*" fits on one line */
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--hero-stats {
    max-width: 880px;
}
/* Stack each head of loss on its own full-width line (not 2-up) */
.ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--damages-list {
    grid-template-columns: 1fr;
}

/* ==========================================================================
   Responsive — Professional Negligence v2
   Appended: mobile/tablet QA pass
   ========================================================================== */

/* --- 900px: hero layout already handled by base CSS (display:block) ---
   Reduce hero-inner side padding so content isn't pinched at tablet */
@media (max-width: 900px) {
  .ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--hero-inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* --- 768px: twotrack cards + damages col padding reduction --- */
@media (max-width: 768px) {
  .ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--twotrack-card {
    padding: 28px 24px;
  }
  .ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--damages-col-head {
    padding: 20px 20px 18px !important;
  }
}

/* --- 540px: phone --- */
@media (max-width: 540px) {
  /* Hero: reduce headline size floor so long title doesn't overflow */
  .ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--hero-headline {
    font-size: clamp(28px, 8vw, 40px);
  }
  /* Hero stats: ensure wrap + comfortable gap on phone */
  .ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--hero-stats {
    flex-wrap: wrap;
    gap: 16px 24px;
  }
  /* Twotrack card: tighter padding on phone */
  .ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--twotrack-card {
    padding: 22px 18px;
  }
  /* Damages col head: minimal padding on phone */
  .ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--damages-col-head {
    padding: 16px 16px 14px !important;
  }
  /* FAQ: slightly tighter summary padding */
  .ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--faq summary {
    padding: 16px 0;
  }
  /* Spec row: reduce label column on very narrow screens */
  .ccl-worksingle--wrapper.is-professional-negligence-v2 .ccl-worksingle--spec-row {
    grid-template-columns: 80px 1fr;
    gap: 8px;
  }
}