/* =========================================================================
   Selected Work page — Vladyslav Ovod
   Reuses shared/case.css (tokens) + home.css (.navpills, .contact footer,
   .motion-tile colours). This file carries the work-page layout.
   ========================================================================= */

body { background: #ffffff; }

a { color: inherit; text-decoration: none; }

/* page content wrapper */
.work-wrap { max-width: 1440px; margin: 0 auto; padding: 0 89px; }

/* nav: centered via .site-nav (defined in shared/case.css) */

/* invisible spacers between sections (the Figma "Frame" connectors have no fill) */
.connector { width: 1px; margin: 0 auto; }

/* ---------- header (centered) ---------- */
.work-header { max-width: 906px; margin: 0 auto; text-align: center; }
.work-header__kicker { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #0a0a0a; }
.work-header__title { font-family: var(--sans); font-weight: 600; font-size: 48px; line-height: 1.04; letter-spacing: -0.029em; color: #0a0a0a; margin-top: 22px; white-space: nowrap; }
.work-header__body { font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1.6; color: #0a0a0a; margin-top: 20px; }

/* ---------- case cards (full-width, alternating) — .work-card lives in home.css (shared with case pages) ---------- */
.work-cases { display: flex; flex-direction: column; gap: 25px; }

/* ---------- 3-up row: mini (DesignOps) + wide (Motion) ---------- */
.work-3up { display: flex; gap: 25px; align-items: stretch; }
.work-mini { flex: 404 1 0; min-width: 0; }
.work-wide { flex: 833 1 0; min-width: 0; }
.work-tile-card {
  height: 100%;
  border: 1px solid #0a0a0a; border-radius: 15px; overflow: hidden;
  display: flex; flex-direction: column; background: #ffffff;
}
.work-tile-card__thumb { position: relative; height: 200px; background: #f5f5f5; overflow: hidden; flex: none; }
.work-tile-card__footer { position: relative; padding: 19px 21px; display: flex; flex-direction: column; gap: 8px; }
.work-tile-card__title { font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: 1.29; color: #0a0a0a; }
.work-tile-card__desc { font-family: var(--sans); font-weight: 400; font-size: 14.7px; line-height: 1.43; color: #000; }
.work-tile-card__meta { font-family: var(--mono); font-weight: 400; font-size: 12.5px; color: var(--text-muted); }
.work-tile-card__arrow { position: absolute; top: 20px; right: 21px; font-family: var(--mono); font-weight: 400; font-size: 19px; color: var(--text-muted); }

/* DesignOps — locked thumb (blurred image + lock) */
.work-locked__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(30px); transform: scale(1.25); }
.work-locked__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.work-locked__icon img { width: 38px; height: 38px; }

/* Motion — gradient thumb with 4 pastel scene tiles in a row */
.work-motion__thumb { background: linear-gradient(179deg, #355adb 0%, #f6f6f6 100%); display: flex; align-items: flex-start; justify-content: center; padding-top: 25px; }
.work-motion__row { display: flex; gap: 19px; width: 92%; }
.work-motion__row .motion-tile { flex: 1 1 0; aspect-ratio: 177.6 / 149.3; border-radius: 12px; }

/* ---------- NDA disclaimer ---------- */
.work-nda { border-top: 1px solid #d4d4d4; padding-top: 24px; text-align: center; }
.work-nda p { font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--text-muted); }

/* space before the footer */
.work-foot-gap { height: 70px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
  .work-wrap { padding: 0 48px; }
  .work-header__title { white-space: normal; font-size: 38px; }

  .work-3up { flex-direction: column; }
  .work-mini, .work-wide { flex: 1 1 auto; }
}

@media (max-width: 680px) {
  .work-wrap { padding: 0 20px; }
  .work-header__title { font-size: 28px; }
  .work-motion__row { gap: 10px; }
}