/* Reputifly — measured case-study card scaling (rf-case-fit v1, 2026-09-14).
   Companion to case-fit-v1.js. Everything here is scoped to #proof and to
   phone widths, so desktop and every other section are untouched.

   The cards used to be sized `height:calc(100svh - 44px); min-height:660px`
   with `overflow:hidden`, and the case-study heading + description are the
   LAST rows of the grid. `svh` is an assumed number: on a browser whose
   chrome overlays the page (iOS 26 Safari's floating address bar) the real
   usable area is smaller than svh, so those rows fell under the chrome — and
   because the card is position:sticky with overflow:hidden, scrolling could
   never bring them back. The controller measures the usable height instead
   and writes it into --rf-card-h. */

@media (max-width: 900px) and (min-height: 651px) {

  #proof .rf-proof-scroll-stack {
    --rf-img-min: 140px;
    /* Keep the stack clear of the home indicator / overlaying chrome. */
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }

  /* --rf-card-h is written per card by the controller. The fallback is only
     ever on screen for the first paint, so it is deliberately conservative
     rather than full-viewport. */
  #proof .rf-stack-card {
    height: var(--rf-card-h, clamp(420px, calc(100svh - 150px), 700px));
    min-height: 0;
    max-height: none;
    grid-template-rows: auto minmax(var(--rf-img-min), 1fr) auto auto auto auto;
  }

  /* The media stage is the only row allowed to absorb the difference. */
  #proof .rf-stack-card > .rf-stack-image,
  #proof .rf-stack-card > .rf-search-pair {
    min-height: 0;
  }

  /* The text rows keep their natural height and are never compressed. */
  #proof .rf-stack-card > .rf-proof-top,
  #proof .rf-stack-card > .rf-proof-caption,
  #proof .rf-stack-card > .rf-stack-sources,
  #proof .rf-stack-card > .rf-stack-story,
  #proof .rf-stack-card > .rf-stack-progress {
    min-height: 0;
  }

  /* Escape hatch. The controller sets this when the copy cannot fit inside
     the measured viewport even at the minimum media size. The cards KEEP the
     shared height — they just stop sticking, so a card taller than the screen
     is scrollable instead of clipped. */
  #proof .rf-stack-card[data-rf-fit="flow"] {
    position: relative;
    top: auto;
    height: var(--rf-card-h, auto);
    min-height: 0;
  }
}