/* ===========================================================
   AURALIS — Work / Projects page
   Loads ON TOP of tokens.css + site.css. Black background,
   Fountain Frolic text, Plankton Green accents.
   All type maps to roles in stylesheet.md (FROZEN):
   Display · Subhead · Title-S · Body · Body-S · Caption · Eyebrow.
   =========================================================== */

/* =================== HERO =================== */
.work-hero{
  position:relative;
  padding:clamp(150px,20vw,250px) var(--shell) clamp(34px,5vw,60px);
  text-align:center;
}
/* Homepage hero gradient video, reused here. Covers the hero band and fades to
   black at the bottom so the project listing below continues seamlessly. The
   poster still shows while the video loads / where autoplay is blocked. */
/* NB: do NOT clip the hero — the open filter dropdown extends below it and
   would be cut off / hidden behind the cards. The video stays bounded anyway
   (absolute, inset:0, object-fit:cover). */
.work-hero{overflow:visible}
.work-hero__media{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;object-fit:cover;display:block;
}
.work-hero::after{                       /* fade the video into the black page */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 22%,transparent 58%,var(--ink) 100%);
}
.work-hero__title{position:relative;z-index:1}
/* keep the filter (and its open dropdown) above the project cards below */
.work-hero .work-filter{position:relative;z-index:30}
.work-hero__title{                       /* Display */
  font-size:clamp(2.6rem,12vw,7.4rem);
  font-weight:500;letter-spacing:-.035em;line-height:.96;
}

/* =================== FILTER =================== */
.work-filter{
  max-width:680px;margin:clamp(28px,4vw,48px) auto 0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.work-filter__label{font-size:15px;color:var(--cream-60);letter-spacing:-.01em}
.work-filter__controls{display:flex;align-items:center;justify-content:flex-end;gap:10px}

/* custom dropdown — bordered field (reads as a real control: border + hover + open states) */
.dropdown{position:relative}
.dropdown.open{z-index:50}
.dropdown__toggle{
  display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-width:190px;
  font-size:14px;color:var(--cream);letter-spacing:-.011em;line-height:1;cursor:pointer;
  background:rgba(230,228,196,.03);border:1px solid var(--line-2);border-radius:8px;padding:12px 15px;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.dropdown__toggle:hover{border-color:var(--cream-40)}
.dropdown.open .dropdown__toggle{border-color:var(--cream);background:rgba(230,228,196,.06)}
.dropdown__value{color:var(--cream)}
.dropdown__caret{
  display:inline-flex;align-items:center;color:var(--cream);line-height:1;
  transition:transform .3s var(--ease);
}
.dropdown__caret svg{width:17px;height:17px;display:block}  /* sharp chevron, a touch larger */
.dropdown.open .dropdown__caret{transform:rotate(180deg)}
.dropdown__menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:100%;width:max-content;max-width:280px;
  list-style:none;margin:0;background:#050505;border:1px solid var(--line-2);border-radius:8px;
  padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);max-height:340px;overflow:auto;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  box-shadow:0 26px 60px rgba(0,0,0,.7);
}
.dropdown.open .dropdown__menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown__menu li{
  display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--cream-60);
  padding:10px 11px;border-radius:6px;cursor:pointer;transition:color .2s,background .2s;white-space:nowrap;
}
.dropdown__menu li::before{content:"\2713";flex:0 0 auto;width:15px;color:var(--green);opacity:0;
  font-size:13px;transition:opacity .2s} /* green check on the active option */
.dropdown__menu li:hover{color:var(--cream);background:rgba(230,228,196,.06)}
.dropdown__menu li.is-active{color:var(--cream)}
.dropdown__menu li.is-active::before{opacity:1}

/* =================== WORK BODY =================== */
.work{padding:clamp(30px,4vw,56px) var(--shell) clamp(70px,11vw,150px)}
.work__sections{display:flex;flex-direction:column;gap:clamp(56px,8vw,120px)}
.work__count{font-size:14px;color:var(--cream-60);letter-spacing:-.01em}
.work__empty{
  display:none;font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:500;
  letter-spacing:-.02em;color:var(--cream-40);padding:clamp(40px,8vw,100px) 0;text-align:center;
}
.work.is-empty .work__empty{display:block}

