/* ==========================================================================
   Work page — portfolio showcase
   ========================================================================== */

.work-body {
  overflow-y: auto;
  background: #fff;
  --work-content-top: clamp(108px, 14vh, 150px);
}

/* Preloader sits above sidebar/chrome on the white page. */
.work-body .preloader {
  z-index: 10;
}

/* Track + fill tuned for the white background (v2 uses yellow-on-green). */
.work-body .preloader__track {
  background: rgba(4, 37, 31, 0.12);
}

.work-body .preloader__fill {
  background: #17917d;
  box-shadow:
    0 0 6px 0 rgba(23, 145, 125, 0.55),
    8px 0 14px -2px rgba(23, 145, 125, 0.4);
}

.work-page {
  position: relative;
  min-height: 100dvh;
}

.work-page .grid-light {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}

/* Entrance: fade in after the top nav (name/nav rise in at 0.9–1.3s). */
.work-body .work-sidebar,
.work-body .work-stage,
.work-body .work-page__frost {
  opacity: 0;
}

.work-body.loaded .work-sidebar {
  animation: fadeIn 0.75s ease-out 1.5s both;
}

.work-body.loaded .work-stage {
  animation: fadeIn 0.75s ease-out 1.65s both;
}

.work-body.loaded .work-page__frost {
  animation: fadeIn 0.75s ease-out 1.65s both;
}

/* Header: only links capture clicks — empty bar area won't block the sidebar. */
.work-body .menu-bar {
  pointer-events: none;
}

.work-body .menu-bar a,
.work-body .menu-bar button {
  pointer-events: auto;
}

.work-sidebar {
  position: fixed;
  top: var(--work-content-top);
  left: calc(var(--content-side) + clamp(28px, 4vw, 72px));
  z-index: 6; /* above .menu-bar (4) and .chrome (3); outside .work-page stacking */
  width: clamp(168px, 14vw, 220px);
  pointer-events: auto;
}

.work-sidebar__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.work-sidebar__item {
  position: relative;
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 10px 14px 10px 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #4a5c57;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.25s ease,
    background-color 0.25s ease;
}

.work-sidebar__item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9aa8a3;
  transform: translateY(-50%);
  opacity: 1;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.work-sidebar__item:hover,
.work-sidebar__item:focus-visible {
  color: #04251f;
  outline: none;
}

.work-sidebar__item:hover:not(.is-active)::before,
.work-sidebar__item:focus-visible:not(.is-active)::before {
  background: #17917d;
  transform: translateY(-50%) scale(1.15);
}

.work-sidebar__item.is-active {
  background: linear-gradient(90deg, #0E6A5B 0%, #189883 100%);
  color: #fff;
}

.work-sidebar__item.is-active::before {
  background: #fffca1;
  opacity: 1;
}

/* --- Scrollable stage --- */

.work-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(100px, 12vh, 150px);
  margin-left: calc(var(--content-side) + clamp(220px, 20vw, 300px));
  margin-right: var(--content-side);
  padding:
    var(--work-content-top)
    clamp(18px, 2vw, 32px)
    clamp(120px, 16vh, 180px)
    clamp(12px, 1.5vw, 24px);
}

/* --- Project card --- */

.work-detail {
  scroll-margin-top: var(--work-content-top);
}

.work-detail__card {
  width: 100%;
  margin: 0;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  box-shadow:
    0 24px 80px rgba(4, 37, 31, 0.08),
    0 2px 8px rgba(4, 37, 31, 0.04);
}

.work-detail__meta {
  display: grid;
  grid-template-columns: minmax(200px, 0.95fr) 1.2fr 1.2fr;
  gap: clamp(28px, 3.2vw, 48px);
  align-items: start;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

.work-detail__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.work-detail__name {
  margin: 0;
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.1;
  color: #04251f;
}

.work-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-detail__badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid rgba(23, 145, 125, 0.35);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: #17917d;
  text-decoration: none;
  background: transparent;
}

.work-detail__badge--link:hover,
.work-detail__badge--link:focus-visible {
  border-color: #17917d;
  color: #0e6a5b;
  outline: none;
}

.work-detail__services {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
  width: 100%;
}

.work-detail__label {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: #04251f;
}

.work-detail__services .work-detail__label {
  margin: 0;
}

