/* Work page (work.html) — selected-work index: intro block, editorial
   project list with a rotated edge label, and closing CTA. See ./README.md */

/* This page has no full-viewport photo hero to "scroll past", so keep the
   header logo/menu toggle visible and interactive for the whole page instead
   of following header.css's landing-page fade-after-one-viewport rule. */
body.wm-past-hero .wm-logo-mark,
body.wm-past-hero .wm-menu-toggle {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Pull the intro + list section 48px closer to the header than
   case-study.css's default wm-case-hero top clearance. */
#work-list.wm-case-hero {
  padding-top: 10.2rem;
}
@media (min-width: 768px) {
  #work-list.wm-case-hero {
    padding-top: 14.2rem;
  }
}
@media (min-width: 1600px) {
  #work-list.wm-case-hero {
    padding-top: 16.2rem;
  }
}

.wm-work-intro {
  max-width: 62ch;
  transform: translateY(-12px);
}
/* Overrides case-study.css's .wm-case-hero__title (4rem/5.6rem/6.8rem across
   breakpoints, font-weight 400) — scoped via the <wm-work-intro> host so
   inventory-management.html's own case-hero title is untouched. Higher
   specificity than the plain class beats all three of its breakpoint
   versions, fixing the size instead of letting it keep scaling up. */
wm-work-intro .wm-case-hero__title {
  font-size: 4.8rem;
  font-weight: 300;
}
/* Overrides the vendor .t-medium/.t-bold utilities (font-size 1.6rem/1.8rem,
   font-weight 700, see <wm-work-intro>'s p.t-bold.t-medium in
   js/custom/work-intro.js) — this compound selector's specificity beats
   those single classes regardless of breakpoint. */
.wm-work-intro p {
  font-size: 1.4rem;
  font-weight: 400;
}

/* The intro and the list sit in the same "row g-0" (zero Bootstrap gutter),
   so this supplies the gap between the two columns by itself. */
.wm-work-intro-col {
  padding-bottom: 3.2rem;
  /* transform (not translate) so this doesn't collide with the wm-pre/wm-in
     entrance-reveal animation below, which animates the separate CSS
     `translate` property. */
  transform: translateY(-30px);
}
@media (min-width: 1200px) {
  .wm-work-intro-col {
    padding-bottom: 0;
    padding-right: 4rem;
    /* Pin the title/intro in place while the list scrolls past on the
       right. The row's default flex stretch makes this column as tall as
       the list, so it holds until the list itself runs out. */
    position: sticky;
    top: 12rem;
    align-self: start;
    max-height: calc(100vh - 12rem);
    overflow: hidden;
  }
}

.wm-work-list {
  position: relative;
}

.wm-work-item {
  border-top: 1px solid rgba(140, 147, 161, 0.3);
  padding: 3.6rem 0;
}
.wm-work-item:last-child {
  border-bottom: 1px solid rgba(140, 147, 161, 0.3);
}
@media (min-width: 768px) {
  .wm-work-item {
    padding: 4.8rem 0;
  }
}

/* Each item is now a full-bleed niche-card banner (reusing index.html's
   .mxd-niche-cards__* markup, styled by the vendor's own CSS — see
   niche-cards.css for this site's few overrides to that block, sharp
   corners included) instead of an image-beside-text row — only
   .wm-work-item__num/__cta are still this page's own classes. This page
   doesn't load niche-cards.css itself since its overrides (Featured work
   heading size, .wm-niche-overlay) don't apply here. */

.wm-work-item__num {
  display: block;
  margin-bottom: 1rem;
  font: normal 600 1.3rem/1 var(--_font-accent);
  letter-spacing: 0.1rem;
  color: var(--t-medium);
}

/* Same hover-zoom the old row layout had on its thumbnail, now targeting
   the full-bleed background image instead. */
.mxd-niche-cards__image img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.wm-work-item:hover .mxd-niche-cards__image img {
  transform: scale(1.04);
}

.wm-work-item__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
  font: normal 700 1.3rem/1 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--t-bright);
  transition: gap 0.3s ease, opacity 0.3s ease;
}
.wm-work-item__cta:hover {
  gap: 1.2rem;
  opacity: 0.8;
}
.wm-work-item__cta svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Staggered entrance reveal on load, arriving from the landing page's
   "Work" link (see js/custom/work-transition.js). Same wm-pre/wm-in
   technique as .wm-expertise__item in expertise.css: the pre-animation
   state is a static class already in the markup so there's no flash of
   unanimated content before JS attaches. */
.wm-work-intro-col,
.wm-work-item {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), translate 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.wm-work-intro-col.wm-pre,
.wm-work-item.wm-pre {
  opacity: 0;
  translate: 0 12px;
}
.wm-work-intro-col.wm-in,
.wm-work-item.wm-in {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .wm-work-intro-col.wm-pre,
  .wm-work-item.wm-pre {
    opacity: 1;
    translate: 0 0;
  }
}