/* ==========================================================================
   VANTIX SYSTEMS — pages/home-whatwedo.css
   "What we do": a full-screen photo that slides aside, a heading, and a row of
   service cards that travels across. Pinned and scrubbed by what-we-do.js.
   Without scripts or with reduced motion it is a photo banner plus a
   swipeable row of cards.
   ========================================================================== */

.wwd {
  position: relative;
  background: var(--white);
}

.wwd__stage {
  position: relative;
  overflow: hidden;
  background: var(--white);
}

/* ---------- Photo ---------- */
.wwd__media {
  margin: 0;
  position: relative;
  height: clamp(18rem, 56vw, 32rem);
  overflow: hidden;
  background: var(--navy);
}

.wwd__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wwd__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 20, 36, 0.35), rgba(10, 20, 36, 0.55));
}

.wwd__big {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 10rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--white);
  pointer-events: none;
}

/* ---------- Heading and cards ---------- */
.wwd__content {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 6vw, 5rem);
}

.wwd__title {
  width: min(var(--max), 100% - var(--gutter) * 2);
  margin-inline: auto;
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.wwd__track {
  display: flex;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: 0.5rem var(--gutter) 1.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.wwd__track::-webkit-scrollbar {
  display: none;
}

.wwd__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.wwd-card {
  position: relative;
  display: block;
  width: clamp(12.5rem, 17vw, 16rem);
  aspect-ratio: 0.69;
  overflow: hidden;
  border-radius: 14px;
  color: var(--white);
  background: var(--navy);
  box-shadow: 0 18px 36px -22px rgba(16, 31, 56, 0.55);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.wwd-card:hover,
.wwd-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 26px 44px -22px rgba(16, 31, 56, 0.65);
}

.wwd-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.wwd-card:hover img,
.wwd-card:focus-visible img {
  transform: scale(1.06);
}

.wwd-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 16, 32, 0.9), rgba(8, 16, 32, 0) 62%);
}

.wwd-card__title {
  position: absolute;
  left: 1.1rem;
  right: 4rem;
  bottom: 1.1rem;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.wwd-card__go {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.wwd-card__go svg {
  width: 0.95rem;
  height: 0.95rem;
}
.wwd-card:hover .wwd-card__go,
.wwd-card:focus-visible .wwd-card__go {
  color: var(--ink);
  background: var(--white);
  border-color: var(--white);
}

/* ---------- Pinned layout (class added by what-we-do.js) ---------- */
.wwd--stage .wwd__stage {
  height: 100svh;
}

.wwd--stage .wwd__media {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  height: 100%;
}

.wwd--stage .wwd__content {
  position: absolute;
  inset: 0 0 0 38%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  opacity: 0;
}

.wwd--stage .wwd__title {
  width: auto;
  margin-inline: 0 var(--gutter);
  padding-left: clamp(1.5rem, 3vw, 3rem);
}

.wwd--stage .wwd__track {
  margin-top: clamp(1.5rem, 4vh, 3rem);
  padding: 0.5rem 0 1.75rem clamp(1.5rem, 3vw, 3rem);
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}

.wwd--stage .wwd-card {
  width: clamp(13rem, 17vw, 17rem);
}

@media (max-width: 47.9375rem) {
  .wwd--stage .wwd__media {
    inset: 0 0 auto 0;
    width: 100%;
  }
  .wwd--stage .wwd__content {
    inset: 36% 0 0 0;
    justify-content: flex-start;
    padding-top: 1.25rem;
  }
  .wwd--stage .wwd__title {
    padding-left: var(--gutter);
    font-size: 1.75rem;
  }
  .wwd--stage .wwd__track {
    padding-left: var(--gutter);
  }
  .wwd--stage .wwd-card {
    width: 12.5rem;
  }
  .wwd__big {
    font-size: clamp(3rem, 16vw, 6rem);
  }
}

/* ---------- Phone and tablet: larger swipeable cards ---------- */
@media (max-width: 1023px) {
  .wwd__track {
    gap: 0.9rem;
  }
  .wwd:not(.wwd--stage) .wwd-card {
    width: min(78vw, 22rem);
    aspect-ratio: 0.74;
  }
  .wwd:not(.wwd--stage) .wwd-card__title {
    font-size: 1.25rem;
    left: 1.25rem;
    bottom: 1.25rem;
    right: 4.5rem;
  }
  .wwd:not(.wwd--stage) .wwd-card__go {
    width: 2.75rem;
    height: 2.75rem;
    right: 1.1rem;
    bottom: 1.1rem;
  }
}