.work-detail__copy {
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.55;
  color: #808080;
}

.work-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-detail__tags li {
  padding: 7px 12px;
  border: 1px solid rgba(23, 145, 125, 0.35);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 400;
  color: #17917d;
  white-space: nowrap;
}

/* --- Gallery --- */

.work-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 14px;
}

.work-gallery__item {
  margin: 0;
}

.work-gallery__hero {
  grid-column: 1;
  grid-row: 1 / 3;
}

.work-gallery__top-right {
  grid-column: 2;
  grid-row: 1;
}

.work-gallery__mid-right {
  grid-column: 2;
  grid-row: 2;
}

.work-gallery__wide {
  grid-column: 1;
  grid-row: 3;
}

.work-gallery__panel {
  grid-column: 2;
  grid-row: 3;
}

.work-gallery__frame {
  width: 100%;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(214, 236, 255, 0.95) 0%, rgba(236, 245, 255, 0.9) 48%, rgba(255, 255, 255, 0.95) 100%);
  box-shadow: inset 0 0 0 1px rgba(4, 37, 31, 0.05);
}

.work-gallery__hero .work-gallery__frame {
  aspect-ratio: 16 / 10;
  min-height: 280px;
}

.work-gallery__top-right .work-gallery__frame,
.work-gallery__mid-right .work-gallery__frame {
  aspect-ratio: 4 / 3;
  min-height: 132px;
}

.work-gallery__wide .work-gallery__frame {
  aspect-ratio: 16 / 9;
  min-height: 220px;
}

.work-gallery__panel .work-gallery__frame {
  aspect-ratio: 4 / 3;
  min-height: 220px;
}