/* ---- featured row: small + large (default), flipped = large + small ----
   1fr : 2fr  ->  the large card is exactly double the width of the small one;
   with both at the same aspect ratio that also makes it double the height. ---- */
.feat-row{
  display:grid;grid-template-columns:1fr 2fr;
  gap:clamp(14px,1.8vw,30px);align-items:start;
}
.feat-row--flip{grid-template-columns:2fr 1fr}
.feat-row.is-hidden,.work-grid.is-hidden{display:none}

/* ---- 3 × 2 grid ---- */
.work-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  /* column gap matches the featured row's gap so cards are evenly spaced */
  gap:clamp(24px,2.8vw,40px) clamp(14px,1.8vw,30px);
}

/* =================== PROJECT ITEM =================== */
.work-item{display:block}
.work-item.is-hidden{display:none}

.work-item__media{
  position:relative;overflow:hidden;border-radius:3px;
  background:linear-gradient(160deg,var(--green),var(--black));
  aspect-ratio:16/10;                     /* clean landscape — small card size */
}
.work-item__media img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform 1.1s var(--ease-out);
}
.work-item:hover .work-item__media img{transform:scale(1.035)}   /* subtle hover zoom */

/* every card keeps the 16:10 ratio; the large featured card is simply 2× wide
   (via the 2fr column above), so it lands at double the small card's height. */

/* text bar */
.work-item__bar{padding-top:16px}
/* title + tags share a row: title on the left, tag chips pushed to the far
   right (auto space between), both aligned to the top */
.work-item__head{display:flex;align-items:flex-start;gap:14px}
.work-item__titlewrap{min-width:0}       /* keeps the inline title underline hugging text */
.work-item__cat{                          /* Disciplines — pill row, top-right */
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;
  margin-left:auto;flex:0 1 auto;
}
.work-tag{                                /* Mirrors the homepage .pill, inverted */
  display:inline-flex;align-items:center;background:var(--ink);color:var(--cream);
  border:1px solid var(--line-2);border-radius:8px;
  padding:5px 13px;font-size:11px;font-weight:500;letter-spacing:.02em;line-height:1;
}
.work-item__title{                        /* Title-S (grid default) */
  font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:500;
  letter-spacing:-.02em;line-height:1.2;color:var(--cream);
  display:inline;background-image:linear-gradient(var(--green),var(--green));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .45s var(--ease);
}
.work-item:hover .work-item__title{background-size:100% 1px}
.work-item__desc{                         /* Body-S */
  margin-top:8px;font-size:14px;line-height:1.5;color:var(--cream-60);max-width:48ch;
}

/* featured items get a larger title + body (Subhead / Body) */
.feat-row .work-item--lg .work-item__title{
  font-size:clamp(1.4rem,2.4vw,2.2rem);letter-spacing:-.025em;line-height:1.1;
}
.feat-row .work-item__desc{font-size:15px;max-width:42ch}

/* =================== RESPONSIVE =================== */
@media (max-width:880px){
  /* stack featured cards; both keep the 16:10 ratio at full width */
  .feat-row,.feat-row--flip{grid-template-columns:1fr;gap:clamp(40px,8vw,56px)}
  .work-grid{grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,44px) 20px}
  /* give the filter room to breathe under the title… */
  .work-filter{flex-wrap:wrap;gap:14px;margin-top:clamp(42px,10vw,60px)}
  .work-filter__controls{gap:10px}
  /* …and a bit more space before the first project */
  .work{padding-top:clamp(44px,8vw,64px)}
}
@media (max-width:560px){
  .work-grid{grid-template-columns:1fr}
  /* the two toggles have a 190px min-width each, which overflows narrow phones.
     Let the controls span the full row and each toggle flex down to share it. */
  .work-filter__controls{width:100%}
  .work-filter__controls .dropdown{flex:1 1 0;min-width:0}
  .dropdown__toggle{width:100%;min-width:0;gap:8px;padding:12px 13px}
  .dropdown__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* keep both filter menus fully on-screen: the left ("disciplines") menu opens
     rightward, the right ("markets") menu opens leftward, and cap the width so
     neither runs off the edge. */
  .dropdown__menu{right:auto;left:0;max-width:calc(100vw - 2*var(--shell))}
  .dropdown[data-filter="market"] .dropdown__menu{left:auto;right:0}
}