/* 3b. WHAT WE DO — the live site's "What we do" band (site/src/components/home/WhatWeDo.astro),
   restyled in the lab's system: bracket label, two-tone headline, short pitch + roll link,
   then a full-bleed strip of real project tiles drifting sideways (pauses on hover). */
.wwd { padding: var(--section-y) 0; overflow-x: clip; }
.wwd-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: clamp(32px, 6vw, 110px); padding-inline: var(--gutter); }
.wwd-label { font: 500 13px Inter, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.wwd-title { margin-top: 22px; font: 600 clamp(36px, 4.2vw, 68px)/1.05 Inter, sans-serif; letter-spacing: -.04em; max-width: 20ch; }

.wwd-side p { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 38ch; margin-bottom: 24px; }

.wwd-strip { margin-top: var(--head-gap); overflow: hidden; }
.wwd-track { display: flex; gap: 16px; width: max-content; animation: wwd-drift 72s linear infinite; }
/* Tile width follows the screen width, so about 1.5 tiles show on a phone rising to about 2 on a computer
   (375px screen → 234px tile, 1440px → 696px; capped at 860px on very wide screens). */
.wwd-tile { flex: none; width: clamp(230px, 71px + 43.4vw, 860px); aspect-ratio: 1.35; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.wwd-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.wwd-tile:hover img { transform: scale(1.05); }
@keyframes wwd-drift { to { transform: translateX(-50%); } }   /* track holds two copies, so -50% loops seamlessly */

@media (max-width: 900px) {
  .wwd-head { grid-template-columns: 1fr; align-items: start; }
}
@media (prefers-reduced-motion: reduce) { .wwd-track { animation: none; } .wwd-strip { overflow-x: auto; } }