/* =====================================================================
   ZAZA v60 — Selected Work / click-to-preview + glass project chooser
   ===================================================================== */

/* The image is the left-side stage; project selectors live on the right. */
.work-scene__sticky{
  grid-template-columns:minmax(520px,1.28fr) minmax(320px,.72fr)!important;
}
.work-visual{
  grid-column:1!important;
  grid-row:2!important;
  cursor:pointer;
}
.work-index{
  grid-column:2!important;
  grid-row:2!important;
}

/* Project selectors are intentionally buttons now: first click selects,
   second click opens the route chooser. */
.work-index__item{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:100%!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  font:inherit!important;
  text-align:left!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent;
}
.work-index__item:hover:not(.is-active){opacity:.46!important;transform:translate3d(4px,0,0)!important}
.work-index__item:focus-visible{outline:1px solid currentColor!important;outline-offset:7px!important}

.work-preview{
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  padding:0!important;
  width:100%!important;
  color:inherit!important;
  text-align:left!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent;
}
.work-preview:not(.is-active){pointer-events:none!important}
.work-preview.is-active{pointer-events:auto!important}
.work-preview.is-active::before{
  content:"OPEN OPTIONS  ↗";
  position:absolute;
  right:16px;
  bottom:15px;
  z-index:12;
  padding:9px 11px 8px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  background:rgba(8,8,8,.22);
  color:#fff;
  font:600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 10px 34px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.22);
  pointer-events:none;
}
.work-preview:focus-visible{outline:2px solid currentColor!important;outline-offset:-5px!important}

/* ---------------------------------------------------------------------
   Apple-like glass decision sheet
   --------------------------------------------------------------------- */
html.project-choice-open,body.project-choice-open{overflow:hidden!important}
.project-choice{
  position:fixed;
  inset:0;
  z-index:50000;
  display:grid;
  place-items:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .32s cubic-bezier(.22,.7,.2,1);
  isolation:isolate;
}
.project-choice.is-open{opacity:1;pointer-events:auto}
.project-choice__backdrop{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  padding:0;border:0;
  background:rgba(3,3,5,.34);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  cursor:default;
}
.project-choice__sheet{
  position:relative;
  width:min(610px,calc(100vw - 48px));
  overflow:hidden;
  border:1px solid rgba(255,255,255,.54);
  border-radius:34px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.80),rgba(238,239,243,.63) 54%,rgba(255,255,255,.70));
  color:#101114;
  box-shadow:
    0 36px 110px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(255,255,255,.35);
  backdrop-filter:blur(42px) saturate(190%);
  -webkit-backdrop-filter:blur(42px) saturate(190%);
  transform:translate3d(0,22px,0) scale(.965);
  opacity:.35;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .28s ease;
}
.project-choice.is-open .project-choice__sheet{transform:none;opacity:1}
.project-choice__shine{
  position:absolute;
  width:68%;
  aspect-ratio:1;
  left:-16%;top:-62%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.72),rgba(255,255,255,.18) 38%,transparent 70%);
  filter:blur(12px);
  pointer-events:none;
}
.project-choice__top{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 18px 10px 22px;
  font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;
  color:rgba(16,17,20,.48);
}
.project-choice__close{
  display:grid;place-items:center;
  width:34px;height:34px;
  padding:0;border:1px solid rgba(16,17,20,.08);border-radius:50%;
  background:rgba(255,255,255,.48);
  color:#101114;
  font:400 24px/1 system-ui,sans-serif;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}
