/* Work — case-study archive (/work/). Hover states replace the design's per-row React state. */

/* Filter bar: sticky under the header on desktop only; on phones it would cover the cards. */
.pmg-work-filters { position: relative; z-index: 15; background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
@media (min-width: 960px) { .pmg-work-filters { position: sticky; top: 72px; } }

.pmg-work-chip { font: inherit; font-size: 13px; font-weight: 500; padding: 7px 13px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255,255,255,.14); background: transparent; color: #F3E3E1; transition: color .25s, background .25s, border-color .25s, box-shadow .25s, transform .25s, opacity .25s; }
.pmg-work-chip:hover, .pmg-work-chip:focus-visible { border-color: rgba(248,57,0,.6); }
.pmg-work-chip[aria-pressed="true"] { border-color: #F83900; background: #F83900; color: #000; }
.pmg-work-reset:hover, .pmg-work-reset:focus-visible { color: #fff !important; }

.pmg-work-cta { transition: box-shadow .3s, transform .2s; }
.pmg-work-cta:hover, .pmg-work-cta:focus-visible { box-shadow: 0 0 40px rgba(248,57,0,.45); color: #000 !important; }
.pmg-work-cta--dark:hover, .pmg-work-cta--dark:focus-visible { color: #fff !important; box-shadow: 0 0 40px rgba(0,0,0,.35); }

/* Index rows. */
.pmg-work-row { transition: padding-left .4s cubic-bezier(.2,.7,.2,1); }
.pmg-work-row[hidden] { display: none !important; }
.pmg-work-row:hover, .pmg-work-row:focus-visible { color: #fff !important; padding-left: clamp(16px,2vw,32px) !important; }
.pmg-work-row:focus-visible { outline-offset: -2px; }
.pmg-work-row__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #F83900; transform: scaleY(0); transform-origin: top; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.pmg-work-row__num { font-family: 'Clash Grotesk', sans-serif; font-size: 12px; letter-spacing: .1em; color: #AEA7A6; transition: color .3s; flex-shrink: 0; }
.pmg-work-row__metric { font-family: 'Clash Display', sans-serif; font-size: clamp(40px,4.6vw,76px); font-weight: 500; letter-spacing: -.05em; line-height: .9; color: #F83900; text-shadow: none; transition: text-shadow .4s; }
.pmg-work-row__lock { display: grid; place-items: center; width: clamp(40px,4.6vw,76px); height: clamp(40px,4.6vw,76px); font-size: clamp(30px,3.4vw,56px); color: #F83900; filter: drop-shadow(0 0 0 rgba(248,57,0,0)); transition: filter .4s; }
.pmg-work-row__arrow { width: clamp(44px,4vw,56px); height: clamp(44px,4vw,56px); border-radius: 50%; border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; color: #F83900; font-size: 18px; flex-shrink: 0; background: transparent; transition: color .4s, background .4s, border-color .4s, box-shadow .4s, transform .4s, opacity .4s; }
.pmg-work-row:hover .pmg-work-row__rail, .pmg-work-row:focus-visible .pmg-work-row__rail { transform: scaleY(1); }
.pmg-work-row:hover .pmg-work-row__num, .pmg-work-row:focus-visible .pmg-work-row__num { color: #F83900; }
.pmg-work-row:hover .pmg-work-row__metric, .pmg-work-row:focus-visible .pmg-work-row__metric { text-shadow: 0 0 50px rgba(248,57,0,.5); }
.pmg-work-row:hover .pmg-work-row__lock, .pmg-work-row:focus-visible .pmg-work-row__lock { filter: drop-shadow(0 0 18px rgba(248,57,0,.6)); }
.pmg-work-row:hover .pmg-work-row__arrow, .pmg-work-row:focus-visible .pmg-work-row__arrow { border-color: #F83900; background: rgba(248,57,0,.12); }

/* The whole row is the link: no extra press scale or enlarged hit area needed. */
.pmg-site .pmg-work-row:active { transform: none; }
.pmg-site .pmg-work-row:active .pmg-work-row__arrow { transform: scale(.94); transition-duration: 80ms; }
.pmg-site .pmg-work-row::before { content: none; }