/* ── Work page (Selected work) ───────────────────────────────────────────────
   Same language as the refreshed home and services pages: one plum (#4E1838),
   thick rules, hard offset shadows. Each project is a photo tile with a plum
   veil, the project name at the bottom and the client logo straight on the
   picture (no box). The logo is dropped on phones; the big year is dropped
   everywhere (it is already in the line under the name).
   Scoped to the work route. The photos are already used on the case pages.
   ──────────────────────────────────────────────────────────────────────── */

:root main[data-route="work"] .page-head{
  padding:var(--stack-sm) 0 var(--stack-lg);
  border-bottom:3px solid #4E1838;
}

:root main[data-route="work"] .page-head .container-wide{
  display:block;
}

:root main[data-route="work"] .page-head h1{
  font-size:clamp(40px,5.6vw,84px);
  margin-top:12px;
  text-wrap:balance;
}

:root main[data-route="work"] .page-head .lede{
  max-width:52ch;
  margin-top:var(--stack-md);
}

:root main[data-route="work"] .work-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:34px;
  border-top:0;
  padding:var(--stack-xl) 0 var(--stack-xl);
}

:root main[data-route="work"] .work-row,
:root main[data-route="work"] .work-row:hover{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:stretch;
  gap:0;
  padding:0;
  aspect-ratio:3 / 4;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  border:3px solid #4E1838;
  box-shadow:9px 9px 0 #4E1838;
  background:#4E1838;
  transition:transform .2s ease-out,box-shadow .2s ease-out;
}

:root main[data-route="work"] .work-row:hover{
  transform:translate(-4px,-4px);
  box-shadow:13px 13px 0 #4E1838;
}

:root main[data-route="work"] .work-row::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-size:cover;
  background-position:center;
  transition:transform 1s var(--ease);
}

:root main[data-route="work"] .work-row:hover::before{
  transform:scale(1.06);
}

:root main[data-route="work"] .work-row::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(78,24,56,0.05) 25%,rgba(78,24,56,0.55) 60%,rgba(78,24,56,0.92) 100%);
}

:root main[data-route="work"] .work-row[href$="case-cellar"]::before{
  background-image:url(/assets/work/street-cellar/food-02.png);
}

:root main[data-route="work"] .work-row[href$="case-bewtr"]::before{
  background-image:url(/assets/work/bewtr/editorial-03.png);
}

:root main[data-route="work"] .work-row[href$="case-gstaad"]::before{
  background-image:url(/assets/work/gstaad-palace/hero.png);
}

:root main[data-route="work"] .work-row .yr{
  display:none;
}

:root main[data-route="work"] .work-row .thumb,
:root main[data-route="work"] .work-row .cc-work-image.thumb,
:root main[data-route="work"] .work-row .cc-work-image.thumb--logo,
:root main[data-route="work"] .work-row .cc-work-image.thumb--logo:has(img){
  position:absolute;
  top:20px;
  left:22px;
  width:132px;
  height:84px;
  aspect-ratio:auto;
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:0;
}

:root main[data-route="work"] .work-row .thumb,
:root main[data-route="work"] .work-row .cc-work-image.thumb,
:root main[data-route="work"] .work-row .cc-work-image.thumb--logo,
:root main[data-route="work"] .work-row .cc-work-image.thumb--logo:has(img){
  position:absolute;
  overflow:visible;
  padding:0;
  background:none;
}

:root main[data-route="work"] .work-row .thumb img{
  position:absolute;
  inset:0;
  margin:0;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:left top;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));
}

:root main[data-route="work"] .work-row > div{
  padding:0 72px 28px 26px;
  color:#EFE9DD;
}

:root main[data-route="work"] .work-row h3{
  color:#EFE9DD;
  font-size:clamp(32px,3.2vw,46px);
  margin:0 0 10px;
}

:root main[data-route="work"] .work-row .meta{
  display:block;
  color:#EFE9DD;
  opacity:.85;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  line-height:1.7;
}

:root main[data-route="work"] .work-row .arr{
  position:absolute;
  right:22px;
  bottom:22px;
  font-size:32px;
  color:#EFE9DD;
}

@media (max-width:640px){
  :root main[data-route="work"] .work-row .thumb,
  :root main[data-route="work"] .work-row .cc-work-image.thumb,
  :root main[data-route="work"] .work-row .cc-work-image.thumb--logo,
  :root main[data-route="work"] .work-row .cc-work-image.thumb--logo:has(img){
    display:none;
  }
}

@media (max-width:1000px){
  :root main[data-route="work"] .work-list{
    grid-template-columns:1fr;
    max-width:560px;
    margin-inline:auto;
  }
  :root main[data-route="work"] .work-row,
  :root main[data-route="work"] .work-row:hover{
    aspect-ratio:4 / 3.4;
  }
}