/* Essex Dream Clean - About split slideshow
   Loaded after style.css so it only overrides the About section. */

#about.about-split{
  padding:0;
  overflow:hidden;
  min-height:720px;
}

#about .about-split-grid{
  width:100%;
  min-height:720px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

#about .about-slideshow{
  position:relative;
  min-width:0;
  min-height:720px;
  overflow:hidden;
  background:#0a0b0c;
}

#about .about-slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  transition:opacity 1.4s ease;
}

#about .about-slide.active{
  opacity:1;
}

#about .about-slide picture,
#about .about-slide img{
  display:block;
  width:100%;
  height:100%;
}

#about .about-slide img{
  object-fit:cover;
  object-position:center center;
  transform:scale(1.015);
  animation:aboutImageDrift 10s ease-in-out infinite alternate;
  filter:saturate(.96) contrast(1.02);
}

/* Gentle blend into the dark text column rather than a hard cut. */
#about .about-image-shade{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,transparent 76%,rgba(11,11,13,.16) 88%,rgba(11,11,13,.72) 100%),
    linear-gradient(180deg,rgba(5,5,5,.12) 0%,transparent 20%,transparent 80%,rgba(5,5,5,.16) 100%);
}

#about .about-content-panel{
  min-width:0;
  min-height:720px;
  display:flex;
  align-items:center;
  background:var(--black-2,#0b0b0d);
  padding:80px clamp(42px,6vw,110px);
}

#about .about-content{
  width:100%;
  max-width:720px;
  margin:0;
  padding:0;
}

#about .about-copy-large{
  margin-top:26px;
}

@keyframes aboutImageDrift{
  from{transform:scale(1.015)}
  to{transform:scale(1.055)}
}

@media (max-width:1000px){
  #about.about-split{min-height:0}
  #about .about-split-grid{
    min-height:0;
    grid-template-columns:1fr;
  }
  #about .about-slideshow{
    min-height:520px;
    height:58vw;
    max-height:620px;
  }
  #about .about-image-shade{
    background:linear-gradient(180deg,transparent 0%,transparent 72%,rgba(11,11,13,.78) 100%);
  }
  #about .about-content-panel{
    min-height:0;
    padding:70px max(30px,6vw) 82px;
  }
  #about .about-content{max-width:800px}
}

@media (max-width:600px){
  #about .about-slideshow{
    min-height:390px;
    height:76vw;
  }
  #about .about-content-panel{
    padding:56px 24px 66px;
  }
}

@media (prefers-reduced-motion:reduce){
  #about .about-slide img{animation:none}
}
