/* ============================================================================
   "Want to see more?" — two suggested projects at the bottom of each project
   page, using the same imagery, hover video and Aeonik type as the work
   overview cards. Hovering a card expands it (and shrinks its sibling) and
   fades the still image to reveal the playing video. Scoped under .more-work.
   ========================================================================== */
.more-work {
  --mw-ink: #0b0b0c;
  --mw-muted: rgba(11, 11, 12, 0.55);
  --mw-blue: #0025ff;
  background: #fff;
  color: var(--mw-ink);
  font-family: Aeonik, sans-serif;
  padding: clamp(3rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4rem) clamp(4rem, 8vw, 8rem);
}
.more-work__inner { max-width: 1920px; margin-inline: auto; }
.more-work__title {
  margin: 0 0 clamp(1.75rem, 3.5vw, 3rem);
  font-family: Aeonik, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--mw-ink);
}

/* two cards that flex-expand on hover */
.more-work__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1vw, 0.9rem);
}
@media (min-width: 800px) {
  .more-work__grid { flex-direction: row; align-items: flex-start; }
}

.mw-card {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: flex-grow 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 800px) and (hover: hover) {
  .more-work__grid:hover .mw-card { flex-grow: 0.82; }
  .more-work__grid .mw-card:hover { flex-grow: 1.4; }
}

/* layered still image over autoplaying video — image fades on hover.
   Fixed height keeps both cards equal; the hover-expand changes width only. */
.mw-card__media {
  position: relative;
  width: 100%;
  height: clamp(360px, 42vw, 720px);
  overflow: hidden;
  background: #ececea;
  border-radius: 16px;
}
.mw-card__video,
.mw-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mw-card__img {
  z-index: 2;
  opacity: 1;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.mw-card:hover .mw-card__img { opacity: 0; }

/* label — Aeonik, matching the overview proj-thumb-name / company-name */
.mw-card__foot {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.25rem;
}
.mw-card__name {
  flex: 1 1 100%;
  font-family: Aeonik, sans-serif;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.mw-card__company {
  font-family: Aeonik, sans-serif;
  font-size: 0.95rem;
  color: var(--mw-muted);
}
.mw-card__cta {
  margin-left: auto;
  font-family: Aeonik, sans-serif;
  font-size: 0.95rem;
  color: var(--mw-muted);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
.mw-card:hover .mw-card__cta { opacity: 1; transform: none; color: var(--mw-blue); }