/* =========================================================
   EASTERN PROJECT HIGHLIGHTS — V1.2
========================================================= */

.eph-widget{
  --eph-navy:#06182E;
  --eph-gold:#C38A43;

  --eph-gap:28px;
  --eph-radius:24px;
  --eph-per-view:3;

  --eph-image-height:360px;
  --eph-hover-growth:28px;

  --eph-content-top-gap:20px;
  --eph-number-title-gap:20px;
  --eph-title-desc-gap:10px;

  /* This fixed reserve prevents pagination from moving
     when a description opens / image grows. */
  --eph-content-reserve:185px;

  /* Small reference-style pagination */
  --eph-pagination-top:14px;
  --eph-dot-size:6px;
  --eph-active-width:18px;
  --eph-dot-gap:6px;
  --eph-dot-color:#B8B8B8;
  --eph-dot-active:#C38A43;

  --eph-card-width:
    calc(
      (100% - (var(--eph-gap) * (var(--eph-per-view) - 1)))
      / var(--eph-per-view)
    );

  width:100%;
  overflow:hidden;
  color:var(--eph-navy);
  background:transparent;
}

.eph-widget,
.eph-widget *{
  box-sizing:border-box;
}

.eph-head{
  margin-bottom:34px;
}

.eph-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;

  font-family:"Montserrat",Arial,sans-serif;
  font-size:16px;
  line-height:1.25;
  font-weight:600;
}

.eph-spark{
  color:var(--eph-gold);
  font-size:26px;
  line-height:1;
}

.eph-heading{
  margin:0;
  color:var(--eph-navy);

  font-family:"Google Sans Flex","Google Sans",Arial,sans-serif;
  font-size:clamp(38px,4vw,60px);
  line-height:1;
  font-weight:700;
  letter-spacing:-.035em;
}


/* =========================================================
   FIXED SLIDER STAGE
   Pagination does NOT move when a card opens.
========================================================= */

.eph-viewport{
  width:100%;

  height:
    calc(
      var(--eph-image-height)
      + var(--eph-hover-growth)
      + var(--eph-content-reserve)
    );

  overflow:hidden;
  touch-action:pan-y;
  overscroll-behavior-inline:contain;
}

.eph-track{
  display:flex;
  flex-flow:row nowrap;
  align-items:flex-start;

  gap:var(--eph-gap);

  width:100%;
  max-width:none;

  will-change:transform;
  transform:translate3d(0,0,0);

  transition:
    transform .72s cubic-bezier(.22,1,.36,1);

  cursor:grab;
  user-select:none;
}

.eph-track.is-dragging{
  cursor:grabbing;
  transition:none;
}

.eph-track.is-wheel-scrolling,
.eph-track.is-direct-moving{
  transition:none;
}

.eph-card{
  flex:0 0 var(--eph-card-width);
  width:var(--eph-card-width);

  min-width:0;
  outline:none;
}


/* =========================================================
   IMAGE
========================================================= */

.eph-media{
  position:relative;

  width:100%;
  height:var(--eph-image-height);

  overflow:hidden;

  border-radius:var(--eph-radius);
  background:#E9E5DF;

  transition:
    height .62s cubic-bezier(.22,1,.36,1);
}

.eph-media img{
  display:block;

  width:100%;
  height:100%;
  max-width:none;

  object-fit:cover;

  transform:
    scale(1.01)
    translate3d(0,0,0);

  transition:
    transform .85s cubic-bezier(.22,1,.36,1);

  pointer-events:none;
}


/* =========================================================
   NUMBER / TITLE / DESCRIPTION
========================================================= */

.eph-content{
  display:grid;

  /* max-content means the number only takes its real width.
     The gap control now behaves exactly as expected. */
  grid-template-columns:
    max-content
    minmax(0,1fr);

  column-gap:var(--eph-number-title-gap);

  align-items:start;

  padding-top:var(--eph-content-top-gap);
}

