/* CP1 V3.3.11 — Phone hardened Digital Offices visual fix
   Scope: public-site mobile visual QA only.
   No deploy, no repo write, no runtime, no claims changes.
*/

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

img, svg, picture, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Phone-first rescue: keep visual systems present instead of collapsing to text-only. */
@media screen and (max-width: 820px) {
  html, body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  main, section, article, header, footer,
  .container, .wrapper, .wrap, .shell, .section, .panel,
  [class*="container"], [class*="wrapper"], [class*="grid"], [class*="layout"], [class*="columns"], [class*="row"] {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .hero, .hero-grid,
  .office-grid, .digital-office-grid, .digital-offices-grid,
  .architecture-grid, .labs-grid,
  [class*="grid"], [class*="layout"], [class*="columns"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
  }

  .visual-card, .image-card, .media-card, .mockup-card, .diagram-card,
  figure, picture,
  [class*="visual"], [class*="image"], [class*="media"], [class*="mockup"], [class*="diagram"],
  [class*="office"] figure, [class*="office"] picture, [class*="office"] img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 1px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    transform: none !important;
    position: relative !important;
  }

  img[alt*="Governed digital office"],
  img[alt*="Digital Offices"],
  img[alt*="digital office"],
  img[alt*="office"],
  img[src*="digital-office"],
  img[src*="digital_office"],
  img[src*="office"],
  .cp1-phone-force-visual img,
  .cp1-phone-digital-offices-visual img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: min(100%, 380px) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0.75rem auto !important;
    transform: none !important;
    filter: none !important;
  }

  /* Prevent phone-only hidden utility classes from suppressing conceptual visuals. */
  .cp1-phone-force-visual,
  .cp1-phone-digital-offices-visual,
  [data-cp1-phone-visual="force"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cp1-phone-fallback-visual {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 1rem auto !important;
    padding: 1rem !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.06) !important;
    box-sizing: border-box !important;
  }

  .cp1-phone-fallback-visual__title {
    display: block !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
  }

  .cp1-phone-fallback-visual__row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    padding: 0.55rem 0 !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
  }

  .cp1-phone-fallback-visual__node {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    font-size: 0.72rem !important;
  }

  .cp1-phone-fallback-visual__line {
    flex: 1 1 auto !important;
    height: 1px !important;
    background: rgba(255,255,255,0.22) !important;
  }
}

@media screen and (max-width: 430px) {
  img[alt*="Governed digital office"],
  img[alt*="Digital Offices"],
  img[alt*="digital office"],
  img[alt*="office"],
  img[src*="digital-office"],
  img[src*="digital_office"],
  img[src*="office"],
  .cp1-phone-force-visual img,
  .cp1-phone-digital-offices-visual img {
    max-width: min(100%, 340px) !important;
  }
}