/* Medical History & Records (Figma 11331:5) */
.records { position: relative; padding: 56px 0; }

.records .features__container { position: relative; z-index: 0; }

.records__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
  position: relative;
}

/* Left visuals */
.records__visual { position: relative; min-height: 370px; }

.records__glow {
  position: absolute; left: -8%; top: -8%; width: 320px; height: 320px;
  background: #00f0c1; filter: blur(200px); border-radius: 160px; opacity: 0.9; pointer-events: none;
}

.records__photo {
  position: relative; z-index: 1; width: 560px; max-width: 100%;
}
.records__photo > img:not(.records__green-lines) { width: 100%; height: auto; display: block; border-radius: 24px; }

/* Green lines decorations on the photo */
.records__green-lines { position: absolute; width: 50px; height: 50px; pointer-events: none; }
.records__green-lines--tr { top: -40px; right: -40px; }
.records__green-lines--bl { bottom: -40px; left: -40px; transform: scaleX(-1) scaleY(-1); }

/* Decorative ticks around the photo */
.records__decor { position: absolute; width: auto; height: auto; pointer-events: none; z-index: 2; }
.records__decor--l1 { left: -14px; bottom: 74px; transform: rotate(225deg); }


/* Right content */
.records__content { position: relative; padding-right: 24px; }
.records__title { color: #020817; font-size: 66px; line-height: 78px; font-weight: 700; letter-spacing: 0.66px; margin: 0 0 50px; }
.records__title .accent { color: #00b894; position: relative; display: inline-block; padding-bottom: 14px; }

/* Position the tick decor next to the 'Records' word */
.records__title .records__decor {
  position: absolute;
  left: auto;
  bottom: auto;
  right: -78px;
  top: 70%;
  transform:  rotate(25deg) scaleY(-1);
  width: 64px;
  height: 20px;
  pointer-events: none;
}

.records__scribble { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); width: 100%; height: 15px; pointer-events: none; }

.records__text { font-size: 18px; line-height: 28px; color: rgba(0,0,0,0.7); max-width: 600px; margin: 16px 0 0; }

/* Floating badge tile */
.records__badge { position: absolute; right: 110px; top: 156px; }
.records__badge-frame {
  width: 70px; height: 70px; background: #fff; border-radius: 15px;
  box-shadow: 13px 14px 40px rgba(39,98,131,0.15); display: grid; place-items: center;
}
.records__badge-icon { width: 42px; height: 42px; object-fit: contain; display: block; }

/* Responsive */
@media (max-width: 1200px) {
  .records { padding: 48px 0; }
  .records__title { font-size: 56px; line-height: 68px; }
}

@media (max-width: 992px) {
  .records__wrap { grid-template-columns: 1fr; gap: 28px; }
  .records__content { order: 1; }
  .records__visual { order: 2; min-height: 360px; }
  .records__badge { position: absolute; right: 12px; top: -36px; }
  .records__scribble { left: auto; right: 0; top: -6px; width: 64px; }
  /* Prevent horizontal overflow on tablets and phones */
  .records { overflow: hidden; }
  /* Ensure photo container scales to container width */
  .records__photo { width: 100%; max-width: 100%; }
  /* Hide decorative elements that can extend beyond viewport when stacked */
  .records__green-lines,
  .records__decor { display: none !important; }
}

@media (max-width: 640px) {
  .records { padding: 38px 0 0; }
  .records__content { text-align: center; }
  .records__title { font-size: 40px; line-height: 48px; }
  .records__text { font-size: 16px; line-height: 24px; margin-left: auto; margin-right: auto; }
  .records__badge-frame { width: 78px; height: 78px; }
  .records__badge-icon { width: 44px; height: 44px; }
  /* Hide the floating badge frame on mobile */
  .records__badge-frame { display: none !important; }
}

/* Phone refinements: ensure no overflow and better spacing */
@media (max-width: 640px) {
  .records__wrap { gap: 16px; }
  .records__content { padding-right: 0; }
  .records__visual { min-height: 300px; }

  /* Hide decorative elements that can cause overflow on small screens */
  .records__glow,
  .records__green-lines,
  .records__decor,
  .records__scribble { display: none !important; }

  /* Keep the floating badge but tuck it into a safe corner */
  .records__badge { right: 8px; top: 8px; }
}

@media (max-width: 480px) {
  .records__title { font-size: 34px; line-height: 42px; margin-bottom: 24px; }
  .records__text { font-size: 15px; line-height: 22px; }
  .records__visual { min-height: 240px; }
  .records__badge-frame { width: 64px; height: 64px; }
  .records__badge-icon { width: 36px; height: 36px; }
}