.eph-number{
  white-space:nowrap;

  color:var(--eph-gold);

  font-family:"Google Sans Flex","Google Sans",Arial,sans-serif;
  font-size:clamp(34px,3vw,48px);
  line-height:1;
  font-weight:600;
  letter-spacing:-.04em;
}

.eph-copy{
  min-width:0;
}

.eph-title{
  margin:0;

  color:var(--eph-navy);

  font-family:"Google Sans Flex","Google Sans",Arial,sans-serif;
  font-size:clamp(22px,1.8vw,28px);
  line-height:1.1;
  font-weight:600;
  letter-spacing:-.025em;
}

.eph-description{
  margin-top:var(--eph-title-desc-gap);

  opacity:0;
  visibility:hidden;

  max-height:0;
  overflow:hidden;

  transform:translateY(8px);

  font-family:"Montserrat",Arial,sans-serif;
  color:rgba(6,24,46,.70);
  font-size:15px;
  line-height:1.6;

  transition:
    opacity .30s ease,
    visibility .30s ease,
    transform .40s cubic-bezier(.22,1,.36,1),
    max-height .48s cubic-bezier(.22,1,.36,1);
}

.eph-description p{
  margin:0;
}


/* =========================================================
   DESKTOP HOVER / KEYBOARD
========================================================= */

@media (hover:hover) and (pointer:fine){

  .eph-card:hover .eph-media,
  .eph-card:focus-within .eph-media{
    height:
      calc(
        var(--eph-image-height)
        + var(--eph-hover-growth)
      );
  }

  .eph-card:hover .eph-media img,
  .eph-card:focus-within .eph-media img{
    transform:
      scale(1.035)
      translate3d(0,1.1%,0);
  }

  .eph-card:hover .eph-description,
  .eph-card:focus-within .eph-description{
    opacity:1;
    visibility:visible;
    max-height:180px;
    transform:translateY(0);
  }
}


/* =========================================================
   MOBILE / TOUCH OPEN STATE
   JS adds .is-open only after a real tap, not after a swipe.
========================================================= */

.eph-card.is-open .eph-media{
  height:
    calc(
      var(--eph-image-height)
      + var(--eph-hover-growth)
    );
}

.eph-card.is-open .eph-media img{
  transform:
    scale(1.035)
    translate3d(0,1.1%,0);
}

.eph-card.is-open .eph-description{
  opacity:1;
  visibility:visible;
  max-height:180px;
  transform:translateY(0);
}


/* =========================================================
   SMALL / CLEAN PAGINATION
========================================================= */

.eph-pagination{
  display:flex;
  justify-content:center;
  align-items:center;

  gap:var(--eph-dot-gap);

  min-height:
    max(
      var(--eph-dot-size),
      10px
    );

  margin-top:var(--eph-pagination-top);
}

.eph-dot{
  display:block;

  width:var(--eph-dot-size);
  height:var(--eph-dot-size);

  padding:0;

  border:0;
  outline:0;

  border-radius:999px;

  background:var(--eph-dot-color);
  opacity:.72;

  cursor:pointer;

  transition:
    width .30s cubic-bezier(.22,1,.36,1),
    opacity .25s ease,
    background-color .25s ease,
    transform .20s ease;
}

.eph-dot:hover{
  opacity:1;
  transform:scale(1.08);
}

.eph-dot.is-active{
  width:var(--eph-active-width);

  background:var(--eph-dot-active);
  opacity:1;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  .eph-head{
    margin-bottom:22px;
  }

  .eph-eyebrow{
    font-size:14px;
  }

  .eph-heading{
    font-size:38px;
  }

  .eph-number{
    font-size:30px;
  }

  .eph-title{
    font-size:21px;
  }

  .eph-description{
    font-size:14px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .eph-track,
  .eph-media,
  .eph-media img,
  .eph-description,
  .eph-dot{
    transition:none!important;
  }
}