/* PixelsCraft service card viewport repair. Scoped to mobile service pages.
   Panels are horizontally scrollable with native touch, without on-page prompts.
   Keeps all card contents and original desktop visual definitions intact. */
@media (max-width: 767px) {
  body .elementor .elementor-widget-html,
  body .elementor .elementor-widget-html .elementor-widget-container,
  body .elementor .elementor-widget-html [class*="-simulator-section"],
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body .elementor .elementor-widget-html [class*="-simulator-section"] {
    padding: clamp(12px, 3.5vw, 24px) !important;
  }
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] {
    width: 100% !important;
    overflow: visible !important;
  }

  /* The inline 'display:grid' style previously forced the off-screen card.
     flex+scroll is intentional: one legible card at a time, with horizontal navigation. */
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1px 0 10px !important;
  }
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div[style*="grid-template-columns"]::-webkit-scrollbar {
    display: none;
  }
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div[style*="grid-template-columns"] > * {
    flex: 0 0 min(88%, 330px) !important;
    width: min(88%, 330px) !important;
    min-width: 0 !important;
    max-width: 330px !important;
    box-sizing: border-box !important;
    padding: clamp(12px, 3.5vw, 20px) !important;
    scroll-snap-align: start;
    overflow-wrap: anywhere;
  }
  /* Inside a slide, keep metrics readable in 2 columns without inline overflows. */
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div[style*="grid-template-columns"] > * div[style*="grid-template-columns:1fr 1fr"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div[style*="grid-template-columns"] > * div[style*="grid-template-columns:1fr 1fr"] > * {
    padding: 9px !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div[style*="grid-template-columns"] > * div[style*="justify-content:space-between"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div[style*="grid-template-columns"] > * :is(span,p,h4,strong) {
    overflow-wrap: anywhere;
  }
  /* Mode tabs stay functional and accessible even where 3 labels are wide. */
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-mode-tabs"] {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: 3px;
  }
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-mode-tabs"] > * {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-mode-tabs"]::-webkit-scrollbar { display:none; }

  body .elementor .elementor-widget-html [class*="-simulator-section"] img,
  body .elementor .elementor-widget-html [class*="-simulator-section"] svg,
  body .elementor .elementor-widget-html [class*="-simulator-section"] canvas {
    max-width: 100% !important;
    height: auto;
  }
  /* Preserve independent comparison-table swipe areas without forcing full-page horizontal scroll. */
  body .elementor .elementor-widget-html [class*="compare-table-wrap"],
  body .elementor .elementor-widget-html [class*="comparison-table-wrap"],
  body .elementor .elementor-widget-html [class*="-comparison-table"] {
    overflow-x: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    -webkit-overflow-scrolling: touch;
  }
  /* School management hero must not leak outside the screen. */
  body .pc-service-container .pc-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }
  body .pc-service-container .pc-hero-grid > *,
  body .pc-service-container .pc-hero-actions {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
@media (max-width: 359px) {
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div[style*="grid-template-columns"] > * {
    flex-basis: min(91%, 290px) !important;
    width: min(91%, 290px) !important;
  }
}

/* Optional staging approved-content section: presentation only, does not touch source records. */
.pc-approved-seo-copy {
  max-width: 1160px;
  margin: 44px auto;
  padding: clamp(20px, 4vw, 42px);
  color: #f2f2fb;
  background: #0e1023;
  border: 1px solid rgba(166,134,255,.22);
  border-radius: 22px;
}
.pc-approved-seo-copy .pc-approved-seo-inner { max-width: 900px; margin-inline: auto; }
.pc-approved-seo-copy h2,.pc-approved-seo-copy h3 { color: #fff; line-height: 1.3; overflow-wrap: anywhere; }
.pc-approved-seo-copy p,.pc-approved-seo-copy li { color: #d8d8e7; line-height: 1.8; overflow-wrap: anywhere; }
.pc-approved-seo-copy a { color: #b9a1ff; }