/* ---- Explainly case study ----
   Page-specific styles, loaded after css/style.css so the shared tokens and the
   site header/nav are already in place. Everything here is prefixed .ex- so it
   can never collide with the shared sheet or with .ix- (Inflex Trace).

   The Figma frame is 1440 wide, but the case study is inset to the nav's
   content box the same way Inflex Trace is. So every width below is a
   percentage of that column, carrying the frame's proportions rather than its
   pixels — the whole page then scales as one unit. */
.ex-page {
  /* Unlike Inflex Trace, this project's ground is the site's own light grey:
     the only painted block is the white storyboard band. */
  --ex-band: #ffffff;
  --ex-muted: #78748a; /* caption body copy, straight from the frame */

  /* The frame's 40px block rhythm, as a share of the viewport (40/1440). */
  --ex-gap: var(--case-gap);

  width: calc(100% - 2 * var(--case-pad-x));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ex-gap);
}

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

/* ---- Hero: the Explainly logo ----
   625x128 in the frame. The wrapper holds the ratio, so the block reserves its
   height before the clip loads and nothing below it shifts. */
.ex-hero {
  display: grid;
  place-items: center;
  /* 40px of air above the logo, matching the nav-to-logo gap in the frame. */
  padding-top: var(--ex-gap);
}

.ex-logo {
  width: 43.4%; /* 625 / 1440 */
  /* The clip's own 1440x300, not the frame's 625x128 (4.80 vs 4.88). Taking it
     from the file means the video has nothing left to letterbox. */
  aspect-ratio: 24 / 5;
}

/* ---- Feature shot ----
   435x774 in the frame, centred. Holds a still for now; the ratio lives on the
   wrapper so dropping the embed in its place costs no layout change. */
.ex-feature {
  display: flex;
  justify-content: center;
}

.ex-feature-frame {
  width: 30.2%; /* 435 / 1440 */
  aspect-ratio: 435 / 774;
  overflow: hidden;
  border-radius: 4px;
}

.ex-feature-frame img,
.ex-feature-frame video,
.ex-feature-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
}

/* ---- Storyboard band ----
   Runs the full column width, like the style-frame sheet below it. Both plates
   were exported from the same board and carry the same internal margin - their
   content sits at 6.71% and 93.25% of their own width - so at a matching
   display width the panels in one line up with the frames in the other for
   free. The Figma insets this plate to 1343/1440, but doing that here shifts
   its contents inward by that 3.35% and breaks the alignment.

   The image's own ground is white, so it IS the band: no wrapper ratio, no
   object-fit, nothing to letterbox. --ex-band stays as the colour behind it
   while the file loads. */
.ex-band {
  background: var(--ex-band);
}

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

/* ---- Style-frame sheet ----
   A full-column plate that keeps its own proportions, so the frames inside it
   stay legible rather than being cropped to a band. */

/* Reads as a continuation of the storyboard band rather than a separate block,
   so the two sit flush. The negative margin cancels the column's block gap -
   scoped to this one pair, so the rhythm everywhere else is untouched, and
   written against --ex-gap so it keeps cancelling exactly if that changes. */
.ex-band + .ex-sheet {
  margin-top: calc(-1 * var(--ex-gap));
}

.ex-sheet img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
}

/* ---- Back to projects ----
   The shared .project-back / .project-back-link component in css/style.css
   carries this now. The only thing particular to this page is the space above:
   .ex-page is a flex column whose own gap already supplies it, so adding the
   component's top padding on top of that would double it. */
.ex-page .project-back {
  --back-pad-top: 0;
}

/* ---- 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) {
  /* The logo and the feature shot are sized as a share of a 1440 frame; on a
     narrow column those fractions leave them stranded in the middle. */
  .ex-logo {
    width: min(70%, 420px);
  }

  .ex-feature-frame {
    width: min(58%, 340px);
  }
}

@media (max-width: 600px) {
  .ex-logo {
    width: 85%;
  }

  .ex-feature-frame {
    width: min(78%, 300px);
  }
}