/* =============================================================================
   DANTE LABS — ONCOLOGY PAGE STYLES
   Page-specific styles for oncology.html (/oncology/)
   Requires: base.css (loaded first)
   ============================================================================= */

/* ─── HERO SECTION (oncology-specific modifier) ────────────────────────────────── */
/* Base .hero handles: height 100vh, dark bg, flex centering, white text */
/* Base .hero-text handles: max-width 660px, eyebrow, h1, body-copy colors */
/* Base .hero-trust-strip handles: position absolute bottom, backdrop blur */
.onc-hero {
  /* No overrides needed — base .hero class handles everything */
}

/* ─── HERO BACKGROUND IMAGE — lifestyle photograph at 0.3 opacity ──────────── */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  transform: scale(1.05);
  will-change: transform;
}

/* Widen hero subtext slightly below H1 */
.hero.onc-hero .body-copy {
  max-width: 580px;
}




/* ─── ROUTING FORK SECTION — Full viewport split-screen ─────────────────────── */
.onc-fork-section {
  /* No padding — cards fill the viewport edge to edge */
}

.onc-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 75vh;
}

.onc-fork-card {
  position: relative;
  display: flex;
  align-items: stretch;
  text-decoration: none;
  color: var(--color-dark);
  background: var(--color-white, #ffffff);
  border-top: 3px solid transparent;
  transition: background var(--duration) var(--ease-out),
              border-color var(--duration) ease;
  overflow: hidden;
}

/* Vertical divider between panels */
.onc-fork-card:first-child {
  border-right: 1px solid var(--color-border);
}

.onc-fork-card:hover {
  background: var(--color-bg, #f4f3f1);
  border-top-color: var(--color-accent);
}

/* Inner layout — flex column, space between top content and CTA */
.onc-fork-card-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(48px, 6vw, 96px) clamp(40px, 5vw, 80px);
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}

.onc-fork-card-top {
  /* Top group: eyebrow + h2 + body  */
}

.onc-fork-eyebrow {
  display: block;
  font-size: var(--font-eyebrow-size);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 24px;
}

.onc-fork-h2 {
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-dark);
  margin-bottom: 24px;
}

.onc-fork-body {
  font-size: var(--font-body-size);
  line-height: 1.7;
  color: var(--color-text);
  max-width: 440px;
  margin-bottom: 48px;
}

.onc-fork-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-small-size);
  font-weight: 600;
  color: var(--color-accent);
  transition: gap var(--duration) var(--ease-out);
}

.onc-fork-cta svg {
  transition: transform var(--duration) var(--ease-out);
}

.onc-fork-card:hover .onc-fork-cta svg {
  transform: translateY(3px);
}

.onc-fork-card:hover .onc-fork-cta {
  gap: 12px;
}


/* Note: old .arrow and .onc-fork-cta .arrow selectors removed */


/* ─── HERO CTA — OUTLINE VARIANT (secondary path button) ────────────────────── */
.btn-hero--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.75);
}

.btn-hero--outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

/* ─── PATH TAB NAVIGATION — sticky, clean underline tabs ─────────────────── */
.path-tab-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  gap: 0;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 8px rgba(10, 14, 23, 0.05);
}

.path-tab-btn {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 22px 32px;
  margin-bottom: -1px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  letter-spacing: 0.01em;
  text-align: center;
  transition: color var(--duration) ease,
              border-color var(--duration) ease,
              background var(--duration) ease;
}

.path-tab-btn:hover {
  color: var(--color-dark);
  background: rgba(10, 14, 23, 0.02);
}

.path-tab-btn--active {
  color: var(--color-dark);
  border-bottom-color: var(--color-accent);
}

/* Tab panels */
.path-tab-panel {
  /* visible by default */
}

.path-tab-panel--hidden,
.path-tab-panel[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .path-tab-btn {
    padding: 16px 12px;
    font-size: 13px;
  }
}

/* Tab panels */
.path-tab-panel {
  /* visible by default */
}

/* Reduce gap between tab bar and first section eyebrow/H2 */
.path-tab-panel > section:first-child {
  padding-top: 48px;
}

