/*
 * Shared geometry and paint guard for every interactive product phone.
 *
 * Product demo styles own the visual language of each case. This layer only
 * normalises the surrounding stage, mirrors the compact scale used by the
 * homepage/mobile-development showcase, and makes the phone screen the final
 * paint boundary for transformed app media.
 */

/* -------------------------------------------------------------------------- */
/* Screen paint boundary: applies to the 16-app launcher and standalone cases. */
/* -------------------------------------------------------------------------- */

html body#body.brawus-v2 :is(
  .real-phone__screen,
  .foodm-phone__screen,
  .fitgom-phone__screen,
  .insprm-phone__screen,
  .krasivom-phone__screen,
  .limbam-phone__screen,
  .medlinkm-phone__screen,
  .mostm-phone__screen,
  .parlam-phone__screen,
  .sdm-phone__screen,
  .soram-phone__screen,
  .viptokm-phone__screen,
  .vmm-phone__screen,
  .vom-phone__screen,
  .yumobm-phone__screen
) {
  min-width: 0;
  min-height: 0;
  overflow: hidden !important;
  overflow: clip !important;
  isolation: isolate;
  contain: layout paint;
  transform: translateZ(0);
}

html body#body.brawus-v2 :is(
  .real-phone__viewport,
  .foodm-phone__viewport,
  .fitgom-phone__viewport,
  .insprm-phone__viewport,
  .krasivom-phone__viewport,
  .limbam-phone__viewport,
  .medlinkm-phone__viewport,
  .mostm-phone__viewport,
  .parlam-phone__viewport,
  .sdm-phone__viewport,
  .soram-phone__viewport,
  .viptokm-phone__viewport,
  .vmm-phone__viewport,
  .vom-phone__viewport,
  .yumobm-phone__viewport,
  .hp-phone-app-host,
  .hp-phone-app-mount
) {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden !important;
  overflow: clip !important;
  isolation: isolate;
  contain: layout paint;
}

/* All registry fragments fill their mount, but can never paint outside it. */
html body#body.brawus-v2 .hp-phone-app-mount > :is(
  [data-real-mobile-app],
  [data-brawus-food-app],
  [data-limba-photoai-app],
  [data-medlink-app],
  [data-viptok-app],
  [data-aurafit-app],
  [data-yumobile-app],
  [data-fitnessgo-app],
  [data-krasivo-app],
  [data-mostm-app],
  [data-inspr-app],
  [data-parla-app],
  [data-servicedesk-app],
  [data-voiceover-app],
  [data-sora-app],
  [data-voice-memos-app]
) {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden !important;
  overflow: clip !important;
  isolation: isolate;
  contain: layout paint;
}

/* -------------------------------------------------------------------------- */
/* Standalone case composition.                                               */
/* -------------------------------------------------------------------------- */

html body#body.has-case-phone-demo :is(
  [data-real-demo],
  [data-brawus-food-demo],
  [data-fitgom-demo],
  [data-insprm-demo],
  [data-krasivom-demo],
  [data-limbam-demo],
  [data-medlink-demo],
  [data-mostm-demo],
  [data-parla-demo],
  [data-sdm-demo],
  [data-sora-demo],
  [data-viptok-demo],
  [data-voice-memos-demo],
  [data-voiceover-demo],
  [data-yumobm-demo]
) {
  min-height: 0 !important;
  overflow: hidden !important;
  overflow: clip !important;
}

html body#body.has-case-phone-demo :is(
  .real-demo__inner,
  .foodm-demo__shell,
  .fitgom-demo__stage,
  .insprm-demo__shell,
  .insprm-demo__stage,
  .krasivom-demo__stage,
  .limbam-demo__shell,
  .limbam-demo__stage,
  .medlinkm-demo__shell,
  .medlinkm-demo__stage,
  .mostm-demo__shell,
  .mostm-demo__stage,
  .parlam-demo__shell,
  .parlam-demo__stage,
  .sdm-demo__stage,
  .soram-demo__shell,
  .soram-demo__stage,
  .viptokm-demo__shell,
  .viptokm-demo__stage,
  .vmm-demo__shell,
  .vmm-demo__stage,
  .vom-demo__shell,
  .vom-demo__stage,
  .yumobm-demo__stage
) {
  min-height: 0 !important;
}

/* Cases whose spacing lives on the root element. */
html body#body.has-case-phone-demo :is(
  [data-real-demo],
  [data-fitgom-demo],
  [data-insprm-demo],
  [data-limbam-demo],
  [data-sora-demo],
  [data-viptok-demo],
  [data-voiceover-demo],
  [data-yumobm-demo]
) {
  padding-block: clamp(40px, 4.5vw, 64px) !important;
  padding-inline: clamp(16px, 3vw, 40px) !important;
}

/* Cases whose spacing lives on an inner two-column shell. */
html body#body.has-case-phone-demo :is(
  [data-brawus-food-demo] .foodm-demo__shell,
  [data-medlink-demo] .medlinkm-demo__shell,
  [data-mostm-demo] .mostm-demo__shell,
  [data-parla-demo] .parlam-demo__shell,
  [data-voice-memos-demo] .vmm-demo__shell
) {
  padding-block: clamp(40px, 4.5vw, 64px) !important;
}

/* Direct-grid demos keep their horizontal art direction, with less dead air. */
html body#body.has-case-phone-demo :is(
  [data-krasivom-demo] .krasivom-demo__copy,
  [data-krasivom-demo] .krasivom-demo__stage,
  [data-sdm-demo] .sdm-demo__copy,
  [data-sdm-demo] .sdm-demo__stage
) {
  padding-block: clamp(36px, 4vw, 58px) !important;
}

