/* ---- Museum Milano case study ----
   Page-specific styles, loaded after css/style.css so the shared tokens, the
   site header/nav, .project-back and .video-plate are already in place.
   Everything here is prefixed .mm- so it cannot collide with .ex- or .ix-.

   The Figma frame is 1440 wide; the case study is inset to the nav's content
   box like the other two, so every width below is a percentage of that column
   carrying the frame's proportions rather than its pixels. */
.mm-page {
  /* The frame's 40px block rhythm, as a share of the viewport (40/1440) - the
     same value the Explainly page uses, so the two read alike. */
  --mm-gap: var(--case-gap);

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

/* Belt and braces: several blocks carry an aspect-ratio, and a box with one
   can size its inline axis from its block axis rather than filling its
   container. */
.mm-page > * {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ---- Hero ----
   The frame aligns this plate's left edge to the nav's padding, which is
   exactly what the column already is - so it simply spans it. 16:9, matching
   both the frame's 1277x718 and the export's own 4096x2304.

   Holds a still for now; the ratio is on the wrapper and .video-plate clips to
   it, so dropping the embed in costs no layout change. */
.mm-hero {
  aspect-ratio: 16 / 9;
}

/* ---- Storyboard band ----
   The plate's own ground is white, so it IS the band: no wrapper ratio and no
   object-fit, nothing to letterbox. Full column width, so its panels line
   up with the hero above it. */
.mm-band {
  background: #ffffff;
}

.mm-band img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Pyramid animation ----
   707x398 in the frame, centred. Sits on the page's flat grey, so it needs the
   shared .video-plate treatment - see the long note on it in css/style.css. */
.mm-film {
  width: 49.1%; /* 707 / 1440 */
  margin-inline: auto;
  aspect-ratio: 16 / 9; /* the clip's DAR; 707/398 in the frame agrees */
}

/* ---- 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 a share of a 1440 frame; on a narrow column that fraction leaves
     the clip stranded in the middle. */
  .mm-film {
    width: min(78%, 420px);
  }
}

@media (max-width: 600px) {
  .mm-film {
    width: 100%;
  }
}