/* Motion page (motion.html): launch films and 3D work as home page style cards, one box per client.
   Panel, heading row and cards come from ben-home.css and ai-sections.css (same as Selected work on the home page). */

.mo-page { padding: 32px 16px 72px; }
.mo-intro .bw-note { max-width: 620px; }
.mo-panel .sw-media { aspect-ratio: 16 / 9; }

/* GIF preview over its thumbnail: the thumbnail shows while the GIF loads, if it fails, or with reduced motion */
.mo-gif { background-color: #fff; background-size: cover; background-position: center; }
.mo-gif picture, .mo-gif img { display: block; width: 100%; height: 100%; }
.mo-gif img { object-fit: cover; transform: scale(1.02); }

@media (max-width: 760px) {
    .mo-page { padding-top: 16px; }
}

/* Page heading sits above the boxes (23 Oct 2026: one box per client, in the order EquiSense, Bini, SoftworkerAI, Intrinsic 3D) */
.mo-intro { max-width: 1200px; margin: 24px auto 24px; padding: 0 48px; box-sizing: border-box; }
.mo-intro .bw-head { margin-bottom: 8px; }
.mo-intro .bw-title { color: var(--text-pencil); }
.mo-intro .bw-head-row { align-items: center; }

/* Boxes with one film: media on the left, text on the right */
@media (min-width: 861px) {
    .mo-feature .sw-cards { grid-template-columns: 1fr; }
    .mo-feature .sw-card { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: 48px; }
    .mo-feature .sw-media { grid-column: 1; grid-row: 1 / -1; }
    .mo-feature .sw-card > :not(.sw-media) { grid-column: 2; }
    .mo-feature .sw-meta { grid-row: 2; margin-top: 0; }
    .mo-feature .sw-headline { grid-row: 3; }
    .mo-feature .sw-line { grid-row: 4; }
    .mo-feature .sw-cta { grid-row: 5; }
}

/* EquiSense plays the film right in the card */
.mo-film { background: #0F1512; }
.mo-film video { object-fit: contain; }

/* Read case study buttons: hidden with a mouse (the glass cursor says it), shown on touch and phones, same as home Selected work */
.mo-panel .sw-card .sw-cta { display: none !important; }

@media (hover: none), (max-width: 760px) {
    .mo-panel .sw-card .sw-cta { display: inline-flex !important; align-self: stretch; justify-content: center; margin-top: 18px; }
}

@media (max-width: 760px) {
    .mo-intro { padding: 0 4px; margin-top: 8px; }
    .mo-intro .bw-head-row { display: block; text-align: center; }
    .mo-intro .bw-head-row > .rw-btn { margin-top: 16px; }
    .mo-panel.bw-panel { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 24px; }
}

/* Card headings in black, also on hover (asked 23 Oct 2026) */
.mo-panel .sw-headline,
.mo-panel .sw-headline a,
.mo-panel .sw-headline a:hover { color: var(--text-pencil, #1A1A18); }

/* No forced line breaks in card headings: they left one word alone on a line at laptop widths. Headings wrap evenly instead. */
.mo-panel .sw-br { display: none; }
.mo-panel .sw-headline { text-wrap: balance; }