/* PixelsCraft Service Mobile Layout Repair — 2026-10-30.
   Mobile-only refinements; original Elementor HTML/text/desktop design remains intact. */
@media screen and (max-width: 767px) {
  /* All Elementor widget content can shrink inside an e-con flex/grid. */
  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;
  }
  /* Metric, operational console, timeline and simulation panes: stack columns. */
  body .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div[style*="grid-template-columns"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Metric cards: optional 2 columns only when there is space; fixed pixel widths forbidden. */
  body .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    max-width: 100% !important;
  }
  /* The console caption/status previously forced an unbreakable horizontal row. */
  body .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] div[style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 9px !important;
    min-width: 0 !important;
  }
  body .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] div[style*="justify-content:space-between"] > * {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
  /* School Management hero has a two-column grid still forcing 599px on 375px screens. */
  body .pc-service-container,
  body .pc-service-container .pc-hero-grid,
  body .pc-service-container .pc-hero-content,
  body .pc-service-container .pc-hero-visual {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body .pc-service-container .pc-hero-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }
  body .pc-service-container .pc-hero-grid > * { min-width:0 !important; max-width:100% !important; }
  body .pc-service-container .pc-hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body .pc-service-container .pc-hero-actions > a {
    box-sizing: border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    justify-content:center !important;
    text-align:center !important;
  }
  body .pc-service-container .pc-trust-strip {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    max-width:100% !important;
  }
  body .pc-service-container .pc-trust-strip > * { min-width:0 !important; }
  /* Wide product comparison tables remain accessible by swiping within their own wrapper. */
  body .elementor-widget-html [class*="compare-table-wrap"] {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  body .elementor-widget-html [class*="compare-table-wrap"] table {
    width:max-content;
    min-width: 640px;
    max-width:none;
  }
}

@media screen and (max-width: 359px) {
  body .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: minmax(0,1fr) !important;
  }
  body .pc-service-container .pc-trust-strip { grid-template-columns: minmax(0,1fr) !important; }
}


/* v9.2.7 — Mobile console width: enforce grid shrink even when inline widget CSS
   is emitted after the theme stylesheet. All changes are service mobile only. */
@media screen and (max-width:767px) {
  body .elementor .elementor-widget-html [class*="-simulator-section"],
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"],
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div,
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div > div,
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] div[style*="grid-template-columns"],
  body .elementor .elementor-widget-html [id$="PaneLighthouse"] > div,
  body .elementor .elementor-widget-html [id$="PaneDevices"] > div,
  body .elementor .elementor-widget-html [id$="PaneVitals"] > div {
    min-width:0 !important;
    max-width:100% !important;
  }
  /* Inline style two/three/four column simulator grids are the primary clipping cause. */
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div[style*="grid-template-columns"],
  body .elementor .elementor-widget-html [id$="PaneLighthouse"] > div[style*="grid-template-columns"],
  body .elementor .elementor-widget-html [id$="PaneDevices"] > div[style*="grid-template-columns"],
  body .elementor .elementor-widget-html [id$="PaneVitals"] > div[style*="grid-template-columns"] {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
  }
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] > div > div {
    box-sizing:border-box !important;
    min-width:0 !important;
    width:100% !important;
  }
  /* Allow full heading and tiny status pill to wrap without breaking card width. */
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] div[style*="justify-content:space-between"] {
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    gap:10px !important;
    min-width:0 !important;
  }
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] div[style*="justify-content:space-between"] > * {
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }
  /* Prevent image/text/code children from setting a hidden horizontal minimum. */
  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;
  }
  body .pc-service-container .pc-hero-grid > *,
  body .pc-service-container .pc-hero-content,
  body .pc-service-container .pc-hero-visual,
  body .pc-service-container .pc-hero-desc,
  body .pc-service-container .pc-hero-actions {
    min-width:0 !important;
    max-width:100% !important;
  }
}
@media screen and (max-width:430px) {
  /* The two Lighthouse metric cards each had <100px text area on 375px screens. */
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] div[style*="grid-template-columns:1fr 1fr"],
  body .elementor .elementor-widget-html [id$="PaneLighthouse"] div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:minmax(0,1fr) !important;
  }
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] div[style*="padding:24px"] {
    padding:16px !important;
  }
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] h4,
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] p,
  body .elementor .elementor-widget-html [class*="-simulator-section"] [class*="-pane"] span {
    overflow-wrap:anywhere;
  }
}


/* v9.2.8 — narrow 320px phones: ROI forms had slight clipping from large
   parent paddings and nowrap labels. Keep full inputs/values visible. */
@media screen and (max-width:430px) {
  body .elementor .elementor-widget-html [class*="-roi-section"] {
    min-width:0 !important;
    max-width:100% !important;
    padding:22px 14px !important;
  }
  body .elementor .elementor-widget-html [class*="-roi-grid"] {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    min-width:0 !important;
    max-width:100% !important;
    gap:20px !important;
  }
  body .elementor .elementor-widget-html [class*="-calc-controls"],
  body .elementor .elementor-widget-html [class*="-calc-group"],
  body .elementor .elementor-widget-html [class*="-roi-display"] {
    min-width:0 !important;
    max-width:100% !important;
    width:100% !important;
  }
  body .elementor .elementor-widget-html [class*="-calc-label"] {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px 10px !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  body .elementor .elementor-widget-html input[type="range"],
  body .elementor .elementor-widget-html input[type="number"] {
    min-width:0 !important;
    max-width:100% !important;
  }
}

/* Explicit viewport containment for raw HTML widgets with wide source images and
   fixed-size decorative canvases; scrolling remains local to carousel/table nodes. */
@media (max-width: 767px) {
  body .elementor .elementor-widget-html,
  body .elementor .elementor-widget-html .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }
  body .elementor .elementor-widget-html img,
  body .elementor .elementor-widget-html iframe,
  body .elementor .elementor-widget-html video {
    display: block;
    max-width: 100% !important;
    height: auto !important;
  }
  body .elementor .elementor-widget-html :is(h1,h2,h3,h4,p,li,div,span) {
    overflow-wrap: anywhere;
  }
}