/* Match the complete-UI scaling used by the homepage product phone. Keeping
 * the logical app width intact prevents the product UIs from reflowing. */
html body#body.has-case-phone-demo :is(
  .real-phone,
  .foodm-phone,
  .fitgom-phone,
  .insprm-phone,
  .krasivom-phone,
  .limbam-phone,
  .medlinkm-phone,
  .mostm-phone,
  .parlam-phone,
  .sdm-phone,
  .soram-phone,
  .viptokm-phone,
  .vmm-phone,
  .vom-phone,
  .yumobm-phone
) {
  zoom: .82 !important;
}

/* Remove the old stage reservations after the phone itself is scaled. */
html body#body.has-case-phone-demo :is(
  .foodm-demo__stage,
  .medlinkm-demo__stage,
  .mostm-demo__stage,
  .viptokm-demo__stage
) {
  min-height: 0 !important;
}

html body#body.has-case-phone-demo :is(
  .real-demo__status,
  .foodm-demo__status,
  .fitgom-demo__status,
  .insprm-demo__status,
  .krasivom-demo__status,
  .limbam-demo__status,
  .medlinkm-demo__status,
  .mostm-demo__status,
  .parlam-demo__status,
  .sdm-demo__status,
  .soram-demo__status,
  .viptokm-demo__status,
  .vmm-demo__status,
  .vom-demo__status,
  .yumobm-demo__status
) {
  margin-top: 10px !important;
}

@media (min-width: 1101px) and (max-height: 850px) {
  html body#body.has-case-phone-demo :is(
    .real-phone,
    .foodm-phone,
    .fitgom-phone,
    .insprm-phone,
    .krasivom-phone,
    .limbam-phone,
    .medlinkm-phone,
    .mostm-phone,
    .parlam-phone,
    .sdm-phone,
    .soram-phone,
    .viptokm-phone,
    .vmm-phone,
    .vom-phone,
    .yumobm-phone
  ) {
    zoom: .74 !important;
  }
}

@media (min-width: 1101px) and (max-height: 720px) {
  html body#body.has-case-phone-demo :is(
    .real-phone,
    .foodm-phone,
    .fitgom-phone,
    .insprm-phone,
    .krasivom-phone,
    .limbam-phone,
    .medlinkm-phone,
    .mostm-phone,
    .parlam-phone,
    .sdm-phone,
    .soram-phone,
    .viptokm-phone,
    .vmm-phone,
    .vom-phone,
    .yumobm-phone
  ) {
    zoom: .62 !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  html body#body.has-case-phone-demo :is(
    .real-phone,
    .foodm-phone,
    .fitgom-phone,
    .insprm-phone,
    .krasivom-phone,
    .limbam-phone,
    .medlinkm-phone,
    .mostm-phone,
    .parlam-phone,
    .sdm-phone,
    .soram-phone,
    .viptokm-phone,
    .vmm-phone,
    .vom-phone,
    .yumobm-phone
  ) {
    zoom: .72 !important;
  }

  html body#body.has-case-phone-demo :is(
    [data-brawus-food-demo] .foodm-demo__shell,
    [data-medlink-demo] .medlinkm-demo__shell,
    [data-mostm-demo] .mostm-demo__shell,
    [data-parla-demo] .parlam-demo__shell,
    [data-voice-memos-demo] .vmm-demo__shell
  ) {
    padding-block: 40px !important;
  }
}

@media (max-width: 760px) {
  html body#body.has-case-phone-demo :is(
    [data-real-demo],
    [data-fitgom-demo],
    [data-insprm-demo],
    [data-limbam-demo],
    [data-sora-demo],
    [data-viptok-demo],
    [data-voiceover-demo],
    [data-yumobm-demo]
  ) {
    padding-block: 34px !important;
    padding-inline: 12px !important;
  }

  html body#body.has-case-phone-demo :is(
    [data-brawus-food-demo] .foodm-demo__shell,
    [data-medlink-demo] .medlinkm-demo__shell,
    [data-mostm-demo] .mostm-demo__shell,
    [data-parla-demo] .parlam-demo__shell,
    [data-voice-memos-demo] .vmm-demo__shell
  ) {
    padding-block: 34px !important;
  }

  html body#body.has-case-phone-demo :is(
    .real-phone,
    .foodm-phone,
    .fitgom-phone,
    .insprm-phone,
    .krasivom-phone,
    .limbam-phone,
    .medlinkm-phone,
    .mostm-phone,
    .parlam-phone,
    .sdm-phone,
    .soram-phone,
    .viptokm-phone,
    .vmm-phone,
    .vom-phone,
    .yumobm-phone
  ) {
    zoom: .60 !important;
  }
}

@media (max-width: 420px) and (max-height: 760px) {
  html body#body.has-case-phone-demo :is(
    .real-phone,
    .foodm-phone,
    .fitgom-phone,
    .insprm-phone,
    .krasivom-phone,
    .limbam-phone,
    .medlinkm-phone,
    .mostm-phone,
    .parlam-phone,
    .sdm-phone,
    .soram-phone,
    .viptokm-phone,
    .vmm-phone,
    .vom-phone,
    .yumobm-phone
  ) {
    zoom: .55 !important;
  }
}

/* Limba depends on small editorial labels and model controls. Keep its phone
 * comfortably readable on mobile case pages while the surrounding stage
 * remains vertically scrollable. */
@media (max-width: 760px) {
  html body#body.has-case-phone-demo [data-limbam-demo] .limbam-phone {
    zoom: .74 !important;
  }
}

@media (max-width: 420px) and (max-height: 760px) {
  html body#body.has-case-phone-demo [data-limbam-demo] .limbam-phone {
    zoom: .68 !important;
  }
}