@import url("./case-pediatric.css?v=2");

.dental-case {
  --coral: #b58a2c;
  --mustard: #b58a2c;
  --warm-ochre: #9d7424;
}

.dental-case ::selection { background: #d3b364; }
.dental-case .case-nav .case-nav-action,
.dental-case .case-numbered-list li > span,
.dental-case .case-editorial-list li::before,
.dental-case .case-narrative .case-label { color: var(--mustard); }

.dental-case .case-intro-media,
.dental-case .case-patient .case-split-media,
.dental-case .case-expertise .case-split-media,
.dental-case .case-execution .case-split-media {
  min-height: 0;
  aspect-ratio: 5 / 4;
}

.dental-case .case-diagnosis-media,
.dental-case .dental-challenge-media,
.dental-case .case-result-media {
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.dental-case .case-diagnosis { padding-bottom: clamp(140px, 13vw, 200px); }
.dental-case .case-diagnosis-panel {
  position: relative;
  right: auto;
  bottom: auto;
  width: min(660px, 48vw);
  margin: clamp(-150px, -10vw, -110px) 0 0 auto;
  padding: clamp(26px, 3vw, 44px);
}
.dental-case .case-diagnosis-panel > p:not(.case-lead) { margin-top: 12px; font-size: 13px; }
.dental-case .case-numbered-list { margin-top: 22px; }
.dental-case .case-numbered-list li { padding: 14px 0; }
.dental-case .case-numbered-list p { margin-top: 5px; line-height: 1.5; }
.dental-case .case-numbered-list p + p { margin-top: 5px; }
.dental-case .case-numbered-list p strong { display: inline; font-size: inherit; line-height: inherit; }

.dental-case .case-patient .case-copy,
.dental-case .case-expertise-panel,
.dental-case .case-execution .case-copy { max-width: 670px; }
.dental-case .case-expertise-panel { padding-top: clamp(28px, 3vw, 48px); padding-bottom: clamp(28px, 3vw, 48px); }
.dental-case .case-value-chain div { align-items: flex-start; }
.dental-case .case-value-chain strong { max-width: 70%; text-align: right; font-size: 14px; line-height: 1.45; }

.dental-case .case-narrative { background: #073f42; }
.dental-case .dental-challenge {
  position: relative;
  padding-top: clamp(130px, 13vw, 200px);
  padding-bottom: clamp(150px, 14vw, 220px);
}
.dental-case .dental-challenge-panel {
  position: relative;
  z-index: 2;
  width: min(620px, 46vw);
  margin: clamp(-140px, -9vw, -100px) 0 0 auto;
  padding: clamp(30px, 3.5vw, 52px);
}
.dental-case .dental-challenge-panel p { margin: 0; font-size: clamp(14px, 1.05vw, 16px); word-break: keep-all; }
.dental-case .dental-challenge-panel p + p { margin-top: 16px; }

.dental-case .dental-execution-groups { margin-top: 34px; border-top: 1px solid var(--charcoal); }
.dental-case .dental-execution-groups section { padding: 20px 0; border-bottom: 1px solid var(--line); }
.dental-case .dental-execution-groups h3 { margin: 0 0 12px; color: var(--warm-ochre); font-size: 12px; letter-spacing: .04em; }
.dental-case .dental-execution-groups p { margin: 0; font-size: 13px; line-height: 1.6; }
.dental-case .dental-execution-groups p + p { margin-top: 8px; }

.dental-case .case-impact-grid > .case-impact-wide { grid-column: 1 / -1; }
.dental-case .case-impact-grid > .case-impact-wide + div { border-left: 0; }

@media (max-width: 900px) {
  .dental-case .case-diagnosis-panel { width: min(680px, 58vw); }
  .dental-case .dental-challenge-panel { width: min(640px, 56vw); }
}

@media (max-width: 680px) {
  .dental-case .case-title-display { font-size: clamp(50px, 14vw, 58px); }
  .dental-case .case-intro-media,
  .dental-case .case-patient .case-split-media,
  .dental-case .case-expertise .case-split-media,
  .dental-case .case-execution .case-split-media { min-height: 0; aspect-ratio: 5 / 4; }
  .dental-case .case-diagnosis { padding-bottom: 90px; }
  .dental-case .case-diagnosis-media,
  .dental-case .dental-challenge-media,
  .dental-case .case-result-media { min-height: 0; aspect-ratio: 16 / 9; }
  .dental-case .case-diagnosis-panel,
  .dental-case .dental-challenge-panel { width: auto; margin: 0; padding: 34px var(--page); }
  .dental-case .dental-challenge { padding-top: 100px; padding-bottom: 100px; }
  .dental-case .case-value-chain strong { max-width: 68%; font-size: 13px; }
}
