/* ============================================================
   Industries/Healthcare — Case Study: Universitätsklinikum Mainz
   Figma: jhD6LDVa0CfkUz8tixyG7B / 16516:25450 (1360x1073)
   ============================================================ */

.sec-healthcare-case-study {
  position: relative;
  width: 100%;
  padding: var(--w120) var(--w80) 0;
  /* No own background — the themed wash on .page-surface--seamless shows through
     (the old per-page bg-glow.webp duplicated that wash for this one band). */
  overflow: clip;
}

.sec-healthcare-case-study__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--w64);
}

/* ---- Head: Eyebrow + Title ---- */

.sec-healthcare-case-study__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--w24);
  max-width: var(--w665);
}

/* Figma-Tagline: 12px Dot, 10px Gap, System/%70, ls 0.48px */
.sec-healthcare-case-study__eyebrow {
  /* Same mono tag as every other section label on these pages (OVERVIEW,
     KEY USE CASES) — the legacy .eyebrow class drew an Inter label with a
     blue dot instead. */
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--navy-70);
}

.sec-healthcare-case-study__title {
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

/* ---- Content: text column + image ---- */

.sec-healthcare-case-study__content {
  display: flex;
  align-items: flex-start;
  gap: var(--w72);
}

.sec-healthcare-case-study__left {
  flex: 0 1 var(--w594);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--w48);
}

.sec-healthcare-case-study__text {
  display: flex;
  flex-direction: column;
  gap: var(--w32);
  max-width: var(--w555);
}

.sec-healthcare-case-study__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--w12);
}

.sec-healthcare-case-study__label {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 700;
  line-height: var(--w23);
  color: var(--navy);
}

.sec-healthcare-case-study__copy {
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-70);
}

/* Forces the Figma line break after "Mainz" (browser otherwise renders the line in one line) */
.sec-healthcare-case-study__copy--intro {
  max-width: var(--w530);
}

.sec-healthcare-case-study__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--w12);
  width: 100%;
}

.sec-healthcare-case-study__item {
  display: flex;
  align-items: flex-start;
  gap: var(--w12);
}

.sec-healthcare-case-study__check {
  flex: 0 0 auto;
  width: var(--w20);
  height: var(--w20);
  margin-top: var(--w3); /* centered in the 26px line box */
}

/* ---- Buttons: simple pills (Figma has no notch — filled navy + outline navy) ---- */

.sec-healthcare-case-study__buttons {
  display: flex;
  align-items: center;
  gap: var(--w21);
}

.sec-healthcare-case-study__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w8);
  height: var(--w40);
  padding: var(--w4) var(--w12) var(--w4) var(--w16);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--w14);
  font-weight: 600;
  line-height: var(--w18);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.sec-healthcare-case-study__btn svg {
  flex: 0 0 auto;
  transition: transform var(--dur) var(--ease);
}

.sec-healthcare-case-study__btn:hover svg {
  transform: translateX(3px);
}

.sec-healthcare-case-study__btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.sec-healthcare-case-study__btn:active {
  transform: translateY(1px);
}

.sec-healthcare-case-study__btn--fill {
  background: var(--navy);
  border: 1px solid var(--navy);
  color: var(--white);
}

.sec-healthcare-case-study__btn--fill:hover {
  background: #1a3164;
  border-color: #1a3164;
}

.sec-healthcare-case-study__btn--outline {
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
}

.sec-healthcare-case-study__btn--outline:hover {
  background: var(--navy-30);
}

/* ---- Visual ---- */

.sec-healthcare-case-study__visual {
  flex: 0 1 var(--w614);
  min-width: 0;
  margin: 0;
}

.sec-healthcare-case-study__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--w12);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
  .sec-healthcare-case-study {
    padding: var(--w64) var(--w32);
  }

  .sec-healthcare-case-study__container {
    gap: var(--w48);
  }

  .sec-healthcare-case-study__content {
    flex-direction: column;
    gap: var(--w48);
  }

  .sec-healthcare-case-study__left {
    flex: 0 0 auto;
    width: 100%;
  }

  .sec-healthcare-case-study__text {
    max-width: var(--w640);
  }

  .sec-healthcare-case-study__visual {
    flex: 0 0 auto;
    width: 100%;
    max-width: var(--w614);
  }

  .sec-healthcare-case-study__title {
    font-size: var(--w44);
    line-height: 1.25;
  }
}

@media (max-width: 768px) {
  .sec-healthcare-case-study {
    padding: var(--m56) var(--m24);
  }

  .sec-healthcare-case-study__title {
    font-size: var(--m36);
    line-height: 1.2;
  }

  /* Mobile: the image sits directly under the title, above the copy. */
  .sec-healthcare-case-study__visual {
    order: -1;
  }
}

@media (max-width: 480px) {
  .sec-healthcare-case-study {
    padding: var(--m48) var(--m16);
  }

  .sec-healthcare-case-study__container {
    gap: var(--m32);
  }

  .sec-healthcare-case-study__head {
    gap: var(--m16);
  }

  .sec-healthcare-case-study__title {
    font-size: var(--m30);
    line-height: 1.2;
  }

  .sec-healthcare-case-study__content,
  .sec-healthcare-case-study__left {
    gap: var(--m32);
  }

  .sec-healthcare-case-study__copy {
    font-size: var(--m16);
    line-height: var(--m23);
  }

  .sec-healthcare-case-study__check {
    margin-top: 1px;
  }

  .sec-healthcare-case-study__buttons {
    flex-wrap: wrap;
    gap: var(--m12);
  }
}