/* @group Project-learnmore
------------------------------------ */
.project-learnmore {
    position: relative;
    padding: 5.5rem 0 6rem;
}
.project-learnmore h2 {
    color: var(--light-green);
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .project-learnmore {
        padding: 2.5rem 0 3.4rem 0;
    }
}

.learnmore-intro {
    display: flex;
    align-items: center;
}
.learnmore-intro figure {
    background-color: #c2eafe;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.learnmore-intro figure img {
    flex: none;
    width: 9rem;
    height: 9.3rem;
}

.learnmore-intro .article__info p {
    font-size: 2em;
    line-height: 1.6em;
    color: #000000;
    font-weight: 600;
}
@media only screen
and (min-width : 961px) {
    .learnmore-intro {
        padding-top: 4rem;
        margin-bottom: 3rem;
    }
    .learnmore-intro article {
        align-items: flex-start;
        justify-content: flex-start;
    }
    .learnmore-intro figure {
        flex: 0 1 16.2rem;
        height: 16.2rem;
        margin-right: 5.5rem;
    }
    .learnmore-intro .article__info {
        flex: 1;
    }
    .learnmore-intro .article__info p {
        font-size: 2.4em;
        line-height: 1.5em;
        margin-bottom: 2rem;
    }
    
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .learnmore-intro {
        padding-top: 2.6rem;
    }
    .learnmore-intro {
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
    }
    .learnmore-intro figure {
        width: 16.2rem;
        height: 16.2rem;
    }
    .learnmore-intro .article__info {
        margin-top: 2.7rem;
    }
    .learnmore-intro .article__info p {
        font-size: 2.4em;
        line-height: 1.5em;
        margin-bottom: 2.7rem;
    }
    .learnmore-intro .article__info a {
        text-align: center;
    }
}

:root {
  --slider-gutter: #E6F6FE;                 /* strip color */
  --gutter-w: clamp(8px, 4vw, 140px);      /* strip width */
  --arrow-w: 1.9rem;                        /* from main.css */
  --arrow-h: 3rem;                          /* from main.css */
}
@media (max-width: 560px) {
  :root { --gutter-w: clamp(6px, 3vw, 48px); }
}

.project-learnmore__photos { margin-bottom: 3em; min-height: 280px; }
.photos-splide { position: relative; width: 100%; }
.photos-splide .splide__track { overflow: hidden !important; background-color: var(--slider-gutter); }
.photos-splide .splide__list { align-items: center; }
.photos-splide .splide__slide {
  display: flex;
  justify-content: center;     
  padding: 0 !important;          
}

.photos-splide .splide__slide .photo-frame {
  box-sizing: border-box;
  width: clamp(280px, calc(100% - 2*var(--gutter-w)), 1400px);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--slider-gutter);

  margin: 0 auto;
  height: 100%;
}
.photos-splide .splide__slide .photo-frame img {
  /*width: auto;*/
  width: 100%;
  max-width: none;
  /*height: auto;*/
  height: 100%;
  max-height: none;
  /*object-fit: initial;  */
  object-fit: cover;
  object-position: center;       
  display: block;
}
/* LANDSCAPE — fill the frame horizontally with a fixed aspect (no letterboxing).
   The image covers the 16:9 box and always looks “wide”. */
.photos-splide .splide__slide .photo-frame.is-landscape {
  /*aspect-ratio: 16 / 9;  */          /* adjust to 3/2 or 21/9 if art skews wider */
}
.photos-splide .splide__slide .photo-frame.is-landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;               /* crop edges as needed; no empty bands */
  display: block;
}
/* PORTRAIT — no forced aspect. Prioritize height; width shrinks naturally.
   Use contain so nothing is cropped. The small max-height is just a safety cap. */
.photos-splide .splide__slide .photo-frame.is-portrait {
  /*aspect-ratio: auto;*/              /* let the content determine height */
}
/*.photos-splide .splide__slide .photo-frame.is-portrait img {
  width: auto;
  height: auto;                    /* browser will respect max-height below */
  /*max-height: 50vh;                /* a bit taller than landscape */
  /*max-width: 92%;                  /* avoid looking “too” skinny on wide screens */
  /*object-fit: contain;
}*/
/*@media (max-width: 560px) {
    .photos-splide .splide__slide .photo-frame img {
        max-height: 35vh;
    }
}
@media (max-width: 768px) {
.photos-splide .splide__slide .photo-frame.is-portrait img { max-height: 30vh; }
}
@media (max-width: 640px) {
  .photos-splide .splide__slide .photo-frame { padding: 0 1.25rem; }  
  .photos-splide .splide__slide .photo-frame.is-portrait  img { max-height: 22vh; max-width: 96%; }
}*/
/* iOS-friendly caps: use svh when supported; otherwise vh */
@supports (height: 1svh) {
  .photos-splide .splide__slide .photo-frame.is-portrait img {
    max-height: 80svh;          /* tall but not full-screen */
    max-width: 96%;
  }
}
@supports not (height: 1svh) {
  .photos-splide .splide__slide .photo-frame.is-portrait img {
    max-height: 80vh;
    max-width: 96%;
  }
}
/* give landscape a gentle lower bound on very small screens so
   the frame doesn’t feel “stubby” due to iOS UI bars affecting viewport */
@media (max-width: 560px) {
  .photos-splide .splide__slide .photo-frame.is-landscape {
    min-height: calc((100% - 2*var(--gutter-w)) * 9 / 16 * 0.9); /* ~90% of 16:9 height */
  }
}