.work-gallery__frame--dashboard {
  background:
    radial-gradient(circle at 72% 28%, rgba(23, 145, 125, 0.12), transparent 34%),
    linear-gradient(145deg, #d9ecff 0%, #eef6ff 55%, #fff 100%);
}

.work-gallery__frame--map {
  background:
    linear-gradient(180deg, rgba(23, 145, 125, 0.08), transparent 40%),
    linear-gradient(145deg, #dff1ff 0%, #f4f9ff 100%);
}

.work-gallery__frame--list,
.work-gallery__frame--analytics {
  background:
    linear-gradient(145deg, #e7f4ff 0%, #f7fbff 100%);
}

.work-gallery__frame--warehouse {
  background:
    radial-gradient(circle at 30% 70%, rgba(23, 145, 125, 0.1), transparent 38%),
    linear-gradient(145deg, #d4ebff 0%, #edf6ff 100%);
}

/* Photo galleries: consistent bento grid. Side cells set row height;
   spanning cells stretch to match. Images fill via absolute cover. */
.work-gallery--photos {
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: auto auto auto;
  align-items: stretch;
}

.work-gallery--photos .work-gallery__item {
  min-width: 0;
  min-height: 0;
  display: flex;
}

.work-gallery--photos .work-gallery__frame {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  background: #e8eeeb;
  box-shadow: inset 0 0 0 1px rgba(4, 37, 31, 0.06);
  overflow: hidden;
}

.work-gallery--photos .work-gallery__frame--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* Default / 5 shots: hero (2 rows) + 2 side + wide + panel */
.work-gallery--photos .work-gallery__top-right .work-gallery__frame,
.work-gallery--photos .work-gallery__mid-right .work-gallery__frame,
.work-gallery--photos .work-gallery__panel .work-gallery__frame {
  aspect-ratio: 4 / 3;
  min-height: unset;
}

.work-gallery--photos .work-gallery__wide .work-gallery__frame {
  aspect-ratio: 16 / 9;
  min-height: unset;
}

.work-gallery--photos .work-gallery__hero .work-gallery__frame {
  aspect-ratio: unset;
  min-height: unset;
  height: 100%;
}

.work-gallery--photos[data-count="1"],
.work-gallery[data-count="1"] {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.work-gallery--photos[data-count="1"] .work-gallery__hero,
.work-gallery[data-count="1"] .work-gallery__hero {
  grid-column: 1;
  grid-row: auto;
}

.work-gallery--photos[data-count="1"] .work-gallery__hero .work-gallery__frame,
.work-gallery[data-count="1"] .work-gallery__hero .work-gallery__frame {
  aspect-ratio: 16 / 10;
}

.work-gallery--photos[data-count="2"],
.work-gallery[data-count="2"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.work-gallery--photos[data-count="2"] .work-gallery__hero,
.work-gallery--photos[data-count="2"] .work-gallery__top-right,
.work-gallery[data-count="2"] .work-gallery__hero,
.work-gallery[data-count="2"] .work-gallery__top-right {
  grid-column: auto;
  grid-row: auto;
}

.work-gallery--photos[data-count="2"] .work-gallery__hero .work-gallery__frame,
.work-gallery--photos[data-count="2"] .work-gallery__top-right .work-gallery__frame,
.work-gallery[data-count="2"] .work-gallery__hero .work-gallery__frame,
.work-gallery[data-count="2"] .work-gallery__top-right .work-gallery__frame {
  aspect-ratio: 4 / 3;
  min-height: unset;
}

.work-gallery--photos[data-count="3"],
.work-gallery[data-count="3"] {
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: auto auto;
}

.work-gallery--photos[data-count="3"] .work-gallery__hero,
.work-gallery[data-count="3"] .work-gallery__hero {
  grid-column: 1;
  grid-row: 1 / 3;
}

.work-gallery--photos[data-count="3"] .work-gallery__top-right,
.work-gallery[data-count="3"] .work-gallery__top-right {
  grid-column: 2;
  grid-row: 1;
}

.work-gallery--photos[data-count="3"] .work-gallery__mid-right,
.work-gallery[data-count="3"] .work-gallery__mid-right {
  grid-column: 2;
  grid-row: 2;
}

/* Stacked rows: full-width shots + proportional pair rows */
.work-gallery--full-pair,
.work-gallery--rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.work-gallery--full-pair .work-gallery__item,
.work-gallery--rows .work-gallery__item {
  margin: 0;
  min-width: 0;
}

.work-gallery--full-pair .work-gallery__full,
.work-gallery--rows .work-gallery__full {
  width: 100%;
}

.work-gallery--full-pair .work-gallery__pair,
.work-gallery--rows .work-gallery__pair {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: 100%;
}

.work-gallery--full-pair .work-gallery__pair-a,
.work-gallery--rows .work-gallery__pair-a {
  flex: var(--pair-a, 1) 1 0;
}

.work-gallery--full-pair .work-gallery__pair-b,
.work-gallery--rows .work-gallery__pair-b {
  flex: var(--pair-b, 1) 1 0;
}

.work-gallery--full-pair .work-gallery__frame,
.work-gallery--rows .work-gallery__frame {
  width: 100%;
  height: auto;
  min-height: unset;
  aspect-ratio: unset;
  overflow: hidden;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.work-gallery--full-pair .work-gallery__frame--photo img,
.work-gallery--rows .work-gallery__frame--photo img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: unset;
  object-position: unset;
}

.work-gallery--photos[data-count="4"],
.work-gallery[data-count="4"] {
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: auto auto auto;
}

.work-gallery--photos[data-count="4"] .work-gallery__wide,
.work-gallery[data-count="4"] .work-gallery__wide {
  grid-column: 1 / -1;
  grid-row: 3;
}

.work-gallery__extra {
  grid-column: auto;
  grid-row: auto;
}

.work-gallery--photos .work-gallery__extra .work-gallery__frame {
  aspect-ratio: 16 / 10;
  min-height: unset;
}

/* Extra images beyond the 5-slot mosaic */
.work-gallery--photos[data-count="6"] .work-gallery__extra:nth-child(6),
.work-gallery--photos[data-count="7"] .work-gallery__extra:nth-child(7),
.work-gallery--photos[data-count="8"] .work-gallery__extra:nth-child(8) {
  grid-column: 1 / -1;
}

.work-gallery--photos[data-count="8"] .work-gallery__extra:nth-child(6) {
  grid-column: 1;
  grid-row: 4;
}

.work-gallery--photos[data-count="8"] .work-gallery__extra:nth-child(7) {
  grid-column: 2;
  grid-row: 4;
}

.work-gallery--photos[data-count="8"] .work-gallery__extra:nth-child(8) {
  grid-column: 1 / -1;
  grid-row: 5;
}

/* --- Top + bottom frost (same as v2 work section) --- */

.work-page__frost {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  --frost-blur: 20px;
  --frost-band: 120px;
  backdrop-filter: blur(var(--frost-blur));
  -webkit-backdrop-filter: blur(var(--frost-blur));
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    transparent var(--frost-band),
    transparent calc(100% - var(--frost-band)),
    #000 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    transparent var(--frost-band),
    transparent calc(100% - var(--frost-band)),
    #000 100%
  );
}

/* --- Nav current link --- */

.roll.is-current {
  pointer-events: none;
}

.roll.is-current .roll__inner > span:first-child {
  color: #17917d;
}

/* --- Responsive --- */

@media (max-width: 1100px) {
  .work-detail__meta {
    grid-template-columns: 1fr 1fr;
  }

  .work-detail__intro {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  .work-detail__meta {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .work-detail__intro {
    grid-column: auto;
  }
}

@media (max-width: 860px) {
  .work-sidebar {
    display: none;
  }

  .work-stage {
    margin-left: var(--content-side);
    margin-right: var(--content-side);
    width: auto;
    padding:
      var(--work-content-top)
      clamp(12px, 3vw, 20px)
      clamp(100px, 14vh, 140px);
  }

  .work-detail__card {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(18px, 4vw, 28px) clamp(12px, 3vw, 20px);
  }

  .work-gallery,
  .work-gallery--photos,
  .work-gallery--photos[data-count="1"],
  .work-gallery--photos[data-count="2"],
  .work-gallery--photos[data-count="3"],
  .work-gallery--photos[data-count="4"],
  .work-gallery--photos[data-count="5"],
  .work-gallery--photos[data-count="6"],
  .work-gallery--photos[data-count="7"],
  .work-gallery--photos[data-count="8"],
  .work-gallery[data-count="1"],
  .work-gallery[data-count="2"],
  .work-gallery[data-count="3"],
  .work-gallery[data-count="4"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .work-gallery__hero,
  .work-gallery__top-right,
  .work-gallery__mid-right,
  .work-gallery__wide,
  .work-gallery__panel,
  .work-gallery__extra,
  .work-gallery--photos[data-count="1"] .work-gallery__hero,
  .work-gallery--photos[data-count="2"] .work-gallery__hero,
  .work-gallery--photos[data-count="2"] .work-gallery__top-right,
  .work-gallery--photos[data-count="3"] .work-gallery__hero,
  .work-gallery--photos[data-count="3"] .work-gallery__top-right,
  .work-gallery--photos[data-count="3"] .work-gallery__mid-right,
  .work-gallery--photos[data-count="4"] .work-gallery__wide,
  .work-gallery--photos[data-count="8"] .work-gallery__extra:nth-child(6),
  .work-gallery--photos[data-count="8"] .work-gallery__extra:nth-child(7),
  .work-gallery--photos[data-count="8"] .work-gallery__extra:nth-child(8) {
    grid-column: 1;
    grid-row: auto;
  }

  .work-gallery--full-pair .work-gallery__pair,
  .work-gallery--rows .work-gallery__pair {
    flex-direction: column;
  }

  .work-gallery--full-pair .work-gallery__pair-a,
  .work-gallery--full-pair .work-gallery__pair-b,
  .work-gallery--rows .work-gallery__pair-a,
  .work-gallery--rows .work-gallery__pair-b {
    flex: none;
    width: 100%;
  }

  .work-gallery--photos .work-gallery__hero .work-gallery__frame,
  .work-gallery--photos .work-gallery__top-right .work-gallery__frame,
  .work-gallery--photos .work-gallery__mid-right .work-gallery__frame,
  .work-gallery--photos .work-gallery__wide .work-gallery__frame,
  .work-gallery--photos .work-gallery__panel .work-gallery__frame,
  .work-gallery--photos .work-gallery__extra .work-gallery__frame {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: unset;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-sidebar__item {
    transition: none;
  }

  .work-body .work-sidebar,
  .work-body .work-stage,
  .work-body .work-page__frost,
  .work-body.loaded .work-sidebar,
  .work-body.loaded .work-stage,
  .work-body.loaded .work-page__frost {
    opacity: 1;
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

html {
  scroll-behavior: smooth;
}