.path-tab-panel--hidden,
.path-tab-panel[hidden] {
  display: none;
}


/* ─── PATH CHOOSER (Tab 0) ───────────────────────────────────────────────────── */
.path-chooser {
  padding: 64px 0 80px;
}

.path-chooser-intro {
  font-size: var(--font-body-size);
  color: var(--color-muted);
  margin-bottom: 48px;
  max-width: 520px;
}

.path-chooser-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.path-chooser-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  border-radius: var(--card-radius);
  padding: 40px 40px 36px;
  cursor: pointer;
  transition: border-color var(--duration) ease,
              background var(--duration) ease,
              box-shadow var(--duration) ease;
}

.path-chooser-card:hover {
  background: var(--color-bg, #f8f7f5);
  border-left-color: var(--color-accent);
  box-shadow: var(--card-shadow-hover);
}

.path-chooser-eyebrow {
  display: block;
  font-size: var(--font-eyebrow-size);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 20px;
}

.path-chooser-h2 {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-dark);
  margin-bottom: 20px;
}

.path-chooser-body {
  font-size: var(--font-body-size);
  line-height: 1.7;
  color: var(--color-text);
  flex: 1;
  margin-bottom: 32px;
}

.path-chooser-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-small-size);
  font-weight: 600;
  color: var(--color-accent);
  transition: gap var(--duration) ease;
}

.path-chooser-card:hover .path-chooser-cta {
  gap: 12px;
}

.path-chooser-footer {
  margin-top: 36px;
  font-size: var(--font-small-size);
  color: var(--color-muted);
}

@media (max-width: 640px) {
  .path-chooser-cards {
    grid-template-columns: 1fr;
  }
  .path-chooser-card {
    padding: 32px 24px 28px;
  }
}


/* ─── CONDITION LIST (Hereditary Risk & Oncology Genetics sections) ──────────── */
.onc-condition-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 40px;
}

.onc-condition-item {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-accent);
  border-radius: var(--card-radius);
  padding: 20px 24px;
}

.onc-condition-item h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 4px;
  line-height: 1.35;
}

.onc-condition-item p {
  font-size: var(--font-small-size);
  color: var(--color-text);
  line-height: 1.6;
}

/* For offwhite sections, cards use white bg (already default) */
.section--offwhite .onc-condition-item {
  background: var(--color-card);
}

/* For white sections, cards use offwhite bg */
.section--white .onc-condition-item {
  background: var(--color-bg);
}


/* ─── MINI-PROCESS (4-step within hereditary section) ────────────────────────── */
.onc-mini-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.onc-mini-step {
  padding: 0;
}

.onc-mini-step-number {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.onc-mini-step h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 6px;
  line-height: 1.35;
}

.onc-mini-step p {
  font-size: var(--font-small-size);
  color: var(--color-text);
  line-height: 1.6;
}


