/* Phase 8i — What We Do page: card consistency, icon suppression,
   background alternation, spacing rhythm. Matches homepage card language. */

/* ── 1. Section background alternation ── */
.what-we-do-page {
  background: var(--telstar-surface-high, #ffffff);
}

.what-route-section--merged {
  background: var(--telstar-surface-low, #F4F6F8);
}

.what-diagnostic-sprint {
  background: var(--telstar-surface-high, #ffffff);
}

.what-difference-section {
  background: var(--telstar-surface-low, #F4F6F8);
}

.what-final-section {
  background: var(--telstar-surface-high, #ffffff);
}

/* ── 2. Where we help cards — match homepage card style ── */
.what-help-card {
  background: #fff !important;
  border: 1px solid rgba(11, 37, 69, 0.10) !important;
  border-left: 4px solid var(--telstar-teal, #2CA6A4) !important;
  border-top: 1px solid rgba(11, 37, 69, 0.10) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 3px rgba(11, 37, 69, 0.07) !important;
  min-height: 0 !important;
  padding: 1.1rem 1.25rem !important;
}

/* Remove the teal top bar pseudo-element */
.what-help-card::before {
  display: none !important;
}

/* Suppress icons */
.what-help-card__icon {
  display: none !important;
}

.what-help-card h3 {
  margin: 0 0 0.4rem !important;
  font-size: clamp(1rem, 1.2vw, 1.12rem) !important;
}

.what-help-card p {
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
}

/* Keep the link text at bottom but style consistently */
.what-help-card span:last-child {
  margin-top: 0.75rem !important;
  font-size: 0.84rem !important;
}

.what-help-card:hover,
.what-help-card:focus-visible {
  border-left-color: var(--telstar-secondary, #1E5AA8) !important;
  box-shadow: 0 4px 12px rgba(11, 37, 69, 0.10) !important;
  transform: none !important;
}

/* ── 3. Output cards — match homepage card style ── */
.what-output-card {
  background: #fff !important;
  border: 1px solid rgba(11, 37, 69, 0.10) !important;
  border-left: 4px solid var(--telstar-teal, #2CA6A4) !important;
  border-top: 1px solid rgba(11, 37, 69, 0.10) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 3px rgba(11, 37, 69, 0.07) !important;
  min-height: 0 !important;
  padding: 1.1rem 1.25rem !important;
}

.what-output-card::before {
  display: none !important;
}

.what-output-card .telstar-icon-badge {
  display: none !important;
}

.what-output-card h3 {
  margin: 0 0 0.4rem !important;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem) !important;
}

.what-output-card p {
  font-size: 0.9rem !important;
  line-height: 1.52 !important;
}

/* Wide output card — accent differently */
.what-output-card--wide {
  border-left-color: var(--telstar-secondary, #1E5AA8) !important;
}

/* ── 4. Stage detail cards — remove icon, clean up layout ── */
.what-stage-detail-card {
  grid-template-columns: 1fr !important;
}

.what-stage-detail-card .telstar-icon-badge {
  display: none !important;
}

.what-stage-detail-card::before {
  display: none !important;
}

/* Keep featured Diagnose card as navy — it provides visual anchor */
.what-stage-detail-card--featured {
  border-left: 4px solid var(--telstar-teal, #2CA6A4) !important;
}

/* ── 5. Difference panel — darken to navy band, matching decision panel on homepage ── */
.what-difference-panel {
  background: var(--telstar-primary, #0B2545) !important;
  border: none !important;
  border-radius: var(--telstar-radius-sm, 0.5rem) !important;
  box-shadow: none !important;
  padding: clamp(1.5rem, 2.8vw, 2.2rem) !important;
}

.what-difference-panel__eyebrow {
  color: var(--telstar-teal, #2CA6A4) !important;
}

.what-difference-panel h2 {
  color: #ffffff !important;
}

.what-difference-panel__copy p {
  color: rgba(255, 255, 255, 0.78) !important;
}

.what-difference-panel__lists h3 {
  color: #ffffff !important;
}

.what-difference-panel__lists ul li {
  color: rgba(255, 255, 255, 0.78) !important;
}

.what-difference-panel__lists li::before {
  background: var(--telstar-teal, #2CA6A4) !important;
}

/* Separate the two columns with a subtle divider */
.what-difference-panel__lists {
  border-left: 1px solid rgba(255, 255, 255, 0.10) !important;
  padding-left: clamp(1.5rem, 2.5vw, 2rem) !important;
}

/* ── 6. Tighten section spacing ── */
.what-we-do-page,
.what-route-section--merged,
.what-diagnostic-sprint,
.what-difference-section,
.what-final-section {
  padding-top: clamp(2.4rem, 4vw, 3.6rem) !important;
  padding-bottom: clamp(2.4rem, 4vw, 3.6rem) !important;
}

/* ── Hero proof panel — remove icon, reduce height and padding ── */
.what-hero-proof-panel .what-hero-proof-panel__icon {
  display: none !important;
}

.what-hero-proof-panel {
  padding: clamp(1.2rem, 2vw, 1.6rem) !important;
  gap: 0.6rem !important;
}

.what-hero-proof-panel h2 {
  font-size: clamp(1.1rem, 1.4vw, 1.25rem) !important;
  margin-bottom: 0.2rem !important;
}

.what-hero-proof-steps {
  margin-top: 0.6rem !important;
  gap: 0.35rem !important;
}

.what-hero-proof-steps li {
  padding: 0.45rem 0.75rem !important;
}

/* ── Where we help — 2x2 grid layout ── */
.what-help-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 2vw, 1.4rem) !important;
}

.what-help-card {
  min-height: 0 !important;
}

@media (max-width: 640px) {
  .what-help-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Suppress teal link colour in help card body text */
.what-help-card p,
.what-help-card p a {
  color: var(--telstar-text-muted, #5C6B73) !important;
  text-decoration: none !important;
}

/* ── Stage cards — featured left, 2x2 grid right ── */
.what-stage-detail-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) !important;
  grid-template-rows: auto !important;
  gap: clamp(0.85rem, 1.6vw, 1rem) !important;
  align-items: start !important;
}

/* Diagnose featured card spans both rows on the left */
.what-stage-detail-card--featured {
  grid-row: span 2 !important;
  border-left: 4px solid var(--telstar-teal, #2CA6A4) !important;
}

/* Right side — inner 2x2 grid */
.what-stage-detail-card:not(.what-stage-detail-card--featured) {
  border: 1px solid rgba(11, 37, 69, 0.10) !important;
  border-left: 4px solid var(--telstar-secondary, #1E5AA8) !important;
  border-radius: 0.5rem !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(11, 37, 69, 0.07) !important;
  padding: 1.1rem 1.25rem !important;
  display: block !important;
}

/* Wrap the four non-featured cards in a 2x2 sub-grid */
.what-stage-detail-grid::after {
  display: none;
}

/* Use CSS grid subgrid approach — target cards 2-5 */
.what-stage-detail-card:nth-child(n+2) {
  /* cards sit naturally in the second column area */
}

/* Force the right-side cards into a 2x2 by wrapping them */
.what-stage-detail-grid {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1fr) !important;
}

.what-stage-detail-card--featured {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}

.what-stage-detail-card:nth-child(2) { grid-column: 2; grid-row: 1; }
.what-stage-detail-card:nth-child(3) { grid-column: 3; grid-row: 1; }
.what-stage-detail-card:nth-child(4) { grid-column: 2; grid-row: 2; }
.what-stage-detail-card:nth-child(5) { grid-column: 3; grid-row: 2; }

/* Card typography */
.what-stage-detail-card:not(.what-stage-detail-card--featured) h3 {
  font-size: clamp(1rem, 1.15vw, 1.1rem) !important;
  margin: 0 0 0.35rem !important;
  color: var(--telstar-primary, #0B2545) !important;
}

.what-stage-detail-card:not(.what-stage-detail-card--featured) .what-stage-detail-card__lead {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--telstar-primary, #0B2545) !important;
  margin-bottom: 0.35rem !important;
}

.what-stage-detail-card:not(.what-stage-detail-card--featured) p:not(.what-stage-detail-card__lead) {
  font-size: 0.88rem !important;
  color: var(--telstar-text-muted, #5C6B73) !important;
  line-height: 1.52 !important;
}

.what-stage-detail-card__link {
  display: block !important;
  margin-top: 0.75rem !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--telstar-secondary, #1E5AA8) !important;
  text-decoration: none !important;
}

.what-stage-detail-card--featured .what-stage-detail-card__link {
  color: var(--telstar-teal, #2CA6A4) !important;
}

@media (max-width: 860px) {
  .what-stage-detail-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .what-stage-detail-card--featured {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .what-stage-detail-card:nth-child(2),
  .what-stage-detail-card:nth-child(3),
  .what-stage-detail-card:nth-child(4),
  .what-stage-detail-card:nth-child(5) {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 560px) {
  .what-stage-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Diagnose featured card — full height, callout styling ── */

/* Force featured card to fill the full height of the 2-row grid */
.what-stage-detail-card--featured {
  align-self: stretch !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.what-stage-detail-card--featured .what-stage-detail-card__body {
  flex: 1 !important;
}

/* Top border accent on featured card */
.what-stage-detail-card--featured {
  border-top: 3px solid var(--telstar-teal, #2CA6A4) !important;
}

/* Callout line — teal left rule, lighter text */
.what-stage-detail-card__callout {
  margin-top: 1rem !important;
  padding: 0.65rem 0.9rem !important;
  border-left: 3px solid var(--telstar-teal, #2CA6A4) !important;
  background: rgba(44, 166, 164, 0.08) !important;
  border-radius: 0 0.25rem 0.25rem 0 !important;
  font-size: 0.88rem !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.5 !important;
}

/* Featured card link pushed to bottom */
.what-stage-detail-card--featured .what-stage-detail-card__link {
  margin-top: auto !important;
  padding-top: 1rem !important;
}

/* ── Diagnostic Sprint section — best fit panel as navy band ── */
.what-diagnostic-sprint__panel {
  background: var(--telstar-primary, #0B2545) !important;
  border: none !important;
  border-left: 4px solid var(--telstar-teal, #2CA6A4) !important;
  border-radius: 0.5rem !important;
  padding: clamp(1.2rem, 2vw, 1.6rem) !important;
}

.what-diagnostic-sprint__label {
  color: var(--telstar-teal, #2CA6A4) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
}

.what-diagnostic-sprint__panel p {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ── Output grid — primary card full width top, 2x2 below ── */
.what-output-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(0.85rem, 1.6vw, 1rem) !important;
  margin-top: clamp(1.5rem, 2.8vw, 2rem) !important;
}

/* Primary readout card spans full width */
.what-output-card--primary {
  grid-column: 1 / -1 !important;
  background: var(--telstar-primary, #0B2545) !important;
  border: none !important;
  border-left: 4px solid var(--telstar-teal, #2CA6A4) !important;
  border-radius: 0.5rem !important;
  padding: clamp(1.4rem, 2.5vw, 2rem) !important;
  min-height: 0 !important;
}

.what-output-card__primary-inner {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 2rem !important;
}

.what-output-card__primary-copy {
  flex: 1 !important;
}

.what-output-card__primary-tag {
  flex-shrink: 0 !important;
  background: rgba(44, 166, 164, 0.12) !important;
  border: 1px solid rgba(44, 166, 164, 0.3) !important;
  border-radius: 0.375rem !important;
  padding: 0.6rem 1rem !important;
  font-size: 0.82rem !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.72) !important;
  white-space: nowrap !important;
  align-self: center !important;
}

.what-output-card--primary h3 {
  color: #ffffff !important;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem) !important;
  margin: 0.3rem 0 0.5rem !important;
}

.what-output-card--primary p {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* Number labels */
.what-output-card__number {
  display: block !important;
  font-family: var(--telstar-font-heading, 'Inter', sans-serif) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: var(--telstar-teal, #2CA6A4) !important;
  margin-bottom: 0.35rem !important;
}

.what-output-card--primary .what-output-card__number {
  color: var(--telstar-teal, #2CA6A4) !important;
}

@media (max-width: 640px) {
  .what-output-grid {
    grid-template-columns: 1fr !important;
  }

  .what-output-card__primary-inner {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .what-output-card__primary-tag {
    white-space: normal !important;
  }
}

/* ── Output section refinement ── */

/* Primary card — more internal padding, remove tag, better text sizing */
.what-output-card--primary {
  padding: clamp(1.8rem, 3vw, 2.5rem) !important;
}

.what-output-card--primary h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.4rem) !important;
  margin-bottom: 0.65rem !important;
}

.what-output-card--primary p {
  font-size: 1rem !important;
  max-width: 72ch !important;
}

/* Hide the tag — replace with callout line below */
.what-output-card__primary-tag {
  display: none !important;
}

/* Primary card inner — single column now tag is gone */
.what-output-card__primary-inner {
  display: block !important;
}

/* Add callout line to primary card */
.what-output-card--primary p::after {
  content: "The output leadership reads, shares and acts on.";
  display: block !important;
  margin-top: 1rem !important;
  padding: 0.6rem 0.9rem !important;
  border-left: 3px solid var(--telstar-teal, #2CA6A4) !important;
  background: rgba(44, 166, 164, 0.08) !important;
  border-radius: 0 0.25rem 0.25rem 0 !important;
  font-size: 0.88rem !important;
  font-style: italic !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Supporting cards — more breathing room between number and title */
.what-output-card__number {
  margin-bottom: 0.55rem !important;
}

/* Supporting cards — slightly more padding */
.what-output-card:not(.what-output-card--primary) {
  padding: 1.3rem 1.4rem !important;
}

/* Tighten best fit panel copy */
.what-diagnostic-sprint__panel p {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
}

/* ── Output card layout refinements ── */

/* Inline number + title on same row for all cards */
.what-output-card__header {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.6rem !important;
  margin-bottom: 0.5rem !important;
}

.what-output-card__header .what-output-card__number {
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

.what-output-card__header h3 {
  margin: 0 !important;
}

/* Primary card — full width text, remove max-width constraint */
.what-output-card--primary p {
  max-width: none !important;
}

/* Primary card — tighten so callout sits closer to body text */
.what-output-card--primary {
  padding-bottom: clamp(1.4rem, 2vw, 1.8rem) !important;
}

/* Supporting cards — consistent min-height so rows feel even */
.what-output-card:not(.what-output-card--primary) {
  min-height: 10rem !important;
}

/* Primary card — reduce bottom padding to close gap below callout */
.what-output-card--primary {
  padding-bottom: 1.2rem !important;
}

/* ── Difference panel — fix inner list visibility, clean two-column ── */

/* Remove the white inner boxes entirely */
.what-difference-panel__lists > div {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Not this — muted left border */
.what-difference-panel__lists > div:first-child {
  border-left: 3px solid rgba(255, 255, 255, 0.25) !important;
  padding-left: 1rem !important;
}

/* This — teal left border */
.what-difference-panel__lists > div:last-child {
  border-left: 3px solid var(--telstar-teal, #2CA6A4) !important;
  padding-left: 1rem !important;
}

/* Headings */
.what-difference-panel__lists h3 {
  color: #ffffff !important;
  font-size: clamp(0.82rem, 0.9vw, 0.9rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.75rem !important;
}

/* Not this heading — muted */
.what-difference-panel__lists > div:first-child h3 {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* This heading — teal */
.what-difference-panel__lists > div:last-child h3 {
  color: var(--telstar-teal, #2CA6A4) !important;
}

/* List items */
.what-difference-panel__lists ul {
  gap: 0.55rem !important;
}

.what-difference-panel__lists li {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.95rem !important;
}

/* Not this items — slightly muted */
.what-difference-panel__lists > div:first-child li {
  color: rgba(255, 255, 255, 0.52) !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(255, 255, 255, 0.2) !important;
}

/* Bullet dots — hide on Not this, teal on This */
.what-difference-panel__lists > div:first-child li::before {
  display: none !important;
}

.what-difference-panel__lists > div:last-child li::before {
  background: var(--telstar-teal, #2CA6A4) !important;
}

/* Remove the border-left on the outer lists container we added earlier */
.what-difference-panel__lists {
  border-left: none !important;
  padding-left: 0 !important;
}

/* Difference panel — rebalance column widths */
.what-difference-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
}

.what-difference-panel__lists {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  align-items: start !important;
}

/* ── Difference panel — full-width title, lists below ── */

/* Override two-column grid to single column stack */
.what-difference-panel {
  display: block !important;
  padding: clamp(1.8rem, 3vw, 2.5rem) !important;
}

/* Copy block — full width */
.what-difference-panel__copy {
  width: 100% !important;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem) !important;
}

.what-difference-panel h2 {
  max-width: none !important;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important;
  color: #ffffff !important;
  margin-bottom: 0.65rem !important;
}

.what-difference-panel__copy p {
  max-width: none !important;
  font-size: 0.98rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Lists — two equal columns below the title */
.what-difference-panel__lists {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  border-left: none !important;
  padding-left: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: clamp(1.2rem, 2vw, 1.6rem) !important;
}

/* Remove inner box treatment */
.what-difference-panel__lists > div {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Not this column — left border muted */
.what-difference-panel__not-this {
  border-left: 3px solid rgba(255, 255, 255, 0.2) !important;
  padding-left: 1rem !important;
}

/* This column — left border teal */
.what-difference-panel__this {
  border-left: 3px solid var(--telstar-teal, #2CA6A4) !important;
  padding-left: 1rem !important;
}

/* Column headings */
.what-difference-panel__not-this h3 {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.85rem !important;
}

.what-difference-panel__this h3 {
  color: var(--telstar-teal, #2CA6A4) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.85rem !important;
}

/* List items */
.what-difference-panel__not-this li {
  color: rgba(255, 255, 255, 0.42) !important;
  text-decoration: line-through !important;
  text-decoration-color: rgba(255, 255, 255, 0.18) !important;
  font-size: 0.93rem !important;
}

.what-difference-panel__this li {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.93rem !important;
}

/* Bullet dots */
.what-difference-panel__not-this li::before {
  display: none !important;
}

.what-difference-panel__this li::before {
  background: var(--telstar-teal, #2CA6A4) !important;
}

@media (max-width: 640px) {
  .what-difference-panel__lists {
    grid-template-columns: 1fr !important;
  }
}

/* Difference panel heading — reduce size slightly */
.what-difference-panel h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem) !important;
}

/* This column — replace default bullets with teal dots */
.what-difference-panel__this ul {
  list-style: none !important;
  padding-left: 0 !important;
}

.what-difference-panel__this li {
  position: relative !important;
  padding-left: 1rem !important;
}

.what-difference-panel__this li::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.55em !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--telstar-teal, #2CA6A4) !important;
}

/* Not this column — remove default bullets cleanly */
.what-difference-panel__not-this ul {
  list-style: none !important;
  padding-left: 0 !important;
}

.what-difference-panel__not-this li {
  padding-left: 0 !important;
}