/* Patient Data Workflow (Figma 11275:102) */
.workflow {
  position: relative;
  margin: 0 auto;
  max-width: 1250px;
  padding: 40px 0;
  border-radius: 16px;
  overflow: hidden;
  /* Keep only the teal gradient on the section */
  background-image: linear-gradient(90deg, #00B894 0%, #0FD2AB 100%);
  background-size: cover;
  background-position: center;
}

.workflow::after {
content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('../images/about/Group-dots.svg');
  background-repeat: no-repeat;
  background-position: right 180px top 0px;
  background-size: auto 260px; /* increased size for visibility */
  opacity: 0.7; /* increase visibility over gradient */
  z-index: 0;
}

.workflow__container {
  position: relative; /* for pseudo-element dot pattern */
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Dotted pattern inside the container only (matches Figma look) */
.workflow__container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.workflow__row {
  position: relative; /* ensure content sits above dots */
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  column-gap: 18px;
  flex-wrap: nowrap;
}

.workflow__step { display: flex; align-items: center; flex-direction: column; gap: 12px; }

.workflow__tile {
  width: 80px; height: 80px; background: #fff; border-radius: 15px;
  box-shadow: 13px 14px 40px rgba(39,98,131,0.15);
  display: grid; place-items: center;
  box-sizing: border-box; /* keep outer size fixed when adding padding */
  padding: 12px; /* ensure icon fits comfortably inside the tile */
  overflow: hidden; /* prevent icon overflow */
}
.workflow__icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.workflow__icon img {
  max-width: 100%;
  width: 40px;
  height: 40px;
  object-fit: cover;
  display: block;
}

.workflow__label {
  color: #020817; font-size: 15px; font-weight: 700; line-height: 20px; text-align: center; max-width: 200px;
}

.workflow__arrow { height: 20px; width: 100px; margin-top: 31px; opacity: 0.95; }
/* Flip selected arrows vertically (used for Arrow 2 and Arrow 4) */
.workflow__arrow--flip { transform: scaleY(-1); transform-origin: center; }

@media (max-width: 1200px) {
  .workflow { padding: 24px 0; border-radius: 14px; }
  .workflow__row { column-gap: 14px; }
  .workflow__label { font-size: 16px; line-height: 20px; max-width: 180px; }
}

@media (max-width: 992px) {
  .workflow { padding: 22px 0; border-radius: 12px; }
  .workflow__row { flex-wrap: wrap; row-gap: 24px; column-gap: 16px; }
  .workflow__arrow { display: none; }
}

@media (max-width: 640px) {
  .workflow { padding: 20px 0; }
  /* Hide dotted background on small phones */
  .workflow::after { background-image: none !important; }
  .workflow__tile { width: 80px; height: 80px; }
  .workflow__icon { width: 46px; height: 46px; }
  .workflow__label { font-size: 16px; line-height: 20px; max-width: 160px; }
}