/* ─── SELF-SERVE NOTE ────────────────────────────────────────────────────────── */
.onc-self-serve {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

.onc-self-serve p {
  font-size: var(--font-body-size);
  color: var(--color-text);
  line-height: 1.6;
}


/* ─── OUTPUT BLOCK (diagnosed patients section) ──────────────────────────────── */
.onc-output {
  margin-top: 48px;
  padding: 28px 32px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
}

.section--offwhite .onc-output {
  background: var(--color-card);
}

.onc-output h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.onc-output p {
  font-size: var(--font-body-size);
  color: var(--color-text);
  line-height: 1.68;
}


/* ─── CTA BLOCK (DARK — CONTACT FORM) ───────────────────────────────────────── */
.onc-cta-section {
  background: var(--color-dark);
  padding-top: var(--section-pad-v);
  padding-bottom: var(--section-pad-v);
}

.onc-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.onc-cta-content .h2 {
  color: #ffffff;
}

.onc-cta-content .body-copy {
  color: rgba(255, 255, 255, 0.75);
  margin-top: 20px;
}

.onc-cta-content .onc-no-purchase {
  font-size: var(--font-body-size);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 20px;
}

/* Contact form */
.onc-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.onc-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.onc-form-field label {
  font-size: var(--font-small-size);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
}

.onc-form-field input,
.onc-form-field textarea {
  font-family: 'Satoshi', sans-serif;
  font-size: var(--font-body-size);
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  outline: none;
  transition: border-color var(--duration) ease,
              background var(--duration) ease;
}

.onc-form-field input::placeholder,
.onc-form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.onc-form-field input:focus,
.onc-form-field textarea:focus {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.onc-form-field textarea {
  resize: vertical;
  min-height: 100px;
}

.onc-form-submit {
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 16px 32px;
  background: #ffffff;
  color: var(--color-dark);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity var(--duration) ease,
              transform var(--duration) var(--ease-out);
  align-self: flex-start;
  margin-top: 8px;
}

.onc-form-submit:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.onc-form-confirmation {
  display: none;
  font-size: var(--font-body-size);
  color: rgba(255, 255, 255, 0.85);
  padding: 20px 0;
  line-height: 1.6;
}

.onc-form-confirmation.is-visible {
  display: block;
}

/* Trust elements below form */
.onc-form-trust {
  margin-top: 24px;
  font-size: var(--font-small-size);
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.6;
}

.onc-form-trust a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 3px;
}

.onc-form-trust a:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* Secondary CTA below trust */
.onc-cta-secondary {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.onc-cta-secondary a {
  font-size: var(--font-small-size);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 3px;
}

.onc-cta-secondary a:hover {
  color: rgba(255, 255, 255, 0.85);
}


/* ─── RESPONSIVE: 1100px ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .onc-cta-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}


/* ─── RESPONSIVE: 900px ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* cat-split: collapse to single column (it's a grid, not flex) */
  .cat-split {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cat-split__narrative {
    padding: 40px 0 24px;
  }

  .cat-split__links {
    padding: 24px 0 40px;
    border-left: none;
    border-top: 1px solid var(--color-border);
    position: static; /* un-stick the links column when stacked */
    max-width: 100%;
    width: 100%;
  }

  /* Outcome story: stack all columns */
  .outcome-story {
    grid-template-columns: 1fr;
  }

  /* Proof-band credentials: single column */
  .proof-band-creds {
    grid-template-columns: 1fr;
  }

  /* How-steps-grid: 2-col on tablet */
  .how-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ─── RESPONSIVE: 768px ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tab nav: tighten on mobile */
  .path-tab-btn {
    padding: 16px 16px;
    font-size: 13px;
    letter-spacing: 0;
  }

  /* Fork: stack to single column */
  .onc-fork {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .onc-fork-card:first-child {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  /* Condition list: 2-col on tablet */
  .onc-condition-list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Mini-process: 2-col on tablet */
  .onc-mini-process {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Outcome story: single column */
  .outcome-story {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .outcome-quote-col { order: 1; }
  .outcome-narrative  { order: 2; }
  .outcome-finding-box { order: 3; }
  .outcome-clinical-note { order: 4; }

  /* Proof-band stats: 2-col wrap */
  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Trust badges: wrap */
  .trust-text-badges {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* cta-block product image: hide on mobile (override base display:flex) */
  .cta-block-image {
    display: none !important;
  }
}


/* ─── RESPONSIVE: 480px ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Tab nav: minimum size */
  .path-tab-btn {
    padding: 14px 10px;
    font-size: 12px;
  }

  /* How-steps-grid: single column */
  .how-steps-grid {
    grid-template-columns: 1fr;
  }

  /* Condition list: single column */
  .onc-condition-list {
    grid-template-columns: 1fr;
  }

  /* Mini-process: single column */
  .onc-mini-process {
    grid-template-columns: 1fr;
  }

  /* Pull quote */
  .pull-quote {
    font-size: clamp(20px, 5vw, 26px);
  }

  /* first-child section: even tighter on small screens */
  .path-tab-panel > section:first-child {
    padding-top: 32px;
  }

  /* Process CTA: full width */
  #onc-contact-btn-inline {
    display: block;
    width: 100%;
    text-align: center;
  }
}