/* ---- FocusIO case study ----
   Page-specific styles, loaded after css/style.css so the shared tokens, the
   site header/nav, .project-back, .video-plate and .case-caption are already
   in place. Everything here is prefixed .fio- so it cannot collide with the
   other case studies.

   The Figma frame is 1440 wide; the case study is inset to the nav's content
   box like the others, so every width below is a percentage of that column,
   carrying the frame's proportions rather than its pixels. */
.fio-page {
  /* The 40px block rhythm the other case studies use (40/1440). */
  --fio-gap: var(--case-gap);

  width: calc(100% - 2 * var(--case-pad-x));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fio-gap);
  /* The column's gap only sits BETWEEN children, so the space under the nav
     has to be stated. */
  padding-top: var(--fio-gap);
}

.fio-page > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* ---- Logo animation ----
   A window onto a clip that runs bigger than the window, which is how the
   frame builds it: a 718x344 mask over a comp at full size. So the wrapper is
   the container and the clip overflows it, rather than the clip being fitted
   into the wrapper.

   Three knobs, since the crop is meant to be tuned:
     --fio-logo-zoom  the clip's width as a share of the container's width.
                      100% would exactly fill it; higher crops in and makes the
                      logo bigger. 158.8% is the frame's own 1140/718.
     --fio-logo-x/-y  nudge the clip off centre. */
.fio-logo {
  width: 49.65%; /* 715 / 1440 */
  aspect-ratio: 715 / 345;
}

/* Overrides .video-plate's fitted clip. Centring by translate rather than by a
   computed offset means the zoom can change without the position needing to be
   recomputed to match. */
.fio-logo > video {
  top: 50%;
  left: 50%;
  width: var(--fio-logo-zoom, 158.8%);
  height: auto;
  object-fit: fill; /* the box already carries the clip's own ratio */
  transform: translate(-50%, -50%)
    translate(var(--fio-logo-x, 0px), var(--fio-logo-y, 0px));
}

/* ---- Styleframe ----
   718x718 in the frame. Holds a still for now; the ratio is on the wrapper and
   .video-plate clips to it, so dropping the embed in changes no layout. */
.fio-frame {
  width: 49.86%; /* 718 / 1440 */
  aspect-ratio: 1;
}

/* ---- Storyboard ----
   Full column width, keeping the plate's own proportions so the panels inside
   stay legible rather than being cropped to a band. */
.fio-storyboard {
  width: 100%;
}

.fio-storyboard img {
  width: 100%;
  height: auto;
  display: block;
}

/* The caption is .case-caption from the shared sheet, which is a grid sized to
   its container - so unlike the plates above it needs the full column, not the
   centred width the flex column would otherwise give it. */
.fio-page > .case-caption,
.fio-page > .project-back {
  width: 100%;
}

/* ---- Stack ----
   1100px is the site's breakpoint: the nav collapses to a hamburger and the
   About/Contact layouts stack here too. Keep it in step with those and with
   NAV_BREAKPOINT in js/main.js. */
@media (max-width: 1100px) {
  /* Sized as shares of a 1440 frame; on a narrow column those fractions leave
     both plates stranded in the middle. */
  .fio-logo {
    width: min(86%, 560px);
  }

  .fio-frame {
    width: min(78%, 480px);
  }
}

@media (max-width: 600px) {
  .fio-logo,
  .fio-frame {
    width: 100%;
  }
}