.photos-splide { position: relative; overflow: hidden !important; }
.photos-splide::before,
.photos-splide::after {
  content: "";
  position: absolute;
  inset: auto 0 auto auto;
  top: 0;
  bottom: 0;
  width: var(--gutter-w); 
  background-color: var(--slider-gutter);
  z-index: 0;                      
  pointer-events: none;            
}
.photos-splide::before { left: 0; right:auto; }
.photos-splide::after  { right: 0; left:auto; }

/* Ensure arrows are above the gutters */
.photos-splide .splide__arrows { z-index: 2; position: absolute; inset: 0; pointer-events: none; }
.photos-splide .splide__arrow  { 
    pointer-events: auto;
    top: 50%;
    transform: translateY(-50%);            /* ensure vertical centering */
    width: var(--arrow-w);
    height: var(--arrow-h);
    background-color: transparent; 
}
.photos-splide .splide__arrow--prev {
  /* centered within the left strip with a little padding */
  left: 15px;
}
.photos-splide .splide__arrow--next {
  right: 15px;
}

@media (min-width: 961px) and (max-width: 1360px) {
  /*.photos-splide .splide__slide .photo-frame { width: 820px; }*/
}
@media (max-width: 960px) {
  .photos-splide .splide__arrow--prev { left: 7px; }
  .photos-splide .splide__arrow--next { right: 7px; }
}
@media (max-width: 768px) {
  .photos-splide .splide__slide .photo-frame { padding: 0 2rem; }
  .photos-splide .splide__arrow--prev { left: 2px; }
  .photos-splide .splide__arrow--next { right: 2px; }
}


/* ------ THUMB STRIP ------ */
.photos-splide--thumbs { 
    max-width: min(960px, 92vw);
    padding: 0 3rem;           /* line up with main .photo-frame padding */
    margin: .75rem auto 0;     /* centers the entire thumb slider */
}

.photos-splide--thumbs .splide__list { align-items: center; justify-content: center; }
.photos-splide--thumbs .splide__slide {
  opacity: .8;
  cursor: pointer;
  overflow: hidden;
  outline: 1px solid rgba(0,0,0,.06);
  transition: opacity .2s ease, outline-color .2s ease, transform .2s ease;
}
.photos-splide--thumbs .splide__slide.is-active {
  opacity: 1;
  outline-color: rgba(0,0,0,.25);
  transform: translateY(-1px);
}
.photos-splide--thumbs .thumb-frame,
.photos-splide--thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Static grid mode (mobile): keep thumbs visible, centered, wrapping */
.photos-splide--thumbs.thumbs-static .splide__track { overflow: visible; }
.photos-splide--thumbs.thumbs-static .splide__list {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  transform: none !important;
}
/* Size thumbs responsively in static mode (roughly matching your breakpoints) */
.photos-splide--thumbs.thumbs-static .splide__slide {
  width: 80px;
  height: 52px;
}
@media (max-width: 640px) {
  .photos-splide--thumbs.thumbs-static .splide__slide {
    width: 72px;
    height: 48px;
  }
}
@media (max-width: 420px) {
  .photos-splide--thumbs.thumbs-static .splide__slide {
    width: 56px;
    height: 40px;
  }
}

.pressrelease-item {
    margin-bottom: 0.5em;
}
.pressrelease-item a {
    text-decoration: underline;
}
.pressrelease-date {
    font-size: 0.8em;
    line-height: 1;
    display: block;
}


.project-learnmore h2,
.project-learnmore h4,
.project-learnmore .learnmore-intro,
.project-learnmore .photos-splide,
.project-learnmore .photos-splide li,
.project-learnmore .pressrelease-list,
.project-learnmore .pressrelease-list li { opacity: 0; }

.project-learnmore.animateActive h2,
.project-learnmore.animateActive h4,
.project-learnmore.animateActive .learnmore-intro,
.project-learnmore.animateActive .photos-splide,
.project-learnmore.animateActive .photos-splide li,
.project-learnmore.animateActive .pressrelease-list,
.project-learnmore.animateActive .pressrelease-list li {animation: fade 1.1s forwards;}
 
.project-learnmore.animateActive h2 {animation-delay:.3s;}   
.project-learnmore.animateActive .learnmore-intro {animation-delay:.5s;}
.project-learnmore.animateActive .photos-splide {animation-delay:.7s;}
.project-learnmore.animateActive .photos-splide li:nth-child(1) {animation-delay:.8s;}     
.project-learnmore.animateActive .photos-splide li:nth-child(2) {animation-delay:1s;}     
.project-learnmore.animateActive .photos-splide li:nth-child(3) {animation-delay:1.2s;}     
.project-learnmore.animateActive .photos-splide li:nth-child(4) {animation-delay:1.4s;}     
.project-learnmore.animateActive .photos-splide li:nth-child(5) {animation-delay:1.6s;}
.project-learnmore.animateActive .pressrelease-list {animation-delay:1s;}
.project-learnmore.animateActive .pressrelease-list li:nth-child(1) {animation-delay:1.1s;}
.project-learnmore.animateActive .pressrelease-list li:nth-child(2) {animation-delay:1.3s;}
.project-learnmore.animateActive .pressrelease-list li:nth-child(3) {animation-delay:1.5s;}
.project-learnmore.animateActive .pressrelease-list li:nth-child(4) {animation-delay:1.7s;}
.project-learnmore.animateActive .pressrelease-list li:nth-child(5) {animation-delay:1.9s;}

.photos-splide { width: 100%; }