/* =========================================================================
   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-cases { display: flex; flex-direction: column; gap: 25px; }
.work-card {
  display: flex; align-items: stretch;
  border: 1px solid #0a0a0a; border-radius: 17px; overflow: hidden;
  height: 347px; background: #ffffff;
}
.work-card__img { width: 694px; flex: none; overflow: hidden; }
.work-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-card__text {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 42px;
}
.work-card--reverse .work-card__img { border-left: 1px solid #0a0a0a; }
.work-card:not(.work-card--reverse) .work-card__text { border-left: 1px solid #0a0a0a; }
.work-card__num { font-family: var(--sans); font-weight: 600; font-size: 67px; line-height: 1; color: #0a0a0a; }
.work-card__body { display: flex; flex-direction: column; }
.work-card__title { font-family: var(--sans); font-weight: 600; font-size: 29px; line-height: 1.21; color: #0a0a0a; max-width: 484px; }
.work-card__desc { font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.5; color: #000; margin-top: 11px; max-width: 421px; }
.work-card__meta { font-family: var(--mono); font-weight: 400; font-size: 13.5px; color: var(--text-muted); margin-top: 15px; }
.work-card__arrow { position: absolute; top: 42px; right: 42px; font-family: var(--mono); font-weight: 400; font-size: 19px; color: var(--text-muted); }

/* ---------- 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-card { flex-direction: column; height: auto; }
  .work-card--reverse { flex-direction: column-reverse; }
  .work-card__img { width: 100%; aspect-ratio: 694 / 347; border-left: none !important; }
  .work-card:not(.work-card--reverse) .work-card__text { border-left: none; border-top: 1px solid #0a0a0a; }
  .work-card--reverse .work-card__img { border-top: 1px solid #0a0a0a; }

  .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-card__text { padding: 28px; }
  .work-card__num { font-size: 48px; }
  .work-card__title { font-size: 23px; }
  .work-card__arrow { top: 28px; right: 28px; }
  .work-motion__row { gap: 10px; }
}