/* ============ WORK PAGE ============ */

/* active nav link in header, since we're on the Work page */
.nav-link-active {
  color: #000;
}
.nav-link-active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
}

/* ---------- HERO ---------- */
.work-hero-heading {
  font-family: 'Switzer', ui-sans-serif, system-ui, sans-serif;
}
.work-hero-line {
  padding-bottom: 0.06em;
}
.work-hero-word {
  will-change: transform;
}

/* =====================================================
   WORK ROWS — the core "left small / right big" interaction.

   Each row is a flex container of 2–3 .work-item links. Every item
   starts at the flex-grow set by its row's default split (data-driven,
   see js/work.js), so one side reads small and the other big. On
   hover, JS bumps the hovered item's flex-grow up and its sibling(s)
   down — the browser then animates the width change itself because
   flex-grow is a transitioned property, giving a smooth "this one
   swells, the other yields" swap with no layout jump.
   ===================================================== */
.work-row {
  display: flex;
  width: 100%;
  align-items: stretch;
  gap: 12px;
}
@media (min-width: 768px) {
  .work-row {
    gap: 20px;
  }
}

.work-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.05);
  min-width: 0;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  height: 62vw;
  max-height: 620px;
  transition: flex-grow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) {
  .work-item {
    height: 34vw;
  }
}

.work-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001); /* avoids 1px seams while the flex-basis animates */
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-item:hover img {
  transform: scale(1.045);
}

.work-item-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  white-space: nowrap;
}
.work-item:hover .work-item-caption {
  opacity: 1;
  transform: translateY(0);
}
.work-item-caption .work-item-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.work-item-caption .work-item-tag {
  font-size: 12px;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Single, full-bleed row (one item, no swap needed) */
.work-row--single .work-item {
  height: 46vw;
  max-height: 560px;
}
@media (min-width: 768px) {
  .work-row--single .work-item {
    height: 28vw;
  }
}

/* On touch devices there's no hover, so let a quick tap-scale still give
   feedback instead of the split feeling inert */
@media (hover: none) {
  .work-item { transition: none; }
  .work-item img { transition: transform 0.3s ease; }
}

/* ---------- MOSAIC (dense small-tile grid) ---------- */
.work-mosaic-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.05);
  aspect-ratio: 1 / 1;
}
.work-mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-mosaic-item:hover img {
  transform: scale(1.08);
}

/* ---------- PARTNER / MARK STRIP ----------
   Invented wordmarks in flat color cards — same treatment as the
   Home page's client-logo row, just laid out as cards instead of a
   bare wordmark line, echoing the reference layout's bottom strip
   without reproducing any real company's mark. */
.work-partner-card {
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Switzer', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(13px, 2vw, 18px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-partner-card:hover {
  transform: translateY(-3px);
}

/* ---------- SCROLL REVEAL (rows fade/rise in via JS + GSAP ScrollTrigger) ---------- */
.work-reveal {
  opacity: 0;
  transform: translateY(28px);
}