/* Our Works — tall slider, under project cards */

/* Keep site header the same height as other inner pages; do not collapse on scroll. */
html:has(body.projects-page).is-scrolled{
  --appbar-h: 44px;
}
html:has(body.projects-page).is-scrolled .appbar{
  height:44px;
  overflow:hidden;
  padding:14px 0 8px;
  opacity:1;
  pointer-events:auto;
  background:#071f34;
}

.projects-page .projects-board{
  display:grid;
  gap:clamp(16px,2vw,24px);
  align-items:start;
}

.our-works{
  padding:0;
  background:transparent;
  overflow:visible;
}
.our-works__head{
  margin-bottom:8px;
  text-align:center;
}
.our-works__title{
  margin:0;
  color:var(--fp-primary);
  font-family:var(--font);
  font-size:clamp(1.1rem,1.8vw,1.4rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
}

.our-works__stage{
  width:100%;
  margin:0 auto;
  padding:0;
}
.our-works__stage[hidden]{display:none}

.works-flow{
  position:relative;
  width:100%;
  max-width:none;
  margin:0 auto;
}

.works-flow__stage{
  position:relative;
  width:100%;
  overflow:hidden;
  touch-action:pan-y;
  min-height:min(78vh, 880px);
}

.works-flow__track{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px,2.4vw,40px);
  padding:8px 56px 12px;
  min-height:min(78vh, 880px);
}

.works-flow__item{
  position:relative;
  flex:0 0 24%;
  height:min(74vh, 840px);
  aspect-ratio:auto;
  margin:0;
  padding:0;
  border:0;
  overflow:hidden;
  border-radius:18px;
  background:#1a2330;
  opacity:.7;
  transform:scale(.86) translateX(0);
  box-shadow:0 12px 28px rgba(16,22,28,.12);
  transition:opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  pointer-events:auto;
  cursor:pointer;
}
.works-flow__item:first-child{transform:scale(.86) translateX(-6%)}
.works-flow__item:last-child{transform:scale(.86) translateX(6%)}
.works-flow__item.is-active{
  flex-basis:30%;
  height:min(78vh, 880px);
  opacity:1;
  z-index:2;
  transform:scale(1) translateX(0);
  box-shadow:0 18px 40px rgba(16,22,28,.18);
}
.works-flow__item img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}

.works-flow__btn{
  position:absolute;
  top:50%;
  z-index:20;
  pointer-events:auto;
  width:2.5rem;
  height:2.5rem;
  margin-top:-1.25rem;
  border:0;
  border-radius:50%;
  background:rgba(9,80,145,.9);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath fill='%23fff' d='M225 132.3 207.3 150 357.3 300 207.3 450 225 467.65 392.65 300 225 132.3Z'/%3E%3C/svg%3E");
  background-position:center;
  background-repeat:no-repeat;
  background-size:62%;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.works-flow__btn:hover{background-color:var(--fp-primary,#095091)}
.works-flow__btn--prev{left:4px;transform:rotate(180deg)}
.works-flow__btn--next{right:4px}

.works-flow__caption{
  display:none;
}
.works-flow__name{
  margin:0 0 6px;
  color:rgba(255,255,255,.94);
  font-family:var(--font);
  font-size:1.12rem;
  font-weight:700;
  line-height:1.2;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.works-flow__desc{
  margin:0 auto;
  max-width:42rem;
  color:rgba(255,255,255,.78);
  font-family:var(--font);
  font-size:.82rem;
  line-height:1.4;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}

@media (min-width:1120px){
  .projects-page .projects-rail{
    padding:2px 0 8px;
  }
  .projects-page .projects-rail > .wrap,
  .projects-page main > .projects-grid-section > .wrap.projects-board{
    max-width:none;
    width:100%;
    margin-inline:0;
    padding-inline:clamp(48px, 6.5vw, 96px);
    box-sizing:border-box;
  }
  .projects-page .projects-rail__meta{
    margin-bottom:6px;
    justify-content:flex-end;
  }
  .projects-page .projects-rail__inner{
    padding:4px 6px 4px 6px;
    border-radius:16px;
  }
  .projects-page .projects-rail__track-wrap{
    justify-content:flex-start;
  }
  .projects-page .projects-rail__track{
    justify-content:flex-start;
    flex:1 1 auto;
  }
  .projects-page .projects-grid-section{
    padding:36px 0 56px;
  }
  .projects-page .projects-board{
    grid-template-columns:1fr;
    align-items:start;
    gap:56px;
    height:auto;
    min-height:0;
    margin:0 0 36px;
  }
  .projects-page .projects-board__cards{
    display:grid;
    grid-template-rows:auto auto;
    min-width:0;
    min-height:0;
    height:auto;
  }
  .projects-page .projects-board .projects-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-template-rows:repeat(2, minmax(0, 1fr));
    gap:clamp(22px, 2.6vw, 36px);
    max-width:1240px;
    margin-inline:auto;
    min-height:0;
    height:auto;
  }
  .projects-page .projects-pager{
    margin:18px 0 8px;
  }
  .projects-page .projects-pager__btn{
    width:34px;
    height:34px;
  }

  .projects-page .projects-card{
    min-height:0;
  }
  .projects-page .projects-card__frame{
    border-radius:14px;
    min-height:0;
  }
  .projects-page .projects-card__media{
    aspect-ratio:16 / 10;
    height:auto;
    flex:none;
    min-height:0;
  }
  .projects-page .projects-card__badges{
    top:8px;
    left:8px;
    gap:6px;
  }
  .projects-page .projects-card__badge{
    padding:2px 8px;
    font-size:.62rem;
  }
  .projects-page .projects-card__body{
    flex:none;
    padding:7px 11px 9px;
  }
  .projects-page .projects-card__title{
    margin:0 0 2px;
    font-size:.84rem;
    line-height:1.25;
  }
  .projects-page .projects-card__loc{
    margin:0 0 4px;
    font-size:.72rem;
  }
  .projects-page .projects-card__loc svg{
    width:13px;
    height:13px;
  }
  .projects-page .projects-card__excerpt{
    margin:0;
    font-size:.74rem;
    line-height:1.3;
    -webkit-line-clamp:1;
  }

  .our-works{
    position:relative;
    top:auto;
    display:block;
    min-height:0;
    height:auto;
    padding:8px 0 24px;
  }
  .our-works__head{margin-bottom:12px}
  .our-works__stage{
    min-height:0;
    height:auto;
    display:block;
  }
  .works-flow{
    max-width:none;
    height:auto;
    min-height:0;
    margin:0 auto;
  }
  .works-flow__stage{
    height:auto;
    min-height:min(78vh, 880px);
  }
}

@media (max-width:1119px){
  .our-works{padding:8px 0 12px}
}

@media (max-width:700px){
  .works-flow{max-width:100%}
  .works-flow__stage,
  .works-flow__track{min-height:min(62vh, 640px)}
  .works-flow__track{padding:6px 40px 10px;gap:10px;justify-content:space-between}
  .works-flow__item{flex-basis:26%;height:min(56vh, 560px);border-radius:14px}
  .works-flow__item.is-active{flex-basis:36%;height:min(62vh, 640px)}
  .works-flow__caption{
    width:min(70%, 280px);
    bottom:16px;
    padding:40px 12px 12px;
  }
  .works-flow__btn{
    width:2.25rem;
    height:2.25rem;
    margin-top:-1.125rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .works-flow__item{transition:none}
}