/* ==========================================================================
   Preview — the page embedded in the 16/9 frame of the component's reference
   page.

   This page is not a site: it is a frame. That difference explains everything
   below. On a site, "narrow" means "a phone", and the component is right to
   move its two texts above and below. Here, narrow means "small frame" —
   folding would amount to showing something other than the component. So the
   original composition is kept and the scale is set to the room available.
   ========================================================================== */

html,
body {
  height: 100%;
  margin: 0;
  /* Without this, inner padding would add to the 100 % height and the content
     would drift towards the bottom of the frame. */
  box-sizing: border-box;
}

body {
  background: #fff;
}

.focus-gallery {
  /* --------------------------------------------------------------------
     The scale follows the width of the frame, with no ceiling. That is the
     point that counts: with a body copy proportional to the width, the
     composition is the same at every size — same proportions, same line
     breaks — so a single constant is enough to frame it. A min() would break
     it.

     55.5: chosen for a 16/9 frame. The active image is then 18.75 body copies
     tall, that is 60 % of the height of the frame, and 28.125 body copies
     wide, that is 51 % of its width — a quarter of the width is left on each
     side for the two texts, and the neighbours stick out just enough at the
     top and at the bottom for the gallery to read as continuing.
     -------------------------------------------------------------------- */
  --fg-font-size: calc(100vw / 55.5);

  /* The frame, not the window of the phone: here the two are the same thing,
     but the preview owes nothing to the URL bar of a mobile browser. */
  --fg-hauteur: 100vh;
}

/* --------------------------------------------------------------------------
   The breakpoint of the component, neutralised for the preview.

   This file is loaded after focus-gallery.css: at equal specificity, these
   rules win over the ones in its media query. That is wanted, and it is the
   only place where we allow ourselves to contradict the component.
   -------------------------------------------------------------------------- */

@media (max-width: 1060px) {
  .focus-gallery__titre,
  .focus-gallery__note {
    top: 50%;
    bottom: auto;
    max-width: var(--fg-texte-largeur);
  }

  .focus-gallery__titre {
    left: var(--fg-marge);
    right: auto;
  }

  .focus-gallery__note {
    left: auto;
    right: var(--fg-marge);
    text-align: start;
  }
}