/* ==========================================================================
   Phone Mockup Responsive Overrides
   Loaded last on pages that show app screenshots in the phone frame.
   Loaded after apps.css / legal.css, so it only adjusts sizing and hover
   behaviour. Desktop widths (1200px to 1599px) keep the original frame.
   ========================================================================== */

/* Single frame never wider than its column */
.dsb-phone-mockup {
  max-width: min(270px, 100%);
}

/* Tablet and large phone: frames scale smoothly with the screen */
@media (min-width: 576px) and (max-width: 991px) {
  .dsb-dual-phones .phone-back {
    width: clamp(180px, 26vw, 230px);
  }
  .dsb-dual-phones .phone-front {
    width: clamp(190px, 28vw, 250px);
  }
}

/* Big screens: scale the frames up so they do not look lost in wide columns */
@media (min-width: 1600px) {
  .dsb-phone-mockup {
    max-width: 330px;
  }
  .dsb-dual-phones {
    min-height: 640px;
  }
  .dsb-dual-phones .phone-back {
    width: 300px;
    margin-right: -70px;
  }
  .dsb-dual-phones .phone-front {
    width: 320px;
  }
}

/* Touch screens: sticky hover after a tap must not leave frames lifted */
@media (hover: none) {
  .dsb-phone-mockup:hover {
    transform: none;
  }
  .dsb-dual-phones:hover .phone-back {
    transform: rotate(-5deg) translateY(-25px) scale(0.96);
  }
  .dsb-dual-phones:hover .phone-front {
    transform: rotate(4deg);
  }
}

@media (hover: none) and (max-width: 991px) {
  .dsb-dual-phones:hover .phone-back {
    transform: rotate(-4deg) translateY(-15px) scale(0.96);
  }
  .dsb-dual-phones:hover .phone-front {
    transform: rotate(3deg);
  }
}

@media (hover: none) and (max-width: 575px) {
  .dsb-dual-phones:hover .phone-back,
  .dsb-dual-phones:hover .phone-front {
    transform: none;
  }
}