/* Final layout safety for flagship experience pages.
   Readability-first: interior pages should behave like enterprise product UIs,
   never like narrow editorial posters. */

/* --------------------------------------------------------------------------
   Site-wide interior heading contract
   -------------------------------------------------------------------------- */

body.enterprise-elevated:not(.theme-home) h1 {
  font-size: clamp(2.15rem, 3vw, 3.15rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.028em !important;
  max-width: 24ch !important;
  width: auto !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-wrap: balance;
}

body.enterprise-elevated:not(.theme-home) h2 {
  font-size: clamp(1.55rem, 2.25vw, 2.25rem) !important;
  line-height: 1.14 !important;
  max-width: 30ch;
}

/* Eliminate the narrow poster-column grammar inherited by older visual pages. */
body.enterprise-elevated:not(.theme-home) .visual-page-hero .page-hero-grid,
body.enterprise-elevated:not(.theme-home) .page-hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
  gap: clamp(1.5rem, 3vw, 3rem) !important;
  align-items: center !important;
}

body.enterprise-elevated:not(.theme-home) .visual-page-hero h1,
body.enterprise-elevated:not(.theme-home) .page-hero h1,
body.enterprise-elevated:not(.theme-home) .page-hero-grid h1 {
  max-width: 22ch !important;
}

body.enterprise-elevated:not(.theme-home) .hero-summary,
body.enterprise-elevated:not(.theme-home) .experience-lead {
  max-width: 62ch !important;
}

/* Experience pages: deliberately wider copy lanes and smaller display type. */
.experience-infrastructure .ops-hero-grid,
.experience-security .security-hero-grid,
.experience-capabilities .atlas-hero-grid,
.experience-integrations .integration-hero-grid {
  grid-template-columns: minmax(380px, .95fr) minmax(0, 1.05fr) !important;
}

.experience-infrastructure .ops-hero-copy h1,
.experience-security .security-copy h1,
.experience-capabilities .atlas-copy h1,
.experience-integrations .integration-copy h1,
.experience-topology .map-intro h1 {
  font-size: clamp(2.15rem, 3vw, 3.1rem) !important;
  line-height: 1.08 !important;
  max-width: 22ch !important;
  width: auto !important;
}

.experience-integrations .integration-copy,
.experience-infrastructure .ops-hero-copy,
.experience-security .security-copy,
.experience-capabilities .atlas-copy {
  min-width: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Hard media containment
   -------------------------------------------------------------------------- */

.experience-infrastructure .ops-command-visual img {
  object-fit: contain;
  object-position: center;
  padding: .35rem;
}

.experience-integrations .proof-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}

.experience-integrations .proof-status {
  border: 1px solid var(--xp-line);
  border-top: 3px solid var(--status, #56d7ff);
  padding: 1rem;
  background: rgba(7,15,27,.82);
}

.experience-integrations .proof-status strong {
  display: block;
  color: var(--status);
}

.experience-integrations .proof-status p {
  margin: .5rem 0 0;
  color: var(--xp-muted);
  font-size: .86rem;
}

/* SVG/media containers must never allow artwork labels or paint to escape. */
.experience-page figure,
.experience-page .map-canvas,
.experience-page .ops-command-panel,
.experience-page .ops-command-visual,
.experience-page .security-console,
.experience-page .integration-cloud,
.experience-page .atlas-board,
.enterprise-elevated .page-hero-visual,
.enterprise-elevated .visual-frame,
.enterprise-elevated .hero-art-shell,
.enterprise-elevated .hero-art,
.enterprise-elevated .spotlight-visual,
.enterprise-elevated .surface-media {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  overflow: clip !important;
  contain: paint;
  isolation: isolate;
}

.experience-page img,
.experience-page svg,
.enterprise-elevated .page-hero-visual img,
.enterprise-elevated .visual-frame img,
.enterprise-elevated .hero-art img,
.enterprise-elevated .spotlight-visual img,
.enterprise-elevated .surface-media img {
  display: block;
  width: 100%;
  max-width: 100% !important;
  height: auto;
  object-fit: contain;
  object-position: center;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   Responsive readability
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  body.enterprise-elevated:not(.theme-home) .visual-page-hero .page-hero-grid,
  body.enterprise-elevated:not(.theme-home) .page-hero-grid,
  .experience-infrastructure .ops-hero-grid,
  .experience-security .security-hero-grid,
  .experience-capabilities .atlas-hero-grid,
  .experience-integrations .integration-hero-grid {
    grid-template-columns: 1fr !important;
  }

  body.enterprise-elevated:not(.theme-home) h1,
  .experience-infrastructure .ops-hero-copy h1,
  .experience-security .security-copy h1,
  .experience-capabilities .atlas-copy h1,
  .experience-integrations .integration-copy h1,
  .experience-topology .map-intro h1 {
    max-width: 26ch !important;
  }
}

@media (max-width: 780px) {
  body.enterprise-elevated:not(.theme-home) h1,
  .experience-infrastructure .ops-hero-copy h1,
  .experience-security .security-copy h1,
  .experience-capabilities .atlas-copy h1,
  .experience-integrations .integration-copy h1,
  .experience-topology .map-intro h1 {
    font-size: clamp(1.9rem, 7vw, 2.55rem) !important;
    line-height: 1.1 !important;
    max-width: none !important;
  }

  .experience-integrations .proof-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  body.enterprise-elevated:not(.theme-home) h1 {
    font-size: clamp(1.8rem, 8vw, 2.25rem) !important;
  }

  .experience-integrations .proof-status-strip {
    grid-template-columns: 1fr;
  }
}