/* Solutions Scroll (CSS-only sticky + scroll-driven animation) */

.lab-solutions { position: relative; }
.lab-solutions__intro { color: #fff; padding: 24px 16px; }
.lab-solutions__h2 { font-family: var(--font-family-heading, 'Inter', sans-serif); font-weight: 600; font-size: clamp(28px, 3.8vw, 48px); line-height: 1.2; margin: 0; }
.lab-solutions__sub { margin: 8px 0 0 0; font-family: var(--font-family-body, 'Raleway', sans-serif); font-size: clamp(16px, 1.6vw, 18px); color: rgba(255,255,255,0.85); }

.lab-solutions__stagegroup { position: relative; width: 100%; background: #1B1A30; /* matches example */ }

/* The sticky canvas – stays pinned while sentinels scroll underneath */
.lab-solutions__sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 32px); align-items: center; padding: clamp(16px, 4vw, 48px); overflow: hidden; }

.lab-solutions__left, .lab-solutions__right { position: relative; min-height: min(60vh, 70svh); }

/* Stack titles and images; latest slide is layered on top via inline z-index */
.lab-solutions__title, .lab-solutions__image { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateX(60px); }

.lab-solutions__title { color: #000; background: #E4E4E4; border-radius: 24px; padding: clamp(16px, 3vw, 32px); margin: 0; text-align: left; width: 100%; height: auto; min-height: clamp(160px, 40vh, 360px); box-sizing: border-box; font-family: var(--font-family-heading, 'Inter', sans-serif); font-weight: 700; font-size: clamp(28px, 3.8vw, 48px); line-height: 1.15; }

.lab-solutions__image { align-items: center; justify-content: center; }
.lab-solutions__image img { max-width: 100%; max-height: 70vh; object-fit: contain; display: block; }

/* One sentinel section per slide; each consumes full viewport height to create scroll distance */
.lab-solutions__sentinel { height: 100vh; view-timeline-axis: block; /* expose View Timeline */ }

/* Animate-in when each sentinel enters (Chrome/Safari/Edge support). */
@keyframes labSlideIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }

.lab-solutions__title,
.lab-solutions__image {
  animation-name: labSlideIn;
  animation-duration: 1ms; /* duration is ignored with scroll animations; timeline drives progress */
  animation-timing-function: ease;
  animation-fill-mode: both;
}

/* Ensure the first slide is visible immediately before the first sentinel enters */
.lab-solutions__left .lab-solutions__title:first-child,
.lab-solutions__right .lab-solutions__image:first-child { opacity: 1; transform: none; }

/* Layout tweaks */
@media (max-width: 992px) {
  .lab-solutions__sticky { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .lab-solutions__left, .lab-solutions__right { min-height: 40vh; }
  .lab-solutions__image img { max-height: 40vh; }
}

/* Fallback when scroll-driven animations are unavailable */
@supports not (animation-timeline: auto) {
  .lab-solutions__title,
  .lab-solutions__image { opacity: 0; transform: none; }
  .lab-solutions__title:first-child,
  .lab-solutions__image:first-child { opacity: 1; position: relative; inset: auto; }
  .lab-solutions__sentinel { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-solutions__title,
  .lab-solutions__image { animation: none !important; }
}