/* Showcase — auto-loaded for the showcase snippet (site/snippets/landing/showcase.php).
   The featured articles on the landing on narrow screens (Figma 320:12671): a
   stage with the visual grid and the current Cover at its vanishing point,
   fixed behind a stack of cards that scroll and snap, one per screen. The page
   itself scrolls and snaps (landing.snippet.css), not a box of its own: only
   a scrolling page lets iOS collapse its toolbars. Shown below 60rem only;
   which of showcase and lists shows is landing.snippet.css's. */

.showcase {
  display: none;
}

@media (max-width: 60rem) {
  .showcase {
    position: relative;
    display: block;
    /* Its own stacking, for the Cover between the cards' body and title. */
    isolation: isolate;
    /* The stage (grid and Cover) and a card are one screen under the
       menubar at the large viewport height, which never changes: so the
       grid doesn't resize as iOS collapses or brings back its toolbars, and
       the snap points don't move (were they to, the page would re-snap and
       the toolbars change again). Only a card's body follows the visible
       height (see .showcase__body). */
    --showcase-w: 100vw;
    /* In whole pixels, rounded down: every snap point is then a whole
       pixel, and the last one never lands past the page's end, out of the
       snap's reach, as a fractional height could put it. */
    --showcase-h: round(down, calc(100lvh - var(--menubar-h)), 1px);
    /* The visual grid's drawing, in its own units — keep in step with
       site/snippets/landing/visual-grid.php: the viewBox (720 × 852) and the
       height of the centre rect at the vanishing point. The drawing covers
       the stage (slice), so it scales by the larger of the two ratios. */
    --grid-view-w: 720;
    --grid-view-h: 852;
    --grid-centre-h: 159.5;
    /* The Cover stands two rings out from the centre rect (the grid's ring
       ratio squared — the same two rings a card change zooms), so it frames
       the tunnel's mouth instead of filling it. */
    --showcase-cover-rings: calc(var(--ring-ratio) * var(--ring-ratio));
    --showcase-cover-h: calc(
      var(--showcase-cover-rings) *
        max(
          var(--showcase-h) * var(--grid-centre-h) / var(--grid-view-h),
          var(--showcase-w) * var(--grid-centre-h) / var(--grid-view-w)
        )
    );
    /* The issue accent (set by the showcase component as --grid-color,
       blended with the scroll) tints the grid, which draws in currentColor.
       It follows the scroll directly; only under reduced motion, where it
       switches on a snap, does it fade. */
    color: var(--grid-color, var(--color-bg));
  }
  @media (prefers-reduced-motion: reduce) {
    .showcase {
      transition: color var(--fade-duration) ease;
    }
  }

  /* --- Stage: the grid and the Covers, fixed layers the cards scroll over --
     In the showcase's own stacking (isolation), bottom to top: the grid
     (1), the cards' body (2), the Covers (3), the cards' title (4). Two
     layers, as a fixed element is a stacking context of its own: grid and
     Covers in one could not take the body between them. Neither takes
     pointer events, so links under them still work. All above zero: a
     negative z-index would put the body under its own card, whose box then
     takes the taps meant for its links. */
  .showcase__stage {
    position: fixed;
    top: var(--menubar-h);
    left: 0;
    z-index: 1;
    width: var(--showcase-w);
    height: var(--showcase-h);
    overflow: hidden;
    pointer-events: none;
  }
  .showcase__stage--covers {
    z-index: 3;
  }
  .showcase__stage > svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .showcase__cover {
    position: absolute;
    top: 50%;
    left: 50%;
    height: var(--showcase-cover-h); /* cropped as the feature card's Cover (landing.snippet.css) */
    translate: -50% -50%;
    /* Scale (about the centre, so the vanishing point) and opacity follow the
       scroll, set per frame by the showcase component: between two cards the
       outgoing Cover shrinks and fades as the incoming one comes in. No
       transition, which would lag behind the scroll. Until the component
       runs, the first card's Cover (.is-current) shows. */
    opacity: 0;
  }
  .showcase__cover.is-current {
    opacity: 1;
  }

  /* --- Cards: one per screen, snapping on the page's scroll --------------- */
  .showcase__cards {
    position: relative;
    color: var(--color-fg);
    /* Room after the last card, so its snap point is within reach: with
       iOS's toolbars collapsed the screen is a little taller than a card
       under the menubar (the floating address bar overlaps the page), and
       without room the page couldn't scroll far enough. The toolbars'
       height (large − small viewport) covers it; the bottom bounce is off on
       the last card, and the snap pulls back from the room. */
    padding-bottom: calc(100lvh - 100svh);
  }

  /* Title above the Cover, the rest below it; the middle track is the hole
     the Cover shows through, centred like the grid's vanishing point. */
  .showcase__card {
    height: var(--showcase-h);
    display: grid;
    grid-template-rows: minmax(0, 1fr) var(--showcase-cover-h) minmax(0, 1fr);
    padding-inline: var(--space-s);
    scroll-snap-align: start;
  }

  .showcase__head {
    position: relative;
    z-index: 4; /* in front of the Cover, which is in front of the body */
    grid-row: 1;
    align-self: end;
    padding-bottom: var(--space-xl);
    text-align: center;
    overflow: hidden;
  }
  .showcase__title {
    font-size: var(--fs-title-showcase);
    --fa-weight: 0;
    line-height: var(--leading-tight);
  }
  /* .showcase__author is set as the desktop feature card's author
     (landing.snippet.css). */

  /* The body rests on the foot of the screen, below the Cover. */
  .showcase__body {
    /* Between the grid and the Covers (see the stage): over the grid and
       its colour, under a Cover where they meet. */
    position: relative;
    z-index: 2;
    grid-row: 3;
    align-self: end;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    /* Rests on the foot of what is visible: lifted by what the toolbars
       take while they show (large − dynamic viewport). Padding only, so the
       card's height — a snap — stays put. */
    padding-bottom: calc(var(--space-2xs) + 100lvh - 100dvh);
  }
  .showcase__bookmark {
    align-self: flex-end;
  }
  .showcase__bookmark .bookmark__ico {
    width: auto;
    height: var(--icon-size);
  }

  /* Info row: DOI and issue left, year and original language right. */
  .showcase__info {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    font-size: var(--fs-meta);
    --fa-serif: 0;
  }
  .showcase__info-start,
  .showcase__info-end {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-width: 0;
  }
  .showcase__info-end {
    align-items: flex-end;
  }
  /* The issue, then its accent dot after it on the same line (Figma); the dot
     is a block of its own (ui/dot), so the line is a flex row. */
  .showcase__issue {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
  }
  .showcase__dot {
    flex: none; /* sized as the feature card's dot (landing.snippet.css) */
  }

  .showcase__abstract {
    font-size: var(--fs-body);
    line-height: var(--leading-tight);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }

  /* Topics on one row, clipped at the screen's edge. */
  .showcase__tags {
    display: flex;
    gap: var(--space-2xs);
    margin-right: calc(-1 * var(--space-s));
    padding-block: var(--space-3xs); /* room for the pills' inset shadow */
    overflow: hidden;
  }

  .showcase__cta {
    align-self: center;
  }

  .showcase__next {
    align-self: center;
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
  }
  .showcase__next .icon {
    width: 100%;
    height: 100%;
  }
}