/* Realisations */
#realisations{
  --project-panel-height:min(64svh, 630px);
  --project-thumbs-height:160px;
  --project-media-radius:var(--radius-sm);
  --project-media-radius-inner:calc(var(--radius-sm) - 6px);
}
#realisations > .container{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  min-height:calc(100svh - var(--header-height) - 144px);
}
#realisations .projectsHead{
  display:block;
}
#realisations .projectsIntro{
  min-width:0;
}
#realisations .projectsTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
#realisations .projectsIntro h2{
  margin:0;
}
#realisations .projectsIntro p{
  margin:8px 0 0;
}
#realisations .projectsNav{
  display:flex;
  align-items:center;
  gap:8px;
}
.projectsCarousel{
  display:grid;
  gap:14px;
  flex:1;
  min-height:0;
  touch-action:pan-y;
}
.projectsSlides{
  position:relative;
  min-height:0;
  min-height:var(--project-panel-height);
}
.projectSlide{
  display:none;
  gap:18px;
  align-items:stretch;
}
.projectSlide.is-active{
  display:grid;
  grid-template-columns:minmax(250px, .34fr) minmax(0, .66fr);
  height:var(--project-panel-height);
  min-height:0;
}
.projectMeta{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(250,245,238,.94) 100%),
    linear-gradient(180deg, rgba(213,115,75,.10) 0%, rgba(172,73,40,.05) 100%);
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
  min-height:0;
}
.projectMeta h3{
  margin:0;
  font-size:1.58rem;
  line-height:1.08;
  color:var(--accent2);
}
.projectSummary{
  margin:0;
  color:var(--accent);
  font-size:.98rem;
}
.projectActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
}
.projectGallery{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at top left, rgba(213,115,75,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(244,236,228,.88) 100%);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:block;
  height:100%;
  min-height:0;
}
.projectStage{
  margin:0;
  position:relative;
  aspect-ratio:auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(241,233,224,.92) 100%);
  display:grid;
  place-items:center;
  padding:14px;
  min-height:0;
  height:100%;
  max-height:none;
  overflow:hidden;
}
.projectStageImg{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:var(--project-media-radius);
  background:rgba(255,255,255,.7);
}
.projectStageCaption{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(31,27,24,.64);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
}
.projectThumbs{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-rows:minmax(0, 140px);
  gap:10px;
  padding:0;
  background:transparent;
  align-items:stretch;
  align-content:start;
  flex:1 1 auto;
  min-height:0;
}
.projectThumbs--count-2 .projectThumb{
  aspect-ratio:auto;
}
.projectThumbs--count-2 .projectThumb img{
  object-fit:contain;
}
.projectThumb{
  border:1px solid rgba(31,27,24,.08);
  border-radius:var(--project-media-radius);
  background:rgba(255,255,255,.82);
  padding:4px;
  cursor:pointer;
  display:block;
  height:min(140px, 100%);
  max-height:140px;
  min-width:0;
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.projectThumb:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--accent2) 35%, transparent);
  box-shadow:0 8px 16px rgba(0,0,0,.08);
}
.projectThumb.is-active{
  border-color:var(--accent2);
  box-shadow:0 0 0 3px rgba(172,73,40,.12);
}
.projectThumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--project-media-radius-inner);
  background:rgba(255,255,255,.7);
}
.projectsDots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}
.projectsDot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent2) 42%, transparent);
  background:color-mix(in srgb, var(--accent2) 26%, white);
  padding:0;
  cursor:pointer;
}
.projectsDot.is-active{
  background:var(--accent2);
  transform:scale(1.18);
}

@media (max-width: 1040px){
  #realisations{
    --project-panel-height:auto;
    --project-thumbs-height:auto;
  }
  #realisations > .container{
    min-height:auto;
  }
  .projectsSlides{
    min-height:0;
  }
  .projectSlide.is-active{
    grid-template-columns:1fr;
    height:auto;
  }
  .projectMeta,
  .projectGallery{
    height:auto;
  }
}

@media (max-width: 680px){
  #realisations .projectsNav{
    justify-content:flex-end;
  }
  .projectMeta{
    padding:18px;
  }
  .projectMeta h3{
    font-size:1.45rem;
  }
  .projectStage{
    aspect-ratio:4/3;
    max-height:none;
    padding:12px;
  }
  .projectStageCaption{
    left:12px;
    bottom:12px;
  }
}