/* ============================================================================
   StartApp case study — device framing for the "How it works" feature rows.
   Mobile screens sit in a portrait phone bezel; the two React admin-console
   screens render as wide landscape browser mockups (mirrors the .ru layout,
   yusmpgroup.ru/cases/startapp). Scoped to .case-startapp so nothing leaks to
   other cases. Added 2026-08-24 (request: web screens on .com looked squeezed).
   ========================================================================== */

/* Soft on-brand stage behind every feature screenshot */
.case-startapp .case-feature__media {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(22px, 3.2vw, 40px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(46, 92, 242, 0.18), rgba(46, 92, 242, 0) 62%),
    var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ---- Mobile rows: portrait phone bezel ---------------------------------- */
.case-startapp .case-feature:not(.case-feature--web) .case-feature__media img {
  width: auto;
  max-width: 100%;
  max-height: 620px;
  border: 8px solid #0b1020;
  border-radius: 38px;
  box-shadow:
    0 30px 60px -26px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition: transform var(--dur-3) var(--ease-out);
}
.case-startapp .case-feature:not(.case-feature--web) .case-feature__media:hover img {
  transform: translateY(-6px);
}

/* ---- Web-console rows: wide landscape browser mockup -------------------- */
/* Give the screenshot column more room than the prose, like the .ru layout. */
@media (min-width: 900px) {
  .case-startapp .case-feature--web { grid-template-columns: 1.6fr 1fr; }
  .case-startapp .case-feature--web .case-feature__media { order: 1; }
  .case-startapp .case-feature--web .case-feature__copy { order: 2; }
  .case-startapp .case-feature--web.case-feature--reverse .case-feature__media { order: 2; }
  .case-startapp .case-feature--web.case-feature--reverse .case-feature__copy { order: 1; }
}

.case-startapp .case-feature--web .case-feature__media {
  display: block;              /* override the shell's grid/place-items:center */
  place-items: normal;
  padding: 0;
  border: 1px solid rgba(11, 16, 32, 0.14);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(46, 92, 242, 0.16), rgba(46, 92, 242, 0) 62%),
    linear-gradient(180deg, #f2f6ff 0%, #e9f0ff 100%);
}

/* Browser chrome bar with three traffic-light dots */
.case-startapp .case-feature--web .case-feature__media::before {
  content: "";
  display: block;
  width: 100%;
  height: 32px;
  flex: 0 0 32px;
  background:
    radial-gradient(circle at 18px 50%, #ff5f57 0 5px, transparent 6px),
    radial-gradient(circle at 38px 50%, #febc2e 0 5px, transparent 6px),
    radial-gradient(circle at 58px 50%, #28c840 0 5px, transparent 6px),
    linear-gradient(180deg, #f4f5f7 0%, #e9ebef 100%);
  border-bottom: 1px solid rgba(11, 16, 32, 0.12);
}
/* Reset the all-portrait phone bezel the shell puts on every feature image
   (.case-detail--phone .case-feature__media img) so the admin screenshot is a
   clean wide browser screen, like on yusmpgroup.ru — no mockup-in-mockup. */
.case-startapp .case-feature--web .case-feature__media img {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  /* Show the whole console screenshot — no cropping. The image keeps its
     native ratio (1280×720 / 1280×772), so nothing is cut off the edges. */
  object-fit: contain;
  transition: transform var(--dur-3) var(--ease-out);
}
.case-startapp .case-feature--web .case-feature__media:hover img {
  transform: translateY(-4px);
}