/* Financial Stream Showcase R1.2 — portrait composition correction.
   Load after home-work-proof-financial-stream-r1-1.css. Desktop/landscape remain R1.1. */

@media (max-width: 600px) and (orientation: portrait) {
  .home-fs-showcase-r11__stage {
    min-height: 0;
    height: clamp(350px, 92vw, 395px);
    padding: 0;
    align-items: initial;
    overflow: visible;
  }

  .home-fs-showcase-r11__primary {
    position: absolute;
    z-index: 2;
    left: -5.5%;
    right: auto;
    top: clamp(24px, 6.5vw, 30px);
    bottom: auto;
    width: 104%;
    height: auto;
    margin: 0;
    overflow: hidden;
    transform: perspective(1400px) rotateY(-.45deg) rotate(-.22deg);
    box-shadow: 0 22px 42px rgba(15,40,58,.22), 0 1px 0 rgba(255,255,255,.9);
  }

  .home-fs-showcase-r11__primary picture,
  .home-fs-showcase-r11__primary img {
    display: block;
    width: 100%;
    height: auto;
  }

  .home-fs-showcase-r11__primary img {
    object-fit: contain;
    object-position: top center;
  }

  .home-fs-showcase-r11__secondary {
    position: absolute;
    z-index: 3;
    left: auto;
    right: -1.5%;
    top: clamp(74px, 22vw, 94px);
    bottom: auto;
    width: 30%;
    height: auto;
    overflow: hidden;
    transform: translateZ(0) rotate(.7deg);
    box-shadow: 0 22px 38px rgba(15,40,58,.30), 0 1px 0 rgba(255,255,255,.72);
  }

  .home-fs-showcase-r11__secondary img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }

  .home-fs-showcase-r11__depth {
    left: 18px;
    right: 35%;
    bottom: 15px;
    gap: 7px;
    font-size: 7px;
    line-height: 1.35;
    letter-spacing: .1em;
    white-space: nowrap;
    overflow: hidden;
  }

  .home-fs-showcase-r11__depth::before {
    width: 16px;
    flex: 0 0 16px;
  }

  .home-fs-showcase-r11__depth span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .js .home-fs-showcase-r11 .home-fs-showcase-r11__primary {
    opacity: 0;
    transform: perspective(1400px) translateY(8px) rotateY(-.7deg) rotate(-.35deg);
  }

  .js .home-fs-showcase-r11 .home-fs-showcase-r11__secondary {
    opacity: 0;
    transform: translateY(7px) rotate(1deg);
  }

  .js .home-fs-showcase-r11.is-live .home-fs-showcase-r11__primary {
    opacity: 1;
    transform: perspective(1400px) rotateY(-.45deg) rotate(-.22deg);
  }

  .js .home-fs-showcase-r11.is-live .home-fs-showcase-r11__secondary {
    opacity: 1;
    transform: translateY(0) rotate(.7deg);
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  .home-fs-showcase-r11__stage {
    height: clamp(318px, 92vw, 340px);
  }

  .home-fs-showcase-r11__primary {
    left: -4%;
    width: 102%;
    top: 23px;
  }

  .home-fs-showcase-r11__secondary {
    right: -1%;
    width: 28%;
    top: 74px;
  }

  .home-fs-showcase-r11__depth {
    right: 32%;
    font-size: 6.6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .home-fs-showcase-r11 .home-fs-showcase-r11__primary,
  .js .home-fs-showcase-r11 .home-fs-showcase-r11__secondary {
    opacity: 1;
    transition: none !important;
  }

  @media (max-width: 600px) and (orientation: portrait) {
    .js .home-fs-showcase-r11 .home-fs-showcase-r11__primary {
      transform: perspective(1400px) rotateY(-.45deg) rotate(-.22deg);
    }
    .js .home-fs-showcase-r11 .home-fs-showcase-r11__secondary {
      transform: rotate(.7deg);
    }
  }
}