@import url("neck-condition.css?v=20261022-policy-text");

.disease-hero { min-height: 784px; background-image: none; background-position: center; }
/* The lumbar hero exports contain a one-pixel nonopaque bottom row. */
.disease-hero::before { content: ""; position: absolute; inset: 0 0 -.5%; background: var(--hero-image) center / cover no-repeat; }
.disease-hero-shade { background: rgba(20, 16, 14, .4); }
.disease-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); font-size: 17px; }

.causes { position: relative; z-index: 2; padding: 118px 0 0; background: #fff; }
.causes .section-heading > p { margin-top: 62px; }
.cause-grid { gap: 20px; margin-top: 72px; transform: translateY(94px); }
.cause-card {
  aspect-ratio: 284 / 350;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 3px minmax(0, 1fr);
  place-items: center;
  align-content: stretch;
  gap: 22px;
  padding: 36px 25px;
  color: #242424;
  background: #d8d8d8;
  border-radius: 28px;
  box-shadow: none;
  cursor: default;
  text-align: center;
}
.cause-card::after { display: none; }
.cause-card h3,
.cause-card:hover h3,
.cause-card:focus-visible h3 {
  position: static;
  align-self: end;
  margin: 0;
  transform: none;
  font-size: clamp(23px, 1.55vw, 30px);
  line-height: 1.22;
  letter-spacing: -.055em;
}
.cause-card p {
  align-self: start;
  margin: 0;
  font-size: clamp(15px, .95vw, 18px);
  line-height: 1.48;
  letter-spacing: -.04em;
}
.cause-divider { width: 46px; height: 3px; background: #1756ae; border-radius: 3px; }
.cause-grid .cause-card:nth-child(1) { transition-delay: .05s; }
.cause-grid .cause-card:nth-child(2) { transition-delay: .15s; }
.cause-grid .cause-card:nth-child(3) { transition-delay: .25s; }
.cause-grid .cause-card:nth-child(4) { transition-delay: .35s; }

.symptoms { --symptom-height: clamp(720px, 48.5vw, 930px); min-height: var(--symptom-height); }
/* Keep the PNG's 11px transparent bottom edge outside the clipped section. */
.symptoms::before { bottom: -2%; background-image: url("../assets/subpages/lumbar-disc/symptom-lumbar-v2.png"); background-position: center; }
.symptoms-shade { background: rgba(2, 16, 38, .06); }
.symptoms-inner { min-height: var(--symptom-height); align-items: flex-start; padding-top: clamp(210px, 15vw, 288px); }
.symptoms-copy { width: min(100%, 760px); margin: 0; }
.symptoms-copy > p { max-width: 660px; }
.symptom-checklist { max-width: 760px; }

.treatments { padding-top: 150px; }
.treatment-copy p { max-width: 420px; }

@media (max-width: 1500px) {
  .disease-tabs { font-size: 15px; }
  .causes { padding-top: 105px; }
  .cause-grid { transform: translateY(80px); }
  .symptoms-inner { padding-top: 210px; }
}

@media (max-width: 1100px) {
  .disease-tabs { font-size: 13px; }
  .disease-tabs > a { padding-inline: 8px; }
  .cause-card { padding: 25px 16px; }
  .cause-card p { font-size: 14px; }
}

@media (max-width: 800px) {
  .disease-hero { min-height: 690px; }
  .disease-tabs { display: flex; font-size: 14px; }
  .disease-tabs > a { min-width: 142px; }
  .causes { padding: 90px 0; }
  .causes .section-heading > p { margin-top: 38px; }
  .cause-grid { margin-top: 56px; transform: none; }
  .cause-card { width: 100%; min-width: 0; min-height: 240px; aspect-ratio: auto; grid-template-rows: 78px 3px auto; align-content: start; border-radius: 18px; padding: 24px 12px; gap: 14px; }
  .cause-card h3, .cause-card:hover h3, .cause-card:focus-visible h3 { align-self: center; font-size: 21px; }
  .cause-card p { font-size: 14px; line-height: 1.5; }
  .symptoms { --symptom-height: 0px; }
  .symptoms::before { background-position: 53% center; opacity: .78; }
  .symptoms-shade { background: rgba(2, 16, 38, .32); }
  .symptoms-inner { min-height: 0; align-items: flex-start; padding: 48px 0; }
  .symptoms-copy { width: 100%; }
}

@media (max-width: 520px) {
  .cause-card { grid-template-rows: 66px 3px auto; padding-inline: 10px; }
  .cause-card h3, .cause-card:hover h3, .cause-card:focus-visible h3 { font-size: 18px; }
}