/* --- Split layout --- */
.split{
  --gap: clamp(16px, 3vw, 32px);
  --dur: 15s;     /* full cycle time */
  --count: 3;     /* you have 3 images */
  display: grid;
  grid-template-columns: 1fr min(75ch, 48%);
  gap: var(--gap);
  align-items: center;

}
.split__text { 
	order: 1;
  padding: 8em;
}

/* --- Gallery --- */
.split__gallery{
  order: 2;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  background: #000;
  margin:0;
}

.split__gallery > p{
  margin: 0;
}

/* Stack images (not just direct children anymore) */
.split__gallery img{
  position: absolute;     /* positions against .split__gallery */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Smooth, overlapped crossfade */
  animation: crossfade var(--dur) linear infinite both;
  /* inline --i from HTML still works */
  animation-delay: calc((var(--i) - 1) * (var(--dur) / var(--count)));

  /* Performance guards */
  will-change: opacity;
  backface-visibility: hidden;
  transform: translateZ(0);

  opacity: 0;
}

/* Pause rotation on hover OR while any child (like the CTA) is focused */
.split__gallery:hover img,
.split__gallery:focus-within img{
  animation-play-state: paused;
}

/* Keyframes with small overlap to avoid blank frames */
@keyframes crossfade{
  0%   { opacity: 0; }
  2%   { opacity: 1; }   /* quick fade in */
  31%  { opacity: 1; }   /* hold */
  35%  { opacity: 0; }   /* fade out slightly after next starts */
  100% { opacity: 0; }
}

/* CTA overlay styles */
.gallery-cta{
  transform: translate(-50%, -50%) scale(0.98);
  padding: .9rem 1.2rem;
  min-width: 250px;
  border-radius: 3px;
  margin:3em 0;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.1em;

  background: #0073E6;
  color: #fff;
  box-shadow:
    inset 2px 2px 2px rgba(255,255,255,.5),
    2px 2px 2px rgba(0,0,0,.1),
    4px 4px 5px rgba(0,0,0,.1);

  backdrop-filter: saturate(140%) blur(2px);
  text-align:center;
}

/* Hover & focus states for CTA */
.gallery-cta:hover{ background: #003366; }
.gallery-cta:focus-visible{
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(0,0,0,.4);
}


/* Keep CTA text styling even with extra Drupal classes */
.split .split__gallery a.gallery-cta{
  color: #fff;
}

/* Section background from your wrapper */
.lc.blue-bg{
  background: #e6f4ff;
}

.gallery-cta-btn {
    margin: 3em 0;
}

/* Responsive: stack on small screens */
@media (max-width: 800px){
  .split{ grid-template-columns: 1fr; }
  .split__text { 
  	order: 2;
    padding: 3em;
    text-align: center;
    }
  .split__gallery{ order: 1; }
}

/* Accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce){
  .split__gallery img{ animation: none; }
  .split__gallery img:not([style*="--i:1"]) { display: none; }
  .gallery-cta{ transition: none; }
}