/* Portraits meet the card's bottom edge; heads can rise above its top. */
#results .result-photo {clip-path: inset(-15px 0 0);}
#results .result-photo > img:not(.result-crest) {
  width: 100%;
  max-width: 100%;
  height: calc(100% + 15px);
  left: 0;
  bottom: 0;
  object-fit: contain;
  object-position: center bottom;
}
/* The two original PNGs include transparent padding above the heads. */
#results .result-photo > img[src$="/ruzi-cut.png"] {height: calc(101.589% + 15.238px);}
#results .result-photo > img[src$="/champion-maftun-cut.png"] {height: calc(103.093% + 15.464px);}
/* Controls sit below the copy, clear of the medals and belts. */
#results .result-copy {padding-bottom: 48px;}
#results .result-carousel-controls {left: auto; right: 12px;}
#results .results-carousel--other .result-carousel-controls {left: 12px; right: auto;}
@media (max-width: 700px) {
  #results .result-cards article {min-height: 170px;}
  #results .result-copy {padding-bottom: 40px;}
  #results .result-carousel-controls {left: auto; right: 8px;}
  #results .results-carousel--other .result-carousel-controls {left: 8px; right: auto;}
  #results .results-carousel--other {margin-top: 22px;}
}

/* The assistant and signup share one visibility trigger below the hero.
   Completing the video still reveals signup on the opening screen. */
.viewport-dock {display: contents;}
.past-hero .action-dock {display: grid;}
.past-hero .viewport-dock .action-dock {
  animation: dock-rise .38s cubic-bezier(.2,.7,.2,1) both;
}

@media (max-width: 700px) {
  /* This is the CSS-managed fixed layer used on v4. Safari owns dvh;
     no scroll/VisualViewport offsets are applied by JavaScript. */
  .viewport-dock {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    height: 100dvh;
    display: block;
    pointer-events: none;
    z-index: 45;
  }
  .viewport-dock > :is(.action-dock, .floating-ai) {
    position: absolute;
    transform: none;
    pointer-events: auto;
  }
  .viewport-dock .action-dock {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: calc(var(--dock) + env(safe-area-inset-bottom, 0px));
    padding: 6px max(10px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
  }
  .viewport-dock .floating-ai {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(var(--dock) + env(safe-area-inset-bottom, 0px) + 8px);
  }
  .main-hero-ended .viewport-dock .action-dock,
  .past-hero .viewport-dock .action-dock {
    animation-name: dock-rise-in-viewport;
  }
  @keyframes dock-rise-in-viewport {
    from {opacity: 0; transform: translateY(24px);}
    to {opacity: 1; transform: translateY(0);}
  }
  body {padding-bottom: calc(var(--dock) + var(--ai) + env(safe-area-inset-bottom, 0px) + 28px);}
  .action-dock .primary-btn {height: 44px; min-height: 44px; font-size: 12px;}
}