.project-choice__body{position:relative;padding:28px 30px 34px}
.project-choice__number{
  display:block;
  margin-bottom:8px;
  font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;
  color:rgba(16,17,20,.38);
}
.project-choice__body h3{
  margin:0;
  font-size:clamp(62px,7vw,108px);
  line-height:.78;
  letter-spacing:-.085em;
  font-weight:650;
  overflow-wrap:normal;
  word-break:normal;
}
.project-choice__body p{
  margin:22px 0 0;
  font-size:17px;
  line-height:1.15;
  letter-spacing:-.025em;
  color:rgba(16,17,20,.55);
}
.project-choice__actions{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:0 12px 12px;
}
.project-choice__action{
  appearance:none;
  -webkit-appearance:none;
  min-width:0;
  min-height:104px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding:17px 18px;
  border:1px solid rgba(16,17,20,.08);
  border-radius:23px;
  background:rgba(255,255,255,.42);
  color:#101114;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80),0 8px 30px rgba(0,0,0,.04);
  transition:transform .24s cubic-bezier(.2,.75,.25,1),background .24s ease,box-shadow .24s ease;
}
.project-choice__action:hover,.project-choice__action:focus-visible{
  transform:translateY(-2px);
  background:rgba(255,255,255,.70);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 36px rgba(0,0,0,.07);
  outline:none;
}
.project-choice__action--primary{
  background:rgba(20,20,22,.92);
  color:#fff;
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 34px rgba(0,0,0,.15);
}
.project-choice__action--primary:hover,.project-choice__action--primary:focus-visible{background:rgba(20,20,22,.98)}
.project-choice__action span{display:grid;gap:5px;min-width:0}
.project-choice__action small{
  font:600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  opacity:.5;
}
.project-choice__action strong{
  font-size:17px;
  line-height:1;
  letter-spacing:-.035em;
  font-weight:620;
}
.project-choice__action i{font:400 25px/1 system-ui,sans-serif;font-style:normal;opacity:.72}

/* Tablet / portrait phone: visual first, selectors below it. The interaction
   remains identical: tap selector to preview, tap it again or tap image to choose. */
@media(max-width:980px){
  .work-scene__sticky{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    height:auto!important;
    min-height:auto!important;
    overflow:visible!important;
  }
  .work-scene__head{grid-column:1!important;grid-row:1!important}
  .work-visual{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    margin:5vh 0 3vh!important;
    max-height:none!important;
    aspect-ratio:1.55/1!important;
    border-radius:20px!important;
  }
  .work-index{
    grid-column:1!important;
    grid-row:3!important;
    width:100%!important;
    margin:0!important;
  }
  .work-index__item{padding:12px 0 13px!important}
  .work-preview.is-active::before{right:12px;bottom:12px;font-size:7px}
  .project-choice{align-items:end;padding:12px 12px max(12px,env(safe-area-inset-bottom))}
  .project-choice__sheet{
    width:100%;
    max-width:620px;
    border-radius:30px;
    transform:translate3d(0,44px,0) scale(.985);
  }
  .project-choice__body{padding:25px 24px 28px}
  .project-choice__body h3{font-size:clamp(50px,13vw,88px)}
}

@media(max-width:560px){
  .work-visual{aspect-ratio:1.28/1!important;margin-top:4vh!important}
  .work-index__item{grid-template-columns:28px minmax(0,1fr)!important}
  .work-index__item>span:not(.work-index__number){font-size:clamp(34px,10vw,52px)!important}
  .work-index__item small{font-size:9px!important;max-width:28ch!important}
  .project-choice__top{padding:14px 14px 7px 18px}
  .project-choice__body{padding:19px 20px 22px}
  .project-choice__body h3{font-size:clamp(46px,14.5vw,70px)}
  .project-choice__body p{font-size:15px;margin-top:16px}
  .project-choice__actions{grid-template-columns:1fr;padding:0 8px 8px;gap:7px}
  .project-choice__action{min-height:78px;border-radius:20px;padding:14px 15px;align-items:center}
  .project-choice__action strong{font-size:16px}
}

/* Phone landscape keeps the intended wide composition: visual left, names right. */
body.is-phone-experience.is-landscape .work-scene__sticky{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(235px,.85fr)!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  column-gap:22px!important;
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
}
body.is-phone-experience.is-landscape .work-scene__head{grid-column:1/-1!important;grid-row:1!important}
body.is-phone-experience.is-landscape .work-visual{
  grid-column:1!important;grid-row:2!important;
  margin:0!important;
  width:100%!important;
  height:min(54vh,235px)!important;
  aspect-ratio:auto!important;
  align-self:center!important;
}
body.is-phone-experience.is-landscape .work-index{
  grid-column:2!important;grid-row:2!important;
  align-self:center!important;
  margin:0!important;
}
body.is-phone-experience.is-landscape .work-index__item{padding:6px 0 7px!important}
body.is-phone-experience.is-landscape .work-index__item>span:not(.work-index__number){font-size:clamp(24px,7.1vh,38px)!important}
body.is-phone-experience.is-landscape .work-index__item small{font-size:7px!important;line-height:1.1!important}

@media(prefers-reduced-motion:reduce){
  .project-choice,.project-choice__sheet,.project-choice__action{transition:none!important}
}